Advanced photoshop techniques for web designers- Part 1/3

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.In this step-by-step tutorial, we are going to show you how to create five killer effects for your site.

1. Awesome Buttons
Now what is a site without a great “Call to action” button? The design style and colors will depend on your overall site style and importance of each button. Here is one example of a simple but effective button that we’ll be trying to recreate (taken from transmissionapps.com).

Step 1
Open New Document, set canvas to 470px wide and 350px high. Create a new layer and draw in this shape with Rounded Rectangle Tool with radius set to 80px.

Step 2
Right after that we will add some layer filters to make this button immediately awesome. Drop Shadow – Color: Black, Opacity:65%, Distance: 2px, Size:2px, the rest leave by default.

Step 3
Gradient Overlay. Just copy these hex codes for gradient colors and place color buckets in approximately same position as you can see in the image.

Step 4
Inner Shadow will make this button stand out even more. Notice that this is just a subtle effect.
Inner Shadow – Color: Black, Opacity: 15%, Distance: 0px, Size: 5px;

Step 5
Finally add some Stroke. You will notice that this is a Gradient Stroke with same colors as our buttons Gradient Overlay. The only difference here is that gradient direction is set -90, which is the opposite of buttons Gradient Overlay. With this little trick we made a nice light effect to our button and made it stand out a bit more.

Step 6
Done with effects, time for some shine! Create a new layer above others.

Step 7
Cmnd (Ctrl) + Click on Button shape layer. We have made a selection out of it.

Step 8
Choose Marquee Tool. Hold down the Alt key and Subtract the half from selection.

Step 9
Choose Black to White Gradient Tool, set the layer mode to Screen and pull upwards from bottom of selection to about 30px outside the selection. There you have it! A nice shiny button.

Step 10
Add some text like I did here. Draw in a circle and position it like you see it in the picture. Add a Gradient Overlay with same values like shown in the screenshot. Finally give it a 2px white Inside stroke.

Step 11
Choose Shape Tool. From presets choose an Arrow. Rotate it.

Step 12
Like the image says, position the arrow in bottom direction.

Step 13
Now choose Direct Selection Tool and select the shape. Next, select two points from upper part of the arrow and move them with Arrow Keys few pixels to the right. Do the same with the right top side of the arrow, just shift it to the left. This way our top part will become a bit thiner. With the same tool adjust the bottom part (triangle).

Step 14
This is how it should look like. You can also see the layer structure