Create your own website
Content
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Line25
Create a Clean Modern Website Design in Photoshop
Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.
(http://line25.com/wp-content /uploads/2009/photoshop-webdesign/Picture-27-lg.jpg)
Taking inspiration from various modern website designs, we’ll produce this clean and crisp website layout. Key features include horizontal bands to separate the content into specific areas; a colourful header area introducing the site; a friendly welcome message with examples of work; two-column main layout and a resource filled footer.
1 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
A good start with any design is to sketch out the plans on paper, the free reign of the pencil helps flesh out the rough layout with ease.
Planning out a wireframe also helps develop a hierarchy and gives an insight into the best positions for key elements of the design.
2 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Create a new document in Adobe Photoshop, I tend to make the size of the artwork similar to that of a common widescreen monitor to give a good representation of the overall look of the site.
Place guides at a 960px width in the centre of the document and create a basic grid to place the page items against.
3 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Begin with the creation of the header bar. Draw a selection across the full width of the document and fill with white. Double click the layer to open the layer styles and add a Gradient Overlay from grey to white running vertically.
Next, draw the main header area where the featured content will be placed. On a new layer draw a selection, then add a gradient overlay with a selection of two vibrant colours. Also add a subtle inner shadow to add depth to the design.
4 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Subtle touches of texture can really bring a design to life. With the header area selected with a mask press CMD+SHIFT+C to Copy Merged, then paste on a new layer. Go to Filter > Noise > Add Noise to produce a simple texture, then set the blending mode to Multiply and reduce the opacity to suit.
Paste in the company logo, position on screen according to the grid, then add some styling through the layer style options. Add a gradient overlay to match the feature header colours, then create a very soft inner shadow.
5 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Use the Type tool to create the text of the main navigation, set the type in a mid-grey while using a slightly darker version for the active link.
The feature header is a great place to introduce the website, with the vibrant background colour it is given main focus to the user. Use this space to place a snappy intro title in a custom font that matches the company branding.
6 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Continue fleshing out the introductory content, but this time use Arial or Helvetica as the font so that the text can be set in plain old html, without any image replacement techniques.
Position a laptop into the featured area (a range of examples can be found here (http://www.blog.spoongraphics.co.uk/articles/apple-products-in-web-design) ), this fits in well with the nature of the fictional company, and makes a great focal area to display examples of work on the laptop screen.
7 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Emphasise this focal point with a radial gradient emitting from behind the laptop. This adds that little extra detail that lifts the element from the page.
Underneath the main header, draw another selection and fill with a grey-white gradient.
8 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Split the mid section of the page into two columns with guides in relation to the grid lines. On the left we’ll have a main content panel, whereas the right will hold a thinner sidebar. Use the Type tool to add some dummy content. Alter the sizing and leading to give digestible and easily readable passages of text.
Below this main content area could hold an area to display the latest blog posts. Split the column into another two columns and draw up a selection of example post entries. The title links should stand out to the user as something clickable, so change their colour to give a visual clue.
9 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Use the Rounded Rectangle tool to draw a box in the sidebar. The original colour doesn’t matter too much as we’ll be styling it up in the next stage.
Double click the layer and add a range of layer styles, including a grey-white gradient, a thin grey stroke and a soft inner shadow.
10 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Use this sidebar panel to develop a Featured Project section. Elements could include a small screenshot and passage of text.
Draw another rounded rectangle to use as a button, add a couple of layer styles such as a gradient overlay and stroke to style the button to match the overall clean/grey theme.
11 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Create a short, descriptive label for the button prompting the user to continue through the site to view further projects.
Signify the end of the content by drawing a footer area onto the screen. Fill the area with a light grey to differentiate it from the main content area.
12 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Draw a circular mask and fill it with a black to transparent radial gradient. Press CMD+T to transform the selection, squash and stretch the gradient to form a long thin shadow-like graphic.
Position the shadow centrally on the screen, then delete the excess area above the footer. The result is a subtle shadow that lifts the main page, adding a little touch of detail to the design.
13 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
The footer area is a great place to hold secondary page elements, one example could be a client login area. Flesh out the design with the Type tool, then draw a couple of input boxes. Style the boxes with a soft inner shadow.
Use the central area of the footer to display a message about the company. Set the text using consistent header and body text font sizes.
14 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Finally, add a point of contact in the lower right. These details will then be handy to the user throughout the site. Give prominence to the most important aspects through size and stronger weights or colour.
(http://line25.com/wp-content /uploads/2009/photoshop-webdesign/Picture-27-lg.jpg)
The final design fits all the desired elements neatly onto the page, while keeping everything aligned to the base grid. The result is a structured and clean layout with lots of subtle greys to add depth. Colour is then used to highlight feature areas and important content. Stay tuned (http://feeds2.feedburner.com/Line25) for a future tutorial where we’ll look at coding up the
15 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
visual into a complete XHMTL/CSS webpage. 55
Tweet
StumbleUpon 8,553
152
Like
16
1 0
16 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
119 Comments
Marco says:
May 4 , 2009 at 8:54 am
Here I see the “subtle gradient” at work and I must say, it really looks good. The purple bar absolutely stands out, giving it more attention to the product. Keep up the great work Chris :) .
Mampranx says:
May 4 , 2009 at 9:1 1 am
Nice …, can’t wait to see the next tutorial. Screencast version will be nice … :D
Callum Chapman says:
May 4 , 2009 at 1 0:4 7 am
Great tutorial and nice outcome! I’ll be returning for part 2 because that’s the part I can’t do! I’m slowly learning by flicking through tutorials and tearing apart some templates… I’ll get there eventually!
Mitesh says:
May 4 , 2009 at 1 1 :1 5 am
This is a great tutorial by the way:) I’m always find myself getting stuck in the concepting page
achikochi says:
May 4 , 2009 at 1 1 :55 am
Nice tutorial, great example of use the 960 grid.
Jaswinder says:
May 4 , 2009 at 1 1 :57 am
17 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Excellent tutorial I might start using photoshop over fireworks now.
Andrew Houle says:
May 4 , 2009 at 1 2 :3 7 pm
Awesome end result. And I love how you’ve shown the importance of sketching, wireframes, and grids. Great job!
Simmessa says:
May 4 , 2009 at 3:24 pm
Chris, your work is first class as usual, love the little details… Keep up the excellent work! All the Best! Simmessa.com
cssah says:
May 4 , 2009 at 4:59 pm
excellent work ,thanks so much.
akkis says:
May 4 , 2009 at 6:56 pm
Thank you very much for another design tutorial! I’m waiting the second part with CSS “magic” :)
SOS Media Web Design says:
May 4 , 2009 at 8:25 pm
Great tutorial. I like the use of inner shadow, adds a nice illusion of dimensionality. Thanks.
Hassan says:
18 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
May 4 , 2009 at 8:58 pm
Hey Chris, I don’t get the 960 grid thing? What is the use of it? Can you please refer me some place where they explain the use of 960 psd template? Like how is it useful?
joyoge designers' bookmark says:
May 4 , 2009 at 1 1 :1 6 pm
nice website tutorial, thanks..
Igor Mattos says:
May 4 , 2009 at 1 1 :3 0 pm
Wow, superb tutorial ! Really thanks!
henry says:
May 4 , 2009 at 1 1 :59 pm
more of these would be nice! great job!
Andy Feliciotti says:
May 5, 2009 at 1 2 :04 am
another great tutorial, damn this site!
henry says:
May 5, 2009 at 5:01 am
while i was following this tutorial i realized that you dont really give specific details. I have to figure out how you got things done maybe in the upcoming tutorials it would be nice to see more detailed instructions with this tutorial.
Thomas | Tutorial King says:
May 5, 2009 at 9:47 am
19 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Great tutorial, very useful, some of your technique are very interesting
WebUnicorn says:
May 5, 2009 at 9:54 am
nice article but at the end it’s about how to translate good design to valid cross browser CSS/XHTML
Matt says:
May 5, 2009 at 1 :22 pm
I think it’s a good tutorial, but for many newcomers to Photoshop the steps might be a bit vague. Like henry above had said how he had troubles, I think steps should be explained more in-depth. I know how long it takes to write up a tutorial of such length but that makes it even more important to get it right for everyone. Regardless, thanks for submitting an awesome web design tutorial!
Dan Alvares says:
May 5, 2009 at 1 0:06 pm
Now make it CSS/XHTML valid and compatible with the most used browsers
Helio Navarro says:
May 5, 2009 at 1 0:2 3 pm
mui interesante y parece bastante sencillo de hacer, tendre ke intentarlo haber ke sale :D
tucson web design says:
May 6 , 2009 at 2:45 am
Brilliant! I agree on the css – love to see the code behind this. I really like the emphasis on planning.
20 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Matt says:
May 6 , 2009 at 4:38 am
And although it is a good design, shouldn’t login forms like the one at the bottom follow the ‘above the fold’ rule? Elements critical to business should be above the fold, and I’d say that a Client Login is a critical element, depending on what is beyond that login awaiting them.
Myfacefriends says:
May 6 , 2009 at 5:55 am
very good indeed! very nice! mate!
herya says:
May 6 , 2009 at 1 :53 pm
Great tutorial Chris thank you! Well I for one absolutely appreciate the brevity of this tutorial, if you know your way around Photoshop a long winded 8 page tutorial is obsolete and here you can learn more about the ideas than technical steps – there are loads of more detailed tech tutorials around but this one stands out b/c of ideas presented in such a clear way. Thanks again!
Mark says:
May 6 , 2009 at 2:1 8 pm
WOW! Nice Tutorial…can’t wait to integrate it to HTML
Marc Kuiper says:
May 6 , 2009 at 3:44 pm
Great tutorial, thanks!
Kayla says:
21 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
May 6 , 2009 at 5:1 2 pm
Great tutorial, much more insight and detail to other similar tutorials I’ve found.
Grégoire Noyelle says:
May 6 , 2009 at 8:1 8 pm
Very cool Chris. I really like how you use the layer style. Thanks !
Raj says:
May 6 , 2009 at 1 0:4 0 pm
The steps are difficult to reproduce as a new bee. It would be helpful if you could provide a download of the psd file. Thanks a lot.
Meg Schlagel says:
May 7 , 2009 at 8:1 0 pm
I found this article to be very interesting. I work for a company that promotes great priced websites and we use a lot of Photoshop to build graphics. Thanks!
robby says:
May 7 , 2009 at 1 1 :2 4 pm
Love the final product Chris, keep it up!
Dave says:
May 8, 2009 at 1 2 :3 3 am
Nice design, there was a good tutorial like this on nettuts as well. If this was a screencast I think I’d pay to watch it!
22 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
T-Law says:
May 8, 2009 at 4:23 am
Really great tutorial, I like modern designs, thanks.
CgBaran Tuts says:
May 8, 2009 at 9:1 9 am
Great tutorial thanks
Sharon says:
May 8, 2009 at 1 1 :52 am
thanks, good tutorial .. :)
devlim says:
May 8, 2009 at 1 :20 pm
waiting for upcoming tutorial.!
Melanie says:
May 9 , 2009 at 7 :52 am
Thanks so much for this tutorial! Used some of the techniques in making my aunt’s website :) Looks like I need to explore the joys of layer styles more, because you used them in some creative ways =] Thanks so much again!
23 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Professional & reliable web designing & web development services at affordable prices. says:
May 9 , 2009 at 1 0:4 0 am
Hello guys here we have got a great stuff , this tutorial helped me a lot in attaiing good knowledge.
CallaB says:
May 1 0, 2 009 at 5:57 am
Sweet! Had a little trouble with creating the circular mask….but I’m a newbie. Looking forward to the XHTML/CSS tutorial!
David says:
May 1 2 , 2 009 at 1 0:1 7 pm
Were can i download this template? (i do not want to create it)
Megan says:
May 1 4 , 2 009 at 4 :2 9 am
I’m just curious about the various layers you used in this tutorial. For example, is each of the navigation words on it’s on layer or one single layer viz. Home is on it’s own layer Our work is on it’s own layer, or are they all on a single layer?? Great stuff though for sure!
Suzanne says:
May 1 4 , 2 009 at 1 0:59 am
This may help you guys as well http://www.mutinydesign.co.uk/web-design-resources /creating-a-website-in-photoshop-part-1/ (http://www.mutinydesign.co.uk/web-design-resources
/creating-a-website-in-photoshop-part-1/)
jez says:
May 1 6 , 2 009 at 2 :52 am
24 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
not for the novice, sorry couldn’t follow, just needed a few more intermediate steps…
Pr0_dEsIgn says:
May 1 8, 2 009 at 3 :52 pm
Nicely Illustrated! Excellent tutorial for Photoshop users from start to finish. I really like your approach with a sketch drawing for a design reference. Thanks for the tips!
Mr.Woodruff's Student says:
May 1 9 , 2 009 at 1 2 :00 am
This tutorial was great, and I love the outcome. My teacher, Mr. Woodruff, assigned us to follow this tutorial (and the next part, as well) for a homework assignment. I have to say, of all the tutorials he’s had us use over the last 3 years, this is the best and has the best result! Thank you!
Los says:
May 1 9 , 2 009 at 5:4 6 am
Great tutorial, I finally decided to do one of these tutorials. I’m a bit envious of Mr. Woodruff’s Student, the closest I came to anything computer wise was my computer literacy class. My school is so broke we couldn’t until like last year afford software like photoshop. Grrrr. Tomorrow I’m gonna do the Markup of the site during lunch.
Amy says:
May 1 9 , 2 009 at 4 :4 8 pm
Thank you so much for a GREAT tutorial!! You should get a Twitter page!! If or when you do: http://twitter.com/Devineca (http://twitter.com/Devineca)
Amy says:
May 1 9 , 2 009 at 4 :51 pm
Nvm about the twitter part. just found it, lol, whoops ;)
25 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Comments are now closed
26 of 26
6/8/2012 3:51 PM
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Line25
Create a Clean Modern Website Design in Photoshop
Build a complete website design mockup for a fictional design studio, starting with the creation of the initial layout then moving on to designing the individual page elements. The result is a modern, crisp and clean webpage layout ready for coding.
(http://line25.com/wp-content /uploads/2009/photoshop-webdesign/Picture-27-lg.jpg)
Taking inspiration from various modern website designs, we’ll produce this clean and crisp website layout. Key features include horizontal bands to separate the content into specific areas; a colourful header area introducing the site; a friendly welcome message with examples of work; two-column main layout and a resource filled footer.
1 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
A good start with any design is to sketch out the plans on paper, the free reign of the pencil helps flesh out the rough layout with ease.
Planning out a wireframe also helps develop a hierarchy and gives an insight into the best positions for key elements of the design.
2 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Create a new document in Adobe Photoshop, I tend to make the size of the artwork similar to that of a common widescreen monitor to give a good representation of the overall look of the site.
Place guides at a 960px width in the centre of the document and create a basic grid to place the page items against.
3 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Begin with the creation of the header bar. Draw a selection across the full width of the document and fill with white. Double click the layer to open the layer styles and add a Gradient Overlay from grey to white running vertically.
Next, draw the main header area where the featured content will be placed. On a new layer draw a selection, then add a gradient overlay with a selection of two vibrant colours. Also add a subtle inner shadow to add depth to the design.
4 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Subtle touches of texture can really bring a design to life. With the header area selected with a mask press CMD+SHIFT+C to Copy Merged, then paste on a new layer. Go to Filter > Noise > Add Noise to produce a simple texture, then set the blending mode to Multiply and reduce the opacity to suit.
Paste in the company logo, position on screen according to the grid, then add some styling through the layer style options. Add a gradient overlay to match the feature header colours, then create a very soft inner shadow.
5 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Use the Type tool to create the text of the main navigation, set the type in a mid-grey while using a slightly darker version for the active link.
The feature header is a great place to introduce the website, with the vibrant background colour it is given main focus to the user. Use this space to place a snappy intro title in a custom font that matches the company branding.
6 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Continue fleshing out the introductory content, but this time use Arial or Helvetica as the font so that the text can be set in plain old html, without any image replacement techniques.
Position a laptop into the featured area (a range of examples can be found here (http://www.blog.spoongraphics.co.uk/articles/apple-products-in-web-design) ), this fits in well with the nature of the fictional company, and makes a great focal area to display examples of work on the laptop screen.
7 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Emphasise this focal point with a radial gradient emitting from behind the laptop. This adds that little extra detail that lifts the element from the page.
Underneath the main header, draw another selection and fill with a grey-white gradient.
8 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Split the mid section of the page into two columns with guides in relation to the grid lines. On the left we’ll have a main content panel, whereas the right will hold a thinner sidebar. Use the Type tool to add some dummy content. Alter the sizing and leading to give digestible and easily readable passages of text.
Below this main content area could hold an area to display the latest blog posts. Split the column into another two columns and draw up a selection of example post entries. The title links should stand out to the user as something clickable, so change their colour to give a visual clue.
9 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Use the Rounded Rectangle tool to draw a box in the sidebar. The original colour doesn’t matter too much as we’ll be styling it up in the next stage.
Double click the layer and add a range of layer styles, including a grey-white gradient, a thin grey stroke and a soft inner shadow.
10 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Use this sidebar panel to develop a Featured Project section. Elements could include a small screenshot and passage of text.
Draw another rounded rectangle to use as a button, add a couple of layer styles such as a gradient overlay and stroke to style the button to match the overall clean/grey theme.
11 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Create a short, descriptive label for the button prompting the user to continue through the site to view further projects.
Signify the end of the content by drawing a footer area onto the screen. Fill the area with a light grey to differentiate it from the main content area.
12 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Draw a circular mask and fill it with a black to transparent radial gradient. Press CMD+T to transform the selection, squash and stretch the gradient to form a long thin shadow-like graphic.
Position the shadow centrally on the screen, then delete the excess area above the footer. The result is a subtle shadow that lifts the main page, adding a little touch of detail to the design.
13 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
The footer area is a great place to hold secondary page elements, one example could be a client login area. Flesh out the design with the Type tool, then draw a couple of input boxes. Style the boxes with a soft inner shadow.
Use the central area of the footer to display a message about the company. Set the text using consistent header and body text font sizes.
14 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Finally, add a point of contact in the lower right. These details will then be handy to the user throughout the site. Give prominence to the most important aspects through size and stronger weights or colour.
(http://line25.com/wp-content /uploads/2009/photoshop-webdesign/Picture-27-lg.jpg)
The final design fits all the desired elements neatly onto the page, while keeping everything aligned to the base grid. The result is a structured and clean layout with lots of subtle greys to add depth. Colour is then used to highlight feature areas and important content. Stay tuned (http://feeds2.feedburner.com/Line25) for a future tutorial where we’ll look at coding up the
15 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
visual into a complete XHMTL/CSS webpage. 55
Tweet
StumbleUpon 8,553
152
Like
16
1 0
16 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
119 Comments
Marco says:
May 4 , 2009 at 8:54 am
Here I see the “subtle gradient” at work and I must say, it really looks good. The purple bar absolutely stands out, giving it more attention to the product. Keep up the great work Chris :) .
Mampranx says:
May 4 , 2009 at 9:1 1 am
Nice …, can’t wait to see the next tutorial. Screencast version will be nice … :D
Callum Chapman says:
May 4 , 2009 at 1 0:4 7 am
Great tutorial and nice outcome! I’ll be returning for part 2 because that’s the part I can’t do! I’m slowly learning by flicking through tutorials and tearing apart some templates… I’ll get there eventually!
Mitesh says:
May 4 , 2009 at 1 1 :1 5 am
This is a great tutorial by the way:) I’m always find myself getting stuck in the concepting page
achikochi says:
May 4 , 2009 at 1 1 :55 am
Nice tutorial, great example of use the 960 grid.
Jaswinder says:
May 4 , 2009 at 1 1 :57 am
17 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Excellent tutorial I might start using photoshop over fireworks now.
Andrew Houle says:
May 4 , 2009 at 1 2 :3 7 pm
Awesome end result. And I love how you’ve shown the importance of sketching, wireframes, and grids. Great job!
Simmessa says:
May 4 , 2009 at 3:24 pm
Chris, your work is first class as usual, love the little details… Keep up the excellent work! All the Best! Simmessa.com
cssah says:
May 4 , 2009 at 4:59 pm
excellent work ,thanks so much.
akkis says:
May 4 , 2009 at 6:56 pm
Thank you very much for another design tutorial! I’m waiting the second part with CSS “magic” :)
SOS Media Web Design says:
May 4 , 2009 at 8:25 pm
Great tutorial. I like the use of inner shadow, adds a nice illusion of dimensionality. Thanks.
Hassan says:
18 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
May 4 , 2009 at 8:58 pm
Hey Chris, I don’t get the 960 grid thing? What is the use of it? Can you please refer me some place where they explain the use of 960 psd template? Like how is it useful?
joyoge designers' bookmark says:
May 4 , 2009 at 1 1 :1 6 pm
nice website tutorial, thanks..
Igor Mattos says:
May 4 , 2009 at 1 1 :3 0 pm
Wow, superb tutorial ! Really thanks!
henry says:
May 4 , 2009 at 1 1 :59 pm
more of these would be nice! great job!
Andy Feliciotti says:
May 5, 2009 at 1 2 :04 am
another great tutorial, damn this site!
henry says:
May 5, 2009 at 5:01 am
while i was following this tutorial i realized that you dont really give specific details. I have to figure out how you got things done maybe in the upcoming tutorials it would be nice to see more detailed instructions with this tutorial.
Thomas | Tutorial King says:
May 5, 2009 at 9:47 am
19 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Great tutorial, very useful, some of your technique are very interesting
WebUnicorn says:
May 5, 2009 at 9:54 am
nice article but at the end it’s about how to translate good design to valid cross browser CSS/XHTML
Matt says:
May 5, 2009 at 1 :22 pm
I think it’s a good tutorial, but for many newcomers to Photoshop the steps might be a bit vague. Like henry above had said how he had troubles, I think steps should be explained more in-depth. I know how long it takes to write up a tutorial of such length but that makes it even more important to get it right for everyone. Regardless, thanks for submitting an awesome web design tutorial!
Dan Alvares says:
May 5, 2009 at 1 0:06 pm
Now make it CSS/XHTML valid and compatible with the most used browsers
Helio Navarro says:
May 5, 2009 at 1 0:2 3 pm
mui interesante y parece bastante sencillo de hacer, tendre ke intentarlo haber ke sale :D
tucson web design says:
May 6 , 2009 at 2:45 am
Brilliant! I agree on the css – love to see the code behind this. I really like the emphasis on planning.
20 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Matt says:
May 6 , 2009 at 4:38 am
And although it is a good design, shouldn’t login forms like the one at the bottom follow the ‘above the fold’ rule? Elements critical to business should be above the fold, and I’d say that a Client Login is a critical element, depending on what is beyond that login awaiting them.
Myfacefriends says:
May 6 , 2009 at 5:55 am
very good indeed! very nice! mate!
herya says:
May 6 , 2009 at 1 :53 pm
Great tutorial Chris thank you! Well I for one absolutely appreciate the brevity of this tutorial, if you know your way around Photoshop a long winded 8 page tutorial is obsolete and here you can learn more about the ideas than technical steps – there are loads of more detailed tech tutorials around but this one stands out b/c of ideas presented in such a clear way. Thanks again!
Mark says:
May 6 , 2009 at 2:1 8 pm
WOW! Nice Tutorial…can’t wait to integrate it to HTML
Marc Kuiper says:
May 6 , 2009 at 3:44 pm
Great tutorial, thanks!
Kayla says:
21 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
May 6 , 2009 at 5:1 2 pm
Great tutorial, much more insight and detail to other similar tutorials I’ve found.
Grégoire Noyelle says:
May 6 , 2009 at 8:1 8 pm
Very cool Chris. I really like how you use the layer style. Thanks !
Raj says:
May 6 , 2009 at 1 0:4 0 pm
The steps are difficult to reproduce as a new bee. It would be helpful if you could provide a download of the psd file. Thanks a lot.
Meg Schlagel says:
May 7 , 2009 at 8:1 0 pm
I found this article to be very interesting. I work for a company that promotes great priced websites and we use a lot of Photoshop to build graphics. Thanks!
robby says:
May 7 , 2009 at 1 1 :2 4 pm
Love the final product Chris, keep it up!
Dave says:
May 8, 2009 at 1 2 :3 3 am
Nice design, there was a good tutorial like this on nettuts as well. If this was a screencast I think I’d pay to watch it!
22 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
T-Law says:
May 8, 2009 at 4:23 am
Really great tutorial, I like modern designs, thanks.
CgBaran Tuts says:
May 8, 2009 at 9:1 9 am
Great tutorial thanks
Sharon says:
May 8, 2009 at 1 1 :52 am
thanks, good tutorial .. :)
devlim says:
May 8, 2009 at 1 :20 pm
waiting for upcoming tutorial.!
Melanie says:
May 9 , 2009 at 7 :52 am
Thanks so much for this tutorial! Used some of the techniques in making my aunt’s website :) Looks like I need to explore the joys of layer styles more, because you used them in some creative ways =] Thanks so much again!
23 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Professional & reliable web designing & web development services at affordable prices. says:
May 9 , 2009 at 1 0:4 0 am
Hello guys here we have got a great stuff , this tutorial helped me a lot in attaiing good knowledge.
CallaB says:
May 1 0, 2 009 at 5:57 am
Sweet! Had a little trouble with creating the circular mask….but I’m a newbie. Looking forward to the XHTML/CSS tutorial!
David says:
May 1 2 , 2 009 at 1 0:1 7 pm
Were can i download this template? (i do not want to create it)
Megan says:
May 1 4 , 2 009 at 4 :2 9 am
I’m just curious about the various layers you used in this tutorial. For example, is each of the navigation words on it’s on layer or one single layer viz. Home is on it’s own layer Our work is on it’s own layer, or are they all on a single layer?? Great stuff though for sure!
Suzanne says:
May 1 4 , 2 009 at 1 0:59 am
This may help you guys as well http://www.mutinydesign.co.uk/web-design-resources /creating-a-website-in-photoshop-part-1/ (http://www.mutinydesign.co.uk/web-design-resources
/creating-a-website-in-photoshop-part-1/)
jez says:
May 1 6 , 2 009 at 2 :52 am
24 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
not for the novice, sorry couldn’t follow, just needed a few more intermediate steps…
Pr0_dEsIgn says:
May 1 8, 2 009 at 3 :52 pm
Nicely Illustrated! Excellent tutorial for Photoshop users from start to finish. I really like your approach with a sketch drawing for a design reference. Thanks for the tips!
Mr.Woodruff's Student says:
May 1 9 , 2 009 at 1 2 :00 am
This tutorial was great, and I love the outcome. My teacher, Mr. Woodruff, assigned us to follow this tutorial (and the next part, as well) for a homework assignment. I have to say, of all the tutorials he’s had us use over the last 3 years, this is the best and has the best result! Thank you!
Los says:
May 1 9 , 2 009 at 5:4 6 am
Great tutorial, I finally decided to do one of these tutorials. I’m a bit envious of Mr. Woodruff’s Student, the closest I came to anything computer wise was my computer literacy class. My school is so broke we couldn’t until like last year afford software like photoshop. Grrrr. Tomorrow I’m gonna do the Markup of the site during lunch.
Amy says:
May 1 9 , 2 009 at 4 :4 8 pm
Thank you so much for a GREAT tutorial!! You should get a Twitter page!! If or when you do: http://twitter.com/Devineca (http://twitter.com/Devineca)
Amy says:
May 1 9 , 2 009 at 4 :51 pm
Nvm about the twitter part. just found it, lol, whoops ;)
25 of 26
6/8/2012 3:51 PM
Create a Clean Modern Website Design in Photoshop
http://line25.com/tutorials/create-a-clean-modern-website-design-in-phot...
Comments are now closed
26 of 26
6/8/2012 3:51 PM
