How to Create a Sleek and Textured Web Layout in Photoshop

Apr 22 2009 by Matthew Heidenreich | 103 Comments

How to Create a Sleek and Textured Web Design in Photoshop

In this Photoshop web design tutorial, you’ll learn how to create a full web page layout that combines the sleek and textured look-and-feel using a combination of beginning to intermediate Adobe Photoshop techniques.

Final Result

Here’s what you’ll be working to create. You can view the large version here.

Final Result

Download

You can download the source files of this tutorial (PSD and stock photos).

Setting up the Photoshop document and background

1 The first thing we want to do is to create a new document with the dimensions of 1024×1050.

Setting up the Photoshop document.

2 The next step is to go ahead and change your background color.  Using your Paint Bucket Tool from your tools pallet, fill your background layer with #F0EEDB.

3 Next we want to add a image to our background.  I found a great photo on deviantart at  and you can download it here. You’ll need to resize it to fit your document, and copy it a couple times to fill your document.  To save that step you can go ahead and get a larger version of the image in our source files.

4 Once you have the image on your document, go ahead and lower its opacity to about 82% and it will look something like this:

Setting up the Photoshop document and background

Creating the layout’s header

5 Now lets go ahead and get started on our header.  Using your Rectangle Marquee Tool make a selection similar to the following, about a pixel from the top of your document and fill it with #000000

6 Next we want to go ahead and insert the following blending options onto that layer by right clicking our layer and choosing blending options from the drop down menu:

Creating the layout's header

Creating the layout's header

Creating the layout's header

7 Lower the opacity to your layer to about 95% so a bit of the background fades through, and your document should look something like this:

Creating the layout's header

8 The next step is adding a logo to our header.  I went with the font Geneva CY.  Go ahead and place your text in a similar way to the following and make a nice little 1px wide line next to it.

Creating the layout's header

9 Now go ahead and add these blending options to your text layer, and to the 1px wide line you created.

10 Then go ahead and use a simple font like Helvetica to add a tagline with the font color #25B2F8.  Your final result should look like this for your logo:

Creating the layout's header

Creating the navigation: background

11 Next it’s time to make a navigation for our site.  Using your Rounded Rectangle Tool, go ahead and make a rounded rectangle similar to the following on the right side of your header.

Creating the navigation

12 Now we want to insert the following blending options onto its layer.

Creating the navigation

Creating the navigation

13 It should look something like this after your complete

Creating the navigation

Creating the navigation: adding the text

14 Lets go ahead and add some text, shall we?  For our active link we want to use the color #ABAE80, and for our other links we will use the color #393939.  Lay it out similar to the following:

Creating the navigation

15 Next we want to go ahead and divide our links up.  Using your Rectangle Marquee Tool, make a 1px wide selection in between all of your links and go to Edit > Clear on your Rounded Rectangle Layer.

Creating the navigation: adding the text

Header complete!

16 Once you do that in between all of your links, your header is complete and it will look something like the following:

Header complete!

Working on the photo banner: setting up the texture

17 Next we want to go ahead and work on our banner.  In essence, we are making a sort of "slide show" of different posts that could be displayed.  I found a great stock photo over at SXC which can be found here.  Go ahead and resize it on your document and select a part of the image you find the most appealing about the size as the following:

Working on the photo banner: setting up the texture

18 Now we want to add a slight border to the bottom of our stock photo, so insert the following blending options onto your stock photos layer:

Working on the photo banner: setting up the texture

Working on the photo banner: putting in the image title

19 We are going to want our title to be displayed on the image showing what post it is representing on our slideshow.  Before we add the text we want to add a nice little background for it.  Using your Rectangle Marquee Tool, make a selection similar to the following and the bottom of the image and fill it with #000000.

Working on the photo banner: putting in the image title

20 Now go ahead and lower the opacity to about 59% and you should have something that looks similar to the following:

Working on the photo banner: putting in the image title

21  Now we can add our title.  For the Category title, I used #FFFFFF for my font color, but lowered the Opacity of its layer to 60%.  For the title I used the same method, but only lowered it to 85%.  You image will look something like this:

Working on the photo banner: putting in the image title

Working on the photo banner: designing the post preview numbers

22  On the left side I went ahead and added a spot for you to choose which post is being viewed.  All I did was use my Elliptical Marquee Tool to make circles and fill them with black and placed white text inside.

