Sunday, January 27, 2008

Working With Type - Tip 2: Photo Filled Type


This is a super fun Photoshop tip that I use over and over again. You can make a creative title or banner for your website, or make your own neat looking logo for any of your graphic designs and creations.

Open a photo in Photoshop, (for this design I used an orange wild flowers photo) and resize it to something manageable, such as 450 wide by 338 high, 72 point. This will enable you to make a graphic that is easily web site-ready.

Next, click on the Type Tool in your left tool bar, and then click on top of the photo, and type your name or any other word or words you’d like to fill with a photo. Pick a font that is fairly bold and thick, so you can best see the effect. I usually start with a thick font like Arial Black or Poplar Std. I also start with the font size being around 72 pt. You are going to resize the type, so it doesn’t matter really, other than to be able to see what you are doing well enough. Once you have typed the word or words, hit Control (CTRL) and drag the transformation anchors that appear to stretch the type to be nearly as large as the photo behind it. See the "Start" image above.

Now you need to duplicate the background or photo layer by dragging the layer in the Layers Palette over the New Layer icon at the bottom of the palette, (next to the trash bin symbol). Click and drag that new Background Copy layer above the type layer. Then, click “Layer” from the top drop down menu and choose “Create Clipping Mask.” You will notice in the layers palette now that the Background Copy layer is indented with an arrow, but the image doesn’t change yet.

Click the New Layer icon in the Layers Palette to create a new blank layer named “Layer 1.” Click and drag this new blank layer below the type layer. Press D to reset the default colors. Click CTRL+Backspace to fill the new layer with white. Now you will see the photo fill the letters on a white background. If you would prefer that your image sit on a black background, press X instead of D to change the default background to black, then click CTRL+Backspace to fill the new layer with black.

Just for fun, experiment with your text layer once you have the clipping path in place. On the white background version, click on your text layer and click the effects button at the bottom of the Layers Palette (black circle with an ‘f’ inside it), and choose “Drop Shadow.” This pulls your letters out a bit, and makes them look very ‘dimensional!’ Another fun thing to do if you decide to go with the black layer or another dark color is to click the effects button and choose “Bevel and Emboss” keeping the default of outer bevel. Click okay, and then choose the effect button again, and this time click on “Outer Glow” and see what a neat effect you can come up with. Look at my examples above, they are both done according to my tips in this paragraph.

Once you are happy with your text design, make sure you click the top drop down menu “Layer” and then “Flatten Image.” Save this as a .jpg and you have a nice web-ready title or banner, or whatever! Now wasn’t that fun and easy?

No comments: