You are on page 1of 20

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, well 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 youre 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 lets rockn'roll!

The End Design


Its 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, Ill show you how we can easily swap backgrounds and fonts and
explain why this design works well.
Its 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, well 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 well 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 doesnt distract from

the text. Fortunately, there is an awesome watercolor image available free via GoMedias Arsenal, click
on the freebie section and youll find two watercolors; the one we want is the greenish one.
Now while its very pleasant as is, its much cooler if we press CTRL+I and invert it so its 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 dont want it too long vertically, either, so its 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 its best to get a brush that has some texture so its 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.
Its not a bad brush to use. Of course, you might have some even nicer paint brushes and feel free to
use those.
When youre 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 heres the finished background. Its dark, abstract, and quite elegant with the coloring. Of course,
pink might not be your particular choice of color usually, and if thats 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 dont really have a purpose with this design, so I
decided just to put some text in and pretend thats my logo. Because this tutorial is half Psdtuts+ and
then half NETTUTS, I wrote out a neat little "psd vs net".
The fonts Im using here are Egyptian505 BT Bold and Egyptian505 LT BT Light (the lighter version
of the font is what Ive 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 doh!
Anyways, the point is that Im defining the space Ill 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, Im just going to use those three columns oncea 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 its 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 Ive 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 weve used a simple, clean
typeface. Having the text nice and large makes it appear very bold, but at the same time because its a
very thin typeface, it comes out looking elegant.
If youre 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 fontEgyptianhas 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 youre doing, youd want to stay away
from really weird looking fontse.g. something that looks very futuristic. Actually as a good, general
rule, unless youre 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 technologylooking 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 its pretty neat. Maybe a kind typophile might illuminate us in the comments :-)

Step 13
Anyhow, after seeing Chris Garrett Medias 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 were 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 Ive again used Arial for most of the text,
but for the headings rather than use Egyptian, Ive 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 Vistas 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 well 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. Heres Ive swapped it for an image from iStockPhoto called Passion, with a similar
color scheme. Its a very cool 3D rendering of light, and like our current background, it is also abstract
and visually beautiful.

Alternate Background / Colours 2


Here Ive used another abstract image from iStockPhoto called Blue Energy. Because the color has
changed, Ive also gone through and amended the colors in a few placesparticularly the textand
also added a big glow to the main copy.

Why it Works
Now its unlikely youre ever going to have need of this exact designnow that Ive written a whole
tutorial on it. So lets 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:
1. First, Ive 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
dont fight for dominance. They also all fade out really easily. Photos that fade out easily are
always easier to work with.
2. Great images are the perfect partner for simple and clean typography. Because the images are so
lovely, you dont need to do overdo it with the typography. It can just be clean, clear, and
organized.
3. 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 its 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 :-)