Create An Orange Web Layout Using Photoshop

By Web Design | 26 comments | Photoshop | Tags: Bright Web Layout, Create A Web Layout, How To Create A Web Layout Using Photoshop, Photoshop Bright Layout Tutorial, Photoshop Layout Tutorial, Photoshop Web Layout, Shout Web Layout Design, Top Web Layout, Web Layout By Photoshop, Web Layout Tutorial

Tweet

In this Photoshop tutorial I will show you how to create a clean orange layout for a web design company. I will teach you how to create subtle effects, shadows and gradients that will make the final layout to stand out. Let’s get to it!

Step 1

Open a new document in Photoshop with the size 900px by 1100px. Create a rectangular selection at the top of your document using the Rectangular Marquee Tool (M), then drag a gradient from the top to the middle of your selection, using the colors #737373 and #1e1e1e.

Step 2

Use the Type Tool (T) to add the text for your contact information in the right side of your dark bar. The font which I have used is called Tahoma.

Step 3

Create a new layer, select the Rectangular Marquee Tool (M), create a rectangular selection inside your dark bar and fill that selection with white.

Step 4

Create another rectangular selection inside your white rectangle. Then create a new layer, select the Gradient Tool (G) and drag a gradient from the top of your selection to the bottom, using the colors #c80d00 and #e15500.

Step 5

Use the Rectangular Marquee Tool (M) to create a rectangular selection beneath your red bar. Then create a new layer and fill that selection with the color #c0a496.

Step 6

Create a new layer, select the Line Tool (U), set the weight to 1px, hold down the Shift key and create two horizontal lines at the bottom of the rectangle which you have created at the previous step, using the colors #cab2a6 and #d8c6be.

Step 7

Create a new layer, then use the Line Tool (U) to create a black horizontal line with the weight of 1px. Put this line over the second one that you have created at the previous step. Set the blend mode of this layer to Overlay.

Step 8

Now we are going to create some separators. Create a new layer and use the Line Tool (U) to create two vertical lines. Use the color #0d0200 for the dark line and #fcf1ef for the light line. Then select the Eraser Tool (E), and use a soft brush to erase the bottom area of these two lines. Set the blend mode of this layer to Soft Light.

Step 9

Duplicate the lines which you have created at the previous step (Ctrl+J) and arrange all these separator using the Move Tool (V).

Step 10

Set the foreground color to white and use the Type Tool (T) to add the text for your navigation menu items. Double-click on this layer to open the Layer Style window and use the settings from the following image.

Step 11

Create a new layer, select the Line Tool (U), set the weight to 2px and create a black horizontal line at the bottom of your navigation bar. Then set the opacity of this layer to 11%. Leave a distance of 1px between this line and the navigation bar.

Step 12

Create a new group and name it “banner.” Create a new layer inside this group, select the Rectangular Marquee Tool (M) and create a rectangular selection beneath your navigation bar. Then select the Gradient Tool (G), hold down the Shift key and drag a gradient from the top of your selection to the bottom using the colors #de4000 and #e86f00.

Select the Line Tool (U) and create a line with the weight of 2px at the top of your orange rectangle using the color #e86f00.

Step 13

Create a new layer, and then use the Ellipse Tool (U) and the Rectangle Tool (U) to create some black shapes like I did. Set the blend mode of this layer to Overlay and the opacity to 19%.

Step 14

Use the Polygonal Lasso Tool (L) to create a selection like I did. Then create a new layer and fill that selection with white.

Step 15

Select the Brush Tool (B), select a square brush with the diameter of 3px, hold down the Shift key and create a black line at the top of the white shape which you have created at the previous step. Take a look at the following image for reference. Set the opacity of this layer to 6%.

Step 16

Use the Polygonal Lasso Tool (L) to create a selection like I did. Then create a new layer and fill the selection with the color #e5eef5.

Step 17

Ctrl-click on the thumbnail of the blue shape layer which you have created at the previous step to select it, then create a new layer, select the Gradient Tool (G) and drag a black to transparent gradient from the top of your selection to the bottom. Set the blend mode of this layer to Overlay.

Step 18

Select the Line Tool (U), set the color to #d4dde4 and the weight to 2px, create a new layer, and then create a horizontal line at the bottom of your blue shape.

Step 19

Download this image, open it in Photoshop, move it into your document using the Move Tool (V) and put it in the left side of your header. Then set the blend mode of this layer to Luminosity. If some areas of this image are over the blue shape that you have created at the previous steps, use the Polygonal Lasso Tool (L) to select those areas and then delete them.

Step 20

Create a new layer and use the Pen Tool (P) to create some shapes like I did.

Step 21

Now add some white stars over those shapes. You can use these brushes to create stars.

Step 22

Create a new group and name it “content.” Create a new layer inside this group, select the Rectangle Tool (U) and create a rectangle beneath your header using the color #ecdfd9. Set the opacity of this layer to 54%.

Step 23

Create a new layer, and use the Rectangle Tool (U) to create a black rectangle in the left side of your document. This will be the background for our sidebar. Set the blend mode of this layer to Overlay.

Step 24

Create a new group and name it “services.” Then select the Rounded Rectangle Tool (U), set the radius to 5px and create a rounded rectangle using the color #e66500.

Step 25

