The Lab with Leo Laporte Segments

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.

Giving Leopard Stripes and Tiger Spots

It’s unanimous! Everybody loves Mac OS X 10.5 Leopard! The afterglow has worn off and yet we all still love it without there being one single thing we miss about Tiger.

Wrong.

Even before it was officially released, some Mac geeks who had gotten their hands on the Apple Developer Connection seeds (either legitimately or otherwise) were already complaining about the esthetics of the translucent Menu Bar, the 3-D reflective Dock and the lack of any option to retain the hierarchical folder listings in docked folders (now called “Stacks”).

You can never please everybody.

The easy solution is to simply stick with Tiger; and that will work for many for a while. But what happens down the road when all the cool software starts requiring you to be running under Leopard? And what about the people who buy new machines that simply will not run Tiger?

What follows is a list of third-party applications that will allow you to change Leopard’s spots. And what’s more, it will change them from spots to Tiger stripes.

Dock Dabbling

These apps will help you change the Leopard Dock to something more pleasing to your eye.

PimpMyDock (FREE): http://www.malcom-mac.com/pimpmydock/

Offers a Quickstart Guide, but is pretty non-intuitive.

screenshot big Giving Leopard Stripes and Tiger Spots

 

DockDoctor Widget (FREE): http://innermindmedia.com/dock_doctor_widget.html

This one puts the power to choose either Leopard’s 2-D or 3-D Dock into a Dashboard widget. I can’t see it getting much simpler than this.

Dock 1 Giving Leopard Stripes and Tiger Spots

DockDoctor (FREE): http://innermindmedia.com/dock_doctor_app.html

From the same people that brought you the DockDoctor Widget, the DockDocktor App toggles the 2-D and 3-D dock, makes hidden application icons appear translucent in the Dock, turns off the Dashboard (weird since they make a Dashboard widget) and, most importantly, comes packaged with a handful of Dock themes you might like better than the Leopard one (it requires a restart to see the new Dock, unfortunately). This one is my pick.

DockDoctor%201.0 1 Giving Leopard Stripes and Tiger Spots
DockDoctor%201.0 2 Giving Leopard Stripes and Tiger Spots

 

DockEdit (FREE): http://www.macupdate.com/info.php/id/26299/dockedit

Don’t like Dashboard widgets? Fine here’s the same function of DockDoctor as a stand-alone app.

DockEdit.app Giving Leopard Stripes and Tiger Spots

 

TigerDock (FREE): http://riotgames.se/riotgames-se/tigerdock.html

This one adds the ability to display hidden applications as transparent icons in the Dock…otherwise the same as the DockEdit.

TigerDock Giving Leopard Stripes and Tiger Spots

 

DockChanger (USD$10): http://www.whimsplucky.com/Whimsplucky/Software/Software.html

This is my favorite. It works simply and lets you chose Dock themes including active application indicators and the separator bar.

DockChanger Giving Leopard Stripes and Tiger Spots

 

CandyBar 3 (USD$12.95) http://www.panic.com/candybar/

Replaces the Dock graphics with those of your choosing. Also replaces System icons with pre-baked themes. 

CandyBar Giving Leopard Stripes and Tiger Spots

 

Get various Dock Themes from: http://www.dockulicious.com/docks/ or http://leoparddocks.com/

If you’re comfortable using Terminal, you don’t even need another application to help you. Here are some links to show you how:

Use Tiger’s Dock in Leopard: http://www.macosxhints.com/article.php?story=20071031111443331

Banish the 3D dock from 10.5: http://www.macosxhints.com/article.php?story=2007101815375480

Menu Bar Manipulators

The list below shows some applications that will let you customize your Menu Bar and getting looking much the way it did in Tiger.

LeoColorBar (FREE, and no affiliation with Mr. Laporte): http://homepage.mac.com/mdsw/md%20softworks.html

This doesn’t mess with the Menu Bar at all really. What it does is tweak your desktop picture to have a colored stripe just below where the Menu Bar is, thus making it appear to be colored due to its unaltered transparency. This allows you to put white beneath the Menu Bar and make it appear to be opaque. By not actually tweaking the system, this means you can change the look of your Menu Bar without restarting. LeoColorBar also does the 3-D to 2-D Dock switch. This one is my choice for Menu Bar Manipulators.

LeoColorBar Giving Leopard Stripes and Tiger Spots

Leopaque (FREE): http://www.macparc.ch/mirror/Leopaque/

Leopaque makes adjustments to system settings that you can access via Terminal (see below) to set the opacity of the Menu Bar. All setting changes require a restart to take effect.

