Final Result

Here is what we will be creating:

Step 1

Let’s get started! First of all, open up Photoshop and create a new document of the dimensions 800 by 800 pixels (the size isn’t too important here). Set your foreground color to #6c8000 and press Alt + Backspace to fill the Background layer with an olive green:

Step 2

Grab the Rounded Rectangle Tool (U) from the Tools palette, and in the top toolbar, enter these settings:

Notice that the radius is set to 200px, the width is 309px, and the height is 147px.

Now click somewhere in your document and you should get a nice oval shape. Make sure the oval shape layer is selected, press Ctrl + A to select the entire document, and then in the top toolbar (with the Move Tool selected) press the Align Vertical Centers and Align Horizontal Centers buttons. This is what those buttons look like:

Press Ctrl + D to deselect everything, and now you should have your rounded rectangle centered to the document nicely like this:

Step 3

Fill the rounded rectangle with #6c7f00 by double clicking on the layer’s color thumbnail. Onto the layer effects! Double click on the rounded rectangle layer, and enter these settings:

Drop Shadow

Inner Shadow

Outer Glow

Gradient Overlay

Gradient

Result

That should give you this:

Step 4

Now it’s time to spruce up our design a bit by adding some light “whisps” to the background. Go to this page on QBrushes and download the Radial brushes featured there. Unzip the brushes and add them to Photoshop.

Create a new layer below the rounded rectangle layer, and select the tenth brush in the downloaded set (pictured below):

Press D and then X to reset your colors, and paint the brush behind your rectangle in this position:

Now create a new layer above the brush layer but still below the rounded rectangle layer, and select the 12th brush in the set:

Paint the brush anywhere on the document, and then go to Edit > Transform > Flip Horizontal. Press Ctrl + T, and resize and position the brush to about this place in the image:

Set the blending mode of both of the brush layers you just created to Color Dodge, and set the opacity to 60%, and you should get this:

Step 5

Now all that remains is to add the text to the image. Take the Type Tool (T), and make a new type layer in the middle of your oval. Type in two lines of text (you can say whatever you like, but I chose to say the truth: “TutWow – rocking your world” ), and in the Paragraph palette, set them to Center Justify.

I used the font “Gotham ExtraLight” for the first line of text, and “Gotham Light” for the second, but any thin font will work for this, like Helvetica Neue. I set the first line to 48pt size, the second to 18pt, and the color to white. Play around with the settings until you get the look you want.

Center the text to the oval, and you’re done!

Final Result

This tutorial will teach you how to set a web page on fire with Photoshop and CSS.  Here’s a preview of what it will look like:

If you want to see it in action, you can go to this page.

Step 1

For the purpose of this tutorial, we will be creating some very basic fire to demonstrate the effect.  If you play around on your own, I’m sure you can come up with some much better looking fire.

To start off, open up Photoshop and create a new document 500px wide and 300px tall.  Reset your foreground/background colors by pressing D, and go to Filter > Render > Clouds.  You should now have some nice black and white clouds like below:

Step 2

To colorize the clouds to look more like fire, press Ctrl + U (Image > Adjustments > Hue/Saturation) to bring up the Hue/Saturation dialog.  Inside this dialog, enter these settings:

This will give the fire a nice orange glow:

Step 3

What we want to do now is make this fire texture into a pattern that we can tile across the web page in a later step.  To do this, go to Filter > Other > Offset, and enter these settings:

This will “offset” our texture so that we can see the seam that makes it look horrible when we try to tile it.  We need to remove this seam so that the texture will run together smoothly later.

Take the Healing Tool (J), alt + click on some part of the texture other than the seam, and click and drag over the seam to “heal” it.  If this doesn’t work completely, you may need to use the Blur Tool (R) and blur out the rest of the seam.

Your texture should now look something like this:

Step 4

The last thing we need to do with this texture is fade it out towards the top.  Double-click on the Background layer (it should be the only layer), and press ok in the dialog that pops up to unlock the layer.

Press Q to enter Quick Mask Mode, take the Gradient Tool (G), and draw out a linear gradient starting from the bottom of the image and stretching up to almost the top.  Press Q again to exit Quick Mask Mode, and then press the Delete key to clear the selection.  This will make the texture fade out like below:

Our fire texture is now complete.  Press Ctrl + S to save the image to your hard drive.  While you’re at it, you should create a new folder someplace where you can keep all of the files you use for this tutorial.  Save the image as a PNG file, and name it “fire.png”.

