How to Make a Green & Sleek Web Layout in Photoshop

Jul 19 2009 by Ionut Ciursa | 45 Comments

How to Make a Green and 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

Setting up the Photoshop document

1 Create a new document in Photoshop, File > New (Ctrl + N) with the dimensions 980px by 830px.

Setting up the Photoshop document

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.

Setting up the Photoshop document

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

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

6 Choose Image > Canvas Size (Alt + Ctrl + C) again, and use the settings from the following image.

Green and Clean Photoshop tutorial 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).

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial 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".

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

19 With the "texture" layer still selected, go to Filter > Blur > Motion Blur and use the settings from the following image.

Green and Clean Photoshop tutorial 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%.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

28 Go to Filter > Blur > Gaussian Blur and use the settings from the following image.

Green and Clean Photoshop tutorial 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.

Green and Clean Photoshop tutorial image

32 Double-click on the "navigation bar" layer to open the Layer Style window and use the settings from the following image.

Green and Clean Photoshop tutorial 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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial 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".

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial 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".

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

52 We want the top corners of the button to be straight. To do this:

  1. Make sure that the vector mask of the "button 1" layer is active (if it’s not, click on it in the Layers palette).
  2. 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.
  3. Select the Convert Point Tool (it is under the Pen Tool) and click on the four anchor points from the top of the button.
  4. Select the Direct Selection Tool (A) again, hold down the Shift key and create your straight corners.

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

57 Create one more button following the same steps above, using a different icon and text.

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial 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".

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial image

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.

Green and Clean Photoshop tutorial 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.

Green and Clean Photoshop tutorial image

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.

Setting up the Photoshop document

Download

You can download the Photoshop (PSD) source file free of charge so that you may study it to enhance your learning.

Related Content

About the Author

Ionut Ciursa is a freelance designer based in Romania. Photoshop is one of his passions and he has been using this wonderful program for about four years. He loves to share his knowledge with others through his tutorials. He is also the founder of PSDBURN.com where he writes Photoshop tutorials.

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.

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

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

Subscribe to the comments on this article.