I have posted this a while back on my old blog, and I thought that it could be updated and re-posted here. So here is how to create the 3D dock in Mac OS X Leopard using Photoshop.

1. Lets begin this tutorial creating a 400×400 canvas.

2. Next we set a background, I’m going to use black (#000000), just to draw the attention to creating the dock. Once the dock is made how you would like it, you can put any background here.

3. At this time we must create a new layer to be the dock.

4. Make a white (#ffffff) block 100px high, at the bottom of the canvas.

5. We now have to distort this block, to make it look 3 dimensional.

6. Follow the numbers in the screenshot to create the desired angle of distortion.

7. After the block is distorted and looking 3 dimensional, we should make it about 20% transparent.

8. Almost done, Lets add an icon. I’m going to use an icon from IconsPedia. I chose just a random icon on the home page. Place the icon of your choice about half way from the bottom on the dock.

9. All that’s left is to make it reflect. Duplicate the icon layer, and then flip it vertically. Set the transparency to about 15%.

Final Product

PSD file here

Simple text animation

1. Start a new canvas 100×20 pixels

2. Text tool “loading…” font size 18

3. Make a new empty layer

4. Import to image ready

5. Make new animation layer, un check text layer

6. Set delay time

7. Save as optimized

Graphic loading animation

1. Start a new canvas 200×100 pixels
2. Make a background color, I’m going with #333333
3. Create a new layer

4. Make a circle with the ellipse tool, then a line from the center to the edge

5. Now duplicate that layer 3 times

6. Rotate each layer 45 degrees

7. Import to Image Ready

8. Make 4 new animation layers, un check first layer, repeat per layer

9. Set delay time
10. Save as optimized

I’d first like to take a look at what exactly web 2.0 means, and what the need for a “new” web is.

As found on Wikipedia http://en.wikipedia.org/wiki/Web_2

“Web 2.0 is a trend in the use the World Wide Web technology and web design that aims to facilitate creativity, information sharing, and, most notably, collaboration among users.”

The design aspect however is bubbly, shiny, and vibrant. Eye catching, attention grabbing and user generated.

So what goes into a web 2.0 graphic?

ü Reflections

ü Gloss

ü Lighting effects

ü Shadows

These are just some of the many techniques used to create catchy graphics. Now that you have a fair understanding of what web 2.0 is and about what it looks like, let’s makes a couple buttons and logos.

Gloss and shadow text

I’m going to start with a transparent canvas of 200×100.

Next I’m going to fill the first layer 6F450B.

Next let’s grab our type tool, and the color F7941D

I used Impact as my font, since it has a thick profile. I also centered the text so the focus is not the text in the center.

Now with the magic wand click the outside of the text, then right click “select inverse” this highlights the whole text selection.

Create a new layer keeping the wand tool active so the text shape is on a new layer. Now take the “Ellipse tool” and cover about the top half of the wand shape.

Now set the master opacity 25% making the white section look like gloss.

Let’s put the shadow on now. Select the text layer, then go to the layer style options and select “drop shadow”

Here is the PSD file for this tut here.

Reflecting and lines inside text

Let’s continue with the same file but more editing.

We’ll start with the lines inside the text. Using the wand again, select the text, and then make a new layer.

Make sure the lines are beneath the gloss layer! I used 333333 for the color of the lines.

Reflection is fairly simple to do. Duplicate the text layer and the lines layer first.

Once duplicated go to Edit>Transform>Flip Vertical

Now we must tone these down put them both to 20% opacity.

That’s the tutorial. Here is the PSD for the lines and reflection.