Complete Grunge Web Layout Tutorial in Photoshop
admin Posted on 16. Sep, 2009 | Comment in!
Today with my 6 hours effort for you peoples who love to read all our articles, now here is Complete Grunge Web Layout Tutorial in Photoshop, we will go through the process of very professional designing that free photoshop template which you can use personal and even first time offering you commercial too, you may get free Photoshop PSD File which using in this tutorial.
Step #1 Create New File
We’re start now, in this step create new file (Ctlr + N or File – New) that is 1400 wide and 1150 height.
Step #2 Download a grunge Backgound images
we just choose an free grunge background image for our website design
Grunge Backgrounds – Paper 4 by zerocustom1989
Step #3 Set Ruler Design Area
in this below screen shot you may get idea about design area where we put all contents, you may get idea from Photoshop info penel of right column in this below picture
Step #4 Designe Header Links Area
in below screen get futher idea to make top header link background using Photoshop custom shape tool.
Step #4 Designe Header Background
top area where we create background for add our required top links as you seen in below picture.
Step #5 Header with Top Menu
after create top background under top menus using font-face Myriad Pro, write there links as you seen in underneath picture, there we using an custome shape (rounded ractangle) with Background Color #cae10e and active link color is #010101 of active top Tab.
Step #5 Header (Company Name/Personal Name)
My header will contain only personal name, where you can write your company name too with same grunge font which also available here Download Link (Dead Secretary by Dirt2.com – Andrew2) now further with the logo, you seen our logo where font-size is 50pt, this should be aligned use guide.
Dead Secretary by Dirt2.com – Andrew2
Step #5 Header Social Bookmarking Area
We will add some famous social bookmarking website icons (twitter, Digg, facebook and stumbleupon), we’re getting these transparent icons from http://webtreats.mysitemyway.com, you can Download Free Glossy Orange Orb Social Networking Icons (3.8 MiB)
Step #6 Draw Guides for Body contents
In this below picture we draw guides as reference for decide our contents in 3 columns where we put Services, about and Experience description text which is design requirement.
Step #7 Body contents Title Background
this is very creative tip for you when we going to draw an background using brush”Charcoal Large Smear” 63 Master Diamiter, just draw wherever you want to make your titles.
Step #8 Body contents Title Area
Leave an titles with some description text box with the size of 340px wide and height according to text data which you seen there in single title example, with font color #000000.
Step #9 Body contents Title Area
Then duplicate the same content titles with description text the middle and right columns.
in portfolio category i am using sample portfolio screen shots from Templatemonster just as sample and not selling here.
Step #9 Body contents (Blog Detail Area)
in this step create an black background with the size of 1024px wide there we will be adding 6 blog designs (some of these are my friend blog websites) that showcase work from my blog websites, you find your own images that you want tp showcase and crop, resize, make white border the images will be 313px wide and 174px height.
Step #9 Footer Area
Another very importent area of any professional website where we put our links and copyright information.
there we create an rounded rectangle for write bottom links.
Step #10 Final Website Design Look
Here is finaly a professional look at what we have designed for you.
hope you’d like so you can Download PSD File use can your personal and commercial use, but please leave your comments below too about this tutorial effort.
If you enjoyed reading, consider sharing it on one of these social bookmarking sites.
Enjoy this Post? Subscribe to Tutorial Lounge
Comments
Add a Comment
Live Feed’s
- 25 Elegant Icon Design Tutorials By Photoshop February 2, 2012 asim9ice
- How to Deal With Your ‘Right-brained’ (Creative) Human Resource February 2, 2012 Arfa Mirza
- 35 Adobe InDesign Tutorials – Enhance your Print Medial Skills February 1, 2012 asim9ice
- Increase your Romanticism With Valentine Wallpapers January 31, 2012 asim9ice
- 25 Graffiti Art Tutorials Which Making Aesthetic Sense January 30, 2012 asim9ice
deniz
September 16, 2009
Thanks for sharing.
Turkish Web template tutorial.
http://bestpstutorials-tr.blogspot.com/2009/06/photoshop-website-template-design_5235.html
Complete Grunge Web Layout Tutorial in Photoshop | Design Newz
September 17, 2009
[...] Complete Grunge Web Layout Tutorial in Photoshop [...]
Tweets that mention Complete Grunge Web Layout Tutorial in Photoshop | Tutorial Lounge -- Topsy.com
September 17, 2009
[...] This post was mentioned on Twitter by Tutorial Lounge, Kasira, Photoshop Tutorial, Web Design Newsand others. Web Design News said: Complete Grunge Web Layout Tutorial in Photoshop: Today with my 6 hours effort for you peoples who love to rea.. http://bit.ly/LujFb [...]
loves free brushes
September 17, 2009
you make it look so easy.
tfs.
coolestbrushes.com
surreal
September 17, 2009
Great design, thank you very much!
Complete Grunge Web Layout Tutorial in Photoshop
September 17, 2009
[...] More here: Complete Grunge Web Layout Tutorial in Photoshop [...]
Bendesign
September 17, 2009
Nice Tutorial.
Complete Grunge Web Layout Tutorial in Photoshop | favSHARE.net
September 17, 2009
[...] Read the original article [...]
Complete Grunge Web Layout Tutorial in Photoshop
September 17, 2009
[...] See the rest here: Complete Grunge Web Layout Tutorial in Photoshop [...]
Complete Grunge Web Layout Tutorial in Photoshop | Web Design Updates
September 17, 2009
[...] Complete Grunge Web Layout Tutorial in Photoshop [...]
Completo layout stile Grunge in Photoshop « TagTagWeb
September 17, 2009
[...] Sito web: http://www.tutoriallounge.com [...]
Pablo
September 17, 2009
Thanks for taking the time to share your knowledge with the community! =)
joyoge bookmark
September 20, 2009
very nice theme, thanks for the tut and share..
yasir mehmood
September 21, 2009
very nice work thanx for the sharing
favSHARE
September 22, 2009
This article has been shared on favSHARE.net. Go and vote it!
43 Photoshop Tutorials for Grunge Style « Acris Design – Web Design Resources and Inspiration
September 24, 2009
[...] Complete Grunge Web Layout Tutorial in Photoshop [...]
Stunning Collection of Grunge Design Photoshop Tutorials | Tutorials Palace
September 25, 2009
[...] Complete Grunge Web Layout Tutorial in Photoshop [...]
Ultimate Free Grunge Wordpress Themes and 1000+ grunge resources and tutorials | Master Design
November 25, 2009
[...] Complete Grunge Web Layout Tutorial in Photoshop | Tutorial Lounge [...]
Janardhanaya
June 20, 2010
Interesting article. Were did you got all the information from…
Round-up of some 50 Best Layout Photoshop Tutorials « Andrei Melencovici Graphic and Web Design Blog
October 02, 2010
[...] Click here to read this Photoshop tutorial [...]
Round-up of some 50 Best Layout Photoshop Tutorials | Programming Blog
October 06, 2010
[...] Click here to read this Photoshop tutorial [...]
Round-up of some 50 Best Layout Photoshop Tutorials | Putra Kuningan
October 17, 2010
[...] Click here to read this Photoshop tutorial [...]