Design a Dark, Professional Website Layout
Design a Unique Grungy Website Layout
Members Area Tutorial: Design a Complete Ecommerce Website (Part 1)Have every post delivered to your inbox and get access to hundreds of useful design freebies.
PSDFan Extra
I’m Back!
Some of you may remember my post last week announcing that I was going away on business for a few days. I’m finally back and ready to update with some very cool new content over the next few weeks! Sorry that I wasn’t able to post last night but I got in much later than expected.
I’d also like to send a shout out to all the PSDTUTS visitors that have visited the site today. I was privileged enough to have two tutorials featured in their great post: 40 Dark and Futuristic Photoshop Effects. It’s great to have you all here checking out the site, and I hope that you’ll leave a comment or subscribe.
Introduction
Grunge layouts may be all the rage right now, but they aren’t suitable for every kind of website. For this tutorial I’m going to show you how to make a professional, clean business layout. This kind of design is perfect for companies or business related blogs.
Final Image
The final image that we will be creating is shown below:
Step 1
Create a new document (900X900px) and then use your marquee tool to create a thin rectangle near the top of your image. Fill it with a linear gradient ranging from 7EB3DD to 4C8DBF. Then go to the layer’s blending options and apply a 1px inner shadow, and then a drop shadow. You can see the settings for these effects below, as well as a close up of the outcome.
Step 2
Now create some text for your menu. To centralize my text I hold down my text tool and then drag a ‘text box’ from one edge of my image to the other, then I simply select ‘center’ as my text’s alignment and type from there. I use size 12 arial font, and make sure to reduce the letter’s kerning to -50 in the ‘character’ window. Then I create a dark blue rounded rectangle (5px radius) on a layer underneath my text layer. I reduce this shape layer’s opacity until it provides a subtle ‘hover’ effect around my ‘HOME’ menu link. The image below shows a close up of the menu so far.
Step 3
Next I create a new layer set below my menu layer set. I create a new layer and call it ‘main area’. Then a create a large rectangular selection under my menu using the marquee tool. I fill this with a linear gradient ranging from 18639B to 407CAC. The subtle drop shadow applied to the menu earlier now acts to create a nice transition between this area and the menu.
Step 4
Now I create a new document 14X14px. I use my marquee tool to make 1px squares ranging along the top/left of my image (with 1px gaps between each square). Then I go to edit>define pattern and call my pattern ‘grid pattern’. See where I’m going with this yet? In the image below I’ve given my pattern image a black background to allow you to see it easily, as well as showing it in close up obviously.
Step 5
I return to my original document and with my ‘main area’ layer selected go to blending options>pattern overlay. I select my ‘grid pattern’ pattern and reduce it’s opacity to 10%. You can see the outcome of this below:
Step 6
Create a new document (454X454px) and go to view>show>grid. Then using the main grid lines as guides, select your 1px row and 1px column marquee selection tools and create black lines that follow the grid’s layout.
Then use your custom shapes tool to create a red arrow in the top right of your grid. Rotate the arrow by -45 degrees. Then use your lasso selection tool to draw in an extension of your arrow shape that forms a graph line. When doing this be sure to hold ‘alt’ to create selection lines at a perfect 45 degree angle. Fill your selection with red to blend with your arrow.
Step 7
Now flatten your document and paste your graph image back into your original document. Go to image>transform>distort and distort your graph until it fits nicely over your ‘main area’. Use your rectangular marquee selection tool to cut away any parts of the graph that overlap onto your white background. Finally, set this layer’s opacity to 80%.
Step 8
Now duplicate your graph layer and move the duplicate below the original. Use your keyboard cursors move your duplicate 10px down and 10px left, then reduce it’s opacity by 20% (so 80% to 60%). Repeat this step several times, each time reducing the duplicate layer’s opacity by 20%. When you’ve done this merge all of your graph layers (including the original) and cut off the bottom area that overlaps onto your white background.
Step 9
Now create a new layer below your graph layer called ‘path line’. Create a curved path line using your path tool and then with a 1px white paint brush selected right click on your path and click ‘stroke path’. This should stroke your path with a 1px line. Then right click on your path and click ‘delete path’. Duplicate this layer, moving the duplicate line 3px above the original. Repeat this step a few times, and then the further you get away from the original line increase the distance between your lines. After creating a few lines that were 3px apart I began making lines 4px, 5px, 7px, 8px and finally 10px apart. This creates the illusion of shape/perspective. Then merge all of your path line layers together and reduce this merged layer’s opacity to 20%.
Step 10
Now to finish my ‘main area’ I add some text. I use Helvetica as this is always a good choice when going for that extra clean look. It’s amazing what can be achieved with a clean, bold heading with reducing kerning!
Step 11
Next create a new top layer set called ‘left column’. Create a white rounded rectangle over your blue main area, making sure that the bottom of it overlaps into your white background. Then create a small red circle with a subtle inner shadow. Finally create a white arrow at a 45 angle that cuts into your red circle. Add some text as a heading for your left column content:
Step 12
I add some content to my left column. It’s important to keep your color scheme in mind. Obviously bolder/brighter colors should stand out more, and the bulk of content text is given a lesser precedence by using smaller, gray font.
Step 13
Now create a rounded rectangle (5px radius) at the top of your right column. Go to layer blending options and apply the gradient overlay, inner shadow and drop shadow settings shown below to achieve the effect also shown:
Step 14
Then apply some text over your rounded rectangle as a sidebar heading and apply some more text underneath this. All of this sidebar content should have been created within a layer set. Once you’ve done this rather than copying each part of your sidebar content, simply right click on your layer set and click ‘duplicate layer set’, then move it down below your original. I also applied a dotted line dividing left and right columns using the vertical text tool and typing many ‘……….’s.
Step 15
Now create a new top layer set and create a new layer called ‘footer’. Drag a rectangular marquee selection across the bottom of your layout, under your content. Fill your selection with a linear gradient ranging from 5389B4 to 1A639B. Then apply some central copyright text using the textbox technique shown earlier.
Step 16
Now create a new layer set called ‘header’. Copy and paste your graph image into a new layer and resize it so that it fits nicely as a logo. Then duplicate this layer and move the duplicate below the original. Go to the new layer’s blending options and apply a color overlay (9AB7CE). Move the duplicate layer roughly 5px left and 5px down -this creates a nice clean drop shadow effect. Then add some text to finish your logo.
And We’re Done!
To finish things off I add a simple RSS signup form in the top-right of the layout, and also apply a 1px blue line under my graph to give the main area a cleaner edge. Click on the image below to view the full-sized version
I hope that you enjoyed this tutorial and will let me know your thoughts on it. The design process itself uses fairly basic Photoshop techniques, but it’s really the awareness of structure, color and detail that achieve a professional end result. Remember in your designs to always allow time for the details, but to also take a step back and refer to the basics of color and size.
Download Source File for this Tutorial
About the Author:
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
44 Comments:
Related Posts
Your Design Work, But More Awesome:
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.
welcome back Tom – great tutorial as always
I would like to mention one important point for those new to web design, regarding page dimensions:
When you design your site, don’t forget to allow room for parts of the screen that are taken up by the user’s browser. Many new designers tend to think in terms of 1024 x 768 resolution for example, and create a design exactly that size. On a 1024 x 768 monitor however, the VIEWABLE web page area is smaller, because of IE/Firefox’s navigation bars. As a general rule, I personally figure an area about 900 x 740, which allows for space along the top as well as a scroll bar on the side.
The idea of this default viewing area is also very important if you place ads on your sites. You should usually place your most important ads in the top 750 or so pixels, so they will always appear within the viewable area on every page when it loads. Users may not always scroll down.
anyway, I hope this helps, and thanks again Tom
Thanks for your advise, I’m a newbie in designing
I like the clean layout and could imagine to design a similar website. Though the tutorial didn’t show anything new to me, I like it.
My problem is to apply the design to the web. I have experience with HTML, CSS and a taste of JavaScript and PHP. Do you plan a tutorial about applying the design to the web (without dreamweaver, handwritten)?
Great work,
LBrother
Beets: Thanks for the great response as always. Thanks for clearing up the dimensions issues, I should have mentioned this in the tutorial. Maybe I could get you writing some content in the future?
LBrother: Thanks, I’m glad that you like the design. It is a fairly simple tutorial, but shows how you can achieve a professional layout fairly easily using basic design theories and practices. Many people keep asking about coding tutorials, and my answer tends to be that I probably will write some in the future. I’m actually considering a sister site to PSDFAN for code tutorials.
its nice that your back Tom:)And as always, great tutorials on this site. everyone needs to see this.keep up the nice work!!!
Ronald
Thanks Ronald!
This tutorial is fair.
Designing a site is much simple compared to coding, can you code a site Tom?
Are you a coder or a designer?
I wouldn’t agree that designing a site is simpler compared to coding. Personally I feel that good designers are a bit of a rarity, and whilst creating websites doesn’t always involve the most difficult Photoshop techniques, many people struggle to create a good result. I do code, but I personally prefer designing. I’m not saying that I’m a particularly great designer, but it’s important to create something that works visually, and keep color theory and fonts etc in mind.
nice, great tutorial!, Im doing a site!
Thanks nitos. I’d love to see your site when it’s done
Awesome tutorial. Is there a PSD of this available to download?
Hi Chris. Thanks for the kind words. PSD files will be made available for all tutorials in the near future via a membership system that I’m working on.
Helpful turtorial!
Its actually nice tutorial! And its understood , to apply your photoshop skills onto a dynamic website , you obviously need to know coding! And even application of coding ain’t that difficult , all you need is slicing , same textures through out and css! It will work wonders..
Hey Tom,
great tutorial
This tutorial is exactly what I was looking for the past few days; clean, simple, professional & Blue (which is my choice of theme color).
I am pretty new to photoshop so I had a small problem which I hopped you could help me with.
On step 14 when I tried to make the sidebar, I applayed all the blending options the same way you showed, but the marquee selection stayed empty.
Thanks for your wonderful tutorial
I hope to get your help on this.
Thanks in advance
Nivr
nice layout, thank you.
good tutorial, now can i will try soon.
Thanks for all your great comments guys!
Nivr: Sorry for the delayed response to your question, I’ve been really busy lately :/ The blending options are probably not showing up because you need to fill your shape with a solid color, and then apply the blending options (rather than applying them to an empty selection). Let me know if this works out for you.
This is a very good tutorial. It is easy to follow, and I like the outcome. I was to make a website for my grandfather, who recently began a little business, and this works great for it, I changed the colors around,but it has the basic layout.
Thanks alot!
Wow – this tutorial is very comprehensive! I appricieate it!
hey for those of you who wanted to see how to code it i have followed this tutorial last august and learned a lot from it.
recently i coded it and if you want to see the source you are welcome too.
(its only in HTML and CSS but i think thats what most of you wanted anyway)
here it is, and keep in mind i took it in my own direction some its not really the same but it is very similar.
visit this link to check it out.
http://grimhq.com/slapdash/bluebusiness/
I enjoyed this tutorial. Even though its basic I learned some new techniques. Thank you for sharing and please post more interface tutorials. Thank you.
I m trainee in web designing. But i have get full confidence after make a web page in photoshop as per above instruction.
Thanks Sir
Thanks Again
Great tutorial, let us know when we are able to download.
thanks ~!
is it possible to make this template a fluid page?
i.e stretch across the whole page?
have been looking everywhere to try and find out how to do with photo, any help greatly appreciated.
Thanks m8! Simple and Great!
thanks for tutorial
hello, tom,
I’m from china.no ps skill, but i can follow you with this tutorial. thanks. ???????????????????
Nice, clear, easy-to-follow tutorial (if only Adobe’s Photoshop user guides were that easy!!).
Like the simple – but effective – grid transparency effect. Looks good, and a piece of cake to achieve.
doomby – make a website free
nice work,man
wooow .. really nice work
this is a good & brilliant tutorial.
Clean is simple for design, you would expect to see all the social icons nowadays though!
Nice website design, very clean ad would appeal to the business market!!
Keep up the good work!!
Very good tuturial, I wish more people explain as good as you do
Very usefull and clean dwsign tutorial, thanks!
It reflects on this blog also. The said blog here is really good and can be seen on the page I am in right now. A cool tip also has been shared here.
__
Really clean and smooth I love it
It’s really a nice and useful piece of information. I am glad that you shared this helpful information with us. Please keep us up to date like this. Thank you for sharing.
Hello! I simply wish to give a huge thumbs up for the great information you could have right here on this post. I shall be coming again to your blog for more soon.
it’s really helpful, but i found this “When doing this be sure to hold ‘alt’ to create …”
it’s should be shift but not alt in photoshop cs5.
Excellent Nice website design, I’m really pleased, it
was creativity tutorial home sided, thanks for blog associate.
use full and clean design tutorial, thanks for the info!