Step 5

Open up your favorite text editor (I use Coda while I’m on a Mac, but any old text editor like TextEdit or Notepad will do) and type in some basic HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xml:lang="en-us" xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>Fire Page</title>
 <link href="style.css" media="screen" rel="stylesheet" type="text/css" />
 </head>
 <body>
 </body>
</html>

All this is doing is setting up the page with all of the necessary tags that every HTML page has.  The title of the page is “Fire Page”, and we are including an external CSS file, “style.css”, which we will create later, in it.

Step 6

Inside the body of the page, insert this line of code:

<div id="fire"></div>

This one line is all we need to set up the fire effect.  The real work is done in the CSS file that we will create.

To make the example interesting, put in a bunch of Lorem Ipsum text after the <div id=”fire”></div> line.  I just went to http://www.lipsum.com/, a Lorem Ipsum text generator, and created 15 paragraphs of dummy lipsum.  Then I copied the paragraphs into my HTML file and wrapped each one in <p> tags.

Save the HTML file we’ve been working on as “index.html”, and put it into the same folder as the image (fire.png) we created before.

You should now have a bland page with a bunch of text in it.  Not much, but the fun is just beginning…

Step 7

Now create a new text file.  This will be the CSS file that styles index.html.  Inside this new file, put in this text:

body {
 background: #000;
 color: #FFF;
}

This styles the page so that the background color is black and the font color is white.  This will make our fire texture really stand out from the rest of the page.  After the above code, enter this text:

#fire {
 background: transparent url(fire.png) repeat-x;
 position: fixed;
 left: 0;
 bottom: 0;
 height: 300px;
 width: 100%;
 z-index: 999;
}

First, this sets the background of the #fire div to the fire.png file we created before.  Then, it sets the position, height, and width of the div so that it covers the entire bottom of the page.  The last line makes sure that the fire div is always on top of all other content on the page.

Save this file as style.css, and make sure it’s in the same directory as the index.html and fire.png files.

Final Result

That’s it! If you open up index.html in a web browser, you will see this result.  Notice that if you scroll down on the page, the fire will stay hovering over the bottom of it.  It’s a very versitile effect that you can use for lots of different effects.

Enjoy!

In today’s tutorial, we’ll be creating a slick folder icon with a 3D glossy backdrop. Here’s a preview of the final result:

Step 1

Let’s get started! To begin, open up Photoshop and make a new document. Size doesn’t matter that much here, but I’ve used my favorite dimensions of 1680 x 1050 for this tutorial. Fill the background with #004d96, get the Pen Tool (P), and turn on the grid by going to View > Show > Grid or by pressing Ctrl + ‘ (single quote).

Step 2

If you don’t have “snap to grid” enabled, go to View > Snap To > Grid to enable it. This ensures that the Pen Tool snaps to the grid lines for precise drawing.

Now that snapping is enabled, click and hold on one of the grid cross sections to create a new anchor point. Without letting go of the mouse, drag up one grid section until the bezier handles snap into place. Finally, click up and over two grid sections and drag to the right one square. See the image below for reference:

Step 3

Count out about 14 squares to the right of that last point, click, and drag to the right one square.  Go over three and down two squares, and click again.

Step 4

Count out another 14 squares to the right of the last point, click, and drag to the right one square.  Go down and over two squares, click, and drag down one square.

Step 5

Count down 18 squares, click, and drag down one square. Go down and to the left two squares, click and drag left one square.

Step 6

Count left seven squares and click to make a new anchor point.  Go up four squares, click and hold the mouse, hold down the alt/option key, and drag to the right one square.  Count up two squares, click, and drag to the left one section.  Here’s a reference:

Step 7

Go two squares to the left, click, and drag over one square.  Count down two squares and click.  Without letting go, drag to the right two squares, press and hold the alt/option key, and drag down and left one square.  Finally, count four squares down and click again.

Step 8

Count six squares to the left, and repeat steps 6 and 7.

After completing those steps, go left seven squares, click, and drag to the left one square.  Then go up and to the left two squares, click, and drag up one square.  Finally, finish off the entire shape we’ve been creating by clicking on the first point, 20 squares up.

Step 9

Fill the shape you just created with #bcc1c5, and apply the following layer styles to it:

Drop Shadow

Outer Glow

Inner Glow