Working on the photo banner: designing the post preview numbers

23  For my active number 3 circle, I used the following blending options on its layer:

Working on the photo banner: designing the post preview numbers

Working on the photo banner: designing the post preview numbers

Website photo banner completed!

24 At this point your header will be complete and should look something like this:

Working on the photo banner: designing the post preview numbers

Designing the post teasers

25  Now it is time to move onto how our posts will be displayed.  Using your Rectangle Marquee Tool make a selection similar to the following and fill it with #FFFFFF.

Working on the photo banner: designing the post preview numbers

26  Next we want to go ahead and insert the following blending options onto its layer:

Designing the post teasers

Designing the post teasers

Post teaser design completed!

27  All we do now is just lay out how we want our post.  For my heading I used the color #211213 and standard #000000 for the description.  Go ahead and lay it out similar to the following using your Text Tool

Designing the post teasers

Creating the layout’s sidebar: the heading box

28  You can go ahead and use that layout for the rest of your posts.  Next we want to move onto our sidebar.  The first thing we want to do is to create a heading box.  So using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.

Creating the layout's sidebar: the heading box

29  Now insert the following blending options onto its layer:

Creating the layout's sidebar: the heading box

Creating the layout's sidebar: the heading box

Creating the layout's sidebar: the heading box

30  Your results should look like the following:

Creating the layout's sidebar: the heading box

31  Now lets add some text.  Add your title with the font color #323232 and use the following blending options on its layer:

Creating the layout's sidebar: the heading box

32  You will get something that looks like this:

Creating the layout's sidebar: the heading box

Creating the layout’s sidebar: the sidebar content boxes

33  Next we need to make a box to place our content it.  Using your Rectangle Marquee Tool yet again, make a box similar the following and fill it with #000000.

Creating the layout's sidebar: the heading box

34  Next go ahead and insert the following blending options onto your layer:

Creating the layout's sidebar: the sidebar content boxes

Creating the layout's sidebar: the sidebar content boxes

35  Go ahead and add some content and repeat those steps and you will get something similar to the following:

Creating the layout's sidebar: the sidebar content boxes

The layout’s footer

36 We are almost done!  The last step is to add a footer.  Using your Rectangle Marquee Tool, make a selection similar to the following at the bottom of our document and fill it with #000000.

The layout's footer

37  Now go ahead and insert the following blending options onto its layer:

The layout's footer

The layout's footer

The layout's footer

Congratulations – you’re done!

38  Just add some text, and that is it!  Your template is complete.  When it is all said and done, your final results should look like the following:

The layout's footer

About the Author

Matthew Heidenreich is currently a freelance designer from St. Louis, Missouri.  He enjoys teaching others how to create interface and web design tutorials on his blog called PSDVIBE. You can get in contact with Matthew by following him on Twitter: @Spicypepper.

103 Comments

insic

April 22nd, 2009

wow! nice layout… thanks

Seb2.0

April 22nd, 2009

Sweet. However it makes my blog look like it was made my a 5-year-old.

adam a

April 22nd, 2009

love the tut. hard to find straight-to-the-point tuts out there. if you can create screencasts in this same manner that would be incredible.

faardeen

April 22nd, 2009

This is a very helpful tutorial in very easy steps. great!! thank you

loyalv

April 22nd, 2009

Thanks for the tutorial. Lots of sites say to design like this in Photoshop but few to none of them ever explain the process.

Mike

April 22nd, 2009

This is great! Looking forward to more tutorials from Six Revisions.

Jacob Gube

April 22nd, 2009

Awesome feedback guys and gals! Expect more of these helpful tutorials on Six Revisions as we continually strive to provide you with information on design and development! Matt did a great job on this, and we’ve got more in store for you folks.

Nachtmeister

April 22nd, 2009

What’s about the right an left endings? I mean, the background and header grafic could not really use for x-repeat. So there would be better solutions.

But nice tutorial.

Dave Barnett

April 22nd, 2009

great tutorial, keep them coming.

jack

April 22nd, 2009

word up Jacob! bringing the clean six revisions style to tutorials is what we’ve all been waiting for! thx for the article Matthew, PSDvibes is a tight website.

Jena

April 22nd, 2009

This might be a minor point, but may I suggest that the author de-Lumbergh the text a bit? The phrase “..go ahead and..” is used many, many times, and I was having flashbacks of Office Space that distracted a bit from the super tutorial. Otherwise, the article is very helpful. :)

