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?

Working With Type - Tip 1: Fire and Type

For the next few posts, I thought I would share some exciting tips about dealing with type using Photoshop (of course). Type is very important, and can make your design projects and web sites or blogs look very professional and nice. The first one I want to share here is called Fire and Type, which puts a wonderful burning flame effect around your type!

Open Photoshop and click File>New. When the size menu comes up, specify Width= 6 inches, Height= 5 inches, 72 ppi, Grayscale, and White.

Fill this square with black by pressing D on your keyboard to default the foreground color to black, and then click ALT>Delete, which will fill your square with black.

Now make your foreground color white by typing X on your keyboard. Click on your type tool and then click inside your black box. Type a word and make it 100 pt large, and make it bold if that is available in the font you chose. Click on Layer>Rasterize>Type.

Next, click on the Image menu, and choose Rotate Canvas, choose 90 CCW. Click on the Filter menu and choose Stylize>Diffuse>Normal. Click on Filter again, and this time choose Blur>Gaussian>3 pixels. Click on Filter yet again, and this time choose Distort>Ripple>100>Medium.

Now reset your default color to black again by clicking D on your keyboard. Click on the type tool again, and type that same word you typed earlier. Using your move tool pointer (V), move the type around so it sits over the odd looking old version of your word. Click on Layer>Rasterize>Type like the last time. Click on Layer>Flatten Image.

Next, go to the Image menu and click Mode>Indexed Color. Once you have performed that, go to the same menu again and click Mode>Color Table, and choose Black Body from the drop down list. Voila, here is your flaming type! Fun huh?

If you want to save this as a .jpg, I suggest resizing the image a bit, depending upon what you want to use it for, and then click on Mode from the Image menu again, and this time choose RGB. This will allow you to save the file as a .jpg. You can now use this on your web site, it will look really cool (or hot actually!)

Make a Frame Around Your Photo From Your Photo!

Here's a fun little tip I borrowed from a book about Adobe Photoshop CS2, "Top 100 Simplified Tips & Tricks. I have modified the steps somewhat, and I really like this. There are so many ways to make frames for your photos in Photoshop, this is just one of the many I will cover on my blog here. This one is extremely easy to learn and do, so I thought I'd post it and have you try it out. Have fun!

Open a nice photo like the one I opened on the left (it can be any subject, but I chose a flower since I have tons of flower photos!). Resize it to something 'manageable' - I like 640 x 480 for small uses, and 1024 x 768 for larger prints, etc. All of my posted photos on this blog, incidentally are 450 x 338, except for this one, which is slightly larger to accommodate two photos together.

OK, once your photo is open and is resized to what you would like, click on the Rectangular Marquee tool (the top left tool in the vertical toolbar). Click and drag inside the photo where you'd like the frame to end (make it any thickness you like). This is how you delineate the actual frame on your photo. Then click Select>Inverse. Once you do this, and you see the 'crawling ants' of the selection area, click Control (CTRL)+J to jump this selection to its own layer. While the new frame layer you've just created is still active in the layers palette, click the tiny arrow in a circle that is at the extreme top/right of the layers palette. A menu will fly out, and pick "Blending Options" and click on that. When the fly out menu pops up, click on the drop down menu in the upper center of that screen and choose the mode of "Screen." You'll see the area around your photo that you chose with the Marquee tool go lighter. This is the beginning stage of your frame, looks cool huh?

Next, from the bottom of your layers palette choose the Add Layer Style button, which is a black circle with a script "f" inside it. From this palette, click on "Stroke." You will see a border around the inside of your new frame that comes up whatever the default color is. You can click that color thumbnail and change it to white or whatever you think looks nice with your photo. You can also change the thickness of that border line around your photo using the slider. I like to keep it thin like in my example, that border is size "2." Click the "Drop Shadow" from that same menu to give the frame a bit of depth. You can change the orientation of the drop shadow using the little radius circle (just move it whichever way looks best for your photo/frame).

