Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention
Apr 11, 2008 by Patrick Winfield | Design, Tutorial
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!
Bookmark this post:
19 Responses to “Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention”
Feel free to leave a comment...
and oh, if you want a pic to show with your comment, go get a gravatar!
Ohhhhhh, I get it. I would NEVER have tried the Polygonal lasso tool. I was just using basic line-drawing, and hated it. This is cool – thanks so much, Patrick. Very helpful!
Great Matt! Glad you found it useful
Thank you.
I was just ready to tag this post for the excellent tips, and lo I find that someone I actually know even in real life is mentioned – Matt McGee. Cool
Great tips Patrick, I like them!
Hi Diana, that is funny! Glad that you like the tips.
Its a great tip to use these pull quotes in your articles.But how to decide what pull quotes can actually work for your articles.
@ software development company- I would say to use something that explains a bit about the main idea but also is catchy. Sometimes actual quotes are good to use.
[...] Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention [...]
[...] Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention [...]
[...] Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention [...]
[...] can’t find that image and you need to add something to the post to spice it up? Try pull-quotes. This is a simple way to grab a reader’s attention. By using graphical text, you can offer a [...]
[...] Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention [...]
Or you can also just use the pull quotes wordpress plugin:
http://striderweb.com/nerdaphernalia/features/wp-javascript-pull-quotes/
It is fully compatible up to WP 2.6
Well, Missy just made my day a lot easier! Awesome article though – I almost fired up GIMP to give it a shot.
[...] Using Pull Quotes & Lift Outs: How to Grab Your Reader’s Attention [...]
thanks for those tips, I'm going to put some on my sites and see if I can increase clicks
I've been creating pull quotes and lift outs since I started designing, but what eluded me was the simplicity which you bring to your designs. I just can't get enough of your talent!
Very good post indeed. Also liked your styling example a lot. Read another good article about pull quoting too, if others are interested. http://is.gd/wCf
Honestly I have never used pull quotes before in designing my websites. But this very article has given me reason to think about it.
Sometimes I find pull quotes useful and sometimes I don't. But I think they are attention grabbers.