RoyalTutorial.com

Posted by Royal Tutorial in Tutorials

Ever wanted to have an amazing looking web site, but didn’t want to fork over a few thousand bucks for the design? Of course, we all do! With this web layout tutorial for Photoshop, you can create an amazing web layout in no time. We walk you through the whole process. Let us know how it works out for you.

1. Create a new Photoshop document (CTRL+N) with the size 1200px by
1000px and fill it with #36241E color.

2. Create a new set and name it “top bg”

3. With a Rectangle
Tool (U) draw a rectangle shape, double-click on this layer to open the
Layer Style window and use the settings from the following image for Inner
Shadow:

4. Open texture.jpg image, insert this image above a shape we created.
Hit CTRL+G.

5. Add a new layer, hit CTRL+G and draw shadows with a brush tool
200-300 px #000000, set the blend mode for this layer to Multiply with
opacity 58-60%.

6.Add a new layer, hit CTRL+G and draw lightings with a brush tool
200-300 px #FFFFFF, set the blend mode for this layer to Overlay.

7. Create a new set and name it “Menu”. With a Rectangle Rounded Tool
(U) and color #915D24 draw a shape with radius 30px; set the blend mode
for this layer to Multiply and opacity 77%.

8. Use the Type Tool (T) to write your text, then double click on the
text’s layer to open the Layer Style window and apply Drop Down Shadow:

9. Well, select a rounded shape again. Choose a Polygon Tool, and use
the following options in the Options bar, then draw a triangle above the
Home button:

10. Open texture2.jpg image, select all, then choose Edit > Define
Pattern, name it “tutorial”, hit “Enter”.

11. Create a new set and name it “Body bg”

12. With a Rectangle Tool (U) draw a rectangle shape (color #412E27,
radius 5px):

then double-click on this layer to open the Layer Style window and use
the settings from the following image:

Pattern Overlay: (use pattern “Tutorial”)

13. CTRL+Click this layer to select this shape. Create a new layer
under the shape layer and fill with a black color. Deselect CTRL+D.

14. Now transform this black shape: Edit>Transform>Perspective and make
the top wider.

15. Add Gaussan Blur to this black shape: FIlter > Blur > Gaussian
blur… Use 6.5 and hit Enter:

16. Create a new set and name it “banner”. With a rounded rectangle
tool (radius 5px) create a banner’s shape similar to this one:

21. Add a new layer and name it “paper”, make a selection with the
Rectangular Marquee tool but make it bigger than our banner’s shape.
Fill it with #CD883A color. Deselect. Hit CTRL+G:

22. Well, lets make a paper effect. Set your foreground color to
#CD883A and your background color to #EEBD66.

CTRLl + click on the paper layer to select , then go to
Filter->Render->Clouds.

Add another Filter > Artistic > Palette Knife :

Add Filter > Noise > Add Noise around 6%.

CTRL+D to deselect.

23. Select a shape under the “paper” layer, double-click on this layer
to open the Layer Style window and use the settings from the following
image for Inner Glow:

“OK” and your image should look like mine below:

24. Create a new layer above the” paper”, CTRL+ G, Blend mode
“Multiply”, then take a brush tool 200 px and draw shadows similar to
this image:

You can draw them on different layers with a different opacity if
needed.

25. With a grunge brushes and pencil tool with a color #3E2B24 draw
several grunge cracks & grunge mess, set the blend mode for this layer
to Multiply, opacity 15-20%.

26. Set foreground color to #D18237, select a Custom Shape Tool, find
“Registration Target 2″ and draw a form in the new layer. CTRL+G, set
the blend mode for this layer to Multiply, opacity 49%:

27. Rasterize this “Registration Target 2″ shape:
Layer->Rasterize>Shape. Then with Eraser tool 300 px remove a rounded
side and center part of the shape:

30. Type your text with a Type Tool (T), rotate it a little bit (Edit >
Transform > Rotate)

31. Create a new set and name it “Button”.

32. Set foreground color to #990000 and with a Rounded Rectangle Tool,
radius 30, draw an button.

Transform Again: Edit>Transform>Again or CTRL+Shift+T.

Double-click on this layer to open the Layer Style window and use the
settings from the following image for Gradient Overlay and Bevel &
Emboss:

(please note that the Angle depends on your design)

and add a Drop Shadow:

“OK”.

33. Type your text with a color #F4BF7A and Transform Again:
Edit>Transform>Again or CTRL+Shift+T.

34. Put your work’s sample and our banner is completed:

35. Create a new set and name it “Body”. With a Type Tool and color
#C5AA83 put your introduction text below the banner:

28. Add a new layer and draw a rectangular shape with the Rectangal
tool and color #432607.

29. Double-click on this layer to open the Layer Style window and use
the settings from the following images:

Here is a result:

30. Duplicate this layer and transform as I did, name this “bar”:

31. Double-click on this layer to open the Layer Style window and use
the settings from the following image for Gradient Overlay:

0% #341F14

30% #38E6925

50% #3B78B32

75% #3FEBF33

100% #3A1792B

Your image should look like this one:

32 Open texture1.jpg, copy and paste above “bar” layer.

33. CTRL+Click on “bar” layer to select it. Then invert selection CTRL
+ I and remove (“Delete”) unnecessary part of the texture:

.

Texture above the “bar”:

34. Set the blend mode for this layer to Darken with opacity 55%.

Here is a result:

35. Create a new layer, name it “vertical line” and draw 1px line with
a pencil (color #36241E):

35. Double-click “vertical line” layer to open the Layer Style window
and use the settings from the following image:

36. Set opacity of this layer to 60%.

37. Put your sample text:

38. If your “content background isn’t big enough for the footer you can
make it bigger with Direct Selection Tool:

39. Create a new set and name it “footer”.

40. CTRL +click on content bg shape to load selection.

41. With Rectangular Marque Tool (click “intersect with selection from
the options bar) create a selection like this one:

42. fill it with a gradient from #000 to transparent to create a
shadow:

43. Put your text and our footer is done:

44. Well, lets create a logo placeholder. Type your text with #D89C4E,
set the blend mode for this layer to Color Dodge with opacity 55%.

And voilà!

No related posts.