You are almost done, just click Layer>Flatten Image from the top menu in Photoshop, and 'voila' you are finished. (Don't forget to "Save As") Nice effect isn't it? And talk about easy...

How to Create a Fun Kaleidoscope Effect Graphic in Photoshop!

Hi all, here's a fun, fast, and easy creative project for your weekend Photoshop adventure:

In Photoshop, open any colorful image you have in your collection (I use flower photos). Resize the image so that it is ‘manageable’ on your workspace, I use 640 wide by 480 high (pixels), 72 ppi. After you make the size adjustment, leave that image alone for a moment and open a new document – File>new. When it asks you what size to make this new file, make it 640 wide x 960 high, 72 ppi, and ‘transparent.’ Once you get the new blank file open, copy and paste the photo you resized into it, and shift that copied image up to the top of your new blank document until it fits perfectly in the space. Next, on the original image, do the following steps: Image>Rotate Canvas>Flip Vertical. When finished, copy and paste the now vertically flipped image into the space left on the new blank file. It should be opposite or 'mirror image' of what you just pasted in there. Place that new image flush with the first image, and do: Layer>Flatten Image.

Now you’ve got a long image that has an interesting look to it, but you are not done yet! Next, select Filter>Distort>Polar Coordinates. When the little fly out menu comes up, choose “Polar to Rectangular” (the bottom radio button). Immediately afterward, click Image>Rotate Canvas>180 degrees. Then, click the Filter>Distort>Polar Coordinates one more time, and this time choose “Rectangular to Polar” (the top radio button). Finally, rotate your image 90 degrees to the right or left, and ‘voila,’ you have a really neat digital design to use on your web site, or to print, etc. Wasn’t that fun? This fun effect is from an article by Rick Sammon of the wonderful Layers Magazine. Enjoy!

Make Artistic Borders on Your Photos with Photoshop!

Hello everyone, and Happy New Year! Here on my blog today I decided to share with you a really fun Photoshop tip that is easy and fast. See the photo above, and look at the outer edges. It has a neat, torn edged border look. There are many different things you can frame your photos with in Photoshop, and it is really easy to do. Just follow these quick instructions and you will be creating fancy borders around your photos in no time. Why do this? It makes your photos look neat, like for a scrapbook without having to cut them yourself that way, or you can use them on your own home page or blog for an outstanding banner or intro photograph. There are so many uses for doing this to photos, that you will come up with many yourselves after just trying this once! It is so easy! Let's get started:

Open any one of your photographs in Photoshop and resize the original image to something manageable. My rule of thumb is to make my photos 640 pixels by 480, or if I plan to use the photo on my web sites or blogs, I usually size them down to 450 pixels by 338 pixels. These are all at 72 ppi also. If I am not using it for the web, then I might make my photos 200 to 300 ppi in size so they can be printed well. Anyway, enough of this resizing - that's a whole other blog subject!

Okay, get your photo open in Photoshop and immediately move over to the right of your screen with your mouse pointer and locate the "Layers" palette that is docked in your photoshop work space. You will see the little icon that represents your open photo, ususally it is called "background." Put your mouse on that little square representation of your photo and drag it down over the New Layer icon at the bottom of the layers palette (it is the little square next to the trash bin). This will duplicate your background layer and create a new one called "background copy" or whatever. You can rename that if you want, but there is no need, you are nearly finished!

Next, take your mouse pointer down to the New Layer icon again and just click it once this time. It creates a new blank layer. Click on the new blank layer and drag it between the other two background layers. Make sure your default color picker colors are set to black and white (click the letter D to reset your default color scheme in Photoshop). With the new blank layer active or highlighed, click Control+Backspace), this fills that empty new layer with the color white.

Now click on the background copy layer to target that layer. Click the rectangle marquee tool (the tool on your toolbar that is at the very top left of that vertical tool bar) and click and drag a selection area that is just inside the edge of your image, probably around 1/8" in size thereabouts. After you do that, leaving the marquee selected, take your mouse pointer and and click the Layer Mask icon at the bottom of the layers palette (the icon is a little grey box with a white circle inside it). This adds a layer mask to the background copy, so make sure your background copy layer was active or targeted or it won't be correct. Now you will notice that your photo all of a sudden has a small white border around it. If you don't see a white border, you may have done something incorrect, so go back and follow these steps in this paragraph again.

Now, click the Filter menu at the top of your document work space, then click Brush Strokes from the drop down menu that appears, choose "Spatter" from that menu. The filter gallery will open up and show you a blank photo image with that effect you just chose, applied to it. Just click OK to close the filter gallery, and click "Apply" to get the effect onto your photo. Voila, looks cool doesn't it? Also, while you are being creative, go to the Layer Palette again and click on the effects icon (black circle with a script 'f' in the center of it) and choose "Drop Shadow" just for fun! That's how I did the example photo above.

To finish out, just click the Image menu and choose "Flatten Image" so that you can save your file as a .jpg, and you are ready to go! Easy wasn't it?