Jacob Gube

April 22nd, 2009

@Jena: Thank you for the constructive feedback and we’ll be taking everyone’s suggestions very seriously as we refine the tutorials that’s going to be posted here on Six Revisions.

Otherwise, we’re gonna need to go ahead and move you downstairs into storage B, yeah. :D

Anyways, this is an invitation to everyone to please do leave your feedback and things we can do better to get these tutorials perfect! It’s the first, but it certainly won’t be the last!

Matthew Heidenreich

April 22nd, 2009

@Jena

I actually notice that when i write my tutorials, i definately need to mix it up a bit and will try to do so in the future :) Thanks for all the comments so far

Jacob Gube

April 22nd, 2009

@jack: Wow thank you, exactly what I envisioned on these tutorials: practical, well-written, and cleanly-formatted tutorials – Six Revisions style, quick and straight to the point. I want readers to learn about one technique, but also take away something they may not know about regarding the subject.

EricB

April 22nd, 2009

This one’s a very cool tutorial and easy to follow for beginners like me. Is there a follow up tutorial to convert this into a website, like turning it into an XHTML template? Thanks Matthew and Jacob for sharing this!

Cheng Soon

April 22nd, 2009

Fantastic.

Any Fireworks version of this tutorial?

henry

April 22nd, 2009

next step maybe coding it??? thanks for the tut it was great maybe next time when writting a tut include dimension when using the marquee tool just to be a bit more precise…while i was doing the tut i was unable to do step 15. anyone care to give me better details on how to achieve that effect???

Jacob Gube

April 22nd, 2009

@henry: At that step, just eyeball the height of your selection. Another way would be, with the Rectangular Marquee Tool active, in the Style: drop down menu, select Fixed and type in 1 px for the width, and then experiment with the height value. That way, you’re selection will be the same for all the lines.

Does that help or did I completely miss the point of your question?

Ian Young

April 22nd, 2009

I wish this tute would take the practical considerations of web design into account a bit more. Those slick little semi-transparent borders around the blog posts? Not possible in CSS2. The only method I could think of would involve an extra block element around each post that could hold a semi-transparent background image, and even then that still wouldn’t fly in IE6, so you’d need a hack to hide it or else apply a proprietary filter, which might in turn cause some nasty positioning bugs… you get the idea. Even with CSS3, those borders aren’t possible without extra semantic markup.

As long as I’m being negative, are those massive images really necessary? I realize it’s not the end of the world these days, but I’m not going to be real impressed if my weak ol’ Comcast connection has to spend ten seconds downloading a thousand-pixel-squared texture that just sits in the background.

And I’m not even going to bring up fluid layouts.

I guess what I’m getting at is that it’s all well and good to make shiny pretty things in Photoshop, but there’s a lot more to good web design than that. Maybe that’s all coming up in next week’s tutorial…

Torley

April 22nd, 2009

Superbly illustrated! Jacob and/or Matthew, what process did you use to take pictures along the way? I’m often curious about that with these tutorials, since it requires keeping track of different steps. That might be with a tut in itself! Thanks in advance for your answer.

paulclavio

April 22nd, 2009

Nice tutorial, this will truly help me a lot. Keep em comin.

Kang

April 22nd, 2009

Well done, thanks

Jay

April 22nd, 2009

Not very ‘simpe’ to spell ‘simple’. :P

Crud

April 22nd, 2009

This is just a mockup… now, how about making it look like that with HTML/CSS, you know, a REAL layout – good luck!!

Allie

April 22nd, 2009

Great tutorial, bookmarking for ideas on my next layout :)

Jacob Gube

April 22nd, 2009

@Ian Young: Having to deal with IE6 and issues like alpha transparency regularly, I totally see your point. I’ve had great luck with TwinHelix’s IE PNG Fix as well as SuperSleight featured in this article on 24 ways. It does slow down page response times noticably when you have a lot of transparency going on (or when you’re tiling them as a CSS background of an element, for example). My solution usually is just to avoid transparency all together if possible.

In this particular case, to achieve the transparent borders, I’d have an outer div that I’d apply IE PNG Fix to (instead of all elements on the page, I would increase IE PNG Fix specificity to reduce response times) – then have an inner div that contains the content. Ugly (or uglier) markup, but it should work.

