Free Photoshop cs3 suite tutorials

Beginners Photoshop cs3 tutorials

Red website header web design

January 4th, 2008 · No Comments

Here we will tell you how to make a Red-website-header-web design in photoshop.

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

Red-website-header-web design1

[2] Take the Rounded Rectangle Tool use these settings.

Red-website-header-web design2

[3] Fill the Background with Black color, make the new layer then create a shape and fill with White color.

Red-website-header-web design3

[4] Go to Blending Option select the Gradient Overlay use the following settings.

Red-website-header-web design4

Red-website-header-web design5

[5] Your image will be as shown below.

Red-website-header-web design6

[6] Now open your Pattern Image like this.

Red-website-header-web design7

[7] Then change the Blending Mode to Soft Light.

Red-website-header-web design8

[8] Your image will be as shown below.

Red-website-header-web design9

[9] Now take the Rectangular Marquee Tool create a shape.

Red-website-header-web design10

[10] Make the new layer fill the selection with White color.

Red-website-header-web design11

[11] Go to Filter>Blur>Motion Blur.

Red-website-header-web design12

[12] Your image will be as shown below.

Red-website-header-web design13

[13] Now Press Cntl+Shift+I, to Inverse.

Red-website-header-web design14

[14] Make the more copy of this layer.

Red-website-header-web design15

[15] Take the Text Tool create some text.

Red-website-header-web design16

[16] Take the Shape Tool and select this one.

Red-website-header-web design17

[17] Make the new layer create a shape and fill with White color.

Red-website-header-web design18

[18] Change the Blending Mode.

Red-website-header-web design19

[19] Thanks for reading, I hope this photoshop tutorial has taught you few photoshop tricks and techniques and you can use them in your website design project. Your final image will look like this.

Red-website-header-web design20

56      photoshop layout tutorial
56      photoshop tutorial web layout

Tags: website graphics photoshop tutorial

0 responses so far ↓

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

You must log in to post a comment.