The most versatile section of the Photoshop tutorials, it includes guidelines on drawing and editing of different objects in Photoshop.  Home Photoshop Drawing Techniques Simple Website Button

Simple Website Button


Create a new file (File>New) having 450x450 px and 72 dpi.

Next we'll use the Rounded Rectangle Tool (U) to represent the primary layer of the button we'll represent below.

image 1

image 2

The layer's parameters:

Blending Options>Drop Shadow

image 3

Blending Options>Inner Shadow

image 4

Blending Options>Gradient Overlay

image 5

Gradient's parameters:

image 6

Blending Options>Stroke

image 7

Gradient's parameters:

image 8

image 9

Using the details from the next table, we'll try to write the button's name:

image 10

image 11

The layer's parameters:

Blending Options>Outer Glow

image 12

Blending Options>Gradient Overlay

image 13

Gradient's parameters:

image 14

image 15

Select now the Rectangle Tool (U) to represent on the lowest button's half a darkening:

image 16

The layer's parameters:

Fill 0% on the layers.

Blending Options>Gradient Overlay

image 17

Gradient's parameters:

image 18

Simple Website Button Tutorial: Final Result

Drawing the button is finished!



Author's URL: Adobetutorialz.com
Thank you for voting.
Rate this Materials:
Bad 
1 2 3 4 5 Excellent
print this page subscribe to newsletter subscribe to rss

Advance your current skills or acquire new skills in Photoshop by creating projects using our step-by-step tutorials. More Tutorials: Most Popular Materials | Fresh Materials | TutorialKit New Photoshop Tutorials

Add comments to "Simple Website Button"

Only registered users can write comment

No comments yet...