Without JavaScript – that would still degrade nicely, you just won’t have the transparent borders (but again, you’re stuck with a wrapping div on all post teasers that’s there not for structure, but for style/design).

Are those images really necessary? Depends on what they do and what they’re for – large images seem to work alright for Hulu, but people who visit that site typically have broadband connections.

I agree with you though: always design with intent, I actually have a piece about that coming up soon, hope you stay tuned for that to hear my thoughts on this subject.

@Torley: My method sucks – I put screenshots in individual Photoshop layers and when I’m done writing, I crop and process each layer. This tutorial involved 80(ish) images because of the full scale versions for some screenshots. I’d like to know what Matthew’s method is.

Confused

April 22nd, 2009

Now what? So, you have a layered PSD file. How do you then turn that into a website? I know photoshop, but not how to turn a PSD into some kind of usable template for a website. How do you convert it into HTML?

Jacob Gube

April 22nd, 2009

@EricB and @henry @Confused: I’ve received a lot of feedback about putting the design into a working HTML/CSS page so I’m happy to announce that we’ll be doing that – hopefully in the next week’s schedule, stay tuned!

Matthew Heidenreich

April 22nd, 2009

@Torley: I was actually thinking of writing a tutorial on how I create my tutorials. The great thing about OSX is the built in screenshot options, and how you can do selective screenshots where you don’t take a picture of the whole screen, but choose which portion you would like. This makes it easier, so you don’t have to go back and edit all your photos in Photoshop. The next thing I do is I make my desktop color white, so then we don’t have any annoying colored backgrounds in my screenshots, and you get that nice shadow behind your boxes. All the files are saved to my desktop as “Picture 1, Picture 2…etc”. There is a bit more that I do to keep it more time efficient, but needs a lot of explaining. Hope this helps a bit

Jake

April 23rd, 2009

Pretty cool tut, thanks for sharing!

littleprincess

April 23rd, 2009

Thank you for sharing. Pictures are incredibly beautiful! I want to learn more!

Smumdax

April 23rd, 2009

This is a very nice tutorial, and even if the graphic design is quite simple, it is sleak and effective. So I really like it…. And breaking it up to create a HTML/CSS page is quite easy. Only more-or-less hard to do is the rounded corners of the menu, but that’s about it. The rest is pretty much beginner’s stuf.

Keep ‘em coming !

Joshua Parker

April 23rd, 2009

I’ve been looking for a tutorial like this for a long time. I look forward to the second part on HTML/CSS. Thanks you for this tutorial.

arunbeysi

April 23rd, 2009

Thanx, Jacob I will love to see a coding tutorial on it, specially because, how to tile the background (or which part of it to select an dgive repeat-x or repeat-y or both so that it gives same look as mock up). Best !!

portable m

April 23rd, 2009

imageready will let you slice up the psd and export it as a page with html coding or with css, still a bit chunky but a definite time saver…

The YPI

April 23rd, 2009

I really learned something new in designing the header section.

thanks

Jacob Gube

April 23rd, 2009

@arunbeysi: Yes, the background repeating will be the trickiest part – We’ll have to crop the background well so that it can seamlessly tile left AND right or fade the sides so that we can use a solid color that background image seems to fade into.

@Matthew Heidenreich: There are probably a ton of applications out there to make taking screenshots easier, but I try to avoid installing programs if I don’t have to. I do what you do too – most of the time, my desktop background is white (and I have no icons on my desktop except the recycling bin). For in-browser screenshots, I use Web developer toolbar to resize the window the way I want it so that all screenshots have the same width and height. It helps so that when you accidentally close your browser, or accidentally resize it, you can use Web Developer to get it back to the same size.

kaspi

April 23rd, 2009

hello. you should make on tut on how to make this same web page html .. would be good one.. :)

Jacky

April 23rd, 2009

Thanks for the guide !!!

Frank West

April 23rd, 2009

I often see photoshop tutorials around the web showing you how to make sub-standard designs but this post has really impressed me.

It’s nice to see a designer discussing modern and effective techniques.

Great work!

Fernando

April 23rd, 2009

Nice tut.. but you lost me at step 5. You say:

“5 Now lets go ahead and get started on our header. Using your Rectangle Marquee Tool make a selection similar to the following, about a pixel from the top of your document and fill it with #000000″

But there is no picture following #5, so make a selection similar to what?

Yasas Perera