Select the Rounded Rectangle Tool (U), click on the “Paths” button from the option bar and create a rounded rectangle inside the one which you have created at the previous step. Hit Ctrl+Enter to transform the path into a selection, and then hit Delete to delete the selection.

Step 26

Use the Rectangular Marquee Tool (M) to create a rectangular selection at the top of your rounded rectangle. Then create a new layer and put it beneath the orange rounded rectangle layer. Select the Gradient Tool (G) and drag a gradient from the top of your selection to the bottom using the colors #d73a00 and #e66500.

Select the Line Tool (U) and create a horizontal line with the weight of 2px at the top of your rectangle, using the color #e66500.

Step 27

Use the Rectangle Tool (U) to create a black rectangle like I did. Then set the blend mode of this layer to Overlay.

Step 28

Create a new layer and put it beneath all the other rectangle layers. Then select the Rectangle Tool (U) and create a new rectangle using the color #e5eef5.

Step 29

Download this plus sign image, open it in Photoshop and move it into your document using the Move Tool (V). Put this plus sign over your orange rectangle and set the blend mode of this layer to Overlay. Then select the Type Tool (T) and write the word “services” next to the plus sign.

Step 30

Select the Brush Tool (B), select a square brush and create some squares like I did, using the color #cbddeb. Then add some text next to these squares, using the color #333333.

Step 31

Create two more orange rectangles in your sidebar for the “tutorials” and “major sponsors” areas. To do this, duplicate the orange rectangle which you have created at the previous steps, move it at the bottom of the first rectangle, and then change the content. Then do this one more time.

Step 32

Create a new group and name it “mini banner.” Create a new layer inside this group, select the Rectangle Tool (U) and create a rectangle using the color #e76a00, like I did.

Step 33

Add a pattern that you like over your orange rectangle. Then select the Eraser Tool (E) and erase the top area of this layer. If you want to use the same pattern as I did, click here to download it. Then set the blend mode of this layer to Overlay and the opacity to 4%.

Step 34

Select the Pen Tool (P) and create a path like I did. Hit Ctrl+Enter to transform the path into a selection. Then select a big soft white brush (B) and paint with it over the top area of your selection. Set the blend mode of this layer to Overlay and the opacity to 9px.

Step 35

Use the Pen Tool (P) to create a white shape like I did. Then set the blend mode of this layer to Soft Light and the opacity to 9%.

Step 36

Ctrl-click on the thumbnail of the orange rectangle layer to select it. Then go to Select > Modify > Contract and contract the selection by 2px. Create a new layer, select the Gradient Tool (G) and drag a #652e00 to transparent gradient from the top to the middle of your selection. Set the blend mode of this layer to Overlay.

Step 37

Create a new layer and repeat the previous step, but this time drag a #c68f62 to transparent gradient from the bottom to the middle of your orange rectangle. Set the blend mode of this layer to Overlay.

Step 38

Create a new layer, select the Line Tool (L), set the weight to 4px and create a horizontal line beneath your orange rectangle, using the color #d7bbab.

Step 39

Create a new layer, select the Pen Tool (P) and create a shape like I did using the color #d7bbab.

Step 40

Create a new layer and use the Pen Tool (P) to create a black shape like I did. Then set the blend mode of this layer to Overlay and the opacity to 28%.

Step 41

Select the Type Tool (T) and write the text “WEBDESIGN TO SHOUT ABOUT!” on the shape that you have created at the previous steps. Then double-click on this layer and use the settings from the following image for Stroke.

Step 42

Download this cube image, open it in Photoshop and move it into your document using the Move Tool (V). Then duplicate this cube three times and arrange them like I did. Set the blend mode of each cube layer to Overlay.

Step 43

Select the Type Tool (T) and add some text next to each cube.

Step 44

Create a new group and name it “main.” Then select the Type Tool (T) and write the words “page title” beneath your orange rectangle, using the color #e76c00.

Step 45

Select the Rectangle Tool (U) and create a white rectangle like I did. Then select the Line Tool (U), set the weight to 2px and create a horizontal line at the top of your white rectangle, using the color #e66500.

Step 46

Create a new group and name it “footer.” Then select the Rectangular Marquee Tool (M) and create a rectangular selection at the bottom of your document. Select the Gradient Tool (G) and drag a gradient from the top of your selection to the bottom, using the colors #737373 and #1e1e1e.

Step 47

Use the Rectangular Marquee Tool (M) to create a selection at the top of your dark rectangle. Then select the Gradient Tool (G) and drag a #bfb3ad to transparent gradient from the bottom to the top of your selection. Leave a distance of 1px between this gradient the and the dark bar.

Step 48

Select the Type Tool (T) and write the content for your layout in the “main” area. Then select the Line Tool (U), set the weight to 1px and add some separators between articles, using the color #e6e6e6.

Step 49

Select the Type Tool (T) and write the word “SHOUT” in the right side of your header. I used a font called Cafeta. Then write the word “WEBDESIGN” beneath the name of the layout and set the blend mode of this layer to Overlay. Take a look at the following image for reference.

Step 50

Use the Type Tool (T) to add a copyright statement in the right side of your footer and the text for your page names in the left side of your footer.

Final Result

Well, that’s it! You can view the final image preview bellow, or view a larger version here. I hope you enjoyed this tutorial.