10e20 Blog

“Contact Us”, “Learn More”, “Click Here”, “Free Money!”. OK that last one I made up, but we have all seen these calls that ask us to do something.

Calls to action in interactive media are usually buttons or links that begin a process. Making these important calls stand out requires some designing further than, and in addition to, the underlined hyper link.

The text and words used in calls to action are topics of another discussion. For this tutorial I am focusing on the design elements of a graphical button and specifically simple gradients with a 1 to 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 buttons.

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.

When you need to focus the attention of the reader to a certain area in the text or story pull quotes are the best method. Pull quotes are small pieces of the story or article that is being repeated and set in a larger size font and placed near the middle.

The idea is to pull the reader in further and also pull text from the main body of text. You have seen these allover, if you read an article online or in print today it may have had a pull quote in it and that may be the first thing your eye went to and read.

For this ‘How to…’ I am going to use a linkbait piece from PC World called 10 Cool Gadgets You Can’t Get Here-Yet. The piece tells about how often the coolest gadgets originate overseas and usually in Asia.

The information is interesting enough to hold my attention and I want to see which gadgets they selected and also find out what it is that I can’t get-yet.

However the main graphic header is obvious and could have been worked on a bit more to capture the interest of those people that may be on the fence about whether or not to read further into the piece. So lets get into how I would have used stock photos and created a more compelling graphic to try and lure some more eyeballs into the piece.

OK, before I begin let me say that I use stock photography. Stock photos are a great convenience. I sometimes depend on it, especially in a crunch or when I just need someone smiling and expressing happiness for a call center spot. That being said, there comes a time when stock photography is so obviously staged, politically correct fluff that screams “I am STOCK PHOTOGRAPHY!”

You all know the image, a group of happy employees who all are various ages, genders and races. Everyone is sitting around a desk pointing to a computer screen in some bland office interior.

Sometimes only the top few results are ever used in a stock library search and those photos are everywhere. How do we avoid these pitfalls of overused imagery and photography?

What is RSS?
An RSS Reader is a simple and easy way to read your favorite news site or blogs. Instead of going out to these site to read the most recent stories or posts, the newest stuff comes to you, all in one simple page. Even more convenient is having a Reader which is online, reaching it from any place in the world.

In my eyes Google Reader is one of the best online RSS Readers on the web. For the first time user, just getting used to the whole RSS thing, this post will talk about: a) How to subscribe to a feed b) view your feeds c) the cool features built into Google Reader and d) just some nifty little tricks you can use while you’re at it. Remember, being a master of your RSS feeds is also a very important way to build up and maintain powerful social media accounts

Some things are easier to do than others when manipulating type. Here is a quick tutorial on how to transform and distort your type in an easily scalable way with a vector mask.

This works on the same premise as distorting or transforming a basic shape. When you convert a text layer to a shape a vector mask is applied to it and ables you to make many transform functions. Very quick, very easy, very effective.

Step 1. Create a new layer with your text on it. Experiment with various widths and styles. For exaggerated distortions I find that a thick or Bold Condensed type form works best.

_______________________________________________________

Step 2. With the type layer selected go to Layer/Type/Convert to Shape.

_______________________________________________________

More text style tips! Text styles are a great way to get away from the same solid color on a background and add some subtle ‘pizazz’ to the type.

For this tutorial we will need a photograph or an illustration to go behind the text that we will be applying the style to.

Step 1. Place your photo on the first layer and create a new layer for the text. Use a large font and fill it with black.

_______________________________________________________

Step 2. With the text layer selected apply a new Layer Style of Inner Glow to it. Select black as the color for this and set the Blend Mode to Multiply.

_______________________________________________________

Text styles are always a great way to get away from the same solid color on a background and add some flair to the type.

Text style is used to further express the mode of a piece. Chrome could be considered mechanical or cool. This technique can be applied to text, an object or shape to add a cool chrome effect.

Step 1. On a new document created a letter in white on a darker background with a large point size. I am using 287 points and the font is Myriad Pro.

_______________________________________________________

Step 2. Go to Layer/Rasterize/Type.

_______________________________________________________

Step 3. Hold down Control and click on the Text Layer. This will select the outline shape of the letter.

_______________________________________________________

Nondestructively adjusting the exposure in certain areas of your image can be a very beneficial technique to use.

You create a 50% gray layer with a blending mode like Soft Light. Then with the Brush tool on a lower Opacity, paint in the Burns and Dodge with Grays and Blacks.

Step 1. Create a new layer on your document and go to Edit/Fill. Use a setting of %50 Gray.

_______________________________________________________

Step 2. Set the Layer Mode to Soft Light.

_______________________________________________________

Step 3. Select a large Brush and lower the Opacity to about %20. With Black selected as your Foreground color begin to paint in your Burning, the areas you would like darker.

_______________________________________________________

Step 4. Select White as your Foreground color and paint in the area you would like Dodged in your image, this will lighten up the areas.