Gradient Overlay

Drag Gradient

Still in the Gradient Overlay dialog, click outside of the layer styles window and drag upward, like the image below.  This moves the gradient up so it’s not in the center of the icon.

Result

You should now have this:

Step 10

Now we’ll create the silhouette of a person for the middle of the folder.  To make sure that both sides are equal, we will create the left half first and then mirror it for the right half.  I can’t be as precise with the position of the Pen Tool anchors here, but it is fairly easy to make the shape below.  You don’t have to be exact, just make something that resembles a human being.

Step 11

Duplicate the shape layer you just created by selecting it in the Layers palette and pressing Ctrl/Cmd + J.  With the new layer selected, hit Ctrl + T to transform it, right click on it, and select Flip Horizontal from the context menu.  Click and drag it to the right so it’s just barely overlapping the other half of the silhouette we created before.

To merge the two halves together, make sure the Vector Mask of the current layer is selected (see below).  Press Ctrl + C to copy it, select the Vector Mask of the other half of the silhouette, and press Ctrl + V to paste it.

You can delete the single half shape layer that you created now, which should give you this:

Step 12

Center the silhouette to the folder by Ctrl + clicking on the folder layer’s icon, getting the move tool, and pressing “Align Horizontal Centers”.  Move it vertically to a position that looks good to you.

Now we’ll apply some layer styles to the silhouette to make it pop off the screen (or sink into the folder).  Use these settings:

Drop Shadow

Gradient Overlay

Gradient

Stroke

Result

And that should give you this:

Step 13

Now that we’re done with the folder icon itself, we can give it a cool 3D background to sit on.  Before we do this, let’s center the icon to the document.  Select all the layers above the Background layer (there should be two layers – the folder and the silhouette), and press Ctrl + G to put them into a group.  With this group selected, press Ctrl + A to make a selection of the whole document.  Take the Move Tool (V), and in the toolbar at the top of the screen, press both “Align Vertical Centers” and “Align Horizontal Centers” like below:

Now that the icon’s centered, you can deselect everything by pressing Ctrl + D.  Make a new layer below the group we just created, get the Rectangular Marquee Tool (M), and drag out a selection like this:

Step 14

Press D and then X to reset the foreground/background colors and then swap them.  Get the Gradient Tool (G), and in the toolbar, modify it to this:

Starting from above the document, drag out a gradient to almost the bottom of the image like this:

If you deselect everything (Ctrl + D), you should now have this:

Step 15

It’s looking pretty good!  However, the icon looks a bit like it’s floating up and not sitting on the 3D shelf.  To fix this, we’ll add both a reflection and a shadow to it.

Let’s start with the reflection.  Duplicate the group we created by dragging it down to the “New Layer” icon in the Layers palette.  Merge all the layers in the new group together by selecting it and pressing Ctrl + E.  Move the created layer below the original group, but above the gradient layer.  Press Ctrl + T to transform the layer, right click, select Flip Vertical, and drag it down so it’s just below the original folder icon:

With the new layer still selected, press the “Add Layer Mask” button at the bottom of the Layers Palette (third button from the left).  Get the Gradient Tool (G), set it to a linear black-to-white gradient, and drag out a gradient like this:

Finally, fade out the opacity of the layer to about 50%.  You should have this:

Step 16

Now we’ll make the folder shadow.  Duplicate and merge the folder group once again to make another layer.  Move this layer below the original group, but above the reflection, and go to Image > Adjustments > Hue/Saturation.  Move the lightness slider all the way to the left (-100) to make the layer totally black, and press enter.

Press Ctrl + T to transform the layer, and squash it way down like this:

Not right click on the transformation, and select perspective from the context menu.  Drag out the top right handle a bit to make the shadow look like it’s spreading out from the folder:

Press enter to complete the transformation, then go to Filter > Blur > Gaussian Blur and set the Blue Amount to 8 pixels.  Press ok in the dialog, set the layer’s Blending Mode to “Soft Light”, and lower its opacity to around 30%.

Final Result

And that’s it!  You’ve just created a stunning folder icon with added backdrop, shadow, and reflection.  Here’s the final result:

Before we dive into the tutorial, let’s take a look at what we’ll be creating. You can download the PSD for this tutorial if you get stuck on one of the steps

Step 1

As you can see, we’ll be creating a nice wooden sunset in Photoshop.  We’ll even throw in a few grunge textures to spice it up.  Let’s get started!

