Create a Clean and Professional Web Design in Photoshop

Feb 17 2010 by Waheed Akhtar | 110 Comments

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

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.

Final Preview

Prepare your Photoshop document

1 Create a new document in Photoshop (Ctrl/Cmd + N) using the settings from the following image.

Prepare your Photoshop document

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.

Prepare your Photoshop document

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.

Prepare your Photoshop document

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:

Prepare your Photoshop document

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.

Adding guides to assign content area

8 Double-click to open the Layer Style dialog box. Select Gradient Overlay, click the Gradient Editor and use the settings as shown below.

Adding guides to assign content area

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.

Adding guides to assign content area

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 + ;

Adding guides to assign content area

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

Adding guides to assign content area

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.

Adding guides to assign content area

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.

Adding guides to assign content area

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.

Adding guides to assign content area

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

Adding guides to assign content area

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.

Adding guides to assign content area

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.

Adding guides to assign content area

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.

Adding guides to assign content area

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

Adding guides to assign content area

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.

Creating quick quote section

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.

Creating quick quote section

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.

Creating quick quote section

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 quick quote section

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.

Creating main content area

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

Creating main content area

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:

Creating main content area

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

Creating main content area

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.

Creating main content area

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.

Creating main content area

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 main content area

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.

Creating the footer

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

Creating the footer

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

Creating the footer

Have a look at the image we'll be creating in this tutorial. You can see the final preview of image below or click here for a full size version.

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!

Final Preview

Download the source file

You can download the Photoshop file (PSD) of this tutorial from the link below as a ZIP archive.

Related Content

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.

110 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

I have plan to do the coding part for this tutorial soon (only if SixRevisions approved :))

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

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

Rods

August 31st, 2012

Waheed, thank you for sharing this tutorial i am starting in web design and thats the first time i found a very good tutorial wich i could follow. One more time thank you so much
and i wish to you succes and luck always.
cheers

Arvind Kumar

October 6th, 2012

Great tutorial, easy to follow. I just completed my first website design in photoshop. I am very happy!

I also checked your other blog posts at boostinspiration. Hats off to you! Want to learn a lot from you about blogging.

Fabio

June 2nd, 2013

Thanks a lot, your tutorial really helped me!
Keep going with this marvelous work! XD

Kate

June 27th, 2013

Great tutorial, but when I get back today to continue on it, all pics showed as broken = they are not existing anymore:(

selvia

September 15th, 2013

terima kasih, thank you nice tutorial

Leave a Comment

Subscribe to the comments on this article.