---

Photoshop Lady spent the whole year of 2008 searching for the best photoshop tutorials for you and came up with 100 Most Popular Photoshop Tutorials of 2008.

Spine-chilling Horror Photoshop Effects

Adobe Photoshop is the tool of choice for most web designers. From creating a website template to objects and components such as content boxes and buttons, Photoshop doesn’t fail to deliver.

In this collection, you’ll find Photoshop tutorials geared towards web designers. You’ll find a variety of tutorials that include creating full web page templates, navigation menus, headers, and content boxes.

See the Templates:

Photoshop Paper Texture from Scratch

How to Create a Grunge Web Design

Create a Sleek, High-End Web Design from Scratch

Design an Awesome Band Website Template

Designing a CSS based template (Part II, Part III)

Create a Dark Themed Web Design from Scratch

Navigation and Search

Design Watercolor Effect Menu

Volkswagen Inspired Navigation

Glossy-Style Carbon Fibre Navigation Buttons

CSS Menu With Icons

Content Box with Orange Banner Heading

Modern Web Search Bar

Header

Professional Dark Header

Pro Header With Picture and Navigation

Hero Header Part I

Header Backgrounds

Design a Unique Header

Design Studio Header

Professional Header Design

Content Boxes

Create a Latest Tweets Box

Light Tabbed Content Box

Create a Dark Content Box with Glowing Navigation

Greenish & fresh content box design

Designing a Unique Bookmark Box

Creating a Grungy Banner

How to Create Attaractive Download button:

1. Creating your Button

Start by creating a new document to make your button in, otherwise open up a website design you’ve been working on. I created a small document sized 400 x 110, just to make my button(s) in.

Now you need to make the shape of your button, you can do this by either using the Rounded Rectangle Tool (which is the most common) or you could use the channels to create a nice, uniform rounded box. It’ll be best if you just use the Rounded Rectangle Tool though.

For the settings, use a radius of about 10-15px, you can see the other settings I’ve used below:

Now, draw out your button onto the canvas in whatever color you want. (it doesn’t matter what color you use)

2. Apply Layer Styles

Right-click your button layer in your layer’s palette then go into the Blending Options, click and apply the following settings:

Inner shadow
Gradiant Overlay

You can use whatever colors you want in the above layer styles, but your button should now look something like this anyway:

3. Highlight / Shine Effect

Now it’s time to add a nice, glossy shine to the button. Start by making a selection around your button (Select > Load Selection) then contract your selection by about 5 pixels (Select > Modify > Contract) now you should be left with a selection like this:

Create a new layer then drag a white to transparent gradient from the top of the selection to the bottom, as shown in the below image:

Now you need to make a curvy path using the Pen Tool, turn your path into a selection then delete the bottom half of the gradient, something like this:

I also used a large, soft brush to erase away the bottom edges, this gives it a very nice, smooth feel.

4. Text & Details

Now it’s time to add your text to the button! Start by getting out the Horizontal Type Tool (T) then write out your text.

The font I’ve used above is called Myriad Pro, for the top line of text I used: Black Italic, 24 pt, Sharp, #fff.

For the bottom line of text I used: Semibold Italic, 12 pt, Sharp, #fff. I finished off by adding this Drop shadow to the text layer.

Lastly, for a nice touch, I added in a reflection to the button and a faded cog in the bottom left corner. Add the shadow/reflection by duplicating your main button later, moving it below your button layer then erase all but the top.

5. Finished

And that’s pretty much it. I also created a red version of the button though.

Photos are often much more interesting when they are displayed like a Polaroid photo. Learn how you can turn your normal photo into something livelier, by adding a realistic Polaroid effect to it.

Creating the Base

Create a new blank canvas, say about 800×600 resolution, filled it with white [#ffffff] background.
Draw a rectangular in the middle, using Rounded Rectangular Tool with Radius: 2px. This will be the base for your Polaroid photo. Double click on layer name to launch Blending Options, and insert these following effects:
Drop Shadow
Opacity: 38%

• Spread: 0%
• size : 5px

Inner Shadow

• Opacity:25%
• Distance: 0px
• Choke: 0%
• Size: 57px

1. Color Overlay

   Color: White [#ffffff]
   • 
     
2. Here’s how your output will look like.
   
   1. 

Determining Image Size within Polaroid

Let’s determine how big our image will be within a Polaroid.

1. Hold CTRL and left click on the Polaroid Base’s Layer Thumbnail to highlight the selection.
2. With the selection highlighted, click Select -> Modify -> Contract.
3. Insert 7px and click OK, you will noticed that the selection is shrink by 7px.
4. Select Retangular Marquee Tool, Hold ALT and drag a smaller rectangular on the bottom to minus it off the selection.
   
   1. 
5. Create a new layer, call it " Photo Base" and fill the highlighted part with any color, say black, #000000 for instance. Hide the layer, we will use it as reference later.
   
   1. 

Adding Image into Polaroid

1. Just make sure you have the selection of layer Photo Base still highlighted, if not, hold CTRL and click on the layer to re-highlight it.
2. Create a new layer on top of Photo Base, call it Photo.
   
3. Look for your desired image, copy it and SHIFT + CTRL V to paste it. You will noticed the image will paste itself into the highlighted selection.
4. Transform (CTRL T) or reposition until you are satisfied with the focus point.

Making Polaroid Image more Realistic

The photo looks a bit stiff to me at this stage. Lets tweak it so it looks that it looks more blending into the Polaroid.

1. Double click on the "Golf" layer to call up the Blending Options and tweak the following styles:
   

   Inner Shadow

   • Opacity: 40%
   • Distance: 0px
   • Choke: 0%
   • Size: 46px

   

2. Hold CTRL, left click on Photo Base layer’s thumbnail to highlight the selection, create a new layer on most top, call it "Glossy"
   
3. Select Polygonal Lasso Tool, Hold ALT and draw a rectangular like the image below to cut off half of the highlighted selection.
   
4. Fill the left over selected area with white [#ffffff] and adjust its Opacity to 18% or any figures as long it looks comfortable on the photo. Your output will look something similar to the image below.
   

Adding Text to Polaroid

The photo is almost done, add some writings. Fonts close to handwriting will be nice. Here’s my final output.

dear friends

Pl wait ...................