10e20 Blog

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.

Step 1.
First I isolated the text that I wanted to use for the pull quote. I pulled the sentence from the paragraph and brought it into Photoshop. Using a large typeface, Baskerville, I rendered the sentence on two lines.

Step 2.
Stylize the quote. You can create pull quotes in so many ways. One that I like to do is with one large quote mark to the left and under the first few letters. I used a much larger size for the “ and put it on the bottom layer. Then I wanted it to be subtle so I made the color a light gray.

Lift outs are a similar technique but are focused on drawing attention to not just text within a larger body of an article but rather a graphical element or an area of text. Lift outs are less popular than its cousin the pull out but sure enough if something is being explained to you in a document it will usually go to the lift out to be sure you see what it is referring to. I created some lift outs for a post Jake wrote here about going local in Stumbleupon. They are very basic, but get the job done.

Lets say, for example, I want to show how the sidebar navigation on National Geographic’s website and how they order the various options. I want to show that ’shop’ is third from the top.

Step 1.
I need to grab a screen shot of the website and bring it into PS. I want to crop it so that I am just working with the specific sidebar section that I want to bring attention to.

Step 2.
Now since the font in the sidebar is some sort of sans serif (looks like Arial Bold) I can easily enough re-create it. This is a big advantage whenever something needs to be made larger. The other way to do this would be to just scale down the entire sidebar and keep the part I want to highlight the same original size.

Step 3.
This is where I am going to add the graphical element of a box or rectangle underneath the word I just recreated. I am going to use the shape tool and make a white colored rectangle under the word shop.

Then I need to show where this was coming from. To do this I am going to create a new layer under the rectangle shape and then use the Polygonal Lasso tool. From the left side of the rectangle create a triangle that has its point on the origin of the area the word came from. Fill the Lasso selection in with white.

Step 4.
Add any finishing touches like a drop shadow, fade or color, to make it stand out a bit more. To do this I merged the white rectangle layer with the triangle and then applied a drop shadow to this layer through the Layer style options. Here is what my final layers palette looked like before I merged the layers to create the drop shadow.

Both of these techniques are great to utilize when creating how to documents, articles or blog posts. The secret to an effective pull quote or lift out is simplicity. Get rid of lots of excess colors or unnecessary graphical elements, just focus on highlighting the content (text or specific area) and let minimalism work for you.

Thank you to Matt McGee for recommending we do this tutorial. I hope it was helpful. 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!