• Tutorials

\
• Interface

Create a Sleek, High-End Web Design from
Scratch
Collis on Apr 26th 2008 with 299 comments
Tweet
Pin It
Tutorial Details

• Program: Photoshop
• Completion Time: 2 hours
• Difficulty: Intermediate
Download Source Files

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

If you scroll down your brush list. Additionally. it’s much cooler if we press CTRL+I and invert it so it’s that nice pink/purple on black. Fortunately. we don’t want it too long vertically. Note that it’s best to get a brush that has some texture so it’s not obvious that we erased parts. It’s not a bad brush to use. so it’s best to erase a little of the excess. click on the freebie section and you’ll find two watercolors. Our aim here is to have it fade to black on the right (so that we can build our HTML later with greater ease). there is a brush that comes with Photoshop that looks like the one shown. the one we want is the greenish one. either. fill in any areas on the right and bottom with black so that the whole canvas is covered by this layer. there is an awesome watercolor image available free via GoMedia’s Arsenal. Now while it’s very pleasant as is. Of course. you might have some even nicer paint brushes and feel free to use those.the text. When you’re done. . To do this grab a paint brush and paint in black to just remove the bottom parts. Step 3 Now copy the watercolor onto our main canvas and press Ctrl+T to transform it down to a reasonable size.

That way. some of the coloring passes through to create a nicer look. .Step 4 Now decrease the opacity of the watercolor layer to about 70% and set its blend mode to Overlay.

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 5 Now in a new layer above the watercolor layer.

Basically. . Set these to Overlay and 40% and 100% Opacities for the larger and smaller ones respectively. one larger than the other.Step 6 Next in two new layers. draw a couple of Radial Gradients from white to transparency. you should be making a highlight on our image to give it a bit more texture.

so am going to run with it! .Step 7 So here’s the finished background. Of course. pink might not be your particular choice of color usually. feel free to add a color adjustment layer on top and use it to adjust the coloring. and quite elegant with the coloring. It’s dark. and if that’s the case. abstract. I kinda like the pink/purple.

Finally. I wrote out a neat little "psd vs net". Because this tutorial is half Psdtuts+ and then half NETTUTS. I don’t really have a purpose with this design. . 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). 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 8 Now we create a new layer and add a "logo". so I decided just to put some text in and pretend that’s my logo.

.

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. Fill it with black. Step 10 OK. Then click on Stroke and add a 1px white stroke on the Outside and set to Overlay. With your rulers and guides still on.Step 9 Now at this point. 610px. create a new layer and draw a Rectangular Marquee (M) going from one side to the other. This will give us a really cool border that will make the box look much sharper. with only the homepage being designed. and choose Blending Options. As it is. . right-click the layer. the point is that I’m defining the space I’ll be placing all me elements in. I divided my page into three columns with lines at 50px. 320px. I’m just going to use those three columns once—a little later on. so now we draw in our first black box. 900px. and if I were to make multiple pages I could use this grid in different ways. I switched on my Rulers (Ctrl+R) and drew a couple of guides. then set this layer to 80% Opacity.

Step 11 Now duplicate the box layer. Change the Opacity to 40% and the Fill to 50%. making one seem more important and imposing than the other. This will be our navigation box. we want them to see our big message first. . and then the navigation bar. and using Ctrl+T. By having it faded out we tell the user that the less prominent one is to be looked at second. transform the box so that it’s the same width but much shorter (as shown below). This sort of contrast between the two boxes is a great way of setting visual precedence between elements. This will make our box much fainter and give some depth to the two boxes. When the user comes to the page.

or what that type of font is called. this particular font—Egyptian—has a very sharp. slab serif.g. As a general rule though. combined with a sort of squarishness that makes it look quite cool (I think). Additionally. If you’re looking for a high-end design look. clean typeface. classic typefaces are hard to beat. Actually as a good. unless you’re super confident. Now a word on typography. Maybe a kind typophile might illuminate us in the comments :-) . thin. it comes out looking elegant. unless you know what you’re doing. general rule. When I first discovered Helvetica Ultralight. 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).Step 12 OK. it tends to be better to veer towards more ordinary fonts. This design relies heavily on the fact that we’ve used a simple. Another kind of typeface that would work really well here is something that is a a bit technologylooking like this font that Chris Garrett Media uses. Having the text nice and large makes it appear very bold. you’d want to stay away from really weird looking fonts—e. I remember I went crazy designing all these designs that looked really minimal and up-market. Or in other words. I have no idea what font that is. There are plenty of other awesome fonts you could use. but it’s pretty neat. you want something more classic looking. now we add some text. but at the same time because it’s a very thin typeface. something that looks very futuristic.

Step 13 Anyhow. here we’re adding a Gradient Overlay from black to white. . after seeing Chris Garrett Media‘s site. faded out a bit and on Overlay mode. So as you can see below. I decided it would be pretty cool to add a gradient overlay to my type and give it a bit of a shine.

And that gets us to the point shown in the image below. Actually. Looking pretty cool!! . you can just duplicate the earlier layer and transform it again.Step 14 Now we can draw an additional big black box for the content area.

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. Actually. but is a standard font which means I can make these headings in plain old HTML instead of relying on images (or Flash). . with Windows Vista’s release there is also another semi-standard font that would work well here called Cambria. Georgia is not quite as elegant.Step 15 Now we add a bit of dummy content in the content box. but for the headings rather than use Egyptian. I’ve gone with Georgia. Here I’ve again used Arial for most of the text.

and voila we have a footer.Step 16 Finally. . filled it with a dark purplish color. I created a new layer at the bottom. added a 1px border to the top.

. Here’s I’ve swapped it for an image from iStockPhoto called Passion. with a similar color scheme. 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. It’s a very cool 3D rendering of light. and like our current background. it is also abstract and visually beautiful.Ready for Building Putting it all together. the site is ready to build.

. 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.Alternate Background / Colours 2 Here I’ve used another abstract image from iStockPhoto called Blue Energy.

They are interesting to look at but they don’t fight for dominance. There are several things that come together to make a design that works here: 1. The ones from iStock and the one from GoMedia would make nice images all by themselves. it would be easy to wind up looking cluttered. and organized. They also all fade out really easily. 3. So it’s important to . With a complicated background. Photos that fade out easily are always easier to work with. It can just be clean.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. Because the images are so lovely. 2. Another factor that goes into making this work is that there is plenty of space. because that will help you use the principles to create your own unique look. I’ve picked really stunning backgrounds. Great images are the perfect partner for simple and clean typography. you don’t need to do overdo it with the typography. First. So let’s talk a little about why it works well. clear.

make sure there is plenty of space between things. As a final statement to that end. there are plenty more things we could talk about like color and precedence. and so on. and inside the boxes. Of course. Nothing screams low-end like clutter. but I think the main design things you should be looking at here are the typography in conjunction with the background. here is a little image that says it all :-) . Space also is a great way of making a design look more high-end.