Digital Street - Photoshop tutorials

Here you will learn to make a custom header for your website or blog.

1) Create a new image 800×110 with white background.

2) Fill the background with dark red color #4b0d0d

3) Create a new layer, rename this layer as “header”, make a rectangle selection and fill it with any color.
I used #ac1415

4) Right click the header layer and choose Blending Options, use these settings:

Outer glow:

Gradient overlay: use these colors # ac1415 —> # 800d0d

Stroke with this color #6d1415:

The result is:

5) Create a new layer, rename this layer as “light”.

6) Select the Rectangular Marquee Tool and draw a rectangle inside the “header” layer and fill the selection with any color, similar to this:

8) Right click the “light” layer and choose Blending Options, use these settings:

Gradient overlay: use these colors # a31416—> # ab292a

The result is:

9) Select the “header” layer and select the Rectangular Marquee Tool and make a selection 2 pixels wide:

10) Press DEL to delete that part of the header and get a hole.

11) Make more holes that will be used to separate the menu elements. Add the menu elements with simple white text. I have used KaratMedium font 24 px.
The result is:

12) Add a title with white text. I have used RedFive font 30 px:

13) Right click the title layer and choose Blending Options, use these settings:

Drop Shadow:

Gradient overlay: use these colors # ffffff—> # a7a8aa—>#ffffff

The result is:

14) Finally add a picture or logo.
AlsoI have added a yellow color font for the rollover #ffd909

The final result is:

Want more tutorials?
See more recent tutorials HERE !

1 comment

1) Create a new image 256×256 pixels with transparent background. Rename the first layer as “background”

2) Fill the background with white color #ffffff.

3) Create a new layer, rename this layer as “circle”.

4) Select the Eliptical Marquee Tool and draw a circle 222×222 pixels while holding SHIFT to get a perfect circle.
Save this selection as “circle selection”.

5) Fill the selection with any color. I used #880303

6) Select a dark red color as foreground color and a lighter red color as background. I used #880303 and #b51919.

Select the gradient tool with radial gradient style and drag from top left of the selection to the the bottom right.

7) Create a new layer and rename this layer as “reflection”.

8) Load the “circle selection” and choose the Eliptical Marquee Tool and draw a curve from bottom right to the middle while pressing “ALT”. Release mouse button and you will get a selection like this:

9) Select “reflection” layer and fill the selection with white color #ffffff. Set the layer opacity to 15%

10) Create a new layer and rename this layer as “border”.

11) Select the Eliptical Marquee Tool and draw a circle 242×242 pixels while holding SHIFT to get a perfect circle. Position this circle around the first circle.

12) Fill the selection with grey color #b6b6bc

13) Load the “circle selection”.

14) Press DEL and you will get a border around the circle:

15) Right click the “border” layer and choose Blending Options, use these settings:

Drop Shadow:

Inner Glow:

Bevel and Emboss:

Gradient Overlay:

Gradient Overlay uses 3 colors: #b3b3b9 #ffffff #b3b3b9

Stroke:

16) When finished you will get this:

17) To make the “x” sign I have typed a plus sign “+” with a font called “Army” to 300 size. Then I have rotated 45°. Be sure to move the “+” layer below “reflection” layer.

18) Right click the “+” layer and choose Blending Options, use these settings:

Drop Shadow:

Bevel and Emboss:

Gradient Overlay:

Gradiente Overlay uses 3 colors: #ffffff #bbbbbb #ffffff

Stroke:

19) The final result is:

Now you have a nice looking Microsoft Windows Vista Icon !

Want more tutorials?
See more recent tutorials HERE !

19 comments

1) Create a new image 300×150 pixels with transparent background. Rename this layer as “background”

2) Fill the background with black #000000.

3) Create a new layer, rename this layer as “base”, make a rectangular selection and fill it with any color. I have made selection 180×50 pixels and used white color #ffffff
Save this selection as “base selection”.

4) Right click the “base” layer and choose Blending Options, use these settings:

Bevel and Emboss:

Gradient overlay:

Gradient overlay: use these colors # 0a521d —> # 2ac553

The result is:

5) Create a new layer, rename this layer as “border”.

6) Select the Rectangular Marquee Tool and draw a rectangle that will be used as a border. I used 192×62 pixels. Position the rectangle around the “base” layer.

7) Fill the selection with any color. I used white color #ffffff

8) Load the “base selection”.

9) Press DEL to delete selection and you will get a border around the “base” layer:

10) Right click the menu layer and choose Blending Options, use these settings:

Outer Glow:

Bevel and Emboss:

Gradient overlay:

Gradient overlay: use these colors #598e67—> #ffffff

Stroke with grey color # 5e6270

The result is:

11) Create a new layer, rename this layer as “light”. These layer will add a nice light effect to the button.

12) Select the Rounded Rectangle Tool and draw a shape similar to this:

13) Right click the “light” layer and choose Rasterize Layer.

14) Select Filter > Blur > Gaussian Blur. Select a radius you like, I have used 3,0 pixels.

The result is:

15) Finally add some text for the button and you are done. I have used a font called RedFive 36 px
The final result is:

An easy custom web button than can be used for your own website.

