shape layer

Adobe Photoshop Tip– The Lord of the Rings Tutorial

movieshot Adobe Photoshop Tip   The Lord of the Rings Tutorial

In the land of MacMerc, in the fires of Mount Dude, the Dark Lord RickMacMerc forged in secret a master Ring tutorial, to control all others. And into this Ring tutorial he poured his custom shape, his layer effects and his methods to bring the Ring to life. “One Ring Tutorial to rule them all.” The Tutorial stands upon the edge of a knife. Stray but a little, and you will fail, to the ruin of all. Yet hope remains while the user is true.


The Lord of the Rings Tutorial: The Photoshop of the Ring

Start by downloading the three layer styles we will be using:

The Inner RingThe Outer Ring and the Elvish Writing.

Also download the custom Ring Shape that I drew up for you in Illustrator.

All of these will come into play very soon but we might as well get them ready now. In Photoshop, create a new document that is 7 x 5″ and 300ppi in RGB Color Mode. The background contents don’t really matter this time …White …Transparent …I’ll leave it up to you.

ring2 Adobe Photoshop Tip   The Lord of the Rings Tutorial

ring1 Adobe Photoshop Tip   The Lord of the Rings TutorialGrab the Custom Shape tool but before you draw anything, specify that you would like your shape to be a Shape Layer and load the Ring Shape you downloaded into the Custom Shape Picker via its flyout menu. Also open the Style Picker in the Options bar and load and select the Outer Ring layer style you downloaded. Also make sure to set the color to Black in the window just to the right of the Style Picker

Now we’re ready to draw. Click and hold your cursor in the upper left area of the canvas, hold down the Shift key as you drag to the lower right, creating a shape about 6″ wide and almost 4″ high. Release your mouse button and then the Shift key.

ring3 Adobe Photoshop Tip   The Lord of the Rings Tutorial

The Lord of the Rings Tutorial: The Two Layers

So bright, so beautiful, our precious.

In the Layers Palette, you’ll see the shape you created as a layer with attached style items. Rename this layer “Outer Ring”. Duplicate this layer, name it “Inner Ring” and drag it below the Outer Ring layer in the Layers Palette.

With the Inner Ring layer selected in the Layers Palette, open the Styles Palette and load the Inner Ring style you downloaded earlier. Apply this style to the Inner Ring layer. Not impressed? Click the Move Tool and then go Edit>Transform>Rotate 180°. Happy now?

ring4 Adobe Photoshop Tip   The Lord of the Rings Tutorial

The Lord of the Rings Tutorial: The Return of the Bling

The Ring is mine.

Now it’s time to add the Elvish writing to the ring and here a lot depends on you and what you decide to engrave upon the ring. You should also consider what kind of type you would like to use. Thomas W. Otto, the fontsmith that made the Matrix Code font used in the Matrix Code Retooled Photoshop tutorial, also has a nice Elvish Ring font available. You might also consider using Zapfino which comes with Mac OS X or better yet, if you have it in your font library, Sloop.

Select the Outer Ring layer in the Layers Palette. Then choose the Horizontal

Type tool and, in the Options bar, set the font you have chosen, start with a type size of 18pt, a Smooth anti-alias method and a Center alignment. Again, the color won’t really matter—just make sure you’ll be able to read it on the Ring. Click the cursor in the center of the Ring’s band and type the inscription you will be using. Try to type enough to cover just a bit less than the width of the ring…no more, no less. If you can’t fill the width, you have my permission to scale a bit.

easteregg Adobe Photoshop Tip   The Lord of the Rings TutorialWith the Text tool still active, click the Warped Text button to call up the Warp

Text menu. Set the warp style to “Arc” and adjust the bend of the warp into the negative percentages until it follows the curve of the outer ring.

Don’t worry if the text is in the wrong place, just make sure that it has the same curve. Also adjust the Vertical Distortion by a few negative degrees to overcome the circular tilting effect that the arc puts on the type—we want the text to stand tall on a curved line. Once it looks nice, click OK.

Select the Move tool once more and drag the text into position so that it runs around the outer ring midway between the top and bottom edges of the band. Now load and apply the Elvish Writing style to this text layer from the Styles palette.

Once you group your text layer to the Outer Ring layer by hitting Command-G while the text layer is selected, you quest will be at an end. Well done, hobbit.

ring5 Adobe Photoshop Tip   The Lord of the Rings Tutorial

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