How to Make a Green & Sleek Web Layout in Photoshop
In this web design tutorial, you’ll learn how to create a beautiful, green, and sleek layout in Photoshop. You’ll learn popular design techniques such as creating a 3D ribbon and professional-looking color gradient effects.
Final Result
Check out the preview of what we’re about to create together. Don’t forget to click on the image to see the full-scale version of the web layout.
Setting up the Photoshop document
1 Create a new document in Photoshop, File > New (Ctrl + N) with the dimensions 980px by 830px.
2 If you don’t see the rulers along the side of Photoshop’s interface, toggle it on by choosing View > Rulers (Ctrl + R to toggle the Rulers on and off).
3 Drag two vertical guides and two horizontal guides onto the canvas (click and hold down on a ruler, and then drag towards the canvas), putting them at the edges of your document. Between these guides, we will create the background for the content of our layout.
Creating the layout’s background
4 Select the Rounded Rectangle Tool (U), set the Radius to 10px and the Color to #E0E0AC, and create a rounded rectangle on your entire canvas (start by dragging from the top corner of the canvas, then drag down towards the bottom corner opposite of it). Name this layer "bg".
5 Now, we are going to make the canvas bigger. First, we will make some room at the top of our document so we can put the logo there. Go to Image > Canvas Size (Alt + Ctrl + C) and use the settings on the following image.
6 Choose Image > Canvas Size (Alt + Ctrl + C) again, and use the settings from the following image.
7 Click on the Background layer in the Layers Panel to activate it, set the foreground color to #6C821C, and fill it in using the Paint Bucket Tool (G).
8 Create a new layer above the Background layer and name it "gradient".
9 Select the Gradient Tool (G) from the Tools Panel, and draw a White to Black gradient from the top to the bottom of your document on the "gradient" layer.
10 Set the Blend Mode of "gradient" layer to Overlay and the layer opacity to 10%.
11 With the "gradient" layer still selected, go to Layer > Layer Mask > Reveal All.
12 Choose the Gradient Tool (G) from the Tools Panel and draw a Black to Transparent gradient from the bottom to the top of your document. Take a look at the following image for reference.
13 Right-click on the "gradient" layer and select Convert to Smart Object.
14 Then go to Filter > Noise > Add Noise and use the settings from the following image.
15 Create a new layer, select the Brush Tool (B), select a white Soft brush, set the Diameter to 300px, and create a white line at the top of your canvas.
16 Set the opacity of this layer to 50% and name it "highlight".
17 Create a new layer beneath the "bg" layer, hit the D key to reset your the foreground color to black and the background color to white, and then go to Filter > Render > Clouds.
18 Right-click on this layer and select Convert to Smart Object, then name this layer "texture".
19 With the "texture" layer still selected, go to Filter > Blur > Motion Blur and use the settings from the following image.
20 Then go to Filter > Sharpen > Sharpen.
21 Add a layer mask to the "texture" layer (Layer > Layer Mask > Reveal All).
22 Select the Gradient Tool (G) and draw a black to transparent gradient from the bottom to the top of your document.
23 Set the Blend Mode of this layer to Overlay and the layer opacity to 40%.
Setting up the background for the content
24 Double-click on the "bg" layer to open the Layer Style window and use the settings from the following image for Outer Glow layer style.
25 Create a new layer, set your foreground color to #2A2009, choose the Paint Brush Tool (B) from the Tools Panel, select a Hard Brush with the Diameter of 25px, and finally, create a circle at the bottom of your rounded rectangle.
26 Right-click on this layer and select Convert to Smart Object.
27 Then go to Edit > Free Transform (Ctrl + T) and stretch the circle like I did in the following figure.
28 Go to Filter > Blur > Gaussian Blur and use the settings from the following image.
29 Then set the Blend Mode of this layer to Multiply and the layer opacity to 30%. Finally, name the layer "shadow", and put it beneath the "bg" layer.
Creating the navigation bar
30 Now, we are going to create the navigation bar. Select the Rectangle Tool (U) and set the color to #D8D8A5.
31 Create a rectangle with the height of 60px at the top of your big rounded rectangle and name this layer "navigation bar".
Note: Open the Info palette (F8), so you can see the height of your rectangle while you are creating it.
32 Double-click on the "navigation bar" layer to open the Layer Style window and use the settings from the following image.
33 You probably noticed that the big rounded rectangle is not rounded anymore at the top because of the navigation bar. To correct this, we are going to use a clipping mask. Right-click on the "navigation bar" layer, and then select Create Clipping Mask.
34 Now we are going to create a background for the current page button. Select the Rectangle Tool (U), set the color to #A6A43F, and create a small rectangle with the height of 60px.
35 Set the opacity of this layer to 15% and name it "current page button".
36 Then right-click on this layer and select Create Clipping Mask.
37 Choose the first four layers by holding down the Ctrl key and then clicking on them in the Layers Panel, and hit Ctrl + G to group them. Name the group "bg & navigation bar".
38 Select the Type Tool (T) and add the text for your navigation menu items using the color #A6A43F. I used the font Avenir LT 65 Medium for this design, if you don’t have this font, feel free to use any other font that you want.
Defining a Pattern for our "Featured Project" area
39 Now, we are going to create a pattern. Create a new Photoshop document, File > New (Ctrl + N), with the dimensions 5px by 5px, and with a transparent background.
40 Set the foreground color to #2A2009, choose the Pencil Tool (B) from the Tools Panel, and select a Square brush with the diameter of 1px and create a square in the middle of your document.
41 Then go to Edit > Define Pattern, name your pattern something that’s memorable, and click OK. You may now close this Photoshop document.
Creating the "Featured Project" area
42 Select the Rectangle Tool (U) and create a rectangle with the height of 330px using any color you want.
43 Double-click on the layer that has your newly-created rectangle from the previous step to open the Layer Style window and use the settings from the following image.
44 Name this layer "pattern".
45 Select the Rounded Rectangle Tool (U), set the Radius to 8px, set the Color to #A6A43F, and create a rounded rectangle with the width of 940px and the height of 240px.
46 Set the opacity of this layer to 50% and name it "featured project bg".
47 Select the Rectangle Tool (U), set the color to #A6A43F, and create a rectangle with the dimensions 610px by 220px. This will be the background for the featured project image. Name this layer "image bg."
48 Insert any image you want into your document using the Move Tool (V) (I used a screenshot of the Envato website).
49 Put the image above the rectangle which you have created at the previous step, right-click on the layer of the image and select Create Clipping Mask. Name this layer "image".
50 Select the Type Tool (T) and add some text in the right side of your featured section. In the next image, I wrote the name of the font, the color and the size of my texts. Group all these text layers and name the group "text".
Creating call-to-action buttons
51 Now, we are going to create two buttons at the bottom of the featured project section. Select the Rounded Rectangle Tool (U), set the Radius to 8px and the color to #A6A42F, and create a small rounded rectangle. Name this layer "button 1".
52 We want the top corners of the button to be straight. To do this:
- Make sure that the vector mask of the "button 1" layer is active (if it’s not, click on it in the Layers palette).
- Select the Direct Selection Tool (A) and click on the path that you see around the button; now you should see two anchor points at each corner.
- Select the Convert Point Tool (it is under the Pen Tool) and click on the four anchor points from the top of the button.
- Select the Direct Selection Tool (A) again, hold down the Shift key and create your straight corners.
53 Set the opacity of the "button 1" layer to 30%.
54 Then add some text using the Type Tool (T) and the color #EAEAB7.
55 You can also add an icon. I used an icon from the Function Icon Set by Function.
56 Group the text layer, the icon layer, and the "button 1" layer by holding down Ctrl and clicking on each layer in the Layers Panel, and then name the group "button 1".
57 Create one more button following the same steps above, using a different icon and text.
58 To keep our Photoshop file organized, group all the layers and groups which are selected in the following image and name the group "featured project".
Creating the 3D ribbon
59 Select the Rectangle Tool (U) and create a rectangle with the height of 130px using the color #A6A43F. Name this layer "ribbon background".
60 Select the Rounded Rectangle Tool (U), set the Radius to 10px and create a rounded rectangle in the left side of the rectangle which you have created at the previous step. You can also drag some guides onto the canvas to help you in the following steps.
61 Click on the vector mask of the rounded rectangle which you have created at the previous step to make it active, then select the Rounded Rectangle Tool (U), click on the Subtract from shape area button icon from the Option bar, and create a rounded rectangle at the top of the other one. Look at the following image for reference.
62 Create a new layer, right-click on it and select Create Clipping Mask.
63 Then select the Gradient Tool (G) and draw a White to Transparent gradient like I did in the following figure.
64 Set the Blend Mode of this layer to Overlay, the opacity to 30% and name it "highlight".
65 Select the Rounded Rectangle Tool (U), set the color to #878533 and create a rounded rectangle above the "ribbon background" layer.
66 Then select the Rectangle Tool (U), click on the "Subtract from shape area" button from the Options bar and create a rectangle over the green rounded rectangle to hide the area that we don’t need.
67 Then double-click on this layer to open the Layer Style window and use the settings from the following image.
68 Repeat the steps above, but this time work at the right side of the ribbon.
69 Group all the layers which are part of the ribbon and name this group "ribbon".
70 Create a new layer beneath the "ribbon background" layer, and then make a shadow like you did at the bottom of the layout in a previous section above, under "Making the navigation bar and the background for the content".
71 Select the Rounded Rectangle Tool (U), set the Radius to 8px, the color to #E1E0C1 and create four rounded rectangles with the dimensions 220px by 110px.
72 Set the opacity of these layers to 50% and group them by holding down the Ctrl key and clicking on each layer in the Layers Panel, then pressing Ctrl + G to group them. Name the group "images".
73 Choose the Horizontal Type Tool (T) from the layers panel, and add some text at the bottom of your layout. You can also use some icons from Function Icon Set by Function like we did in the call-to-action buttons.
74 Use the Type Tool (T) and the color #E0E0AC to write the name of your site at the top of your document.
75 Double-click on this layer and use the settings from the following image.
76 Then use the Type Tool (T) again to write a tagline.
77 To make everything complete, you can add four images into your document and put them on your ribbon.
Congratulations, we’re done!
If you followed along with the tutorial, you should have something along the lines of the figure below. Click on the figure to view the full-scale version of it.
Download
You can download the Photoshop (PSD) source file free of charge so that you may study it to enhance your learning.
- green-and-sleek-web-layout.zip (ZIP, 15.8 MB)
Related Content
- How to Create a Clean Web 2.0 Style Web Design in Photoshop
- How to Create a Dark and Sleek Web Design from Photoshop
- How to Create an Illustrative Web Design in Photoshop
- Related categories: Tutorials and Web Design
About the Author