Open up Photoshop, and create a new document of the dimensions 1000×1500 pixels.  Fill the background with #d08e00, an orange-brown color that will be the basic color of the wood.

To give it a bit of texture, double-click on the “Background” layer and press enter to unlock it.  Double-click on it again to open up the Layer Styles dialog, and enter these settings:

Drop Shadow

Inner Shadow

Pattern Overlay

You may be wondering why we put a drop shadow on the background layer.  The reason is because we’ll be reusing the style we just created on different layers, and they will need it.  You should now have this:

Step 2

Now we’ll create the hills for the sunset.  Take the Pen Tool (P), and make a shape similar to this:

The new shape should already have the same style as the “Background” layer.  If it doesn’t have any styles, then right-click on the “Background” layer, select Copy Layer Style, right-click on the new shape layer, and select Paste Layer Style.  This will copy the first layer’s styles to the second layer.

Step 3

Set your foreground color to #906200, select the first shape layer, and press Alt + Backspace to fill it with the foreground color.

Now we’ll make the other hills.  Get the Pen Tool, make a shape like the one below, and fill it with #6f4c00.

Make a new shape like the one below, and fill it with #523800.

Finally, make a shape like the one below and fill it with #2f2000.

Step 4

What would a wooden sunset be without a wooden texture?  Head over to Bittbox and download their Free Hi Resolution Wood Textures Pack.  Unzip it, and place (File > Place…) texture number 7 (7.jpg) into the document.  Rotate the texture, and scale it up so it looks like the image below.  Then press enter to apply it to the document.

Set the wood layer’s blending mode to Overlay, and lower its opacity to 38%.  Your image should look similar to this:

Step 5

To make a more grungy feel, download this texture and this one from TextureKing.  Place them (File > Place) both into the document, rotate them, and scale them up like in the images below:

Set each of the new texture layers’ blending modes to Multiply, select them both, and go to Layer > Rasterize > Layers to rasterize them.  Get the Rectangular Marquee Tool (M), and in the toolbar change the Feather size to 250px.

Drag out a selection of the whole document, select each of the layers separately, and press backspace to clear the selection.  Set the first texture layer’s opacity to 71%, and the second layer’s to 31%.  You should now have this:

Step 6

All that’s left to do now is make the sun and its glow.  Make a new layer below all of the other shape layers but above the Background layer, get the Ellipse Tool (U), and drag out a circle about this size and location:

Fill the shape with #ffba00, and apply these styles to it:

Inner Shadow

Outer Glow

Inner Glow

You should now have this:

Step 7

Now all that’s left to do is add some glow effects to the hills where the sun in shining.  Make a new layer below the wood texture layer, take the Brush Tool (B), and put these settings into the Brushes Pallet (F5):

Brush Presets

Shape Dynamics

Press D and X to set the foreground color to white, click a few times around where the sun’s rays would hit the hills, and make something similar to this:

Set the layer’s blending mode to Overlay, duplicate it, and set the duplicated layer’s opacity to 23%.  This will make the hills glow seemingly from the sun’s rays.

And that’s all for the beautiful wooden sunset!

Conclusion

I hope you found this tutorial useful.  As I said before, you can download the PSD if you get stuck on any of the steps.

Though most of the shortcut commands are documented in the Photoshop “Keyboard Shortcuts” dialog (see below), there are some “secret shortcuts” that aren’t documented anywhere.  Many of these shortcuts have already been found, and there are articles about them on Web Designer Wall and 11AM Design, to name a few.  However, I’m sure there are many other shortcuts that we haven’t found out about yet (and Adobe keeps adding more in each release).  I found a new one today, and I call it the “secret layer styles shortcut”.

Switching Between Style Dialogs

Here’s how you can use the new shortcut:  In Photoshop, double-click on a layer that you want to add styles to.  This will bring up the

When in the Photoshop layer styles dialog, you can press Cmd (Ctrl) + 0-9 and it will switch to the style corresponding with that number.  For example, if I have some text that I want to add an Outer Glow to, I would double-click on the text layer to open up the Blending Options dialog, press Cmd + 3 to switch to the Outer Glow tab, and enter the settings I want.

Sure, it might not be the most revolutionary shortcut in the world, but it can help to speed up your projects a bit, which is always great.

(thank you Everaldo for the key icon)

Final Result

Here is the final Photoshop icon that we will be creating:

