Free online photoshop training

Photoshop tutorials for webdesigners

Make a Navy blue square website content box

January 15th, 2008 · No Comments

Here we will tell you how to make a Navy-blue-square-website-content-box in photoshop.

[1] Take a new file of 400 pixels,400 pixels, of resolution 72 dpi in the RGB mode.

Navy-blue-square-website-content-box1

[2] Now set the Foregroud Color as shown image below.

Navy-blue-square-website-content-box2

[3] Now fill the Background then take the Shape Tool and select this one.

Navy-blue-square-website-content-box3

[4] Create a new shape and fill with Black color.

Navy-blue-square-website-content-box4

[5] Go to Blending Option use the following settings.

Navy-blue-square-website-content-box5

Navy-blue-square-website-content-box6

Navy-blue-square-website-content-box7

Navy-blue-square-website-content-box8

[6] Your image should be look like this.

Navy-blue-square-website-content-box9

[7] Then take the Elliptical Marquee Tool create a new shape and fill with Black color.

Navy-blue-square-website-content-box10

[8] Go to Blending Option use the following settings.

Navy-blue-square-website-content-box11

Navy-blue-square-website-content-box12

[9] Your image should be look like this.

Navy-blue-square-website-content-box13

[10] Create a new shape with the help of Elliptical Marquee Tool and fill with Black color.

Navy-blue-square-website-content-box14

[11] Go to Blending Option use the following settings.

Navy-blue-square-website-content-box15

Navy-blue-square-website-content-box16

Navy-blue-square-website-content-box17

[12] Your image should be look like this.

Navy-blue-square-website-content-box18

[13] Create a new shape with the help of Elliptical Marquee Tool.

Navy-blue-square-website-content-box19

[14] Now take the Gradient Tool use these settings.

Navy-blue-square-website-content-box20

[15] Then fill the selection with the help of Gradient Tool.

Navy-blue-square-website-content-box21

[16] Your final image is ready.

Navy-blue-square-website-content-box22

56      photoshop layout tutorial
56      photoshop tutorial web layout

Tags: Web graphics

0 responses so far ↓

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

Leave a Comment