Creating the 3D dock look in Photoshop

Saturday, April 26th, 2008

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

Posted in Photoshop | 1 Comment »

Tutorial : Animated loading bar

Saturday, April 5th, 2008

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

(more…)

Posted in Photoshop | No Comments »

My Web 2.0 Tutorial(s)

Monday, March 31st, 2008

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.

(more…)

Posted in Photoshop | 1 Comment »