Step 1

To start off, create a new document of the dimensions 100px by 100px.  Set your background color to #2f64a8, and then press Ctrl + Backspace to fill the “Background” layer with it.

Step 2

Now we will add that nice gradient lighting effect that this icon uses.  However, since we want to be able to reuse this effect for all of the other CS4 icons, we need a way to add this lighting effect “non-destructively”.  To do this, first create a new layer above the background layer, fill it with #808080, and set its blending mode to Overlay.  As you can see, this didn’t change the background color at all, and that’s because the color is a perfect medium-gray.

To add the lighting effects, make sure that your new gray layer is selected, and go to Filter > Render > Lighting Effects.  Enter these settings:

And that will give you this:

Step 3

That’s it for the background!  Now on to the text.  Take the Text Tool (T), click anywhere in the document, and type in a capital P and a lowercase s.  Set the font to Myriad Pro, the size to 72pt, and the color to #28201d.  To center the text to the background, press Ctrl + A to select everything, get the Move Tool (V), and press the “Align Vertical Centers” and “n Centers” width=”647″ heighAlign Horizontal Centers” in the menu:

That should give you this:

Step 4

For the final step, we will ad some subtle layer effects to the text.  To do this, right-click on the text layer and click on Blending Options.  Use these settings:

Inner Shadow

Bevel and Emboss

That’s it!  A really simple effect, yet a surprisingly beautiful icon.  Here’s the final Photoshop CS4 icon again:

How to Create the Other Icons

Creating the rest of the CS4 icons is rather straight-forward.  There are really only two steps the you need to take, and I have listed them below:

Step 1

Select your background layer, and set your foreground color to the color of the new icon.  I am creating the Adobe Illustrator icon, so I will choose #ec8e24.  Press Alt + Backspace to fill the background layer with that color.  Here’s what I have:

Step 2

Now we just need to change the text to fit the new program’s name.  In my case, this is Ai.  Just take the Text Tool (T), click on your text, delete the original text, and type in the new text.  And your new icon is done!  Here is the Illustrator icon:

Now that you know how to recreate the icons, you can create any of them that you want, including custom ones.  Below are the icons that I have created, each followed by the background color I used for that icon.

#c13636

#a9c244

#939cb3

#ad89b6

#aa5378

#778894

Why not make your own icons?  Since we preserved the text and background layers, you can customize the icons to suit your needs.  Enjoy!

Let’s dig in!

Final Result

Here’s what we will be creating today:

Step 1

Create a new document of the dimensions 850×300 pixels.  Fill your background layer with white (D to reset colors, and then Ctrl + Backspace to fill with background color), and then grab the Text Tool (T).  In the Character Pallete, set the font to Arial, the font size to 130pt, and the font color to #949f37.  Click anywhere inside your document, and type the text “Autumn Fun” or whatever text you want.  Make sure that your text layer is selected, press Ctrl + A to select the whole document, get the Move Tool (V), and press the Align Vertical and Horizontal Centers buttons in the toolbar:

That will give you this:

Step 2

Now apply these layer styles to the text layer:

Drop Shadow

Gradient Overlay

That will give you the image below:

Step 3

Ok, now we get to the fun part.  Open up the Brushes pallet (F5), and select the Scatter Maple Leaves brush like below:

Then, still in the Brushes pallet, set these options:

Brush Tip Shape

Shape Dynamics

Color Dynamics

Other Dynamics

Also make sure that the Scattering option is turned off, and the Smoothing option is turned on.

Save this new brush by clicking on the Create a New Brush button at the bottom of the Brushes pallet.  Name the new brush “Maple Leaves” or something similar.

Step 4

To create the leaves underneath the text, you must first set your foreground color to #949f37 – the same color as your text.  Right-click on your text layer, and click the Create Work Path option to create a path that you can use to stroke.  Create a new layer (Ctrl + Shift + Alt + N), move the new layer underneath the text layer, go to the Paths pallete, and right-click on the new path.  Select the “Stroke Path…” option from the menu, select Brush in the dialog that pops up, and uncheck the Simulate Pressure checkbox.  Now simply press ok, and you will have some nice leafy text to show off to your friends!  This is my result:

Final Result

Here is the super-cool, almost photo-realistic iPod nano that we will be creating today:

Step 1

