Her

Home Photoshop Tutorials Web Layout Website Navigation

Website Navigation

Author: Adobeusersite.com Author's URL: www.adobeusersite.com More by this author

Here you are going to learn to make an image which can be used as a navigation item on a website Page. You can put different text in the image like home, products, contact us etc. I have designed the image by first creating a wood texture so this image can really find use by some woodworking enthusiast who wants to design a woodworking site. so you may asked what is new in this tutorial. well I have used texturizer and Brush Stroke type Angled Stroke to make sort of wood grains or a wood plank.

1. First of all open a new document. Use size 300 pixel by 300 pixel at 72 pixels/inch.

image 1

2. Fill it with the color code #6BB970. This should be the color of the rest of the website ground.

image 2

3. Draw a shape with the Rectangular Marquee Tool, as shown below.

image 3

4. Select New Layer1.

image 4

5. Fill it with the color code #9F6D32, and Deselect Ctrl +D. Now what we have is a post or a bar. you will see what I mean very soon.

image 5

6. Now to make a copy of the Layer1 Press Ctrl+J.

image 6

7. Fill it with Black color, and then Deselect Ctrl+ D.

image 7

8. Now Drag the Layer1 and put it on the copy of Layer1.

image 8

image 9

9. Here with the Pen Tool draw a New shape, as you can see in the Image below. The shape is like a flag.

image 10

10. Now Right click > select Make Selection > select Feather 0.2 in make selection> click ok.

image 11

11. Now select the Layer2.

image 12

12. Fill the Layer with the color code # DFA458, and then Deselect.

image 13

Now press Ctrl+J to make a copy of the Layer2.

image 14

14. Click on the copy of Layer2 while pressing Ctrl and fill the color code #845520 and Deselect. So this way we just created a thick flag sort of shape and you see more in next steps.

image 15

15. Now here drag the Layer2 and put it on the Layer2 copy.

image 16

image 17

image 18

16. Now select Filter > select Texture > select Texturizer.

image 19

17. In the Texturizer adjust Texture, Scaling, Relief, Light Direction according to the Image below.

Use Texture = canvas

Scaling = 85%, Tip try scaling at 10-20% and see the difference.

image 20

18. Now here our Image will look like this.

image 21

19. Now select Layer2 and then select Rectangular Marquee Tool. Right click select Stroke.

image 22

20. Select Stroke, Location and blending as shown in the dialog box below. click ok when done.

image 23

21. Now the Image will look like this.

image 24

22. Select Layer2 and then Press Ctrl+E.

image 25

image 26

23. Now here Select Filter and select Brush Stroke. Use Angled Stroke as shown below.

image 27

24. Now the Image will look like this.

image 28

25. With the Elliptical Marquee Tool Draw a Ellipse as shown below. I am actually drawing a nail head in this step of photoshop tutorials.

image 29

26. Now select New Layer as you can see in the red circle below.

image 30

27. Now select Gradient Tool and in the Gradient Tool click on the Place as you can see in the red circle below.

image 31

28. From here select the color and press ok.

image 32

29. Fill the color with the Gradient Tool and then Deselect.

image 33

30. Now Double click on the Layer2 and select Drop Shadow. Here adjust structure and Quality according to the Image below, click ok.

image 34

31. Now the Image will look like this.

image 35

32. Press Ctrl+J and with the Move Tool slide the created circle and put it on the other end. That way we just put 2 nails in the wood plank.

image 36

33. With the Text Tool Type some text as per your project need.

image 37

34. Now Double click on the Text Layer and then in the Blending Option adjust ans select General Blending and Advance Blending according to the Image below.

image 38

35. Now select Bevel and Emboss and adjust and select Structure and Shading according to the Image below.

image 39

36. Now here select Outer Glow and then adjust and select Structure and Elements according to the Image below.

image 40

37. Final Image.

Website Navigation