Create a Clean and Professional Web Design in Photoshop
In this Photoshop web design tutorial we are going to design a smashing, clean, and professional website layout in Photoshop. The layout we are doing in this tutorial can be used as personal or corporate website design.
Update: This is the first part of a two-part series that will teach you how to create the layout in Photoshop, and then how to convert it to a standards-compliant (X)HTML web design.
The "Clean and Professional Web Design" Series
- Part 1: Create a Clean and Professional Web Design in Photoshop
- Part 2: Coding a Clean and Professional Web Design
Final Preview
Have a look at the layout that we’ll be creating in this tutorial. You can see the final preview of the image below or click here for a full size version.
Prepare your Photoshop document
1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image.
Set the units and rulers settings
2 Make sure that you are working in pixel units, which is the standard fixed unit for web design. Set up the following settings for your Rulers from the Preferences dialog window (Ctrl/Cmd + K); click on Units & Rulers and ensure that you have everything set as shown in the figure below.
Add guides to designate the content area
3 Activate Photoshop Rulers from View > Rulers. Toggle the visibility of the rulers by pressing "Ctrl/Cmd + R". Also open the Info panel from Window > Info (shortcut key: F8). The Info panel gives useful information depending on the selected tool. By pressing "M", choose the Rectangular Marquee Tool and create a box that is 120px wide from the left corner of the canvas. You can adjust the size by looking into the Info panel while making the selection. Now click on the left ruler and drag a guide to the right of the marquee selection as shown in the image below.
4 Move this selection on the right edge of the canvas. Assign another guide to the left side of the selection.
Your canvas now should look like this:
Creating the logo
5 Now we are going to create the logo for our website. The logo is going to be very simple and it will have a color gradient effect. Create a new group (Layer > New > Group) and name it "logo".
6 Select the Horizontal Type Tool (T) and type "SMASHING" (or the name of your website) in capital letters.
7 Then in the Character panel, set the font to Arial, the style to Bold and the size to 42pt. Also set the anti-aliasing method option to Sharp and use the color #101112. You can also set these options in the Options bar when the Type Tool is the active tool.
8 Double-click to open the Layer Style dialog box. Select Gradient Overlay, click the Gradient Editor and use the settings as shown below.
9 Put the "SMASHING" type layer at the distance of 35px from top and 0px from left guide. You can do this accurately using the Move Tool (V) and your arrow keys. Duplicate this type layer (Layer > Duplicate Layer). Move the duplicated layer right next to the "SMASHING" word and edit the text to "Dzine". Repeat Steps 6, 7, 8 but use different gradient colors (Left color stop: #b27625, Right color stop: #e5ad27) for the word "Dzine".
10 Select the Horizontal Type Tool (T) and add a tag line under the logo with following settings.
11 The final logo should look like the image below. To activate/deactivate the guides, go to View > Show > Grid or use the shortcut Ctrl/Cmd + ;
Creating the navigation bar
12 Create a new group and name it "navigation", it should be above "logo" group. Drag a guide from the top ruler, 150px below the top edge of the canvas. Select the Rectangle Tool (U) and draw a horizontal line of 4px height with a color of #e3ab27, across the canvas.
13 Add navigation links at 12px-high from this horizontal line and 20px to the right of the left guide. Select the Rounded Rectangle Tool (U) and draw a box with the size of 72px by 35px. Move this layer below the text links and name the layer "hover". Straighten the bottom rounded corners with the Convert Point Tool. Move the sides of uneven edges below with an 8px margin to make the edges equal to other inner edges at bottom. Double-click the "hover" layer to open the Layer Style dialog box and add gradient colors (Left color stop: #e5ad27, Right color stop: #b27625). Select the Horizontal Type Tool (T), select the text, "Home" and change color to #ffffff (white).
Creating the "call us" section
14 Next we are going to create the "call us" section at the top-right of our design (exactly opposite side of the logo). Download this phone icon and place this near the right guide. Name this layer "phone icon". Select the Horizontal Type Tool (T). Add a phone number on the left of the phone icon using the font Arial, with the size set at 20pt and the color #292929. Add some related text below the phone number using font Arial, set at Bold, with a size of 11pt and a color of #595959.
Creating the header
15 Now we are going to a create the header section. Create a new group and name it "header".
16 Select the Rectangle Tool (U) and create a rectangle shape with the size of 1200px by 440px. Put this rectangle at a distance of 1px below the navigation bar and name this layer "header bg". Double-click the "header bg" layer, select the Gradient Overlay layer style and have these two colors in the Gradient Editor (Left color stop: #2e2226, Right color stop: #7a7556). See the image below for the rectangle position and colors detail.
17 Create another rectangle from the Rectangle Tool (U) with the size of 960px by 360px. Put this rectangle at the distance of 40px from the top of the "header bg" layer and 0px from the left guide. Name this layer "header container". Preview below what we have done until now with the design.
Creating the "featured project" section
18 Next we will create the featured project section. Create a new group inside the header group and name it "fp". Select the Rectangle Tool (U) and create a rectangle with the size of 630px by 340px at the distance of 10px from the top and the left of header container. Give this layer color of #000000 and name it "fp container".
19 Open an image in Photoshop to place here as your featured project. Go to Select > All (Ctrl/Cmd + A), then Edit > Copy (Ctrl/Cmd + C). Come back to the our web design. Create a new layer above the "fp container" layer and go to Edit > Paste (Ctrl/Cmd + V) to paste in your featured project image. Rename this layer to "fp image". Right-click the "fp image" layer and select Create Clipping Mask. Now the image is visible only inside the rectangle ("fp container"). Make adjustments so that your featured project image is similar to the one shown below.
20 Go to Edit > Transform > Scale (Ctrl/Cmd + T). From the Options bar, click in the rotation box and type -4 and press enter twice to adjust the angle. Stay on the same layer ("fp image"), and select Luminosity as the blending mode of this layer.
21 Next we are going to create the title and description bar for the featured project image. Select the Rectangle Tool (U) and create a rectangle shape with the size of 630px by 90px using color #161718. Change opacity of this layer to 90% and name it "title bg". Place this rectangle as shown in the image below.
22 Create another rectangle with the size of 630px by 1px using color #9c9c9c and name it "title horizontal line". Place this rectangle on the top edge of the contents of the "title bg" layer.
23 Add a title and description inside the rectangle we created in Step 21, using the following settings for title and description.
For the title:
- font: Arial, color: #ffffff, size: 25pt and anti-aliasing method option: Sharp
For the description:
- font: Arial, color: #a4a4a4, size: 12pt and anti-aliasing method option: None
Creating the "quick quote" section
24 Create another group inside the header group and name it "quick quote". Select the Rectangle Tool (U) and create a rectangle with the size of 300px by 340px. Place this rectangle at the distance of 10px to the right of the featured project section and name it "qq container".
25 We will copy a Layer Style from another layer we created in a previous step. Go inside the "navigation" group, right-click the "hover" layer, select Copy Layer Style, go back to the "qq container" layer, right-click and select Paste Layer Style. We have the same Layer Style of the "hover" layer for our "qq container" now.
26 Select the Horizontal Type Tool (T). Write "Quick Quote" inside "qq container" at the distance of 20px from the top and left edges of the containing box. Set the font family to Trebuchet MS (or a web-safe font of your preference) with the color of white (#ffffff) and anti-aliasing method option set to Sharp. We are going use the Rounded Rectangle Tool (U) to create three form fields. Select the Rounded Rectangle Tool (U) and set the radius to 3px. Then create two rounded rectangles with the size 260px by 35px using the color of white (#ffffff). Then name the shape layers as "field1" and "field2" respectively. Create the third rounded rectangle with the size of 260px by 75px using a white color (#ffffff) and name it "field3". Select the Horizontal Type Tool (T) and create labels for each form field.
27 Select the Rounded Rectangle Tool (U) and create a box of 80px by 35px and name it "submit btn".
28 Double-click the layer to open the Layer Styles dialog window and tick the Gradient Overlay checkbox from left. Click the Gradient Editor and change colors of the gradient as shown below.
29 Select the Horizontal Type Tool (T) and type "Submit" using the font Arial, style Bold and size at 13pt. Select both layers in the Layers panel ("submit btn" and "Submit text").
30 Choose the Move Tool (V) from the Tools panel and click Align vertical centers and Align horizontal centers from the Options bar. (Alternatively, you can get the same result by going to Layer > Align > Vertical Centers and Layer > Align > Horizontal Centers).
Creating the main content area
31 Create a new group and name it "content". Select the Rectangle Tool (U). Create a rectangle of 300px by 175px and name it "c01". Place this layer 30px below the header and 0px from the left guide. Double-click the layer and use the settings from the following image.
32 We are going to add content to this box now. Select the Horizontal Type Tool (T) and add the text, "About SmashingDzine". Make a selection of the "About" word using the Horizontal Type Tool (T), and then change its color to #b47825. Then make a selection of the "Smashing" word, and then change the color to #2f2f2f. Add a little description and a link text beneath the title. The following options were used for the title, description and link text. (You can adjust these options as needed).
For the Title:
- Font: Trebuchet MS, style: Normal, size: 24pt, anti-aliasing method: Sharp
For the Description:
- Font: Arial, style: Normal, size: 12pt, anti-aliasing method: None, color: #767676
For the Link text:
- Font: Arial, style: Bold, size: 13pt, anti-aliasing method: None, color: #252525, Underline
33 We will add a square box next to the description now. Select the Rectangle Tool (U) and color #ffffff, hold down the Shift key to maintain the proportions and create a square with the size 88px by 88px. Move this square at a distance of 10px from the left of rectangle ("c01"). Name this layer "border". Double-click the layer to open the Layer Style dialog window, and add a Stroke layer style with the following settings:
34 Create another box with the size of 82px by 82px and place it in the center of the "border" layer. Name this layer "box" and change the color of this square to #d5d5d5. Select all layers in this group ("content" group), go to Layer > New > Group from Layers (Ctrl/Cmd + G) and rename this new group "about".
Note: The inside grey square box is a place holder for an image and can be replaced with any image of your choosing.
35 Duplicate the "about" group (Right-click on the group and select Duplicate Group) and name it "services". Right-click on the "services" group and select Duplicate Group again and name it "portfolio". We have three groups now ("about", "services", and "portfolio"). Move the last group ("portfolio") to the right guide as shown below.
36 Select all three groups in the Layers panel, and then go to Layer > Distribute > Horizontal Centers to space them out equally. Click here to see the full size image of the following image.
37 Change the titles for the "services" group (center) and "portfolio" group (right) as shown below. (You can change these titles according to your requirement.)
Creating the footer
38 Create a new group and name it "footer". Select the Rectangle Tool (U) and create a rectangle with the size of of 1200px by 100px at the bottom of our design layout. Name this layer "footer bg". Use the same Gradient Overlay style as the "header bg" layer by right-clicking the "header bg" layer and choosing Copy Layer Style. Go back to the footer group, right-click the "footer bg" layer and select Paste Layer Style.
39Select the Horizontal Type Tool (T) and add copyright text and footer links text on the left using the font Arial, size of 12pt and a grey color (#dddddd).
40 We are going to add the email subscription section on the right. Create a new group inside the "footer" group and name it "subscribe". Select the Rounded Rectangle Tool (U) and create a rectangle of 85px by 35px. Name this layer "subscribe btn".
41 Repeat Step 26 for adding the form fields and labels.
42 Select the Horizontal Type Tool (T) and type "Subscribe" using the font Arial, style set to Bold and size at 13pt. Select both layers ("subscribe btn" and "Subscribe text").
43 Repeat Step 28 for creating the subscribe button.
44 Select the Rounded Rectangle Tool (U) and set the radius to 3px. Create a rounded rectangle with the size 210px by 35px using a white color (#ffffff) and name this shape layer as "email field". Add a text line above "email field".
Final Result
OK, that’s it and we are done. Here is the final result. Click on the image below to see the full size layout.
Thanks for following along with my tutorial. I hope you all enjoyed and learned something new from this tutorial. Kindly leave your comments below and share your thoughts and opinions, I would love to hear them. You can also share this design tutorial to your friends if you think it could be helpful to them!
Download the source file
You can download the Photoshop file (PSD) of this tutorial from the link below as a ZIP archive.
- clean-professional-weblayout (ZIP, 2.4 MB)
Related Content
- How to Create a Clean Blog Design with Photoshop
- Coding a Clean Web 2.0 Style Web Design from Photoshop
- Create a Slick and Minimalist Web Layout in Photoshop
About the Author
Waheed Akhtar is a freelance web designer from Dubai, UAE. He is the founder and editor of Boost Inspiration, where he showcases different creative resources of Digital Art, Graphic Design, Illustration, Photography and Typography for inspiration. You can reach him via Twitter or Facebook.
105 Comments
Bradley Davis
February 17th, 2010
Well explained tutorial! Will go through it again and build a site from it for fun to see how it turns out. Thanks!
Julie Hodges
February 18th, 2010
This is brilliant – Perfect timing for me – Your efforts and your illustrations etc have just saved me a heap of time. Thanks for your knowledge
Matthew Heidenreich
February 18th, 2010
You did a great job explaining everything, not sure i am the biggest fan of the results though. Feel like there could have been more done. Other than that, great work Waheed.
stellacyan
February 18th, 2010
thank you! looks pretty good. is there the coding tutorial later? I’m hoping for that.
stells.
Jacques van Heerden
February 18th, 2010
Awesome post Waheed, great outcome too.
I like the simplicity.
Jacques
Wes
February 18th, 2010
nice tutorial! very clean..i like this one…
Rich
February 18th, 2010
OK, but what’s the point doing it in Photoshop? The real part of web design is creating the HTML and CSS, so this kind of misses the main part.
Donniel
February 18th, 2010
Very interesting article. I’m always in favor of websites where the focus is on a clean, usable site. We need more of these!
neil
February 18th, 2010
@Rich
I think you have been miss guided somewhere mate, the biggest part of building a web site is getting the look and feel right BEFORE you start piecing it together with html/css. After doing a rough sketch of a site, the next thing is to open up PS and get it looking nice.
Great tutorial by the way.
Jacob Gube
February 18th, 2010
Great job Waheed! I thought I was the only one who used the Rectangular Marquee Tool and the Info Panel to set up my guides! I find it to be a quick and accurate way to make your PS guides. Looking forward to more tutorials and articles from you!
Amos Vryhof
February 18th, 2010
Oh, I really like that layout. I might change my site to something similar…. with my own “branding”
Smashing Share
February 18th, 2010
Thanks Jacob and to all for the comments. I tried to keep this tutorial very simple. I have plan to do the coding part for this tutorial soon (only if SixRevisions approved :))
btpig
February 18th, 2010
Thanks for your share~~~~~~
Smashing Share
February 18th, 2010
Thanks Jacob and to all for the comments. I tried to keep this tutorial very simple to understand specially for beginners. I have plan to do the coding part for this tutorial soon (only if SixRevisions approved :))
Alias
February 18th, 2010
great design. how do you hook up the fields in the forms to send emails (for subscribe and quote)?
DiggReader
February 18th, 2010
This is great!
Wow, the Photoshop design is a well done article. Good job!
Will there be a follow up, explaining how, for example, to slice the images, then create the xhtml code and css code?
Jordan Walker
February 18th, 2010
I really enjoy using PhotoShop to present a visual depiction of a page or template.
Hillary
February 18th, 2010
Very nice and clean! Thank you for the tutorial!
Josh
February 18th, 2010
Excellent tutorial. You’ve described your actions in great detail, which is really good for beginners (like me). Looking forward to more contributions from you Waheed. Cheers.
Tessa
February 18th, 2010
Hey if you’re looking for a guest writer to do the css/html tutorial I’m your gal! Check out the tutorials on my site, I’ve also written a couple for NetTuts.
btpig
February 18th, 2010
the color of the gradient in the step 28 is wrong~ It should be #5e5e5e
Matthew Heidenreich
February 18th, 2010
@Rich
That is a terrible way of looking at it. Sounds like the view of a programmer :) The main part of a web design is laying it out in photoshop and then taking it from there to html and css these days it seems. Why else do you think there are so many html to css services floating around ;-)
Andrew
February 18th, 2010
What version of Photoshop was used for this tutorial?
Jacob Gube
February 18th, 2010
@Andrew: Just based on the screenshots, I’d say CS4.
NYWD
February 18th, 2010
Well Explained tutorial..
Nina
February 18th, 2010
Great and helpful tutorial, thanks for posting :D
Codesquid
February 18th, 2010
Very very nice! Very easy to follow, thumbs up from me!
Arcnerva
February 18th, 2010
Very cool tutorial, thanks.
yiyo
February 18th, 2010
and how converted to HTML
Smashing Share
February 18th, 2010
Thanks to all for the feedback.
@Alias @DiggReader: Coding (XHTML/ CSS) part for the tutorial coming soon. So stay tuned
@btpig: Thanks for pointing out that mistake in image.
@Andrew: As already mentioned by @Jacob, its CS4 :)
Andrew
February 18th, 2010
@Jacob: Thanks!
Bryan McAnulty
February 19th, 2010
I usually draw out a rectangle to setup the site width. Just draw it out any size and then use free transform (cmd/ctrl+T) to type out the width in the status bar followed by “px”.
I also will frequently go back to the canvas size dialog to expand the canvas as the site layout becomes more defined.
Imon
February 19th, 2010
Great tutorial, and fantastic outcome
peter
February 19th, 2010
LOL, still using PS to design website? give me a break. I bet you all are touting your “web 2.0″ skillz to your clients (friends) right? Keep designing your shiny buttons and reflections – real web designers use codes.
joel
February 19th, 2010
I think a follow up tutorial, actually coding and creating the website would be immensely educational to many of your readers. Excellent post
@joelyboyblue
Olak
February 19th, 2010
OK tutorial but poor design…
rory
February 19th, 2010
Quality web design tutorial and very easy to follow, a must for all new web designers!
I do a few of these types of client ‘mock-ups’ every week, and a tip I would give is always use folders in photoshop makes things a lot easier to find and arrange your layers.
Also if you change the background colour or layout etc save the version (version2.psd or something) later down the line you may need a slightly different version. Its always worth seeing you design thought process.
Ajay
February 19th, 2010
Great work! Thanks for sharing.
Jacob Gube
February 19th, 2010
@Smashing Share: I pretty much run a democracy here, so if there’s a vocal majority in the comments asking for a follow-up, I think it’d be safe to write one up for ‘em. :)
@Bryan McAnulty: Whoa, neat trick! That would be more accurate, since my mouse is very sensitive so sometimes it’s hard to get the exact pixel width.
@rory: I’ve found Layer Comps to be helpful in that regard as well.
Mahmoud
February 19th, 2010
Nice tutorial! Good job. :)
Smashing Share
February 19th, 2010
Thanks to all who liked this tutorial and who did not :)
I will follow up with the Coding of this Website Design Tutorial on the request of all you guys.
TutsBot
February 19th, 2010
Nice tutorial :)
I liked it , and I will apply it soon ,,
Justin
February 19th, 2010
great tutorial! really detailed and put together very will!
Thanks,
-J
Tech Guy
February 19th, 2010
wow, thanks. This is the best tutorial of its kind that I have seen.
Nicole Foster
February 19th, 2010
Thanks for the great tutorial! It’s very clean and professional just as I like it ;)
I agree, you should follow up with a coding tutorial. Though I personally don’t need it, others may find it very useful.
Aveef
February 20th, 2010
cool!!
Jacob Gube
February 20th, 2010
@Smashing Share: Awesome, we’re all looking forward to it Waheed!
@Nicole Foster: Waheed and I just discussed the follow-up tutorial for this, and he was more than happy to write it up.
Paulo
February 20th, 2010
Always the same layouts….time to evolve!
Jeffri
February 20th, 2010
This is a good tutorial indeed… Thanks!
Whytey
February 21st, 2010
Nice design! I just coded with 960 : ]
Davide Scalzo
February 21st, 2010
thanks! great tutorial! i m looking forward to see the coding!
Maverick
February 22nd, 2010
i am really impressed with the choice of colours. really great choice. though most of the designers here might have seen such layouts n number of times, the main attraction about your design was the lovely colours :)
well done.
Smashing Share
February 23rd, 2010
Thanks for the comments guys. Am working on the coding part this weekend. Lets see how soon I can finish it.
John De Senio
February 23rd, 2010
Thanks for the tips and tutorial, now I know the secrets of professional designers. The instructions are accurate and detailed the steps of making a clean and simple web templates. I am going to save that link and try these steps of creating a clean and simple web templates. About finished web template, it is really simple but amazing, that’s a work of a real professional web designers.
jagadishthaker
February 25th, 2010
Awesome, Article you have mention step bu step guide of how to design this particular layout. its good for beginner designer.
look some more such articles.
Thanks!
Olof Jansson
February 26th, 2010
Looks awesome! I’m a beginner in web development, so I’m really hoping for a tutorial on how to go from PS-design to coded website.
karthik
February 27th, 2010
thanks for your wonderful tutorial it really helped me a lot in knowing many things,Hope u add many more like this.
Harry
March 4th, 2010
Really Its very professinally and Nice tutorials Keep it. You are doing fantastic Job.
MAdemoiselleacd
March 16th, 2010
Thank you for the very good tutorial.
Very good explanations.
I follow it step by step and it helps me to be familiar with psd.
Keep doing what u do.
Alex
March 25th, 2010
Hello,
In step 13, “Home” is going as background of the hover..How can we do the hover as background and the home in front of it ?
Marin
March 30th, 2010
Man, this is absolutely the greatest short and sleek tut I’ve seen on how to make web 2.0 dzines :)
Hat down
Pargy
March 30th, 2010
Thank you for this Tutorial Waheed!
I’m also a bit stuck on step 13. Do I add all my navigation links at this point and make a separate hover over for each of them? Why do you specify 75x35px, is that just for “Home”?
I mustn’t be getting something – up to there I found it fairly easy to follow. I’ll try and figure it out.
thanks again
Jack Barrier
April 2nd, 2010
Very, very simple and WELL explained Waheed.
Thanx from Italy….and now go on coding…with part2.
yan
April 3rd, 2010
man, I have spend a whole night and another day to follow you instructions. I feel like its the most valuable time I ever spend :)
I learned so much from this tutorial. You did a great job.
Drew Gillett
April 6th, 2010
Can you please explain why you decided to put the elements where you did? I think a lot of readers see these tutorials and have no real idea as to why certain elements are placed where they are other than because other people do it. Some explanation of UX analysis would be very helpful. Thanks!
Designer
April 7th, 2010
really great tutorial.
It is very useful for beginners like us in the industry.
Thanks,very simple.
Rahul
April 9th, 2010
Hey you people are doing a great job by providing source files too ! i learned alot from your tuts and your source files.
Ramalho
April 9th, 2010
Hi WEB Family,
This is amazing & good for all of us. Waheed never give up to share this tuts.
Thanks for sharing
Liya
April 22nd, 2010
very good explained, thanks!
Raymondo
April 24th, 2010
Hi. Your instructions were very well written up until…Point 13! You need to break that paragraph down. It is confusing. Sorry.
Samir di Vermonti
May 1st, 2010
Awesome explanation! I even got kind of surprise on how easy is do something so professional ^^
Thank you a lot ^^
vijay
May 7th, 2010
good tutorial
vishal sardhara
May 9th, 2010
what’s tutorial to use in our real life….
anyone can tell me waht is that software ?
Vangelis
May 15th, 2010
Completely so detailed explanation, great tips, thanks!
Rafles
May 23rd, 2010
Thnks bro, nice tutorial
Danny
May 26th, 2010
Hey, really good tutorial, thanks! Just one thing, in step 31, in the blending options we can see that ‘Stroke’ is ticked, but you don’t give the details!
Jun Abestano
May 31st, 2010
This is really great! The common thing in programming and web page designing is, you need to know first what are you going to build. Afterward, you have to work for it. PSD to HTML/CSS and the like is more rewarding and more effective. Thumbs up to the author.
Jeff
June 9th, 2010
Great Tutorial! I had a lot of trouble with one part. If you could make this more clear, that would be great!
From paragraph 13:
“Straighten the bottom rounded corners with the Convert Point Tool. Move the sides of uneven edges below with an 8px margin to make the edges equal to other inner edges at bottom. ”
OK, but how? Ive spent hours trying to figure out how to do this! I found a slightly different way to achieve the same results as in the picture, but still have no clue what approach the author is trying to convey here.
Everyone confused about why a website is being designed in Photoshop instead of Dreamweaver should google, “slice Photoshop to Dreamweaver.” Most of what you see graphically on a website is done first in Photoshop and then brought over into Dreamweaver. Yes, there is still coding and tweaking in Dreamweaver to be done, but Photoshop remains one of the best tools for creating a site’s visual design.
LadyLawrence
June 9th, 2010
Excellent tutorial, not sure what some are griping about. Thanks for posting!! Learned tons can’t wait to scoot over to part two.
Taslim Hussain
July 12th, 2010
nice and beautiful tips please check step no 8 gradient overly color e5e5e5 and plz change it to 5e5e5e
Taslim Hussain
July 12th, 2010
sir can i contact u i am web designer but i am trying to polish my self in making template what can i do to become professional template and logo designer plz suggestion me because i am tired to do more
Saman
July 23rd, 2010
Waheed Akhtar what a wonderful guy you are
great job…
thanks again
Abdo
July 25th, 2010
Hey man,
this is one of the best tutorials i’ve seen ever,
this is what i arrived to do:
http://img205.imageshack.us/img205/8850/designlayout.png
it’s not professional like urs, but, anyway, you helped me a lot ! in addition to the way u orgnize ur work inside folders and stuff…that was just amazing..
Cheers from Morocco.
Rhobert
July 29th, 2010
nice tutorial,, i like it so much
andy
July 31st, 2010
There is alot of photoshop experience contained in this tutorial. Has about all you need to know in creating a decent site. Fantastic for beginner like myself. I noticed one error in your logo and content box title black gradient. The light color should be 5e5e5e. The tutorial reads e5e5e5. This is way to light. Overall this is a wonderful introduction to photoshop web production.
zin
August 17th, 2010
Very interesting tutorial, i love the color its really excellent
Motorová píla
August 24th, 2010
Very nice tutorial. It seems to be so easy to draw professional design but the reality is different often.
Olof Jansson
August 24th, 2010
I’ve now followed your guide and completed the website. Very well written and easy to follow!
Although I did, like many other people, have problems with #13. So i just copied it from the ps-file you provided. I would love an update of this section.
But again, thanks!
Neustop
September 1st, 2010
Really useful tutorial! Thanks!
vijay
September 23rd, 2010
what a wonderfull tutorial u r giving..
thank you lot…
good service your providing not only for fresh web designers its for experienced one too..
KrisBulman
October 12th, 2010
In the logo gradient for “SMASHING”, I believe you meant 5e5e5e. 5e5e5e is a light gray.
adams
October 27th, 2010
Very nice tutorial.I have seen your template used to a tutorial how to cut it to html, css, xtml.
asif
November 1st, 2010
very well explained…
Lina
January 22nd, 2011
The very best tutorial on this I’ve seen! Detailed and accurate and easy to follow even for a beginner. Thank you, exactly what I was looking for. Now I just need to learn how to slice it or crop it, whatever you do to be able to convert it into html/css.
dattathri
April 26th, 2011
best tutorial
Mark
April 30th, 2011
I was surprised how quickly I got through this one. Good job, looking forward to coding it in the other tutorial, thank you!
Sharon
May 2nd, 2011
Great tutorial, It was very easy to follow.
Geraldine
May 12th, 2011
I bow down humbly in the presence of such geartnses.
Bogac
May 26th, 2011
Hey thanks for the great tutorial, I can design a website using Photoshop, but I was not able to slice & css, but your tutorial shows everything step by step, and it’s really useful!
Alex
June 4th, 2011
Thank you, the tutorial is excellent, very clear and easy to follow.
Donn
July 1st, 2011
Great work. It help me alot.
Amr Emara
August 7th, 2011
Great and Simple Design, and the tutorial is clear and easy to follow. Thanks!!
NekKam
September 19th, 2011
Very interesting article. I’m always in favor of websites where the focus is on a clean, usable site.
anthony c
September 23rd, 2011
Thank u you so much now i know the real secret of professional web designer God Bless u really showed me the way.
Rakesh
October 13th, 2011
ThanQ for the tutorial.. i am dying to add some styles to my site.. it will help a lot
Leave a Comment