Open up Photoshop, and create a new document of the size 500 x 950 pixels.  Fill the background with whatever color you want – I used white in the example, but one of the nice features of this tutorial is that you can change the background to whatever color you want without lowering the quality of the nano or its reflection.  So now, grab the Rounded Rectangle Tool, set the corner Radius to 2px, and drag out a shape similar to the following:

Step 2

Now let’s make the iPod look 3D by adding a gradient overlay style to it.  Double-click the shape layer, go to the Gradient Overlay section, and enter these settings:

Gradient Overlay

Gradient

And now you should have this:

Step 3

To make the shape look even more 3D, let’s warp the top and bottom edges of it.  Take the Pen Tool (P), hold down Ctrl, and double-click one of the edges of your shape to go into path edit mode.  Add a new anchor point to the middle of the top side of the shape by hovering over it and clicking.  Press the up arrow a couple of times to move the new anchor point upwards.  See the image below to understand what I mean:

Step 4

Now do the same thing from Step 3, but this time do it on the bottom of the shape, and press the down arrow instead of the up arrow.  After this, you will have something similar to:

Step 5

To create the hold switch (the slider at the top of the iPod), get the Rectangle Tool (U), and drag out a very small rectangle at the top left of the iPod.  You can look at the image at the end of this step for a placement reference.

Drag the new shape layer below the iPod shape, and then apply a simple Gradient Overlay to it:

Gradient Overlay

Gradient

And you should have this:

Step 6

Now let’s start building the screen.  Since the new iPod Nano has a border surrounding the screen, we’ll start there.  Get the Rounded Rectangle Tool (U), set the Corner Radius to 9px, and draw out a shape about this size:

Apply these styles to the new shape:

Inner Shadow

Inner Glow

Satin

Gradient Overlay

Gradient

Stroke

That should give you this:

Step 7

Now let’s do the actual screen.  With the Rounded Rectangle Tool still selected, change the Corner Radius to 3px, and drag out another shape about this size:

And then apply these styles to it:

Inner Shadow

Inner Glow

Gradient Overlay

Gradient

And the result:

Step 8

This is the fun part of creating the screen – shining it up.  Create a new layer above the screen layer, get the Elliptical Marquee Tool (M), and drag out a selection similar to this:

Press Ctrl + Shift + I to select inversely, and then fill the selection with white (D, X, and Alt + Backspace).  Deselect everything (Ctrl + D), make sure that the new white-filled layer is right above the screen layer created in the last step, and go to Layer>Create Clipping Mask (Ctrl + Alt + G) to make a clipping mask of the white layer.  Finally, lower the opacity of the new white layer to 20%, and you should come up with this:

Step 9

Now what’s an iPod without a control scroller?  Making the controller is fairly simple, as you’ll find out.  Get the Ellipse Tool (U), set your foreground color to #eff0f3, and drag out a shape like this:

With the Ellipse Tool still selected, change the Action to “Subtract from shape area”:

Make sure that your menu shape is selected, and drag out a smaller circle in the center of the shape.  You should get something like this:

Step 10

Now that we have the basic shape of the menu finished, we need to start adding the menu items.  Take the Text Tool (T), and click at the top of the menu to create a new text layer.  Type in “Menu”, change the font size to 19.5pt, change the font color to #9aa0ae, and set the font to something similar to Arial (I used a font called Candara).  Position the new text layer in the center of the top of the menu, like in this image:

Step 11

To draw the fast-forward symbol, turn on the grid (View>Show>Grid, or Ctrl + ‘), get the Pen Tool (P), set your foreground color to #9aa0ae, and draw a shape like this:

Scale this arrow down to less than half of its original size, then duplicate its layer, and move the new layer over so that the new arrow is just on the edge the old arrow’s tip.  See what I mean:

Get the line tool (U), set the Line Weight to 3px, and draw a line next to the two arrows like this:

Step 12

To make the rewind button, first group all of the layers for the fast forward button together (the two arrows and the line), and then duplicate that group.  Press Ctrl + T to transform the new group, right-click on one of the arrows, and then select Flip Horizontal.  Move the new group to the left side of the control, and you should get this (by the way, you can turn off the grid if you want to):

Step 13

To create the play/pause button, duplicate the fast forward group again, and move the new group to the bottom of the control, like this:

Now open up the new group, and delete the second arrow from it.  Then duplicate the line, and move the duplicate over a couple of pixels like below:

We’re done with the controls!  Here is what you should have so far:

