In this tutorial, we'll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs.
Then when you're finished reading this tutorial, you can cross over to our sister site NETTUTS and follow along as we build the design into clean and simple HTML. OK let's rock'n'roll!
The End Design
First the design we'll be putting together. (Click the image below for a larger view)
It's quite an elegant design, which would probably suit a designer portfolio-type site, but really could be altered for all sorts of purposes. It relies on having elegant typography, a structured layout, and a visually interesting background.
The real power of this design is to show you what can be accomplished by keeping it simple. At the end of this Photoshop part of the tutorial, I'll show you how we can easily swap backgrounds and fonts and explain why this design works well.
It's a simple structure: horizontal menu, main heading panel, and content area. Although this is a homepage design, you could imagine an interior page would simply have a different heading panel and new content area. For the purposes of simplicity, we'll only be putting together the homepage design.
Step 1
First of all, create a new document. Mine is 1100px wide x 1100px high. This is so that I can create a Web site made for 1024px wide, but still have space to decide what is going to happen outside the viewable area so that it degrades nicely even on larger screens.
Now our first task is to create a nice abstract background. To do this we'll draw a linear gradient down using these two colors: #1b204c to #472373.
Step 2
Now we want a visually interesting background which is abstract enough that it doesn't distract from the text. Fortunately, there is an awesome watercolor image available free via GoMedia's Arsenal, click on the freebie section and you'll find two watercolors; the one we want is the greenish one.
Now while it's very pleasant as is, it's much cooler if we press CTRL+I and invert it so it's that nice pink/purple on black.
Step 3
Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to a reasonable size. Our aim here is to have it fade to black on the right (so that we can build our HTML later with greater ease). Additionally, we don't want it too long vertically, either, so it's best to erase a little of the excess. To do this grab a paint brush and paint in black to just remove the bottom parts.
Note that it's best to get a brush that has some texture so it's not obvious that we erased parts. If you scroll down your brush list, there is a brush that comes with Photoshop that looks like the one shown. It's not a bad brush to use. Of course, you might have some even nicer paint brushes and feel free to use those.
When you're done, fill in any areas on the right and bottom with black so that the whole canvas is covered by this layer.
Step 4
Now decrease the opacity of the watercolor layer to about 70% and set its blend mode to Overlay. That way, some of the coloring passes through to create a nicer look.
Step 5
Now in a new layer above the watercolor layer, and drawing straight up, make a Linear Gradient going from black to transparency so that afterwards your canvas basically fades to black down the bottom.
Step 6
Next in two new layers, draw a couple of Radial Gradients from white to transparency, one larger than the other. Set these to Overlay and 40% and 100% Opacities for the larger and smaller ones respectively.
Basically, you should be making a highlight on our image to give it a bit more texture.
Step 7
So here's the finished background. It's dark, abstract, and quite elegant with the coloring. Of course, pink might not be your particular choice of color usually, and if that's the case, feel free to add a color adjustment layer on top and use it to adjust the coloring. I kinda like the pink/purple, so am going to run with it!
Step 8
Now we create a new layer and add a "logo". I don't really have a purpose with this design, so I decided just to put some text in and pretend that's my logo. Because this tutorial is half PSDTUTS and then half NETTUTS, I wrote out a neat little "psd vs net".
The fonts I'm using here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version of the font is what I've used for the 'vs').
To make the 'vs' bit raise up a little you can use the baseline control in the Character Palette (shown in the second image below).
Finally, I also added a little layer style to the text with a faint Gradient Overlay as shown and a 1px Inner Glow with white.
Step 9
Now at this point, I switched on my Rulers (Ctrl+R) and drew a couple of guides. I divided my page into three columns with lines at 50px, 320px, 610px, 900px. At least those are the numbers I should have used. Looking at my screenshot I just realized my third line is off ... d'oh!
Anyways, the point is that I'm defining the space I'll be placing all me elements in, and if I were to make multiple pages I could use this grid in different ways. As it is, with only the homepage being designed, I'm just going to use those three columns once—a little later on.
Step 10
OK, so now we draw in our first black box. With your rulers and guides still on, create a new layer and draw a Rectangular Marquee (M) going from one side to the other. Fill it with black, then set this layer to 80% Opacity, right-click the layer, and choose Blending Options. Then click on Stroke and add a 1px white stroke on the Outside and set to Overlay. This will give us a really cool border that will make the box look much sharper.
Step 11
Now duplicate the box layer, and using Ctrl+T, transform the box so that it's the same width but much shorter (as shown below). This will be our navigation box.
Change the Opacity to 40% and the Fill to 50%. This will make our box much fainter and give some depth to the two boxes, making one seem more important and imposing than the other.
This sort of contrast between the two boxes is a great way of setting visual precedence between elements. When the user comes to the page, we want them to see our big message first, and then the navigation bar. By having it faded out we tell the user that the less prominent one is to be looked at second.
Step 12
OK, now we add some text. Again I've used Egyptian Light here for the big headline copy (that will be an image in the final HTML) and Arial for the menu items (that will be HTML text links).
Now a word on typography. This design relies heavily on the fact that we've used a simple, clean typeface. Having the text nice and large makes it appear very bold, but at the same time because it's a very thin typeface, it comes out looking elegant.
If you're looking for a high-end design look, thin, classic typefaces are hard to beat. When I first discovered Helvetica Ultralight, I remember I went crazy designing all these designs that looked really minimal and up-market.
Additionally, this particular font—Egyptian—has a very sharp, slab serif, combined with a sort of squarishness that makes it look quite cool (I think).
There are plenty of other awesome fonts you could use. As a general rule though, you want something more classic looking. Or in other words, unless you know what you're doing, you'd want to stay away from really weird looking fonts—e.g. something that looks very futuristic. Actually as a good, general rule, unless you're super confident, it tends to be better to veer towards more ordinary fonts.
Another kind of typeface that would work really well here is something that is a a bit technology-looking like this font that Chris Garrett Media uses. I have no idea what font that is, or what that type of font is called, but it's pretty neat. Maybe a kind typophile might illuminate us in the comments :-)
Step 13
Anyhow, after seeing Chris Garrett Media's site, I decided it would be pretty cool to add a gradient overlay to my type and give it a bit of a shine. So as you can see below, here we're adding a Gradient Overlay from black to white, faded out a bit and on Overlay mode.
Step 14
Now we can draw an additional big black box for the content area. Actually, you can just duplicate the earlier layer and transform it again.
And that gets us to the point shown in the image below. Looking pretty cool!!
Step 15
Now we add a bit of dummy content in the content box. Here I've again used Arial for most of the text, but for the headings rather than use Egyptian, I've gone with Georgia. Georgia is not quite as elegant, but is a standard font which means I can make these headings in plain old HTML instead of relying on images (or Flash).
Actually, with Windows Vista's release there is also another semi-standard font that would work well here called Cambria. But Cambria has some weird rendering problems in Firefox on Macs at certain sizes, so we'll stick with good ol' Georgia for the moment.
Step 16
Finally, I created a new layer at the bottom, filled it with a dark purplish color, added a 1px border to the top, and voila we have a footer.
Ready for Building
Putting it all together, the site is ready to build.
Alternate Background 1
Now one of the cool things about this design is we can easily swap the background and the design still looks awesome. Here's I've swapped it for an image from iStockPhoto called Passion, with a similar color scheme. It's a very cool 3D rendering of light, and like our current background, it is also abstract and visually beautiful.
Alternate Background / Colours 2
Here I've used another abstract image from iStockPhoto called Blue Energy. Because the color has changed, I've also gone through and amended the colors in a few places—particularly the text—and also added a big glow to the main copy.
Why it Works
Now it's unlikely you're ever going to have need of this exact design—now that I've written a whole tutorial on it. So let's talk a little about why it works well, because that will help you use the principles to create your own unique look.
There are several things that come together to make a design that works here:
- First, I've picked really stunning backgrounds. The ones from iStock and the one from GoMedia would make nice images all by themselves. They are interesting to look at but they don't fight for dominance. They also all fade out really easily. Photos that fade out easily are always easier to work with.
- Great images are the perfect partner for simple and clean typography. Because the images are so lovely, you don't need to do overdo it with the typography. It can just be clean, clear, and organized.
- Another factor that goes into making this work is that there is plenty of space. With a complicated background, it would be easy to wind up looking cluttered. So it's important to make sure there is plenty of space between things, and inside the boxes, and so on. Space also is a great way of making a design look more high-end. Nothing screams low-end like clutter.
Of course, there are plenty more things we could talk about like color and precedence, but I think the main design things you should be looking at here are the typography in conjunction with the background. As a final statement to that end, here is a little image that says it all :-)
Now the HTML/CSS
Now enough of this nambi-pambi Photoshop stuff, let's go do some HTML/CSS! Follow on to the second part of this tutorial where we build our design into a working Web site over at NETTUTS—Web Development Tutorials!
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
Plus Members
Source Files, Bonus Tutorials and
More for $9 a month for all TUTS+
sites in one subscription.
User Comments
( ADD YOURS )homs April 26th
Collis your great
( )i love you, no homo
me April 26th
hm .. jeah simply done .. but there aren´t so much effeckts !
anyway ist ok
( )raj.g August 25th
ya is good ma
( )Gino April 26th
Very great tutorial, I love this design!
( )Andrew D April 26th
Awesome tutorial, the web ones are my favorites.
( )Ali April 26th
Wow, it’s amazing how methods so simple can create something so visually appealing, luv it. It bothers me that I didn’t think of it
lol. I guess I gotta work harder when it comes to execution & creativity. Great Tutorial.
( )Erika April 26th
Love it, guys!
( )Constantin Potorac April 26th
I am just in love with simple and your designs Collis just blow me away.
Thank you
( )Rybaxs April 26th
wow… I like the design, impressive! i love also the background
( )BogDinamita April 26th
cant wait to try my own
( )Alen April 26th
This is great. A lot to learn from both tuts.
( )Shane April 26th
Collis – many, many thanks for this website-related tutorial. A fantastic end-result and tips along the way.
( )Danny April 26th
This is a very beautiful design. However it’d be great if you could write a tutorial for a design without a great picture. I understand that this tutorial is for porfolio-type sites, so it will be a little flashier, but I think a tutorial emphasizing the layout/design more so than the image or background would complement this tutorial very well! Keep up the great work
( )Razvan April 26th
Good sutff, awesome tutorial!
( )Lamin Barrow April 26th
Awesome stuff. Keep them coming.
( )Qbrushes April 26th
Good stuff mate!..
( )Rohil Sinha April 26th
This fucking rocks !! Thanks guys !
( )Harry April 26th
I have not done it yet but it will be awesome!
( )Bruce Alrighty April 26th
Excellent job Collis.
( )Keep them coming.
Sean Hodge April 26th
Really great design. I love the imagery and transparency.
( )1984 April 26th
With that interests me most is the creation of the design of a blog or a website.
I can say that this comes at a tutorial !
Thank you collis us have shared this tutorial free !
it would be good if PDSTUTS be translated into several languages.
The site win in popularity.
( )giackop April 26th
collis you are great.. this simple design is just awesome.. like your personal site.. simple and terrific
( )warlord April 26th
Stop using anti-alias on fonts only safari (wich is totally not cool) does that. Besides it’s not standard.
All the best.
( )Arnaud April 26th
Cool design
( )Nick April 26th
Beautiful!
( )sub April 26th
gah, as pretty as that is, i hate sites that do that without having any meaningful content. it’s pure wankery.
( )Ali April 26th
Very helpful in tuning this with the nettut tutorial.
thanks
( )Ben Griffiths April 26th
Awsome layout, I love it.
( )D. Carreira April 26th
Great Design! Thanks for another great tutorial!
David Carreira
( )*Jul!e April 26th
Great tut ! Thanks a lot !
( )Misa April 27th
I believe that in the first step, the second gradient color is #472323, and not #472373.
( )Sushaantu July 7th
Yeah, I also noticed that.
( )Ben Jacob April 27th
Grate designs.. I like them.
( )Daniel April 27th
Nice cross over tutorial! great job!
( )goldenthunder April 27th
haha so simple, yet so BEAUTIFUL! You rock Collis!
( )Edward April 27th
Nice tutorial. I liked the way how you blended PSDTuts with NETTUTS.
Cheers!
( )Dave April 27th
Thanks for the tutorial, looking forward to doing both.
FYI – your gradients are off in that first background step. Either the hex codes are wrong, or your picture is wrong. The hex codes are two purples, while the picture has a brown.
( )Kakumei88 April 27th
I was doing this tutorial and I came across a problem… In step 9, whenever I push CTRL+R, I don’t get the actual pixels on the edges of the box… I get the numbers 1 through 3 and no actual pixel count.
I’m not sure if it is CS3 that does that or something else. I would appreciate any help at all.
Also, thanks a lot for the awesome tutorial! I can’t wait to actually use this on an actual website!
( )Nicole April 27th
Beautiful! And I love the cross-over between site. That’s some business brilliance at work there. Bravo!
( )forman April 27th
This tut is a MONSTER!
( )ZaFaR April 27th
Good Job! I am loving how PSDTuts is growing. Keep up the good work and ideas! just great!
( )your tut come to my reader in a perfect time. soo simple, and soo cool. this site is getting better and better Collis, keep them coming
thanks a lot,
MONSTER April 27th
Great design tactics that can be implemented quickly…. I really find this tutorial useful.
Keep ‘em coming.
( )nate April 27th
Thanks dood!
( )Sean C. April 27th
Perfect timing! I’ve been looking for inspiration for my soon-to-be portfolio site and this will help greatly!
Thanks!
( )Fahad M. April 27th
I’m really new to stuff like this…and I want to make the site centered.
I tried downloading your layout to see how it looks centered…but the images are all messed up, even after downloading the images and putting them in the same folder.
So the question is…how do I make the layout centered? I don’t want just a simple answer like “put at the beginning and at the end…” because I’ve already tried.
Besides that, this layout is beautiful! Really nice work.
( )aGS April 27th
Nice layout, good explained tutorial, good choices for backgrounds (images)… it is clear that you know what you guys are doing… the only thing I have to disagree is: “simple typography with a beautiful image will get you a long way as a designer”… I don’t know… I guess it’s “sounds” very “easy” to succeed as a designer… not sure if that is right…
Thanks for the inspiration.
( )krashsquad April 27th
I’m lovin’ it!
( )eric April 27th
Can’t wait to see you turn this into code…I need to do more photoshop designin and crank out some sweet backgrounds like that.
( )barat April 27th
Not bat for a template… it can be used for wordpress… but ar You sure, that dark font on dark background is a good idea? IMO it decreases readability …
( )b00m April 27th
Very nice
( )Constantin Potorac April 27th
I am looking to change my portfolio and these web designs are very useful.
( )Lauren April 27th
L-O-V-E it! Reinforced the fact I really do need to commit to a broader library of fonts.
( )john April 27th
wow this is one of the nicest designs I have seen!
( )Jacob April 27th
Consistently nice stuff on here. Keep up the good work!
( )Rob April 27th
Nice, but here’s the problem. It’s not Google’able .. you’ll never get search rankings with pure graphics sites.
If a blind person’s screen reader cannot read it, then Google cannot either..
( )mediter April 27th
Just one proposal: would you guys create a print style sheet for PSDTuts & NETTuts ?
You have got so many great tutorials here, most of which are graphic-intensive, which translates to longer page-loading time. So once a reader’s browser finished loading one tutorial, the reader can save it as PDF using that Save As … button from the print sheet in Mac OS X or print it out for archiving and save us the trouble of having to wait for the tutorial to loaded again in the browser. Wouldn’t that be nice ?
Plus there is a good chance these PDF documents will get passed onto readers’ friends.
What do you think, PSDTuts readers ?!
Thank you very much for all the great tutorials here, PSDTuts !
( )veronika April 27th
nice work! and it’s funny you’ve used exactly this brushwork as background image – from the collection it was in, this was by far the most beautiful.
( )Matt Gregory April 27th
Awesome! I wish I could design sites like that. This tutorial just might inspire me to learn how.
( )Mike April 27th
Hey… this stuff looks good… but how do you keep the size down? I worry how long the design will take to load – particularly on slower connections. I always worry about this… how big of a deal do you think that is now?
( )blackout April 27th
This is such a crock! You violate almost all the precepts of usability by creating a layout that has more appeal as a painting than a clear, visible, user-friendly site. The web is not a painting. The web is information.
Grey type on a black background is not only not cool, it is passe. Even free LASIC eye surgery won’t fix it. Leading people down this web design path is irresponsible and just plain dumb.
( )Mousumi June 29th
Yes I agree with you. This design is looking very nice but it has violated Web 2.0 concept.
( )boyle April 27th
Chris Garrett’s font I believe is called ‘Klavika’. Awesome tutorial
( )Katalog Stron April 27th
I love this design. Looking awsome.
( )Acronyms April 27th
One more step to the better web.
( )Mason April 27th
Thank you for posting this. I’ve been stuck on design ideas for a while, this really helped.
( )Siriquelle April 28th
Nice work, I have an awful eye for appealing interface design, this tutorial helped me, thanks,
( )Daniel April 28th
Great
Daniel
( )Marian April 28th
Whoa love ya!
Do you pay yourself for that one? You should, for sure!
( )wildwise April 28th
the psd/net tuts is a great thing.
( )PJ Hutch April 28th
What makes this tutorial great, is not only does it go in detail about the steps in producing such a product. But in addition, it goes into detail how why it is effective and the groundwork for the overall design. Nicely done.
( )CFA Level 1 April 28th
You really have outdone yourself this time.
( )betatron April 28th
amazing…
wow.
( )skut April 28th
thanks for another web design tutorials
( )Nick April 28th
Nice work!!
( )tali April 28th
this is far from a high end web design layout, its a simple background with blocks put ontop of it
pffffffffffffftttttt
( )kozzmo April 28th
I think the font is Klavika. http://www.myfonts.com/fonts/processtype/klavika/
Nice article.
( )Joefrey Mahusay April 28th
Great tut Collis. I like the background and typography you use.
( )zoel April 28th
wow, i think if with patteen background it will be cools
( )Pravin Potdar April 28th
Great Web design!!
( )Alberto April 28th
Thank you so much, this is GREAT!
( )Jseen April 28th
Pretty Sleek
( )w3nky April 28th
nice effects
( )Robert April 29th
Excellent tutorial, please please keep these up, more web!
( )tobto April 29th
heavy design consisting from pics – isn’t a good idea for good UI.
( )Erik Gyepes April 29th
Thank you for this cool tutorial, I must say again wha others said there: it is great!
( )Mike [gamebittk] April 29th
Great article. Interesting tricks.
( )Xandu April 29th
Can I have the ready made HTML one?
( )Ian April 29th
Hi there, I really like your design approach. Putting textures into designs has always been my shortcoming in web design.
How do you (a) decide what image you’d like to serve as the backgroud, and then (b) find it?
Your tut has 4 kickass background texture images, that are well chosen and rock the design.
When I get to the home page of istockphotos, I find myself overwhelmed, and going, “well, now what?”.
First up, how do you decide what you want from a texture? Or do you just jump in and rummage?
How do you search for it, as texture is such an abstract concept? (and istockphoto has soooo many textures)
How long do you typically spend looking for a texture?
Many thanks
( )Ian
Matt Radel April 30th
Very nice and certainly CSS gallery worthy.
( )EH Martuchelli April 30th
PSDTuts Rules! Very nice!
( )EH Martuchelli April 30th
PSDTuts Rules! Very nice!
But, I have a suggestion:
You could create a CSS for printing (Print media type) or to provide the tutorial also in pdf.
I generate the pdfs of tutorials that interest me to read later, I believe that other people do the same.
Greetings brazilian. Peace!
( )Dave Booker April 30th
Yo Collis.
( )Love your tutorial style.
Thanks for not being stingy with your design tips.
Art Quiz April 30th
I ran across this article and decided to give it a crack. I’m not the best with designs but I got mine looking about 40% as good as yours, I’ll try again, thanks!
( )Sam April 30th
awesome!
( )Jasem April 30th
Step 7 is missing. I can’t go from white radial gradients to those cool highlights you’ve created.
( )M-RES April 30th
“This is such a crock! You violate almost all the precepts of usability by creating a layout that has more appeal as a painting than a clear, visible, user-friendly site. The web is not a painting. The web is information.
Grey type on a black background is not only not cool, it is passe. Even free LASIC eye surgery won’t fix it. Leading people down this web design path is irresponsible and just plain dumb.”
Obviously not posted by a designer. The precepts of usability would state that a fairly high contrast is required for legibility of type and an uncluttered background helps to this end. This design uses a solid black background for content areas and tints of the browns/black to create a simple visual style-guide for the eye to follow the flow of content around the page, quickly understanding the visual clues given by the type sizes, colours and font usage. There is nothing wrong with using grey type on a black background. It is neither passe (which suggests you are a victim of ‘fashion’ rather than style), nor an irresponsible design choice just so long as there is sufficient contrast. Of course the ultimate contrast is black on white or white on black, but that’s not always possible when trying to conform to colour palettes – plus the extremes of contrast can become tiring to read, which is where a softer look can be achieved by using a grey on black or white to tone it down. I can read the text in the small inline graphic screenshot of the page without having to see it at 100% size, therefore, the contrast is sufficient.
At least if you’re going to criticise a design for usability, make sure you’re talking about the right thing. You claim that it looks like a painting, yet that is the point of good design and I see a clearly structured 3 column grid system for the content with an overall slightly asymmetrical content position (important to apply tension to the page and avoid the blandness of centered content which will help make the page MORE likely to be read, even by those surfing through). If the content doesn’t look inviting then it doesn’t matter WHAT it says, you’re not going to hold the casual observer at your site. I’d say overall it’s a fair design job from fairly widely available stock material and a good starting point for many people (some of who may now avoid overcrowding their page backgrounds with glitzy animated sparkling madness and ‘bling’ clip art).
( )Martin Leblanc May 1st
Beatiful design: YES (Great work)
Good usability: NO (light on dark text, no separate color for links etc.)
The hard part of being a web design is to do design that not only looks good, but also has a high level of usability. That said I really think it’s a nice post
( )Holly Mack May 1st
Wow! An absolutely brilliant tutorial – I couldn’t add PSDTUTS and NETTUTS to my favourites fast enough! Will be back for more, thanks again.
( )Bubber May 1st
Guys you just made my day !
I discovered your tutorial via smashingmagazine and it was worth checking the link !
I am totally going to try this one and surely learn a lot on how to create a website design…a design that’s mine instead of some templates that’s never reflecting one’s personality.
A note to the “haters” that cannot see the potential of this tutorial:
You got to get rid of your leaching habit ! A tutorial is made to teach a way of doing something… Which doesn’t mean it should always be done this particular way.
Get some inventiveness ! There are so many colors, so many typos … customize this design to fit yourself (and your perception of what usability for webdesign is).
**END**
Again guys : thank you for this tutorial ! You just got del-icio-used + igoogled !
( )Ivan May 1st
This is just great, now I can finally make my portfolio site
( )doksan May 1st
I love this design! Very nice
( )kaiser May 2nd
i´m a reader since the first day, but i really got a problem: DO YOU GUYS AT PSD-TUTS.COM READ WHAT YOUR READERS WRITE? I believe: no. For e.g.: No Stylesheet for printing, no sollution for printing without comments and so on. There are huge problems in nearly EVERY tutorial and you got a lot of readers who got a clue and try to help you improve your tuts…. but you never answer questions, react on comments or anything else… too bad. Sorry, but that´s no compliment.
( )Jeff May 2nd
“Obviously not posted by a designer. The precepts of usability would state that a fairly high contrast is required for legibility of type and an uncluttered background helps to this end.”
Yes, a fairly high degree of contrast is required. Unfortunately, this site fails both color and brightness contrast checks. I ran it through a couple different contrast tools, and the content text has roughly half the contrast and brightness variation that is required. Thats pretty far off.
In addition, You have a huge amount of graphics (slow load time) and you have images for text (SE Unfriendly).
Typical of someone who designs websites for Photoshop and not for end users.
That being said, if you are a graphic designer, and you are making a portfolio to show off for other graphic designers, its probably ok, because they all have fast connections and big screens, and can probably see fairly well. But I would warn against using this for any other type of site.
( )Qbrushes May 2nd
i agree with some point made, its not the best UI but its not that bad.
( )paismast May 3rd
woowowowo impresionantes tutoriales hombre, señores son unos maestros
( )impresionante
website design May 5th
wow great tutorial.
Thanks
( )resevil83 May 5th
IN RESPONSE TO Kakumei88
( )Simply right click on the white portion of the ruler bar where you see the numbers ‘1,2,3,4′ You will get a drop down menu, where you are able to select pixels. You are on the inches mode.
Web Design May 7th
Great tute. I like clean and attractive sites like the one illustated.
( )Chris Garrett May 8th
hey guys, just realised the linkup, thanks
(I really should check my referrers more often) The font I’m using is indeed Klavika, regular and heavyface versions.
( )Benji May 10th
hey nice tutorial, just one question that has driven me crazy for a long time, could give me a hint to manage the recent works working automatically instead of coding all over again? thanx ( tho its php i cant find an answer to my question in any other places hehe) thanx!
( )Ben May 13th
Amazing!
( )#1 Breaking Headline Entertainment News abc cbs nbc bbc reuters associated press court tv May 15th
That being said, if you are a graphic designer, and you are making a portfolio to show off for other graphic designers, its probably ok, because they all have fast connections and big screens, and can probably see fairly well. But I would warn against using this for any other type of site
Yes, a fairly high degree of contrast is required. Unfortunately, this site fails both color and brightness contrast checks. I ran it through a couple different contrast tools, and the content text has roughly half the contrast and brightness variation that is required. Thats pretty far off.
And finally I would like to say this:
Amazing!
( )eman April 25th
Sweet coment :>
( )ABU May 15th
You are a star!!!!!!!!!
( )Lior May 16th
indeed a beautiful page. some very helpull tips. thx
( )rafeequl May 17th
This is a great resource for web designers. Its explains clearly and easy to understand. What a superb knowledge share from the author ! Thx man !
( )P7 May 21st
Hi, just wanna thank for this great tips. The style is also very nice.
( )iuliux May 26th
merry me!
kidding… i just got to learn some typo
( )Anthony May 27th
Looks great! Thank You. I have one question though. What about designing a site with google’s web crawlers in mind? I keep going back in forth with this issue. On one hand, a site designed like this looks wonderful, but isn’t it harder for google to find your site? If you do your content in typo typed with whatever web design editor you use, it should be easier for google to find right? Or am I completely wrong?
( )Ben May 27th
That is what i call an awesome tutorial.
( )Adam K June 4th
I think it’s fantastic.
I’m pretty surprised so many people are getting uppity about contrast and all; heck, use the parts of the tutorial that work for you, and change the rest (I am).
Step-by-step tutorials like this are incredibly helpful, even if you only pick up one little trick you didn’t know before. For instance, I found out that Fireworks can do pretty much everything here, and I had no idea it could until I started digging deeper into options I’d never explored before.
Thanks for all you do, Collis. This rocks.
( )harucaine June 12th
Collis Well Done!
This site has really opened things up for a lot of people. The fact that you took a concept visually through from scratch right through to coding it out is amazing and defenitly puts PSDTUTS well above any other tutorial sites on the internet.
Youve helped me get my head around how a visual idea can be drawn out and placed on the web. Really really love you guys!!
Thanks a heeeap!
( )Yusuf June 18th
wow!! now this is what i call a tutorial!!!! gotta go home and do this asap!!!!
( )Nick Morris June 18th
Hey Collis, I need to get in contact with you to make sure what I am doing is OK:
I was greatly inspired by this tutorial after searching for DAYS trying to find a site design that fit what I wanted make. Not the exact design itself, but the way it is laid out and coded. After making 4 of my own designs that are good, but not what I want, I found this, and at first, duplicated what you made through the tutorial. Then, I began changing it all with my own techniques and effects, and now it looks completely different but still has the clean cut look. I want to make sure with you that what I have done is OK for you. Please email me back if you get the chance and I’ll send a preview of the site before it goes up. Thanks.
( )Joomla Developer June 19th
Well done. Great tutorial. We are seeing more of this type of web design now that IE6 is starting to fade into oblivion. We can finally start using transparency in out designs with confidence.
This sort of thing works really welled with a fixed background allowing the content area to scroll across the top.
( )Steven June 19th
Seems rather similar to http://www.goodbytes.be/
You should really credit your source.
( )Andrei Constantin June 25th
There will be always some persons which are never satisfied. I think first they should have thank you that psdtuts exists, 2nd that such a “project” like the one in this post, it’s not meant to be used “as is” but it just shows the technique and thinking behind it. You don’t like the colour contrast? fine, feel free to change it. You are not happy that the design itself is not SEO friendly? great, dig some css techniques and code it yourself!
Furthermore imagination is out there for everyone, unless the site look EXACTLY the same with another one out there, there’s no point in blaming the author as he never mentioned he thought about this as if in its his idea.
Everytime a new post pops in my rss feeder i leave everything and open it and read it. If im looking for a special design, i’ll try my own or hire a a designer, but unique / particular techniques, you will never find them even after reading * ebooks.
So stop complaining and start learning
( )Susan June 25th
Love the use of blending modes in this – great reminder – thanks!!
( )maddy July 15th
It’s really very good psd i like it very much
( )thanks for good tutorials
Tyler Collins July 17th
Hey, loved the tutorial, did the whole thing from start to finish and it turned out exactly the way your did
Im not sure whats going on with this, but im not sure wether you got inspiration from this site, or the site got inspiration from your tutorial, but the sites have the exact same feel about them….
Let me know what the score is
http://www.goodbytes.be/
( )Pietro Marafiga Monteiro July 20th
Great job!
I did the same design with Fireworks CS3!
Of course, some effects can only be achieved with Photoshop, but Fireworks is a really powerful tool too!
Best regards from Brazil.
( )quaden July 22nd
great tutorial
( )thanks
http://www.dotqn.com
Oh WutEvur July 24th
Herro! My name is Heroshimaki Oshimokasha and I am http://www.goodbytes.be. Thank you for the tutorial. I am glad that my site is inspirational. I really love that I could use this tutorial to build my site. I have so many more traffic now from you tut. My site inspires all now. We will love the web design. Thank you for the fonts inspired. I have more fonts too! Long live gradients! Hoora!
( )kirikoo July 27th
Great tutorial!
( )just wondering , how do you go from step 6 to step 7?
Nik August 3rd
the futuristic font on Chris Garretts site is Klavika Medium-OSTF. Identified it using http://www.myfonts.com/ has a really sweet function which lets you upload gifs and jpegs and it then identifys the font.
( )godonholiday August 5th
steven? not going to mention goodbytes’s comment?
a great tutorial. I think everyone can take something from this.
( )Cooper Shrieve August 14th
MONSTER tut…. one typo…. the second color stop for the gradient, is not #472373, for that is a dark purple… #472323 is the correct code, which is the auburn color u looking for.
( )fornetti August 31st
I do not believe this
( )Dobby August 31st
does anyone know which software has been used here
( )Elis September 6th
Simply magnificent. End.
( )Francis September 11th
Great tutorial. I don’t think it matters where the design originated from. The idea is to show how designs like this can be created using Photoshop or any other paint program. As an graphics instructor for many over 20 years, I encourage my students to imitate existing commercial works they find interesting, for example, magazine ads, posters, signage, junk mail, etc. These are all sources of great ideas to learn or borrow from or be inspired by. In Art school, you first learn to paint in the style of the great masters before finding your own artistic path.
What a wonderful site. I will keep encouraging my students to visit and visit often. Keep up the good work.
( )Raj September 22nd
again a very nice tutorial
Thanx Collis!
( )Bob September 26th
Great tutorial! I’m just starting out in website design so to see how to put together artworks with gradient techniques and effects is great. The only bit that seems to be missing between this tutorial and the next over on NET TUTS is the process of preparing your images and slicing them down. It would have been nice to have had a run through on that part of the design process seen as this is a start from scratch tutorial. Also, some advice on type sizes and web safe fonts would be good.
Apart from that, loved it!
( )Danny September 30th
It is easy to see why some people are hung up on the usability of this, but it isnt a huge issue, just a few tips for the designer to take on board.
The first block can easily have real text laid over the background, text colours can be changed, backgrounds can be modified. Yes some of the text is a little dark on the background. But this can be adapted.
But do you HAVE to do exactly as the tutorial said? For starters, the two colours didn’t suit me in the gradient, and i was using the GoMedia brush which is identical to the image given free by the site. i used another couple of brushes from that pack too.
With tutorials, i use them to get ideas, i don’t use them to make websites exactly how they say!
The background image, for example – this can be cut directly across at the point where the gradient goes to solid black, and the background colour takes over, meaning a smaller background image. Same goes for the box at the bottom, this can be done in css rather than the browser loading another image.
However, the comments and criticisms are always helpful to a designer and we all learn new things every day, not only beginners, but those who have been doing it years. Excellent design, and thanks for the tutorial.
( )someone October 5th
how to highlight the gradient ( from step 6 to step 7 ) and how did you highlight the image ?
( )Bryan October 13th
Is it a good idea to make a image that large as the homepage background? Everytime someone goes to your site they have to load a 1024xwhatever size image. I was taught making backgrounds to use a 1024×1 px image or vice versa and use css to x/y repeat it to cut down on bandwidth. Or can this design not be made using that technique.. im sure you could make the gradient like that… ?
( )Mohamed A. October 20th
Create tuturial..
Maybe a little more detail. (arial text, how did you set the settings for that). if it is not a problem.. (want to learn more).
Total awsome… kep it up (H)
( )k00pa October 24th
Great tutorial! It gives some nice ideas for me.
( )BriAnn October 31st
Wow! Beautifully designed and commented! I loved the paint splash and tried to duplicate instead using a white on white. Not as eye catching as the black. You can see what I did at http://www.briannwebdesign.com/mockups/mockup3.html
I haven’t sliced it yet, just put the image out there.
After seeing your design and comments and the tut on slicing, I had to comment after years of viewing and reading. Yeah sure it’s easy to design something that looks totally awesome in Photoshop…the hard part is then transferring that beautiful design into hard coded xhtml and css. Many people don’t realize that you have to take this into account during the design phase as well. So glad you included a tutorial on slicing and coding.
Beautifully written and documented. Thanks so much you’re truly inspiring!
( )Igor Mattos November 2nd
Like the others people said,
( )Gradient in step 1 is wrong..
and the step 6 to 7 is incomplete,
how i get this light effect over the background?
Amy November 3rd
Hi
Learn’t a lot from this
( )prasenjeet November 7th
its really good to see this sort of work specially in PSD, as so many think its just for only editing, anyhow thanku for sharing your thoughts & vision.
keep it up buddy : cheers !!!
( )Grant November 9th
freewebs.com/goyston
Hoorah! I made this using this tutorial. It’s not quite as nice as yours, or as fancy, but this was my first web design using CSS, and so I’m really pleased. Thanks so much! This has given me the tools I need to continue developing my CSS skills, and a basic understanding. I love how you provide sample code, a screenshot, and then a detailed break-down of what each part of the code does. That’s incredibly useful.
( )Michael Grafl November 16th
Very nice. Thank you!
( )Amy November 18th
Some great ideas!
Amy
http://www.wan2design.co.uk
( )sayGGplz November 22nd
That’s very nice tutorial, thx you!
( )Totti November 27th
There is a problem with downloading the watercolor from gomedia.
I had to registrate but there was no download function aviable on the site.
And i don’t find any other watercolors.
( )Matthew November 29th
Verry NIce
heres my example
http://i264.photobucket.com/albums/ii166/airblastor/Mystery/MYWEBSITEDRAFT.png
( )Eric Shafer December 5th
Tracked back to from here: http://www.presidiacreative.com/amazing-web-design-tutorials/
( )JR December 5th
This is an absolutely incredible tutorial. Solid gold. I’m adding PSDTUTS to my Google Reader.
( )DK December 9th
Beautiful and Simple. Love it!!
( )Gavatron December 20th
Fantastic tutorial, thanks so much for sharing!
( )Rob December 23rd
This really is a good looking web site design and a great tutorial. However, for people like me who only know about $30 worth of Photoshop it doesn’t make sense and many steps are incomplete.
( )Adeel December 23rd
gr8 job two thumbs up
( )siubie December 24th
awsome … yo make a complex design in a easy step by step tutorial
( )Eric Shafer December 31st
Tracked back to from here: http://www.presidiacreative.com/the-10-absolute-best-tutorials-of-2008/
( )dennis January 3rd
great job…..
( )bilim January 4th
Very great tutorial, I love this design!
( )The Dude January 7th
I wanna learn how to do those backgrounds myself! (red and blue) So I can make my own abstract beautiful stuff
( )Rhett January 10th
While at least two readers have commented that Chris’s site uses Klavika, I will add that a very close match available for free from Smashing Magazing is Myndraine.
( )Satish Gandham January 11th
Awesome tutorial buddy,
( )Thanks a lot.
Im a fan of you blog. Added it to my design bookmarks
Br1 January 15th
Amazing graphics, excellent tutorial!
( )I learned a lot from this one.
Thank you so much, PSDTUTS is on my feeds favourite and I read it EVERYDAY!
Snoob January 21st
ok, i’m a vietnamese, i can’t think about anothor tutorials better, It is a best tutorials with me
( )shan January 26th
nice, it helps a lot.
( )thanks for sharing your knowledge.
Kayla February 5th
Wonderful design, thank you!
( )Anon February 19th
Your tutes are amazing, for a complete PSD noob, I was able to follow your design fairly easily.
Thank you
( )Tim Smith March 5th
Awesome tut!!
( )justin March 15th
can anyone share some backgrounds they have made?
( )or upload a PSD that I can easily place an abstract image in there and be ready to go? thanks
JASON March 22nd
Wonderful!
( )MLI March 24th
Brilliant tutorial. I especially loved your tips at the end. Less is more indeed.
( )Laneth Sffarlenn April 2nd
This has been an excellent 4 hours.
I just went from start to finish after work – it’s now 9:30 pm and I feel accomplished.
Collis, Thanks so much for creating this – especially with the complete breakdown after each code section. This is the best way to learn a code language in my opinion, and CSS has gotten the better of me till now. Now I feel a little more confident
( )CgBaran Tuts April 17th
Great Tutorial
( )Maronna Coartney April 25th
I have been trying for weeks to design a site for my portfolio class and have failed miserably. I knew what I wanted and had my palette picked out, so when I came across your tutorial I was a match for me. I followed the basic concepts and made some modifications to keep it my own and am amazed at the results. All I have to do now is build the sight. Thank you ever so much Collin for you inspirational help and keep up the great work.
( )shadolen White April 28th
I appreciate the common sense you provided in this tutorial.
( )I feel that I have evolved another level mentally after reading that one quote
”
simple typography with a beautiful image will get you a long way as a
designer”
Nature Spix May 4th
I can’t even thankyou enough for this post. I always wondered how people create incredible looking websites and now I know! AMAZING
( )ryanm May 7th
This is really a great tutorial.. Im planning to launch a portfolio and now i have an idea to start. THanks
( )flashfs May 24th
Very nice tutorial. I liked the explanations.
( )Tim June 4th
Awesome, especially when you consider the simple techniques used to generate remarkable effects.
2 thumbs up man
( )Gareth Hardy June 5th
Great tutorial thankyou
( )Tom Gurney - Ansel Adams Fan June 11th
Great stuff! Really stylish design, with flexible opportunities.
You’re right that simple designs with attractive backdrops can bring impressive results. I tend to struggle on finding nice typefaces, personally.
Your relaxed writing style made the article easy to follow and as such have StumbleUpon’d this page.
( )Dorene Beck June 11th
This is my first visit but I can tell you that I will be back. The designs are very artsy and I loved the tutorial. I’m a student at IADT tampa. Won’t my teachers be surprised when they see the stuff I’m creating now!
Thanks!
( )CSSJockey June 12th
Hey! Thanks for this wonderful tutorial. Used another image as background and it’s looking Awsome!
( )z June 16th
In regards to step 5, how do you set transparency in the color picker?
( )Dooby June 18th
You double click the gradient preview box and in there you will see a colour bar that represents your gradient start and end colour, on the top of that bar are two stoppers select either one and then change the opacity to 0%.
I hope this helps
( )Ice QB June 20th
Such a wonderful tutorial! Its so good to see you sharing your creativity out here! Keep up the good work! Cheers!
( )rvv June 22nd
I am also love this design! Very nice! good work ! rvv
( )León July 15th
that’s very great, I thank you
( )Egg Web Design Cork August 1st
Wow, just what I was looking for thanks!
Both this site & nettuts are fantastic. Such a great resource.
( )yanakieff August 13th
Thank you for the great tutorial , i learned a lot !
( )Clay Jackson August 21st
knarly! Thanks for posting.
( )Az August 26th
This is epic stuff! Seriously, thank you so much! *bear hugs*
( )Darren August 27th
Hi the picture links for the background no longer work I’m afraid.
( )Gaurav September 5th
The hex codes for gradient are wrong..
( )houtunanqan September 22nd
good good study day day go up
( )Tampa Bay Web Design September 26th
Your a great Web Designer. I got you site bookmarked so I can check back for future posts.
Thank
( )Danny October 5th
WOW!! Your work is truly exceptional, I like how you make it so easy in order for me to understand. I have been exercising on designing a good background image for a while now, and your technique is definitely one to consider. It is exactly what I have been looking for.
Thanks heaps, I am enjoying every moment of it.
CHEERS
( )jmarreros October 12th
Tanks for the tutorial it was very interesting.
( )angela October 26th
That’s amazing! Wow. Thanks for sharing.
( )carl November 15th
Great tutorial. Thanks!
( )hilihili November 16th
so amazing!!!!!!!!!!!!!
( )thanks!