April 23rd, 2009

Thanks Jacob! :)

Jacob Gube

April 23rd, 2009

@Fernando: That’s my fault, I forgot to place the image there, I’ll get it fixed as soon as I can. But for now, check out the image on #7, that’s the selection you should use. Click on the image under #7 to see the full-scale version.

Jonathon

April 23rd, 2009

Good tutorial. I’m working on a redesign of my site, so some of these techniques will come in handy. However, like Ian Young said, there is a lot more to making things “work” than just creating a pretty image in Photoshop (or Gimp in my case). I’m looking forward to your upcoming article that shows how to go from image mockup to html.

DonovanB

April 23rd, 2009

Glad to hear that you will be looking into putting it into an HTML/CSS format. It would be really cool if you took the opportunity to branch of into converting it specifically for WordPress. It’s not that there are not WordPress conversion tuts out there … It’s just that I’m sure most readers will appreciate the concise Six Revisions style of breaking it down. Thanks for the work thus far though; great as usual.

henry

April 23rd, 2009

@Jacob Gube, well i got to the part with the marquee tool but when i wanted to “clear” the selected part with the maque under edit>clear it didnt work for me it didnt do anything actually i was wondering how that affect was achieved? thanks for the reply

Jacob Gube

April 23rd, 2009

@DonovanB: I’ll consider the WordPress part. The funny thing is: I’m planning on doing these tutorial series where we share how to create something in Photoshop, then the next part makes your creation functional. One of the tutorials I have in store is how to make an animated fading menu. The first part would teach you exactly how to create the menu’s CSS sprite, then in the next part, I discuss how to make it functional using a JavaScript library like jQuery or MooTools. I understand the need for these fuller tutorials where you cover both the design and development of it but I think that having it all in one article would be too much. My goal is to provide useful techniques and tutorials that you can follow step-by-step: you’ll get a working example that you can readily use in your projects and along the way – you may take away a method, a technique, or learn about a particular tool you’ve overlooked in the past. That’s my sort of vision and goal on the tutorials coming up in Six Revisions – so I sincerely hope everyone stays tuned in!

My main goal is to diversify the things you see here – to make practical, usable solutions available to you. I’ve been recruiting very hard to get talented designers and developers like Matthew here from PSDVIBE and Tyler Denis from Denis Designs to create helpful tutorials that you can follow along. I’ll also be writing more development and Photoshop tutorials myself as well.

@henry: I see now that that part’s confusing. Edit > Clear is the same as hitting the delete key on your keyboard. Make sure you have the Rounded Rectangle layer selected though, that way when you hit the button, it deletes that section, and you create your border. Can you let me know if that makes any sense and that it worked for you?

Spelling Nazi

April 23rd, 2009

You misspelled Simple.

Matt

April 23rd, 2009

Nice layout, inspired me to make another one tonight, :). One thing I’d like in the upcoming tutorials is correct spelling, it just sticks out at me and kinda sits in the back of my mind while I read. By this, I’m referring to the ‘simpe and efficient’ in the header. Something as major as a logo/slogan should be correctly spelled, even in tutorials, imo.

This is in no way meant to be adding negative points to this tutorial, it’s great, has given me new ideas for content layout, and has got me watching for the new ones that are upcoming! This site has now been bookmarked, ^_^.

Thanks for taking the time to submit such a detailed tutorial, :).

PS: Mootools tutorials would indeed, rock!

henry

April 23rd, 2009

@Jacob Gube: yeah thanks that did the tricks keep up the good work love to see this tutorial in the process to wordpress! thanks again to the reply glad to see your active in the comments section! :)

Jacob Gube

April 23rd, 2009

@Matt: I see these tutorials as an iterative process – each new tutorial, I hope to tweak the process and make it better based on your feedback. Not only do I want the tutorial writers to improve, but also our editorial process need to improve and adapt to the new format as well, and make sure even simple things such as misspellings don’t happen.

About MooTools, the last time I wrote a MooTools tutorial, no one seemed interested (or maybe it was the particular technique that was boring), so I may have to do jQuery tutorials instead (I love them both, but I always think that MooTools needs more love). Glad to find a MooTool’er in this crowd though!

@henry: Thanks, and glad that worked out for you!

Victor

April 23rd, 2009

Great tutorial. Just a tip: try not to use words and phrases that are unnecessary. Every “Go ahead and” can be cut and nothing will be lost from the content.