Step 14

We are now done with the iPod!  This is where it gets fun – in this step, we’ll add a nice reflection to the ground below it.

Select the iPod shape layer (the big blue one), hold down the Alt key (duplication), and drag a copy of that layer below itself:

Transform this new layer (Ctrl + T), flip it vertically, and move it down so that the top of it is just touching the bottom of the original layer:

Add a layer mask to the new layer (Layer>Layer Mask>Reveal All), and get the gradient tool (G).  Reset your colors (D), swap the foreground/background colors (X), and set the gradient to a black-to-transparent gradient:

Select the new mask on the duplicate iPod shape layer, hold the Shift key down, and draw a gradient like this:

Lower the reflection layer’s opacity to around 50%, and that’s it for the iPod reflection!  You should now have something similar to this:

Step 15

It’s looking pretty slick!  The final step is to create a small shadow underneath the iPod.  To do this, create a new layer underneath the original iPod shape layer, and then grab the Elliptical Marquee Tool (U).  Make sure that your foreground color is black (D and X), and make a selection about this size:

Fill the selection with black, and then deselect everything (Ctrl + D).  Go to Filter>Blur>Gaussian Blur, enter 6.5 for the blur radius, and press enter.  If you want, you can transform (Ctrl + T) the shadow a bit, and maybe move it down to make it look more realistic.

And that’s it!  You now have a slick glossy iPod Nano 4th Gen that you can show off to your friends.  Here is the final result:

Up till now, I always got frustrated over the Outer and Inner Glow styles not working the way I wanted them to.  I would create some random shape, and then set the outer and inner glow styles so that the shape would look something like a lightsaber, but it never worked quite how I wanted it.  Take, for example, the shape below:

As you can see, it has some tight angles, and if I put these styles onto it:

Blending Options

Outer Glow

Inner Glow

But that gives us the image below.  As you can see, there are white points poking out at almost all the corners.

So how do we fix this?  Well, as I found out, all you have to do is go into the Outer and Inner Glow options, and change the Technique from Softer to Precise.  That’s it!  So if we change the glow settings to this:

Outer Glow

Inner Glow

After we change those two settings, we get this:

And it’s fixed!  Now our shape is a nice glowing lightsaber, with no white corners poking out anywhere.

Final Result

Here is what the finished product will look like:

Step 1

To begin, open up a new document in Photoshop of the size 300×300 pixels, or whatever size you need to fit your orb. Take the Ellipse Shape tool, and make a circle in the middle of the document. You can make it a perfect circle by holding shift while dragging to create it. It doesn’t matter what color the orb is, because we will be applying a color overlay to it in the next step.

Step 2

To make the circle turn into an orb, we will apply some layer styles to it. Double-click on the layer that holds the circle to bring up the Blending Options dialog, then enter these settings:

Drop Shadow

Inner Shadow

Inner Glow

Bevel and Emboss

Color Overlay

And that gives you this:

Step 3

As you can see, the orb looks much rounder and realistic. Now we will make a shape look like it was cut out of the orb by applying different layer styles to it. First off, take the Custom Shape tool, and drag out whatever shape you want – I used the flame. Center the shape to the orb, and then apply these styles to the it:

Inner Shadow

Inner Glow

Gradient Overlay

You should now have something like this:

Step 4

Now for the final touches! As the title indicates, the orb should be glossy, and to make this effect, we must add a shine effect to it. Ctrl+Click on the orb layer’s thumbnail to make a selection of it, then go to Select>Modify>Contract, and enter 5 for the amount in the dialog that pops up. Take the Ellipse Select tool, hold down the Alt key to subtract from the selection, and drag an ellipse over the lower part of the current selection. You should end up with a selection similar to this:

Step 5

To finish the shine effect, create a new layer, make sure that your foreground color is white, and press Alt+Backspace to fill the selection you made with white. Rename this layer to Shine, and lower it’s opacity to about 50%. This is a simple gloss technique that can be used on anything that you want to appear shiny.

And that’s it! You have just created a slick glossy cutout-orb that can be used for many purposes.  You can play around with each of the layer styles to achieve the effect you want – be creative!

Final Result

I hope you enjoyed this tutorial, because I enjoyed writing it!  If you want more tutorials on how to create glossy designs in Photoshop, check out the Blue Glossy Button and Glowing Glossy Glass Text tutorials on this site.

Until next time, happy designing!