Free online photoshop training

Photoshop tutorials for webdesigners

Pink web button image tutorial using photoshop

September 10th, 2007 · No Comments

Here in this photoshop lesson I have provided instuctions on how we can create a pink web Button with graphics.

[1]-Open the adobe photoshop software and create new document of Custom size with  Height & Width 400×400 pixels and Resolution 72 , Mode RGB Color.pun139-clean-button1.gif

[2]-Now create the following selection by the help of Rectangular Marquee Tool

pun139-clean-button2.gif

[3]-Now fill the selection with any color

pun139-clean-button3.gif

[4]-Now Go to Select>Modify>Smooth and use the following setting

pun139-clean-button4.gif

[5]-Now your image will be look as shown and then press ‘Delete’

pun139-clean-button5.gif

[6]-Now corner of your shape have smooth as shown below

pun139-clean-button6.gif

[7]- Now click on sign ‘f ‘ which is indicating by finger sign as shown below

pun139-clean-button7.gif

[8]-Now select Drop Shadow and use the following settings

pun139-clean-button8.gif

[9]-Now select Inner Shadow and apply the following settings

pun139-clean-button9.gif

[10]-Now select Gradient Overlay and use the following settings

pun139-clean-button10.gif[11]-After used the above settings your image will be look as shown below

pun139-clean-button11.gif[12]-Now create the following selection with the help of Rounded Rectangular Tool

pun139-clean-button12.gif

[13]-After that click on the rounded rectangle shape, select make selection and add new selection

[14]-Now fill the selection with any color & click on ‘f ‘ which is indicating by finger sign as shown below

pun139-clean-button13.gif

[15]-Now select Drop Shadow and use the following settings

pun139-clean-button14.gif[16]-Now select Inner Shadow and apply the following settings

pun139-clean-button15.gif

[17]-Now select Bevel & Emboss and use the following settings

pun139-clean-button16.gif

[18]-Now select Gradient Overlay and apply the following settings

pun139-clean-button17.gif

pun139-clean-button18.gif

[19]-After used the above settings your image will be look as shown below

pun139-clean-button19.gif

[20]-Now create the following selection with the help of Pen Tool

pun139-clean-button20.gif

[21]-Now fill the selection with # F8F8FC Color and apply the following opacity

pun139-clean-button21.gif

[22]-Now your image will be look as shown below

pun139-clean-button22.gif

[23]-Now select Custom Shape Tool and use the following settings

pun139-clean-button23.gif

[24]-Now select following shape

pun139-clean-button24.gif

pun139-clean-button25.gif

[25]-Now create the following shape

pun139-clean-button26.gif

[26]-Now create the another shape with the help of Custom Shape Tool and click on the following shape then select Make selection

pun139-clean-button27.gif

[27]-Now use the following settings in Make Selection

pun139-clean-button28.gif

pun139-clean-button29.gif[28]-Now your image will be look as shown below

website-button-design

[29]-Now fill the selection # F8F8FC color and apply the following opacity

website-button-design-web-graphic

[30]-Now your image will be look as shown below

website-button-design-web-graphic[31]-Now select Text Tool and write any Text as you wish, finally all settings have been completed and your final image will be look as shown

website-button-design-web-graphic

Create Rusty photoshop text effect

Design join now Free Website Banner

Tags: Web graphics

0 responses so far ↓

  • There are no comments yet...Kick things off by filling out the form below.

Leave a Comment