Toggle Quick Contact Bar

About Nkraf.com

Advanced photoshop techniques for web designers- Part 1/3

Posted by swai

09 Aug 2011 — No Comments

Posted in Tutorials

Advanced photoshop techniques for web designers

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).
buttons

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.
button_1

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.
button_2

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.
button_3

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;
button_4

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.
button_5

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

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

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

 

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.
button_9

 

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.
button_10a
button_10

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

 

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

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).
button_13

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

 

 

About swai

Browse posts by

Related Blog Posts

No Comments

There are currently no comments on “Advanced photoshop techniques for web designers- Part 1/3”. Perhaps you would like to add one of your own?

Leave a Comment