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
45 Comments
Dainis Graveris
July 20th, 2009
really beautiful tutorial and outcome is very professional, thanks :)
twe4ked
July 20th, 2009
Nice work dude, I love step by step’s of full websites.
Cheers
Zak Groner
July 20th, 2009
“Ecosystem” is misspelled as “Ecosistem” on the featured project thing
Lamin Barrow
July 20th, 2009
Nice design. Thanx for the tutorial :)
Bariski
July 20th, 2009
Wow I like step by step tutorials. Thanks for sharing, dugg, su and tweeted.
Jasmin Halkić
July 20th, 2009
Nice tut.
Ryan
July 20th, 2009
Fantastic tutorial. Thanks alot for this. Layout looks great.
insic
July 20th, 2009
nice! love the colors and the design style.
Victor
July 20th, 2009
You guys make awesome tutorials! It may be beyond the scope of SixRevisions, but it would be cool if you did a followup that shows how to make this a wordpress theme!
hkarthi
July 20th, 2009
thanks a lot for the tutorial…
Tyler
July 20th, 2009
“36 Then right-click on this layer and select Convert to Smart Object.”
Looking at the image it looks like a clipping mask was used. I’m not sure if this was a typo or I did something wrong.
A very in depth tutorial though, I like the banner.
Nefarious LA
July 20th, 2009
Great tut, will you be converting this layout to a XHTML/CSS?
Jason
July 20th, 2009
Will there be a CSS/XHTML follow up?
Ionut Ciursa
July 20th, 2009
@Tyler: You are right! It should be “Create Clipping Mask” instead of “Convert to Smart Object.” Thank you for observing
that mistake.
Murray
July 20th, 2009
Simply amazing.
Analise Smith
July 20th, 2009
Seems the 3d ribbon is the “new” thing for web 2.0
tutorialslounge
July 21st, 2009
really professional tutorials, have you plan about further proceed (xHTML/CSS)?
Mohammad
July 21st, 2009
Perfect !
ajay
July 21st, 2009
wow this is awesome, I like step 65, 66, 67, 68.
Auré
July 21st, 2009
Waho…
Great tut.
There are some good ideas.
Joefrey
July 21st, 2009
Really cool! I got learned new techniques… :)
Jacob Gube
July 21st, 2009
@Zak Groner: Good catch, but I didn’t think it was a big deal since it’s just filler text.
@Victor: A step-by-step WordPress tutorial has been in the back burner for a while, the main reason is that there are plenty of tutorials on it already. The one thing I would like to do, eventually – is create a PSD to WordPress series where we would cover how to design the page/s, convert to HTML/CSS, then convert to a WordPress theme. No news yet on when exactly that will happen.
@Jason and @tutorialslounge: No plans on that one yet, but we do have the Grunge PSD->HTML/CSS follow-up and the Space Gallery PSD->HTML/CSS/jQuery follow-up coming down this week and the next.
@Tyler: That was my mistake, oops. I’ve edited the copy.
365icon
July 21st, 2009
great tutorial… in depth and easy to follow. keep up the good work.
Ashely Adams
July 22nd, 2009
Very nice tutorial! Color gradient effects are very impressive in webdesign as it brings a modern and stylish effect. But they should be carefully used as it may look messy if you fail to use light and shadow effects properly. 3D ribbon can also make your site look more stylish. But I prefer them in posters.
paul
July 25th, 2009
excellent tutorial with many useful techniques for a polished result.
it’s easy to follow as well!!
I want more of these
krike
July 25th, 2009
awesome :D
this is my result, http://i119.photobucket.com/albums/o134/krike06/footer_problem.png
another version I made, http://i119.photobucket.com/albums/o134/krike06/flickr_copyright_images.png
krike
July 25th, 2009
oeps wrong links
this is my result, http://i119.photobucket.com/albums/o134/krike06/greenwebtemplate.jpg
and this is another version I made, http://i119.photobucket.com/albums/o134/krike06/cmstutorialsitetemplate.jpg
Marco
July 26th, 2009
To be honest, I don’t like the color theme.
But the tutorial give me a lot of inspirations.
Simukis
July 27th, 2009
can u please explain me 61 step how to do Subtract from shape area and how to click on vector mask.
Brad
July 28th, 2009
Reminds me of the old Zeldman design.
Tuts King
August 10th, 2009
The 3D ribbon seems to be the new and trendy thing. Very Nice Tut. :)
Greg Johnson
August 10th, 2009
Ionut, I think you forgot the first step which is to clarify what colors a palette must contain to be considered predominantly ‘green’.
I’m mostly just giving you a hard time, but overall I think the layout lacks contrast and the end result is a washed out version of what would otherwise be a clean and readable layout.
A.D.K.
August 11th, 2009
Cool design.
I like it
morgan
August 19th, 2009
Tes tutoriels sont vraiment clair, j’adore ça !
Bonne continuation.
Jeanine
September 3rd, 2009
I really liked the design was trying to follow your tutorial but I did not know if you use photoshop 4 or 3 because I got lost on part 3 to make the following: ou 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.
I am learning how to use photoshop and dreamweaver I have CS3 not CS4, so any recommendations, I would totally appreciate it!
ed.inc
October 1st, 2009
hi.. nice to meet u.
nice layout. but i would like to know,
if really wanna publish to the internet,
wat and how we need to do on this layout?
can u give me some ideas or briefing?
how to change to html using this layout?
thk u.
plz pm me on my blog or my email.
thk u so much.
Sid
October 8th, 2009
Hey,
awesome tutorial. Really nice and sleek web page design. Thank you very much for this tutorial & I was wondering if you could give us tutorial on dark wordpress like templates for blogger.com. It’d be a real pleasure. Thanks!
Michael Karl
December 11th, 2009
Excellent Tutorial
I added this to my bookmarks
neeraj panwar
January 13th, 2010
one of the best tutorials i’ve seen so far
CSS Freak
January 31st, 2010
Really, really nice my friend. Nice Tut, more please…^^
Billy
February 21st, 2010
Good layout, but every time I try to code it, I get a hard line with the white shine and the dark gradient at the top, no matter how I try to do it, anyone have any help with this?
Raman
April 14th, 2010
Hi, is there any tutorial on how to make favicon icons??
niroshan
June 4th, 2010
hi this is really very nice tutorial and to the point as well thank a lot for the file as well it gave me a lot more hint i also want to be the best in photo shop its my passion and will be thanks a lot
Imran
July 7th, 2010
A great help full materials for beginners.Thanks alot for sharing.Do such wonderfull jobs.
prasanth
March 5th, 2011
wow excellent work
Leave a Comment