Free online photoshop training

Photoshop tutorials for webdesigners

Design Marble style website menu navigation button

October 6th, 2007 · No Comments

How about a marble style buttons for website navigation using photoshop techniques. This Free photoshop tutorial should not take you more than few minutes to learn few great photoshop tips and techniques for designing a website navigation menu with button.

[1] Open a new file of 500 pixels by 200 pixels and resolution 72 dpi in the RGB mode.

website-menu-button1.jpg

[2] Now take the Gradient Tool and set the gradient color.

website-menu-button2.jpg
website-menu-button3.jpg

[3] Fill the color with the help of gradient tool.

website-menu-button4.jpg

[4] Take the Rounded Rectangle Tool create a shape as shown image below.

website-menu-button5.jpg

[5] Now take the Direct Selection Tool.
website-menu-button6.jpg

[6] Then Curve the shape as shown image below.

website-menu-button7.jpg

[7] Now make the selection fill the color as shown image below.

website-menu-button8.jpg

[8] Now go to Blending Option use the following settings.

website-menu-button9.jpg

website-menu-button10.jpg

website-menu-button11.jpg

website-menu-button12.jpg

website-menu-button13.jpg
[9] Your image should be look like this.

website-menu-button14.jpg

[10] Now create a new shape make the selection then fill the color as shown fig below.

website-menu-button15.jpg

[11] Now go to Blending Option use the following settings.

website-menu-button16.jpg

website-menu-button17.jpg

website-menu-button18.jpg

website-menu-button19.jpg

website-menu-button20.jpg

[12] Your image should be look like this.
website-menu-button21.jpg

[13] Now take the Text Tool write your text.

website-menu-button22.jpg

[14] Make the two more copy of your shape and change the text your image should be look like this.

website-menu-button23.jpg

Adobe skill free lesson - Bright shooting star graphics tutorial using photoshop

Free photoshop technique Lesson - Website forum most active icon

Free photoshop technique - Create starburst Text effect for digital scrapbooking project

Tags: Web graphics

0 responses so far ↓

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

Leave a Comment