Home >> Adobe Photoshop >> Create An Orange Web Layout Using Photoshop
Create An Orange Web Layout Using Photoshop

Create An Orange Web Layout Using Photoshop

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.

step1

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.

step2

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.

step3

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.

step4

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.

step5

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.

step6

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.

step7

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.

step8

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).

step9

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.

step10

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.

step11

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.

step12

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%.

step13

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.

step14

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%.

step15

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.

step16

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.

step17

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.

step18

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.

step19

Step 20

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

step20

Step 21

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

step21

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%.

step22

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.

step23

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.

step24

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.

step25

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.

step26

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.

step27

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.

step28

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.

step29

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.

step30

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.

step31

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.

step32

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%.

step33

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.

step34

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%.

step35

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.

step36

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.

step37

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.

step38

Step 39

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

step39

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%.

step40

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.

step41

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.

step42

Step 43

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

step43

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.

step44

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.

step45

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.

step46

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.

step47

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.

step48

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.

step49

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.

step50

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.

final_result_small

Ultimate Designer Toolkit

About Iggy Ko

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

26 comments

  1. Mujeeb Khumawala

    This is beautifully crafted tutorial. Excellent detailing.

    Thanks a ton.

  2. satya

    Wow man you did a lot of work there, Good one! Keep it coming…. : )

  3. Stephen Kui

    Hi there,

    It’s certainly a very well-written tutorial, and while the outcome looks nice and clean, I find the orange a bit strong as a web site color.
    With the reds or in this case oranges, it’s easy to overwhelm.
    Just my 2cents.

    Stephen

  4. Fernando de A. Cadalso

    Excellent tutorial, great !!!

  5. Aaron

    I like the details you provide man. Very cool.

  6. Harshad

    Thanks its very nice and good

  7. vigneshwarakannan

    U give lot of ideas through this Tutorials. lot of thanks.

  8. shareunlimited.net

    Great content. Thanks.

    “I love orange”

    Greetings,

  9. Brian

    Thank you so much for this contribution. What a wonderful tutorial, I really appreciate you spending the time to do something like this and sharing it with others!

  10. Robertino

    Orange, the colour of the Dutch Royals and the Dutch soccer team. Way to go.
    The marriage of business apperance and orange worked out well.

  11. Grant

    Very good man, this is an amazing layout. Can I request that you create a slicing tutorial as I am not so sure as to where to start….

  12. Mohammad Jabir Hussain

    Your all tutorials are valuable and appreciable, I am learning lots of creative designs. Thanks from the core of heart.

  13. tirath

    Awesome web layout with nice step by step tutorial
    Thanks a lot
    keep up good work
    God Bless you :-)

  14. Lary

    Nice Job :)
    Super layout.

  15. Barbara Jean

    Wow that was certainly a fabulous web tutorial. With amazingly structural super dooper colors. Thank you so much for your awesomeness effect on working on this. But I’m sorry to say it was very dreadful… I cried at the end cause the orange was WAY to much.. Chill out man.. Its just a color! You got to mix it up like sir mixalot. My greetings have been fair well. Ahola!

  16. Harsh

    very nice tutorial.

    i learn lots of from this.

    very good. thanks.

  17. vbulletin destek

    i liked that.Hard but final is perfect.thank you for this tutorial.

  18. Robert

    Michael,

    Im very thankful stumbled upon your website. Im searching for a great tutorial and I found your site. Im very lucky.

    God bless.

  19. Rushabh Vasa

    its great tutorial. thank you

  20. Web Design Hong Kong

    Thanks for the sharing!It’s a good tutorial and very handy.Geez I really love “orange”cos it pops right out!Sure there are lots to do with the layout eh?! thanks again!!!

    Hong Kong Viral Marketing

  21. fireRoxy

    very good tutorial.

  22. robert

    I am using fireworks but i think Photoshop is much better. I will try this with PS.

    nice tutorial

  23. Penang Web Design

    thanks for sharing…this is really great steps…

  24. inaocha

    as new comer in this field thank a lots for guiding with your great tutorial…

  25. fenil

    wow yaar!!!!!!
    thnx a lot gr8 i’m also a new comer

  1. Pingback: Creating Web Design Layouts | Javeed Abdul

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Create An Orange Web Layout Using Photoshop