Matt

April 24th, 2009

Matt here again, I agree, MooTools does need some lovin’. We use it all the time at work in E-Learning courses, although I only end up reusing code rather than developing, unfortunately. I think I’ll learn it more fluently, starting with that tutorial you kindly linked in your response, and do some things with my portfolio, perhaps. And are you accepting tutorial writers by any chance? Just curious, ;).

Jacob Gube

April 24th, 2009

@Victor: Yes Matthew and I have realized that mistake (see his response somewhere around the middle of the comment section).

@Matt: That’s where I do a majority of my work as well – courseware and distance learning – and yes – we have a code base for MooTools/JS scripts that just gets reused nowadays, but I still end up developing new and fun stuff. Most of all, I’m trying to see if JS can replace some of the stuff we’ve been doing in Flash – there’s definitely a use for Flash, in terms of interactive games and complex, smooth animation – but if it can be equally well done in JS, my thought is that it should be done in JS.

Sorry people, off-topic, I know this post is about Photoshop and Matthew’s design.

I’m always in search of engaging tutorial writers! Shoot me an email at jacob[[AT]]sixrevisions.com with your ideas.

huwaw69

April 24th, 2009

Great tutorial for making a website layout…

david

April 25th, 2009

I cannot do step 15 without deleting rounded rectangle layer?

Jacob Gube

April 25th, 2009

@david: David, did you make sure you use the Marquee Tool to make a 1 pixel wide selection first, before doing Edit > Clear?

This step seems really troublesome – but it’s great that you guys ask so that we can watch out for these ambiguities in future tutorials!

Dhane Diesil

April 25th, 2009

Great tut! Very exquisite and stylish.

Kakasab

April 26th, 2009

jacob, it is really nice tutorial, i will plan this for my upcoming website.

alex

April 27th, 2009

Great tutorial. looking forward to seeing more tuts on other styles

justine

May 5th, 2009

for the texture art you used at deviantart, I couldn’t help but notice it is copyright by the artist, and I wonder if you got permission to use it and then also encourage other people here to use it as well? seems to me that this article could get people to infringe on somebody’s copyright, maybe you should warn people about respecting copyrights just in case?

roni

May 5th, 2009

@Ian @Jacob
I have to agree with Ian.. Really…
Looks good on image.. slice it ! D’oh… hell.
But I have as well to agree with Jacob…:)
I use supersleight-min for IE when not too much problem.
Still lately, I had to slice a painflul design with gradiants and semi-transparency all over the place.

Result : I ended up with as conditional call to IE6 and producing gifs for IE6 with really lower quality transparency… Still… It works and since IE6 has not that much presence any more… I felt it was te best solution. Indeed, the js hack implies extra DOM elements, and dodgy absolute positioning…

so to conclude… loose some quality, for IE6, but keep the whole page optimised for the others.

William

May 7th, 2009

Very cool layout, however, definitely leaves questions in regards to coding, even just the navigation. So, kinda like set up to be knocked down. Learned a few artistic tricks from this, but disappointed overall without the coding aspect.

smoove

May 10th, 2009

This is VERY helpful but we need the coding part to make a a 100% layout… right now its 50% layout

plzzz do the coding part

David

May 11th, 2009

I would assume that all elements on the page are elastic and can collapse upon resizing of the browser. Otherwise, I would start the project off at 955 pixels wide and not 1024. (955 accounts for the width of the browser window, of course)

Thomas Fjordside

May 11th, 2009

Nice layout and some great pointers along the way. Personally I think I would have made the menu stand out a bit more, but that’s taste :)

Tal

May 23rd, 2009

how can I make it so that there is no white in the background like outside the template, guess making it stretch.

Penelope Else

May 24th, 2009

Terrific tutorial, thank you! I’m learning a huge amount, both about design possibilities and how to create them.

What I’d like to see, especially in a tutorial as complex as this (and given that I’m not using Photoshop, though that’s not your problem) is a verbal description of each step’s output, cos it’s not always clear what has been created. E.g. A 100x30px box, corners rounded 20%, drop shadow 11px, transparency 75%, colour #0e0e0e.

Looking forward to the HTML-creation post!

Ryan S

May 31st, 2009

Great tutorial. Thanks!

Angel

June 1st, 2009

Nice…now put it in to Dreamweaver please! I got to know the complete process! :P

