Graphics Tips

May the Force be with you! Release your Jedi spirit!

(from Episode #79 of The Lab with Leo Laporte)

“If you strike me down I shall become more powerful than you could possibly imagine…”

These were Ben Kenobi’s words of warning to Darth Vader in the original Star Wars film. Until the sequel, us fanboys really weren’t sure what old Ben was prattling on about. But in The Empire Strikes Back we were led to believe that to be a freely roaming, blue, glowing spirit was the utmost power any Jedi on either side of the dark/light spectrum could achieve.

Hmm….

Well, now with the aid of Adobe Photoshop, you too can add your ghostly form to any of your digital photos. Here’s how…

Step 1: The Photo(s)

Ideally, you will be using two images: one of you looking masterful and wise and hopefully on a background that you can easily separate yourself from and another of the setting in which you will be placing yourself. We will want your Jedi spirit to be translucent and that will be much more difficult if we must first remove your opaque, live and living self from the photo. I’m not going to spend time explaining how to remove yourself from the photo. If you take the 2 pictures you need, you don’t need to worry about this procedure… this is not the tutorial you are looking for… you may go about your business… move along…

jedi1 20070925 222802 May the Force be with you! Release your Jedi spirit!

So I have one image with without me in it and I also have another photo that was taken at about the same time that does have me in it. This is the photo I’m going to use as my source image for me as a dead Jedi (aka Darth Yaeger).

jedi2 20070925 223101 May the Force be with you! Release your Jedi spirit!

Step 2: The Chosen One

Working on the photo “with you in it” and using Adobe Photoshop CS3′s Quick Selection tool (or the Extract Filter or whatever means you feel most comfortable), select yourself and Copy (Ctrl-C on PC, Command-C on Mac) yourself. You can now close this image (the one WITH you in it).

jedi3 20070925 223403 May the Force be with you! Release your Jedi spirit!

Go to the photo “without you in it” and Paste (Ctrl-V on PC, Command-V on Mac). Position yourself in the picture, scale, rotate, skew, etc. until your image is in the exact part of the image where you want your Jedi spirit to materialize.

jedi 20070925 223545 May the Force be with you! Release your Jedi spirit!

Step 3: A Disturbance in the Force

Ctrl-Click on PC or Command-Click on Mac the thumbnail of the layer in the Layers palette that represents the image of you. This will create a selection.

Create a new layer (Shift-Ctrl-N on PC or Shift-Command-N on Mac) and fill the selection on the new layer with black. (You can first reset your foreground and background colors by hitting the D key the hit Alt-Delete on PC or Option-Delete on a Mac and the selection on your layer should fill with black) You can deselect now (Ctrl-D on PC or Command-D on Mac)

jedi 20070925 223637 May the Force be with you! Release your Jedi spirit!

jedi 20070925 223754 May the Force be with you! Release your Jedi spirit!
You will need to add the Jedi Styles.asl file that I have provided for you. To do this, click the flyout menu on the right side of the Styles palette and choose “Load Styles…” and navigate to where the Jedi Styles.asl file is located on your hard drive and click “Load”. With your new black silhouette layer active in the Layers palette, click the “Force Distort” style in the Styles palette (hover your cursor over the styles to have Photoshop show you the names).

jedi 20070925 223843 May the Force be with you! Release your Jedi spirit!

Your Jedi should look like the picture above. If the “ripples” inside the silhouette don’t cover enough of the body’s shape or if they cover too much, go Layer>Layer Style>Scale Effects… and adjust the effect until it more closely matches what I show here. Don’t stress too much about this.

Create a new layer and drag it below the silhouette layer. Fill this new layer with white. Then, Select All (Ctrl-A on PC or Command-A on Mac) and Copy Merged (Ctrl-Shift-C on PC or Command-Shift-C on Mac) –this will copy the current state of the selection as if it had all of its layers flattened without requiring you to flatten the image.

With the merged copy still in the clipboard, create a new Photoshop document. Photoshop will automatically plug in the height and width of the image held in the clipboard’s memory, so you need only click OK.

jedi 20070925 224015 May the Force be with you! Release your Jedi spirit!

Paste the merged silhouette in the new document (Ctrl-V on PC or Command-V on Mac). Now save this new document as a Photoshop (.psd) file and save it somewhere where you will easily find it again. Close this new file and direct your attention back to the main document again.

Back in the main document, click off the “eye” icons next to the silhouette and white layers–we’re done looking at them.

In the Layers palette, duplicate the layer containing your original “without you in it” image and drag the duplicate to the top. Go Filter>Distort>Displace… and enter in these settings:

jedi 20070925 224149 May the Force be with you! Release your Jedi spirit!

Click OK and Photoshop will ask you for a file to use as a displacement map. Point Photoshop to the file you just created using the silhouette layer and click Open.

jedi 20070925 224244 May the Force be with you! Release your Jedi spirit!

See what happened? Photoshop displaced the image using the silhouette shape and those ripples we made.

Go Layer>New Adjustment Layer>Levels… and match these settings:

jedi 20070925 224407 May the Force be with you! Release your Jedi spirit!

Then, when the Levels dialog comes up, match these settings and click OK:

jedi 20070925 224502 May the Force be with you! Release your Jedi spirit!

Now Ctrl-Click on PC or Command-Click on Mac the thumbnail of the silhouette layer in the Layers palette. This will create a selection. Keeping that selection, click the thumbnail of the displaced layer to activate it. Go Layer>Layer Mask>Reveal Selection.

jedi 20070925 224639 May the Force be with you! Release your Jedi spirit!

If you dig Predator movies more than Star Wars movies, you may be tempted to quit now. This is an example of how one tutorial can teach many effects: you just created the cloaked effect from the Predator movies.

Let’s proceed, Photoshop Padawan….

Step 4: More powerful than you could possibly imagine…

Near the bottom of the layers in the Layers palette, you still have your Jedi. Drag the Jedi’s layer to the top of the palette. And make sure this layer is selected in the Layers palette.
Now click the “Dead Jedi” style in the Syles palette and you’re done!

jedi 20070925 224731 May the Force be with you! Release your Jedi spirit!

Step 5: Your training is complete…

Well, it can be if you want. But here a little “extra” if you want to create the Hologram effect from the Star Wars movies:

With the layered file we’ve been working with up until now, click off the “eye” icon next to our displaced layer in the Layers palette. Now, create a new layer and drag it to the top of the Layers palette. Go Edit>Fill and copy these settings:

jedi 20070925 224920 May the Force be with you! Release your Jedi spirit!

Next, go Filter>Sketch>Halftone Pattern…Â and match these settings and click OK:Â

jedi 20070925 225023 May the Force be with you! Release your Jedi spirit!

Now, go Filter>Noise>Add Noise… and give it the settings shown below before clicking OK.

jedi 20070925 225118 May the Force be with you! Release your Jedi spirit!

Now, in the Layer palette change this layer’s blending mode from Normal to Screen. Go Layer>Create Clipping Mask and you’re Jedi is now a hologram! Help me Leo-Wan Laporti, you’re my only hope!

jedi 20070925 225212 May the Force be with you! Release your Jedi spirit!

May the Force be with you.

Build iPhone-style icons in Photoshop with IconBuilder

(from Episode #124 of The Lab with Leo Laporte)

With IconBuilder, you use Photoshop (version 7 to CS3), Photoshop Elements (version 2 and up) or Fireworks (versions MX and CS3) as your icon editor and then export your artwork as icons for your system or even your web page.

Icon Strategy

When going about making an icon, you have to consider the size at which it is going to be viewed. Mac OS X allows users to view icons at any size but, most often, people will be looking at your icons at around 32 pixels wide… not very big. At that size a lot of detail will be lost, so you have to be creative in how you try to get the message of your icon across; you have to do it in the simplest way that you can. IconBuilder also lets you build icons for your computer’s list view (16 pixels wide), so you should consider how your icon idea will translate at that small a size. With the addition of CoverFlow in Leopard, icons can now be viewed at sizes in the neighborhood of 512 pixels square, but still have to tell their story at 16 pixels square.

Even though you have to be aware of how your icon looks at smaller sizes, the main art should be built at at least 128 pixels square—512 pixels square if you intend for them to look good in CoverFlow.

Building Icons in Icon Builder

Since IconBuilder comes with thorough documentation, I won’t duplicate it here. The trouble I find with learning new software is sometimes you need a project to work on in order to give the documentation some context. So, what I’m going to do is show you how to build a 512 pixel size “iPhone-like” icon to get you started on creating your own icons.

Start with an RGB document in Photoshop that is 512 pixels square with a transparent background.

Set guides at the center going horizontally and vertically (one 256 pixels down from the top and another 256 pixels in from the left)

Using the Rounded Rectangle Tool set at a 45 pixel radius, create a shape layer by clicking in the intersection of the 2 guides and, holding Alt+Shift on a PC or Option+Shift on a Mac, drag out a Shape Layer 440 pixels square.

Set the color of the shape layer to your choosing (mine will be red).

Add a Drop Shadow Layer Style as seen below:

Layer Style 10 20071229 121351 Build iPhone style icons in Photoshop with IconBuilder
And an Inner Glow:
Layer Style 11 20071229 121543 Build iPhone style icons in Photoshop with IconBuilder
Next add a symbol in white on its own layer. The easiest way to do this is to use type. Use letters, number or symbols or, better yet, grab something out of a digbat font like Zapf Dingabts or Webdings.
I have used the obligatory @ symbol on a text layer at 410pt in white.
Untitled 1 %40 66.7%25 %28%40%2C RGB 8%29 20071229 121722 Build iPhone style icons in Photoshop with IconBuilder
Add a Drop Shadow style to the text layer:
Layer Style 12 20071229 122048 Build iPhone style icons in Photoshop with IconBuilder
Now for the highlight. Create a new shape layer by drawing another rounded rectangle as we did before; this time use a radius of 40 pixels and a size of 420 pixels square. It doesn’t matter what color it is—see?
Untitled 1 %40 66.7%25 %28Shape 4%2C RGB 8%29 20071229 122142 Build iPhone style icons in Photoshop with IconBuilder
Set its Fill slider in the Layers to 0%. Add a Drop Shadow Style:
LayerStyle13 20071229 122630 Build iPhone style icons in Photoshop with IconBuilder
And then a Gradient Overlay going from transparent to White:
LayerStyle14 20071229 122745 Build iPhone style icons in Photoshop with IconBuilder
It should look like this:
Untitled 1 20071229 122834 Build iPhone style icons in Photoshop with IconBuilder
Now, using the Direct Selection Tool (it’s the hollow arrow), select the bottom 4 nodes of the path that forms the shape layer…

Photoshop 5 20071229 122939 Build iPhone style icons in Photoshop with IconBuilderUntitled 1 20071229 123056 Build iPhone style icons in Photoshop with IconBuilder
We’re going to Transform these to make the concave curve on the underside of our highlight. Go Edit>Transform Points>Flip Vertical. Now, drag these 4 points together until the lowest 2 touch the horizontal guide you made midway down the icon.
Untitled 1 20071229 123219 Build iPhone style icons in Photoshop with IconBuilder
Still using the Direct Selection Tool, select the 2 points on the middle of the lower arc we just made and go Control-T on a PC or Command-T on a Mac. We are going to bring these points in toward the center a bit and we’ll use the Transform feature to make sure they are even.

Hold down the Alt key on a PC or the Option key on a Mac as you scale the width of the Transform box to look like what I have shown you below:
Untitled 1 20071229 123323 Build iPhone style icons in Photoshop with IconBuilder
Click Enter/Return to apply this transformation, and your icon artwork is done.

You should save this file as a layered PSD so that you can make more icons by simply changing the background color and the symbol. Use Save As… to save each icon design as a flattened transparent PNG that you can then paste into the Expanded Preset that comes with IconBuilder to create your icons masterpieces. Resize and adjust the icon to look good in all of the sizes in which your icon is likely to be used and seen.

To jumpstart the process, install the IconBuilder Assistant Action that comes packages with IconBuilder. Place your 512 pixel creation in the 512 pixel icon area of the Expanded Template that comes with IconBuilder and open the Actions Palette in Photoshop. Select the Generate Expanded actions and click Play. Boom! You have most of your icon resources already created (probably all the resources you are likely to need).

Enjoy your new icon creating abilities and share your creations with us!!