Introduction
Our theme for October: Dots!
Not the candy. Sorry. The ubiquitous design theme. The ever-popular polka dot. The Hyatt place has a logo made up of polka dots. So does the Reelz channel. So does one of the world's top wedding photographers. And so on. If you've been following my blog, it will come as no surprise to you that my original inspiration for this "Monthly Special" came from a Criterion DVD cover.
In this (completely revised) tutorial, you will learn how to make a 5x5 inch polka dot photo card (see below). You can apply the principles you learn to other sizes as well, and best of all, you can use the project as a template to save time on future variations.
The tutorial
I have written this for Photoshop Elements or Photoshop. If a step differs in Photoshop, I will indicate the change in parentheses (screenshots come from a mix of the two due the changes).
1. Create a new document, 5x5 inches at 320 dpi. (I use 320 dpi because it's what big chains like Costco use, and I know that Costco will print on 5x5 paper for you).
2. Turn on the grid by selecting View-->grid (or in PS, Mac: Command+H, PC: Ctrl+H)
3. Customize your grid by opening Preferences-->grids. Before typing in any numbers, you will decide the number of dots you want across each row (here, it will be 3). Next, get out your calculator (if you're as bad at math as I am) and divide the number of inches by the number of dots (e.g. 5/3=1.66666667). Now type that number in the "Gridline every" box. And under "subdivisions," type "32."
4. Duplicate your background layer (Mac: Command+J, PC: Ctrl+J). You will now be working on a new layer to create a "dot template."
5. Time to create your first dot. Select the elliptical marquee tool from the toolbar.
Hold down the shift key (this makes your selection snap to the grid) and place your cursor in the middle sqaure, one small subdivision from the left and top lines. Still holding down the shift key, click and drag to form a circle within the grid lines, leaving only one small subdivision on the right and bottom sides. When you're done it should look like this:
6. Now you will click on the paintbucket tool (G) and click in the circle to fill it with black (the color doesn't actually matter). It should now look like this:
7. Now you get to duplicate that dot eight more times, not by repeating that process, but by using
the keystrokes command–J (PC: Ctrl–J) eight times. You will now have nine total dots all sitting one on top of the next in the center circle. Move each one so that it perfectly centered in its own sqaure (one subdivision on each side). You do this by clicking once on one of the layers, then using the move tool (V) to put it in a different square. Repeat the process on each layer until you have a grid of black dots like this:
These going to create a template that you can use over and over. Here's how:
8. Deselect (by unclicking the eye icon in the left of the layers palette) the layer (or layers) below all of your dot layers. In other words, you will still see your grid of dots, but no background. Now you can merge the dots onto one layer by selecting "merge visible" from the layers palette pull-down menu ("merge visible" is four from the bottom on the image at right). All of your dots will now be on the same layer. This is a good time to do a "save as" and call it "5x5 dots template." If you are worried about accidentally saving over your template, create another file with and name it something else by doing a "save as" again.
9. Now the fun begins. Since you know the size of the grid square for each dot, you can begin opening and cropping photos for each dot. Open a photo, and with the crop tool selected, enter 1.67 x 1.67 (inches, not pixels) at 320 dpi resolution and crop your photo as desired.
If you like the crop, duplicate the layer and move it (with the move tool) on top of one of your dots like this:
Each time you do this, you will creating a new photo layer on top of the dot layer. Keep them on their own layers as long as you want to move them around, but when you like your layout you will merge the photos just like you did with the dots earlier. But first...
(optional) 10. What about some colors? In my opinion, it looks nice not to have photos in every single dot. You may want to reserve a few dots for colors. It's amazingly easy. Just choose the rectangle shape tool (NOT the dotted line marquee tool):
and you can change the color by clicking in the foreground box and selecting a new color (Note: in Photoshop, the box to click for changing color is in the top menu bar). Now, when you click and drag to fill a grid box, your selected area will be filled with color. Want to change colors? No problem. Just make sure that layer is active and click in the color box to change it. You can add new color squares and change their colors as needed until eventually, you get something like this:
11. Once you are happy with the layout, you will need to put all those photos and colors on the same layer before we get back to the dots. As you did in step 8, you will deselect anything you don't want to merge—this means anything that is not a photo or color square. DO NOT merge the dot layer with everything. It needs to stay on its own layer.
12. Now you are ready to see it turn back into polka dots by creating a clipping group/mask (If you did last month's photo in text tutorial, you already know how). Make sure all your layers are now visible (eyeball icons on each). Then, make sure your photo layer is above the dot layer as seen below:
Make the photo layer active by clicking on it (note that—uh-oh—it is not the active layer in the photo above) and then create a clipping group (in Elements) by holding down Command+G (Mac) or Ctrl+G (PC). (In Photoshop, you will create a "clipping mask" by holding down Command+Option+G (Mac) or Command+Alt+G). See how the top layer is clipped by the layer underneath it?
IMPORTANT NOTE: If the above step does not work, you may be using an earlier version of Photoshop. In that case, simply place you cursor in between the two layers being used for the clipping mask while holding down the option (or alt) key until you see two intersecting circles. Click when those little circles appear and it should work.
(optional) 13. Want to add text over a box? Apply the same basic principle seen in my "add text to a photo" tutorial.
13. Finally, you can flatten your image, save it, print it, and bask in the satisfaction. And don't forget to come back to this link (under the "Participate in the Monthly Special" at the right), and share your results for all to see. See the FAQ page for details. If (when?) you do post and link back here, make sure you use the permalink (also discussed on the FAQ page)—the link for that post—and not just your general blog link.
I can't wait to see your results!
Tuesday, September 30, 2008
October Monthly Special: Dots
Hint for the October Monthly Special
Trick or treat! October will have some great treats in store. For those who are new to the site, we focus on a new theme each month, and readers are encouraged to do a project related to that theme, post it on the internet (their blog, flickr, or other image site), and then link it back to the "Monthly Special" post. For more information, read the FAQ page on the right.
Guess what October's theme will be.
Friday, September 26, 2008
More text + photo inspiration: Duane Michals
The first time I saw a Duane Michals photograph, I knew I was looking at something special. His work is so intimate, honest, and vulnerable that its own artistic self-effacement makes it stand out in the same way that a great acting performance makes you forget the actor.
Two years ago, Popphoto.com profiled Michals in an article called "Underrated Photographers," so if you've never heard of him, you are not alone. Wiki him (Is "wiki" a verb yet?) and you might be inspired by his lack of formal training or his environmental portraiture back when everyone was doing studio work. In this post, I hope that his work will inspire you to try your hand (perhaps literally, as in hand-written) at the text + photo challenge during these last few days of September.
I stumbled upon a blog entry (a homework assignment?) by a photography student (I won't post the link) about Michals that contained a critique that said (I'm summarizing) "Whatever. I don't see what the big deal is." This had me fuming. Why do a post on Michals if your only purpose is to express indifference? (This is why I concluded that if must be a homework assignment, but if true, a bad one.) Incidentally, if you look at my profile, you will see that I love opinionated people. I just don't think that "whatever" qualifies as an opinion. It's just intellectual laziness.
End of rant. Back to Michals.
Look at this photo:
How can that leave a person indifferent?
More recently, Michals did this less-typical color portrait that uses text painted on a body (another possible idea for the September Monthly Special—within limits, of course.):
BBC News reports on this show-stealing shot at an exhibition featuring "119 of the greatest living footballers."Michals hates the snobbery of the art world, but that doesn't stop his photographs from selling way out of my price range (but then, a postcard is out of my price range until I get paid next week). You can see 24 of his photographs for sale ("Sale," as in, "If you have to ask the price, don't bother.") on artnet.
Here are a few of those 24 that I like (screengrabs from Artnet—I'm sharing them based on my understanding of "fair use"):
The text reads "The cat, which may or may not be inside the box, wonders if Madame Schrödinger is or is not outside the box."
And another:
I won't pretend I have any idea what this poetic photo+text means, but I love how it combines the August "photo within a photo" challenge with the September "text + photo" challenge. Now how can I get Duane Michals to participate?And finally:
When I first heard the Duane Michals was working in color I was shocked, but this little ode to the last rose of summer is stunning.Many of Michals works use a series of photos along with text to tell a story. If you explore more of his works, you may find some themes or images for mature audiences, but nothing that is made merely to shock. I hope a look at his work will give you more ideas about the marriage of text and photography.
Monday, September 22, 2008
From a Criterion DVD to a Christmas Card
A promise of things to come...
Beginning in October and all the way through December I will do a series on holiday gift ideas and DIY card inspiration—all using photos, of course. I recently did a post about getting inspiration from good design (in this case, Criterion DVDs). It can be a lot easier to adapt a pre-existing good design than to invent something from the ground up. And you would be surprised how easy it is to do. I won't do a whole tutorial in this post, but you will have plenty in the coming months. For now, I just want to show you how fun it can be to go from foreboding drama...
to happy holiday card...
using the things you've learned on this blog.
The shorthand version of how I did it:
1. I brought up the inspiration photo and turned on the grid to approximate the layout.
2. I opened a new document (with "show grid" enabled) and used the rectangle shape tool to draw the shapes. For the tree on top, I used a dingbat from a free Christmas collection (it was the letter "d").
3. I toned the image of the girl (a stock photo for demonstration purposes) and then copied it into the other document.
4. I created a clipping mask using the shapes in exactly the same way as with fonts.
5. I used a red-to-green gradient, a duplicate clipping mask, and a layer mask to fill with color up to the tree.
6. I added text (using two different fonts to make the spacing match up better).
That shorthand explanation won't be much help (esp. step 5) if you're new to Photoshop, but in future months you will be getting some easy-to-learn ideas for cards and more.
Friday, September 19, 2008
Eva 24/7: The first Criterion-style text + photo
A couple of days ago I did a post about how the design of Criterion DVDs might inspire you with ideas for this month's text + photo theme. In order to show you how easy it is to take inspiration from a design and adapt it to your own needs, I plan on doing a few and walking you through the steps.
Since I just got back from driving my wife to the airport (Her sister just had a baby so she's going to visit and help out for a week), I thought I'd do a quick rendition of the Cleo from 5 to 7 cover in a way that suits my circumstances (i.e. dealing with the ever-needy Eva by myself).
So here is the Criterion original:
And here is my message to Michelle:
It was very easy once I gave up on the idea of trying to use the brush tool (on the trackpad of my laptop!) to copy the font. Here's what I did.
1. Found a picture of Eva and converted it to black and white.
2. Tried to draw my own version of the font using the brush tool.
3. Failed again and again.
4. Checked out 30 pages worth of free handwriting fonts at dafont.com until I found one (OK, actually two—I used a different font for the "E") that satisfied my now-lax standard of similarity to the Criterion original. FYI, the "E" is from a free font called Jellyka—Estrya's Handwriting, and the rest is a free font called Phontphreak's Handwriting.
5. Used the text tool to type in the text (like I showed you in the text+photo starter).
6. Flattened the image.
7. Decided I had better add a small white border, so I made the canvas larger (as I taught you to do at the end of the grid tutorial).
8. Added a thin black stroke around the outside (under blending options).
9. Ate a chocolate chip cookie.
10. Noticed that even though it's 12:30, Eva is awake and crying in her room.
11. Wondered if I will be getting any sleep this week.
12. Wondered how much a nanny would cost.
Steps 3 and 7-12 are entirely optional, although I would advise you to keep step 9.
Tuesday, September 16, 2008
Confessions of a font junkie: an interview with Randy Stuart
When Jill left a comment on my earlier typography post about how her husband, Randy is a font junkie, I knew I'd have to interview him. Since this month's theme is all about text + photo, it might pay to get some input from a font pro. Randy Stuart has a background in illustration and has worked as an in-house designer for more than fourteen years and is currently a senior designer at Further Creative. I'm happy to say that he designed the logo for my photography business (it makes an appearance on the take-out box in my banner).
I spoke with Randy last night about some of his favorite—and least favorite—fonts.
What are some of your favorite fonts?
Myriad, of course. It's Apple's proprietary font that Steve Jobs had commissioned. It has a good variety of weights and styles. It is almost impossible to make look bad.
A good workhorse font is Futura.
Futura comes in a lot of different weights and styles. I like it because it has a more round shape to the lower case open forms (the a, o, d, b).
Trade Gothic is another font that's hard to make look bad, no matter what you do to it. In fact, Trade Gothic Extended is used extensively on the Food Network.
Avenir: It's nice, light, open, friendly, and feminine without being girly. It's the font that was used in Cingular wireless advertising.
Frutiger is good because it's really well weighted, which means it's easy on the eyes. For example, if you look closely at, say, Times, it's kind of an ugly font because it has super thin serifs, but it's designed that way because on a newspaper there is dot bleed, so the thinness is made to compensate for the spreading of the ink on newsprint. But it looks too pointy on good quality printing. Frutiger was designed for all the signage at Charles de Gaulle airport. They wanted a font that would be world-wide friendly.
(above) A sample of Frutiger on Wikipedia.I notice you didn't mention any script font. Is there a script font you would recommend that doesn't look tacky?
Bickham I'm not really a script font guy, but it's OK. There are a couple of Shelley fonts that are OK. Those would be my recommendations.
(above) Bickham via Veer.
(above) Shelley standard via Veer.
(above) A sample of Didot from the drool-worthy collection at Hoefler Frere-Jones.
(above) A sample of Bodoni. An elegant alternative to script.Are there any fonts that make you cringe?
Lots of them.
For example?
Well, the King Daddy of them all is Comic Sans. People overuse it, or use it inappropriately because they think it's cute and fun.
(above) Screen capture of Comic Sans from "Comic Sans Sucks" post on Exhibit 5A.Brush Script. There's a standard one that you see on every bad "On Sale Now!" sign on State Street. Going out of business! Everything must go!
(above) Brush Script.
(above) Papyrus as seen in "5 Terrible Fonts You Shouldn't Use in Print Design"Eccentric. It kind of seems like it's trying to be a Frank Lloyd Wright-looking font, but it's just done poorly. The open areas (say on a capital R) are super squished and yet it has very long legs.
(above) A sample of eccentric from (sorry) the excellent font source Lynotype.
(above) A classy with a capital "K" example of Zapf Chancery from Lynotype.You know, another category that we haven't talked about is fonts that I generally don't like, but that can look good when used in the right ways.
Such as?
Copperplate. It's used way too much in many inappropriate ways, but when used correctly—such as in signage for, say, a really old building that's been updated for loft space—it's really quite good. It's a display font, not a text font.
Thanks for your time, Randy.
Monday, September 15, 2008
Text + Photo: Design Inspiration from Criterion DVDs
I am hoping that this post will inspire more participation in the September Monthly Special, which is any exploration of text + photo. Oddly enough, while readership of my blog has increased, active participation has gone down. Not that I think you must participate to enjoy the site. However, I love seeing what other people come up with each month, and if you blog, the monthly specials can be a good ongoing challenge. Michelle's use of text + photo, for example, is so good that I'm going to have to include it in a series of gift-giving ideas for the holidays (stay tuned for that starting next month).
Today I want to look at how ideas can come from the objects that surround us. This semester, I'm teaching a new course on European cinema, so I've been buying a lot of DVDs. I find the Criterion collection irresistible because of their committment to quality, from the transfer to the commentary to the design and packaging (the photos you see in this post come from their site). I am a sucker for good design. I won't buy a cologne if the bottle isn't aesthetically pleasing. I will pay more for just about anything if it exemplifies good design. In that regard, I am an advertiser's dream.
As I was browsing Criterion DVDs, I was struck by how so many of them offer virtual templates of text + photo. Let's look at a few:
Change out the text with something romantic, replace the photo with a bride and groom and you've got a great layout for a wedding album page.
Use a cool handwriting-style font to express a poetic thought on a close-up of a loved one's face.
I soooo want to do this for someone's family photo. "le bonheur" means happiness in French and the warm glow of the photo is the perfect image of happiness.
Look at how the photo-in-text effect has been applied here in a sophisticated way.
White text on a black-and-white photo can be stunning. And it's even easier to do than the example I gave you under "starters." I doubt you would want to use an image of a wall and barbed wire, but you get the idea.
With the rectangular marquee tool, you can fill a section of your photo with a color and let part of your text be on the color and part on the photo. Use a photo of one of your kids, and instead of "sword of the beast," your Criterion-inspired photo with text could become "Lucas at the beach," for example.
With a combination of clipping masks and lowered opacity, you could recreate this type of look.
The same technique you learned in the photo in text tutorial is at work here, but with shapes instead of letters. You could take this idea and apply it to a less morbid topic.
There's something very appealing about white (or even lowered opacity white) text on an extreme close-up.
And finally, two examples that use text along with a grid:
This grungy one is a bit more complicated than what we did back in June.
But this one is not quite as hard as it looks (it's not easy either). You'd probably want to use the one-photo grid cheat and then overlay darker colors at a lowered opacity on select squares.
Getting any ideas? These few that I have shared range from extremely easy to fairly complex. To be honest, the easy ones are my favorite. If you do get inspired, please post your work and come add your link to the September Monthly Special post.
Friday, September 12, 2008
Barbara Kruger Photoshop Tutorial
Andy Warhol has his Photoshop tutorial. So does Lichtenstein. So do the impressionists. It's high time Barbara Kruger be welcomed into this little Pantheon of adoring photoshop plagiar—I mean, homage tutorials.
Who is Barbara Kruger, you say? Well, she's an artist most famous for bold and confrontational work like this:
You can find the most thorough overview of her art in the Art History Archive, a nice review of her work at Swindle magazine, another good one here, and some more images on an educational site about feminism. And let's not forget the ever-popular Wikipedia entry. What? you don't want to navigate away from my wonderful blog for even a minute. Who can blame you? OK, so here's the oversimplified reductionist bio recap: Barbara Kruger uses black-and-white found photos coupled with her own pithy text (usually in white Futura Bold font on red background) to make strong statements about power, politics, gender, etc.
The article in Swindle calls her work "deceptively simple." A lovingly (we mock because we love, right?) satirical "Graphic Standards Manual" boils Kruger down to a formula. And yet, no one has (lovingly?) done a Photoshop-based tutorial on Kruger. So here goes...
The tutorial
I'd like to believe that during our politically turbulent times, Barbara Kruger wouldn't mind if a few adoring Krugerians made their own guerrilla art, hence my statement "Plagiarism is the sincerest form of imitation."
step 1.
Decide what you want to say. Don't just steal a quote. Tweak one. For example, Descartes wrote "I think, therefore I am." Kruger wrote "I shop, therefore I am." If you want to sound confrontational, try to use subject pronouns like "you" and "I" in your statement.
step 2.
Find your image, but make sure its connection to your quote has a touch of artistic ambiguity. In my case, I used a photo of the Arc de Triomphe. We usually connect plagiarism with writing, so instead I used an example of architectural plagiarism (the Parisian monument being a copy of the Roman Arch of Titus). If your image isn't in black and white, you can do a quick and dirty Image—Mode—Grayscale transform in Photoshop. (Just make sure you switch back to "RGB" mode once it's black-and-white, or you'll encounter problems later.) You can even add some grain if you like (just an option). Just remember, art isn't always pretty.
step 3.
Select the text tool and set the font to Futura Bold with faux italic selected in the character formatting palette. You can then type in your text (you will probably want to use a new text layer for each word for maximum creative freedom) and mess with the size until your militant soul is satisfied.
step 4.
Now you're ready for some Kruger red. In spite of what the Graphic Standards Manual says, I believe the correct red is R255 G0 B0, or ff0000. You can get that color by clicking on the foreground color box on your tools palette...
which will open up a dialogue box...
where you can type in my custom formula for Kruger red (ff0000).
step 5.
Now that you've got the right red, you just need to select some rectangles to house it. I suggest doing each rectangle on its own layer for each word (just in case you want to edit the type later). So in the layers palette select a "New Layer" for each word and name it to avoid confusion.
Now that you're on your "red box" layer, you can hit "M" to select the rectangular marquee tool, and then click and drag to create a rectangle around the word. Hit "G" for the paint bucket tool (your foreground color is still set to Kruger red, right?) and click in your selection to fill it with red. If your text disappears, it's because the red rectangle layer is on top of it. Just drag it below the word each time like this:
step 6.
Let's assume that you now have all your words, each with its own red rectangle underneath. Now you want to move the words/boxes around. To make this easier, you will want to link each box to its word. You can do this by selecting the two layers (word and box) while holding shift:
and then linking them with the pull-down menu from the layers palette:
Do this for each word and its box and you will be ready to move them around (with "V," the move tool) while pulling your hair out and saying "Yes, this is deceptively simple."
step 7.
Since you want the feeling of collage, you don't want everything to be too perfect. Choose a word or two (but not too many) rotate just enough to bother your obsessive compulsive friends. You can do this by selecting the layer and then bringing up the free transform handles (Mac: command-T; PC: Ctrl-T):
Grab a corner and rotate it just enough. Then, if you click on another tool you will see a dialogue box appear asking if you want to apply the transformation (you do). Once you're happy with everything, you can flatten and save. [And hey! if you do this tutorial, please post it somewhere and link back to the September Monthly Special]
step 8. (optional)
If you want to add a red box to your subversive masterpiece, you can bring up the layer style box by double clicking on the icon for your image in the layers palette and then selecting stroke. Here are the settings I used:
Make sure you click in the color box to enter the Kruger red formula. You will notice that I lowered the opacity to 90% just to bring in some of the texture from the image.
You have done it! Now proudly and defiantly display your art.
Fight the power! Make Barbara proud.
Thursday, September 11, 2008
The ABCs of Paris
The Intro (be patient)
Continuing our theme this month of Text+Photo, I want to share a very special project with you. Twelve years ago, we were living in Paris. I was finishing the research for my PhD and teaching at the University of Versailles. Michelle and our year-old baby, Max, spent their days exploring the city. As a souvenir project, I worked on a series of black-and-white photos featuring the beautiful and ubiquitous wrought-iron of Paris. I soon finished the project and wanted to move on to something else. Then one day, our scary-smart baby gave me the idea...
I was playing blocks with baby Max and discovered that he had learned—without our help—the letters of the alphabet. I don't know how he managed that, but it gave me the perfect organizing principle for a new project: the time-honored tradition of the abécédaire. Remembering Victor Hugo's assertion (From Notre Dame de Paris) that "When ones knows how to see, one can find the spirit of a century and the physiognomy of a king in a door knocker," I set out to create an architectural primer on the ABCs of Paris. I photographed details of the city I love—details that resemble letters—and then later, I selected a word and quote from France's rich literary and cultural history to accompany each photo.
The project continued for years. I have done it and redone it. I have taken multiple versions of most letters. I finally made the whole thing into a mock-up of a book, using Asukabook. For me, it represents the perfect sampling of the city in an ABC book for lovers of Paris young and old. I submitted the book to Artisan books, but it didn't work. I tried Chronicle and I don't think the book made it past an intern in the mailroom (but I still love you anyway, Chronicle). Would the third time be the charm? I tried Assouline, a New York/Paris-based publisher specializing in beautiful luxury editions. Score! Or so I thought. The Manhattan office seemed to love it. Can I hold on to it and show Martine Assouline (co-founder) when she returns from Europe? Hmm. Let me think about that—Yes, of course. But no! Ultimately the dreaded We really love it, but it's not right for us at this time, response came. Finally, this July I walked into the offices of Parigramme and an elegant, polite, but blunt man told me that people just aren't buying books like this anymore. OK, if he says so I can't really argue that maybe ABC Paris would sell better than that book about the doors of Paris they put out last year.
So the project is in limbo. If you know a publisher that wants it, send them my way. Otherwise, I may end up trying to do a gallery showing, selling prints, making the whole alphabet (sans quotes, of course) into a poster...who knows?
The silver lining, however, is that I used my energy (born of frustration with the ABC project) to create take-out photo—a blog that gives me a chance to explore new ideas and themes each month. Since my ABC project combines the architectural theme from July's Monthly Special with the text theme of the September Monthly Special, I couldn't resist sharing some of my favorites:
Thoughts? Comments?
Tuesday, September 9, 2008
The Psychology of Typeface
If you're new to take-out photo, you may not know that every month we focus on a theme (a "Monthly Special"). The "September Monthly Special" is all about text and photography, so today I want to look at text, not its content but its form.
Look at your handwriting. How has it evolved (or in my case, devolved) over time? Did you once dot your "i"s with circles or hearts or flowers? Unless you are a 10-year-old girl, let's hope those days are over. As a professor, I see a lot of handwriting. Occasionally, a guy will have the big loopy handwriting one might associate with a young girl, or a girl will have the condensed, sloppy handwriting more typical of a guy. The disconnect we might sense between the writer and the handwriting reveals that you don't have to be a graphologist to assign meaning to how someone crosses their "t"s or loops their "y"s.
Fonts are not much different, because whether we are conscious or not of their psychological impact, we choose them and we are judged by those choices. If a student hands in a research paper written in Comic Sans (yes, it's happened) or a CK scrapbooking font (true story, I swear), I have a much harder time taking their research seriously.
Check out the use of typeface in the four examples in my photo at the top of this post:
- The Strapontin café signage looks friendly, quirky, and inviting.
- The oval sign announcing that a boulangerie is closed Sundays and Mondays is full of nostalgia and suggests that the owners are probably off in Provence on those days, going to mass, picking bunches of lavender, and carding wool before winter hits.
- On the bottom left, the little flourishes on the letters of the "Hôtel de l'Avenir"—literally "Hotel of the Future"—tell us that this is yesterday's quaint future, not some distant space age where everyone will be forced to wear unflattering unitards.
- Finally, the bottom right, from the Concord Metro station, suggests power, sophistication, and obedient conformity.
Trek-inspired logo, anyone?) at Wichita State University tested the "personality" of 20 fonts by asking people to rate them according to lists of adjectives. Courier New, for example, was the top font for the words "conformist," "unimaginative," "dull," and "plain." What a winner. Participants described a swirly little font called "Gigi" as "creative," "exciting," and "feminine," but also "unstable," "rebel," and "impractical." Gigi sounds fun, but trust me, that girl is trouble.A study set to appear in the October issue of Psychological Science suggests that diners are willing to pay more for food if the menu is hard to read and difficult to understand. Try the medley of berry conserves and puréed pindas on pain de mie (aka PB&J on white) It's pricey, but oh so worth it.
And if you think messing with fonts on a menu is a high-stakes game, think about the Presidential race. In March, the L.A. Times did a story on the typefaces of Obama and McCain. Obama is all about Gotham—the "it" font of 2008. Gotham is only 7 years old (Incidentally, Hillary used New Baskerville—a font with roots in the 18th century—and we see where that got her.) McCain uses Optima, the same font used in the Vietnam Veterans Memorial. Coincidence? The New York Times did a great piece getting reactions to that font from various experts.
Since we're on the topic of politics, what about political t-shirts? Is it appropriate to wear a pink ringer tee with a fat and happy little pink font used to spell out "Darfur"? The New England art blog "Our Daily RED" doesn't think so. They call it a "typographically irresponsible" act.
The moral of this story, or Does this font make my butt look big?
Have I made you self-conscious of your fonts? Are you afraid that your font choices will make you look immature, naive, or even typographically irresponsible? Never fear. The studies that dissect the meanings of fonts get their information from the reactions of people like you. In other words, trust your own opinions and intuition. Catastrophically wrong font choices come from a lack of forethought. If, as the saying in typographic circles goes, fonts are the clothing that words wear, then you need to make sure your words don't get dressed in the dark. Don't let your words wear flip-flops and a t-shirt to the opera. Not unless that's the look you're going for.
Postscript
Still feeling unsure? Wish there were a What Not to Wear for font choices? Well, check back for a future post that will give you, if not Stacy and Clinton, well then, maybe their equivalents in the world of typography.
Sunday, September 7, 2008
Peter "Awilo" Kithene: Hero
I wanted to try another example of a photo in text using clipping masks, so I thought of Peter—Awilo to us—who was named CNN's "Medical Marvel" hero in 2007. I did a photo session of him back in 2003 not long before he married our longtime friend, Katrina.
"Hero" is a fitting word to describe Awilo. As an orphan (at age 12) in a small Kenyan village, he not only found the strength to raise his siblings, but went on to pursue an education in order to help others. He studied pre-med and psychology at the University of Washington, but not for the purpose of building his own wealth. Instead, he devotes his time and energy to the improvement of medical care in Kenya. Along with Katrina, he founded Mama Maria—a nonprofit organization that brings needed resources to people like Awilo, people who may one day follow his example of service. Read more about Peter's remarkable life and their organization when you have a minute.
And now for a few technical comments...
You can see that a simple one word clipping mask can be very powerful. All I did was type the word "HERO" in a big font and then used the clipping mask technique explained in my Monthly Special post. I used the text formatting palette to bring the letters closer together and then I added a black background layer. That's it. Very simple and appealing. It would make a good graphic for, say, a New York Times Magazine cover story. (hint. hint. NY Times editorial board. Just a suggestion.)
Friday, September 5, 2008
Photoshop Express
Since I announced that September would be a "back to Photoshop with a vengeance" month, it's only fair that I point you in the direction of Photoshop Express (beta). No, it's not another piece of software to buy. It's a slick new service that gives you two gigs of space for your photos, and even more importantly, intuitive tools for quick retouching right from your web browser. And did I mention that it's free?
I checked out the video tutorials (see screen grab above) and was so impressed that I can't wait to give it a try (even though I'm never on a computer that doesn't have Photoshop). When making adjustments (such as fixing exposure or converting to black and white), the interface presents you with a series of preset choices. Just select the one you like, then move on to the next adjustment. The options are many and even include some special effects that kids will love (although I'm not a big fan of silly warping and pseudo comic book filters). The most useful feature, in my opinion, is the ability to apply multiple adjustments for more sophisticated results. You can even remove blemishes (unless, of course, you wanted to remember that zit).
Bottom line
The good news: Not only can you do almost every basic retouch imaginable, you can store up to two gigs of photos for free and fix photos from any computer (no software needed other than your web browser).
The bad news: No text tool, so it won't help you do the September Monthly Special.
Wednesday, September 3, 2008
September Monthly Special: Text + Photo
Thanks to all those who braved the "photo within a photo" special last month. This month we're back to Photoshop with a vengeance. I have already posted a "starter" about the basics of adding text to a photo, and feel free to use the starter as the basis for your September project, but in this post I'm trying a more complex two-part tutorial. Please note that any use of Text + Photo will fit this month's theme. The following is just one of many possibilities.
The backstory
Have you ever seen a photo inside text? At a whale watching place in Oregon, for example, I saw a poster that said "Whale Watching" but with photos of—you guessed it—whale watching inside each letter. For some reason, I thought the whole photo-in-text thing would make a good August Monthly Special, but there were two major deterrents:
1. I realized that every time I see a text made of photos it is HIDEOUSLY TACKY (Sorry, but I have strong opinions, so no offense if you are itching to spell out PUPPY LOVE using photos of your new pet terrier. I will teach you how to do it, but please, for the love of taste, don't go there.)
My eyes! They're melting from too much cuteness!!! Make it go away!The tutorial for Photoshop and Elements
I will go through the basic steps to add photos inside text and then I will attempt to apply those principles to a project. In a future post, I might get even more ambitious. Be very afraid. I am.
The following is oh-so-easy. The hard part will be coming up with a finished product that isn't tacky (see above).
Step 1.
Create a new document with a white background. The document can be any size you want—see the grid tutorial for some basic principles. Also, you can change the background color at any time by using the paint bucket tool, selecting a color, and dumping the paint into the background layer.
Step 2.
Create a Type layer and type in whatever you want. See the Starter if you're not sure how to do this.
Step 3.
Open a photo that you want to use and put it on a layer above your text layer (the grid tutorial will help you if you don't know how to bring a photo into a new layer).
Step 4 (Photoshop).
Now you are going to create a "clipping mask," which means that the photo above will only be visible through the shape below (in this case, text). To create the mask, make sure your top layer (the one with the photo) is selected and then hold down Command-Option-G (Mac) or Ctrl-Alt-G (PC). And voilà , photo inside text. You can still change the text on its layer or move/transform the photo on its layer as long as you don't merge/flatten the image.
Step 4 (Elements).
Why this is different in Elements, I don't know, but you are going to create a clipping "group." Make sure your top layer (the one with the photo) is selected and then hold down Command-G (Mac) or Ctrl-G (PC). And voilà , photo inside text. You can still change the text on its layer or move/transform the photo on its layer as long as you don't merge/flatten the image.
Superfluous note for Photoshop: If you're not a fan of keystrokes, then you can choose "Clipping Mask" from the pull-down menu in the right of the layers palette. Or, if you like compromise, you can hold down the two keys without the "G" and move your cursor in between the photo layer and the text layer until you see the arrow change into a clipping mask icon. Any way you do it, you end up with a clipping mask.
Superfluous note for Elements: If you love using your mouse, go to Layer--Group with previous for the same result.
Part II: My attempt at photo in text
With my critique of all the tacky photo-in-text layouts, I have really set myself up for critical scrutiny. This is not exactly a step-by-step account, but here's an explanation of what I did.
Remember the graffiti "B" and the quote about beauty from the starter postscript tip? Well, since I already intended the image and the quote to be read together, I thought it might be fun to merge the two. So I opened the graffiti photo and used the type tool to start adding in text.
You can see that I messed with the font formatting in ways beyond what the starter taught. I should also note that I did this in CS3. Once you started playing with the text formatting, you get a feel for how you can play with text:
I quickly learned that life would be easier (i.e. more control) if I didn't put all my text on one text layer. In the screen grab below, I was highlighting a altering a separate text layer until I got it to match the proper width.
But I needed to duplicate the clipping mask over each layer of text:
It's easy to do, but it starts to look like a mess with each added layer:
Eventually, I finished and had all the photo/text on a white background. It looked too stark and wherever the graffiti was white the text seemed to disappear. So I did a few things:First, I copied a layer of the photo and dragged it to the bottom just over the white background, and instead of "Normal" blend mode I selected "Luminosity." This made a black and white version of the entire photo that could show through between the text. I dialed the opacity down so it wouldn't overwhelm the already complicated image. Still wanting more definition, I highlighted all the layers except the two background ones and selected "Merge Visible" from the pull-down menu at the right of the layers palette. Now I could easily make one final edit on my merged layer.
I double-clicked on the merged layer to bring up a "Layer Styles" box. I won't give a tutorial on all the options here, but I will show you that I selected "stroke" to create a line around the text, and I adjusted that line's opacity so it wouldn't be too intense:
The end result may make your eyes hurt more than the cutesy puppy and kitten image that I mocked, but I think it has a nice urban album cover sort of feel. The words take time to decipher. The image demands concentration. The message about the subjectivity of beauty certainly hits home. What do you think? Love it? Hate? Whatever?
Your challengeThe Text+Photo theme this month invites you to explore the marriage of text and photography in any way—even without Photoshop. I may have another go at the image-in-text thing, but I will also explore other possibilities and give new tutorials. I can't wait to see your own work. Come back here to link and share your own work and to see what others have done.
Monday, September 1, 2008
Add text to a photo
Introduction
Like all the "starters" the following tutorial illustrates a very simple concept—in this case, how to add text to a photo. The internet abounds in complex tutorials, but sometimes the easy things get ignored because the pros think they're too obvious. I fell into that trap until Michelle said, "I know a lot of people who don't know how to put text on a photo." So here's hoping those people read my blog...
The example
As an example, I will use a page from a wedding album I designed a couple of years ago. In this case I wanted to use a vertical image of the cake, but I thought the square page looked too plain with just the photo. My solution: put the name of the bride and groom next to it. I think the final result is much better than just the photo alone:
The steps
Let's look at how I got there while we learn basic principles you can apply to your own projects.
step 1. Open the photo you want to which you want to add text. Here's the wedding cake all by its lonesome:
Note that all my screen grabs are from CS3 this time, but you can also do it in Elements, I promise.step 2: Hit "T" for text or click on the icon in left toolbar that looks like a "T". (In Elements you may have to double click the background layer and click "OK" to rename it to an editable "layer 0."). If you click on the "T" in the toolbar, you will notice that you have options like "Horizontal type tool," the pointless "Vertical type tool" (pointless, because you can make the horizontal type vertical anyway) and others that we'll save for another time (or not). Once you have selected the type tool, a menu bar will appear at the top:
If you have done any word processing, the menu will not be intimidating: a pull-down list of fonts, a place to adjust the font size, right, left, or center justification...pretty standard. You will also notice an icon (at far left for Photoshop and at right for Elements) that allows you to change between vertical and horizontal type with a simple click. And then there's the box you can click to change color (we'll use this later).step 3: Now go ahead and click somewhere in the photo. You will notice that when you use the text tool, you automatically create a new layer. Now type away (hint: If ever you type and can't see your text, chances are, your color box matches your background or the font size is super small)
I typed the name of the bride.
But the size you select may not be right so....step 4: Change the size of text as needed by highlighting the text (double click on it or on the text layer in the layers palette—the "T" thumbnail icon, not the layer name) and selecting a new font size in the menu bar. Alternately, you can bring up a some free transform handles by holding the command key (Mac) or Crtl for you Windows folks. Those little handles will let you drag and distort the font as you like, the disadvantage of this latter technique being that you can't make it constrain the proportions (experts please correct me if I'm wrong). You can see the highlighted text (now looking too big) with the transform handles below:
step 5: Add more text on another layer. We can't forget the groom, so we'll make sure the text tool is selected and create a new text layer by clicking somewhere else in the photo. (Just for the fun and frustration of it, try clicking near a word you have already typed and it will snap back to that layer instead of creating a new one. If this ever happens, you can avoid it by holding "Shift" while clicking.) When the text is highlighted you can move it wherever you like (your cursor will become a move tool when it's outside the highlighted part—just click and drag).step 6: Move the groom into a good place...say, in a subordinate position to the bride? How's that?
Step 7: On yet another text layer (you know how), add a giant fancy ampersand (much cooler than boring old "and"), and then use the text menu bar to change the size and the color.
How about a buttery yellow?
Step 8: Final adjustments. First, I moved the ampersand to a more logical place. Next, in the layers palette, I dragged it under "Courtney" and "Carl" so their names would not get buried. And finally, since the ampersand was too intense (This wedding is brought to you by the symbol for "and"! ) I lowered the opacity.
Before printing, you can flatten and save as a jpg for printing. That's it. Now you can start doing cool things with text and photos.Postscript tip
One more thing. What if you want to add a big chunk of text and you don't want it to run wildly off the screen? You can create a text box to keep your text where you want it. After selecting the text tool, click and drag to define the size of the text box (hint: if you want a perfect square, hold down the shift key). Now you can type away and everything will stay within the box. Here's a section of a book layout where I wanted to add a quote:
After typing the quote in the text box I can move the text around as one chunk until I like the layout. Here's the finished two-page spread:
