How to Create Cool ‘Graphical Text’ for Linkbait Pieces
Apr 18, 2008 by Patrick Winfield | Design, Tutorial
Last week I wrote about how to create great header graphics for linkbait pieces. Now I would like to go a bit deeper into that and explain how I create graphical text, text that is an image, that stands out and screams to be noticed.
Like the last tutorial mentioned, it is important for your article to have an image associated with the content of the article. When you go on Digg and see a link to a story without an image or photo what do you do? Well, I tend to not click on that story and move on down the line. The same holds true, to some degree, to linkbait pieces and the inclusion of catching header graphics.
For this I want to focus on making the text into a graphic in Photoshop and giving it some sort of simple, easy to do treatment or styling so that it can standout a bit more. We are going to use a few Layer styles and a simple technique to give the letters a bit of depth.
Step 1.
Create a layer that has the text you are going to be using on it. I like to use a large, bold faced font like Arial Bold or Impact. It is also important to think about color and contrast at this point. I created a dark gray background and put the text in white on top.
Step 2.
Create a slight Outer Glow and Stroke on the text layer and. If you are using light colored text on top of a darker background outer glow is the best choice, however if the background is lighter than the text use a Drop Shadow to make it stand out. To create the outer glow and stroke effect got to the Layers drop down menu and the Layer Styles sub menu and select each effect.
Step 3.
With the text layer selected make a selection of the letter forms by using Open Apple or Control and clicking on the layer thumbnail in the layer palette window. This will make a selection of the text. Now go to the Select drop down menu then go to Modify/Contract and enter a value of 1 or 2.
Step 4.
With the selection still active, create a new layer above the text layer. Using the Gradient tool, select a gradient that uses a black to white, color, or just black to clear. Starting from either the top or bottom of the letters create a gradient that you like.
This is one way to add an extra little push to your graphical text when creating linkbait header graphics. The steps are easy to do and require a bit of extra time, but the advantage of having someone stay on your content or intrigued to go further is paramount.
I hope that you can use this simple technique in your next graphic! If you have an idea or something you would like to see covered please let us know (blog [at] 10e20.com). Thanks!
Don’t forget to subscribe to the 10e20 RSS Feed!
Bookmark this post:
15 Responses to “How to Create Cool ‘Graphical Text’ for Linkbait Pieces”
Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!
Ha, like you wrote this specifically for me. Love it. I notice graphical text all the time and your use of it in posts is excellent. Time to get some link bait graphics made.
Hi Mike, great to hear it! Thanks for writing
Wow – how funny! I stumbled your site, and came to your article about magazine and newspaper publicity.
And I noticed your excellent header graphic immediately and thought ‘that looks really good – very eye catching. I should do that’.
And then, lo and behold, i click to your home page (a rarity in my stumbling) and there you have how to do it! Very cool.
I’m going to subscribe to your RSS now. :-p
Shawn
Hi Shawn- I am happy you stumbled upon us! Thanks for subscribing and I hope you find more of the posts just as helpful.
I’m a noob when it comes to all this graphical talk. I have tried to use photoshop and flash before, but it just isn’t something I can learn with a snap of the finger. I really do want to learn though as the need for graphic designers are so high now
-Mike
[...] 2 pixel gap from the border created in Photoshop. This tutorial is similar to the previous one on creating cool graphical text, but changing a few things and applying it to [...]
Hi Mike- I hope that you can pick up a few pointers from these tutorials
Thanks for commenting and stopping by.
[...] the images you use don’t distract your readers. In stead, you could spice it up a notch with graphical text images, a great header, or interesting charts for example. The images must serve the rest of the content. [...]
Hi Patrick, this is very helpful. You broke it down for me to a level that I can do – thank you!
Do you have a tip for creating a nice background pattern behind the text like you’ve done on the graphic for this blog post? I think that looks very nice.
Thanks again for the tips.
Hi Patrick, you wrote this tutorial about graphical text when creating link bait in a way for every layperson to understand. It's time I start doing something more serious, in order to catch up with the trend.
HI Patrick,
I had gone through ur <a href=”http://www.10e20.com/blog/2008/04/10/how-to-creat…” target=”_blank”>http://www.10e20.com/blog/2008/04/10/how-to-creat…
article it is good one ane this time u r saying about Graphical text..which is also good one. I was unaware of gradient tool of adobe photoshop ..thanks for this type of tutorial…
I just read your buttons article and I am going to print if off, but I wanted to check this one out to. It looks like I am going to have to print this one out as well. My blog is going to get a new makeover! =)
I will recommend this site for anybody willing to learn graphic design or people who want to make graphics for their sites.
I've been creating graphical text haphazardly like someone in a hurry. I have Photoshop installed, but still learning its creative features.
Recommended tutorial for people who want to have nice looking sites that speak for themselves.