Want more tutorials?
See more recent tutorials HERE !

7 comments

1) Create a new image 300×300 pixels with white background

2) Create a new layer, rename this layer as “wood”.

3) Press D to have a black and white foreground and background.

4) Select the Eliptical Marquee Tool and draw a circle 240×240 pixels while holding SHIFT to get a perfect circle.
Save this selection as “wood selection”.

5) Fill the circle with any color. I used black #000000

6) Select Filter > Render > Fiber and use the default options. Randomize until you get something like this:

7) Create a new layer and call it “brown”

8) Load selection “wood selection” and fill it with this brown color #7f6537. Set the Blending Mode of “brown” layer to Multiply.

9) Set the opacity of “wood” layer to 80%

10) Create a new layer, rename this layer as “lines”

11) Draw some lines of 3px width with brown color. I used #64502b

12) Load “wood selection”, go to Select > Inverse and click DEL to delete the lines outside the circle.

13) Right click the “lines” layer and choose Blending Options, use these settings:

Inner Shadow:

Bevel and Emboss:

14) You get this:

15) Create a new layer and rename this layer as “border”.

16) Select the Eliptical Marquee Tool and draw a circle 280×280 pixels while holding SHIFT to get a perfect circle. Position this circle around the first circle.

17) Fill the selection with grey color #b6b6bc

18) Load the “circle selection”.

19) Press DEL to delete selection and you will get a border around the “wood” layer:

20) Select the “border” layer

21) Create a new layer and rename this layer as “old effects 1”.

22) Use some rugged brushes to make old effects to the border of the shield.

23) Create some more layers: “old effects 2”, “old effects 3”, etc. with different opacity and different brushes with some grey colors to get an old metal effect.

24) Merge the old effects layers with “border” layer:

25) Right click the “border” layer and choose Blending Options, use these settings:

Drop Shadow:

Bevel and Emboss:

Texture:

26) When finished you will get something like this:

27) Create a new layer and rename this layer as “circles”.

28) Draw a litle circle and fill with a grey color #7f7e7a:

29) Right click the “circles” layer and choose Blending Options, use these settings:

Drop Shadow:

Bevel and Emboss:

30) Duplicate the circle until you get something like this:

31) Create a new layer and rename this layer as “metal circle”.

32) Select the Eliptical Marquee Tool and draw a circle in the middle of the shield while holding SHIFT to get a perfect circle.

33) Fill selection with grey color #3a3936

34) Right click the “border” layer and choose Copy Layer Style.

35) Right click the “metal circle” layer and choose Paste Layer Style to take the same style of the metal border.

36) The final result is:

37) An alternate result is the wooden circle a litle more curved.
To do this you have to merge these layers: “wood”, “brown” and “lines”

38) Right click the merged layer and choose Blending Options, use these settings:

Bevel and Emboss:

39) This is the alternate result of a wooden polished shield:

Want more tutorials?
See more recent tutorials HERE !

11 comments

1) Open in Photoshop a picture of an isolated animal, this can be a cat picture, a cow picture, etc. I use a dog picture in this example.

2) Create a new layer, rename this layer as “eye1 base”.

3) Select the Eliptical Marquee Tool and draw a circle in the left eye of the dog while holding SHIFT to get a perfect circle.

4) Fill the background with any color.

5) Right click the “eye1 base” layer and choose Blending Options, use these settings:

Bevel and Emboss:

Color Overlay: #ffffff

6) Create a new layer, rename this layer as “eye1 color”.

7) Select the Eliptical Marquee Tool again and draw another circle over the last circle a litle smaller while holding SHIFT.

8) Fill the background with any color.

9) Right click the “eye1 base” layer and choose Copy Layer Style.

10) Right click the “eye1 color” layer and choose Paste Layer Style. We will use almost the same settings.

11) Right click the “eye1 color” layer and choose Blending Options to change the color to blue:

Color Overlay: #305fcc

12) Create a new layer, rename this layer as “eye1 black circle”.

13) As before select the Eliptical Marquee Tool and draw a circle over the last circle a litle smaller.

14) Fill the background with black color #000000.

15) Move the layers to get a funny eye effect.

16) Duplicate the 3 layers to make the right eye in the same way and you are finished!

17) This is the final effect:

Now you have a funny animal picture!

Want more tutorials?
See more recent tutorials HERE !

6 comments

1) Create a new image 700×160 with transparent background. Rename this layer as “background”

2) Fill the background with #adacac.

3) Create a new layer, rename this layer as “header”, make a selection and fill it with any color.

4) Right click the header layer and choose Blending Options, use these settings:

Drop shadow:

Inner glow:

Gradient overlay: use these colors #6f6f6e —> #9b9a99

Stroke:

The result is:

5) Create a new layer, rename this layer as “menu”.

6) Select the Rounded Rectangle Tool and draw a shape similar to this:

7) Right click the menu layer and choose Rasterize Layer.

8) Right click the menu layer and choose Blending Options, use these settings:

Inner Shadow:

Outer Glow:

The result is:

9) Finally add some text for the links, a text title, an image and you are finished.

The final result is:

Now you can design a professional header for your web site.

Want more tutorials?
See more recent tutorials HERE !

8 comments