Leopaque Giving Leopard Stripes and Tiger Spots

OpaqueMenuBar (FREE): http://www.eternalstorms.at/utilities/opaquemenubar/

Allows you to adjust the opacity of the Menu Bar

OpaqueMenuBar Giving Leopard Stripes and Tiger Spots

Again, if your “Terminally Inclined,” you can follow the instructions here and tweak your Menu Bar without the need for third-party help:

Get rid of the translucent Menu Bar :http://www.macosxhints.com/article.php?story=20071115135215262

Subdue your Stacks

Some people long for the old hierarchical folder listings of Tiger’s docked folders. Here’s some help to get you there.

Quay (In beta. Might cost about USD$10 when finalized): http://www.brockerhoff.net/quay/

This does a great job of taking you step-by-step through the process of adding a folder to your Dock that shows a hierarchical list when selected. Even if they do decide to charge for it, Quay is my choice.

Fullscreen 3 Giving Leopard Stripes and Tiger Spots

HierarchicalDock (FREE): http://www.eternalstorms.at/utilities/hierdock/

HierarchicalDock does much the same thing as Quay, but not quite as elegant. I like Quay’s interface more and docked folders from HierarchicalDock have .essdocker file extension which is kind of lame.

Giving Tiger Spots

Now what happens if you are absolutely in love with Leopard but you can’t upgrade. You’ve seen John from the Apple Store in that video demonstrating all of Leopard’s new features and you are clamoring to get in on that 10.5 action. But maybe your current system won’t support Leopard or your most used applications are not ready for 10.5. You have your reasons and they’re good ones—but maybe you can still enjoy some of Leopard’s features without leaving the comfort to Tiger.

Here are some Leopard-like applications that will run under Mac OS X 10.4 “Tiger”.

Dock Manipulation

ClearDock (FREE): http://www.macupdate.com/info.php/id/8808/cleardock

It won’t make the Dock 3-D or make it reflect your Desktop, but it will make it transparent. It requires Unsanity’s controversial Application Enhancer ( http://www.unsanity.com/haxies/ape/ ).

Hesitantly Mentioned: Liger (FREE) http://spiderlama.deviantart.com/art/Liger-57706188

This ShapeShifter() theme is a bit buggy and no longer being developed, it seems, but it does somewhat accurately emulate the look of Leopard under Tiger.

Liger by spiderlama Giving Leopard Stripes and Tiger Spots

WebClip for 10.4 users

Dash Clipping Widget (FREE): http://www.macupdate.com/info.php/id/22442/dash-clipping-widget

A simple Dashboard widget that requests a URL, allows you to position the web page displayed in an adjustable frame and then lets you lock in your work. Functions just as well under Leopard.

Dock 2 Giving Leopard Stripes and Tiger Spots

Tigers…in…Spaces

VirtueDesktops (FREE): http://virtuedesktops.info/index.php/downloads/

No longer under active development, but a really good app. I know a few Leopard users who prefer this over Spaces and want it updated NOW!

Picture%201 Giving Leopard Stripes and Tiger Spots

QuickLook for Tiger

MacGizmo (USD$20): http://www.hyperbolicsoftware.com/MacGizmo.html

It’s not as slick and sexy as Leopard’s QuickLook and it doesn’t work on as many file formats, but it’s slightly better than nothing. The USD$20 price tag seems a bit steep though.

MacGizmo Giving Leopard Stripes and Tiger Spots

iChat Effects

ChatFX (USD$20): http://www.scriptsoftware.com/chatfx/

Works on 10.4.9 and below!

ChatFX%20 %20Video%20Effects%20within%20iChat Giving Leopard Stripes and Tiger Spots

CamTwist (FREE): http://allocinit.com/index.php?title=CamTwist

Okay, technically this one doesn’t count—it doesn’t work in iChat. It does work with Stickam, Yahoo, Ustream.tv, Operator11, amsn and Skype(though, don’t use it when you call in to The Lab)

Stickam 1 Giving Leopard Stripes and Tiger Spots

Screen Sharing from Tiger with Leopard

VINE Server (FREE): http://sourceforge.net/projects/osxvnc/

Chicken of the VNC (FREE): http://sourceforge.net/projects/cotvnc/

As Mac OS X Hints explains ( http://www.macosxhints.com/article.php?story=20071028163313650 ), Leopard’s Screen Sharing uses standard VNC protocol to do its magic. So, all you need to do is get VNC running on your Tiger Mac and it should show up as a shared screen in the Finder windows of Leopard users.

That’s it for this stripy, spotty installment. Next time I’ll make both OSs paisley!

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!!