Mandy

June 2nd, 2009

I love how adding a background texture to a web design can really help to change the look and feel quite dramatically – great tutorial!

swapon chisty

June 15th, 2009

hi Matthew, This is nice design.
Thanks.

Travis

June 19th, 2009

I could only get step 15 to work if I rasterized the rounded rectangle layer first?

Would really like to see the HTML/CSS coding tutorial for this page!!

CSS

June 25th, 2009

wonderful, but can this all done with WP?

Mr FD

June 29th, 2009

If you want to import it into dreameaver you will have to save it as web page thant save in your dreamweaver folder…

mms

July 7th, 2009

wow

Great tutorial. Thanks!

Chris

July 23rd, 2009

Very very very sick template. I love it.

medyum

August 19th, 2009

This is a very nice tutorial, and even if the graphic design is quite simple, it is sleak and effective. So I really like it…. And breaking it up to create a HTML/CSS page is quite easy. Only more-or-less hard to do is the rounded corners of the menu, but that’s about it. The rest is pretty much beginner’s stuf.

Web Navigation

September 3rd, 2009

That is great step by step tut i like it very much thanks man

sultan01

September 3rd, 2009

very nice layout tut

Bob Beerbower

November 15th, 2009

>>Travis
>>June 19th, 2009

>>I could only get step 15 to work if I rasterized the rounded rectangle layer >>first?

Travis, I wish I read your post 2 hours ago. I had the same issue and never would have guessed the answer. Thanks

Alex

December 2nd, 2009

Nice tutorial!

Ankara Parke

December 22nd, 2009

That is great step by step tut i like it very much thanks man

kapadokya

January 22nd, 2010

This is a very nice tutorial, and even if the graphic design is quite simple, it is sleak and effective. So I really like it…. And breaking it up to create a HTML/CSS page is quite easy. Only more-or-less hard to do is the rounded corners of the menu, but that’s about it. The rest is pretty much beginner’s stuf.

medyum

February 19th, 2010

That is great step by step tut i like it very much thanks man

askar

March 1st, 2010

Nice Tutorial.. I like it very much.
Thanks..

wedgn

April 13th, 2010

This is a very helpful tutorial in very easy steps. great!! thank you

wedn

April 13th, 2010

Nice Tutorial.. I like it very much.
Thanks..

i-graphic

May 10th, 2010

Brilliant – thanks again!!

Scott @sydneydesign

June 1st, 2010

great tutorial i love the depth of the textures, i’ll be giving it a try thanks

Martin

July 5th, 2010

Great tutorial, but it’s all Photoshop, Photoshop, Photoshop these days – good old Fireworks has been left like an ugly sister.

Peter

August 12th, 2010

^^^@Martin,

Just another of survival of the fittest.

Craig

September 7th, 2010

Very easy to follow tutorial, the techniques will be very useful Thanks!

Reny

September 23rd, 2010

Thank you so much! Got inspiration from you!

Sonoom

November 3rd, 2010

Thank for your sharing,that make my inspiration for me.

jaspreet singh

December 23rd, 2010

hi i liked the design,bt i can’t able to move to step 15. b’coz its not showing the option of the rounded rectangle layer in edit option.i din’t understand that step correctly,cn some one explain me dat and also how cn i divide the links as a different link(means if i take my mouse from home to contact us link the mouse should show the clicking option as a second page link).
thank u.

New2Design

March 3rd, 2011

Great Tutorial. Are you going to transform this PSD to HTML

medyum

April 14th, 2011

Now what? So, you have a layered PSD file. How do you then turn that into a website? I know photoshop, but not how to turn a PSD into some kind of usable template for a website. How do you convert it into HTML?….

EliasPotter

June 11th, 2011

What shall i do when i am done with step 38 ??

Ashkan

June 14th, 2011

WOWOWOWOWOOW
THANKS DUDE
THANKS
NICE
THANKS

Claud

July 20th, 2011

Wow! Great job. I was looking all over the web for a tutorial like this … I’m a begginer and your tutorial helped me to create a “proffesional looking” web layout. Thank you for sharing your knowledge!

mono

July 22nd, 2011

Thank you for the tutorial. Its a nice resource for inspiration, and it’s quite quick done. Very good!

Leo

November 18th, 2011

Thank you! Very beautiful and interesting lesson!

Leave a Comment

Subscribe to the comments on this article.