It's pretty amazing how much colour and background can change the look and feel of a website. In this tutorial we're going to put together a quick, simple but effective layout and then create variations using backgrounds, photos and patterns. We'll also look at how to make seamless tiled backgrounds out of a photo, methods for ending a single photo and simple ways to create pixel patterns. In short it's a jam packed tutorial!
How a Simple Layout Can Be Mixed ‘n’ Matched with Patterns, Photos and Backgrounds
Dec 2nd in Interface by Collis
Step 1 - Creating the Basic Layout
So our first task is to design a layout for our page. We're not going to do anything too fancy because the tutorial is about backgrounds more than layouts. Still it should look good and be an actual workable layout. So in the image above you can see my plan of rough components of the page. I've planned in a menu and submenu, a panel to introduce the section and a content area. I've also planned that it should be less than 1000px so that when a person on a small screen views the site they still see the background properly (since that is going to be a big feature of the design).
Now I should point out in reality I didn't actually draw out this set of boxes quite like this. It was more like just muddling around until I thought "oooh that's a nice layout". But for the purposes of this tutorial it makes better sense to explain it this way!
2 - Fleshing it out
So that layout is our bones, now we need to flesh it out with some dummy content and a colour scheme.
As you can see I haven't done anything really amazing here, just placed the elements on the page fairly neatly and evenly. So note that spacing. In the image I've tried to show how different elements line up (yellow lines), how spacing is roughly even vertically and horizontally as well as above and below elements.
Note that these are just rough guides and I actually just work by eye until things look right. But if you are unsure of spacing, doing things fairly evenly is not a bad place to start. As you get more comfortable with spacing you can vary things up and play with uneven balances.
In the image above you can see I have chosen a main display typeface called Rockwell that we'll use in the heading panel to give the page a bit of character. If I were building this site that might be an image or inserted using sIFR. The rest of the text is Helvetica and Arial which of course is suited to HTML use. Also I threw in a vector illustration of a paper plane that I drew years ago and sell as stock. Of course in a real project, this image would be something to do with the site instead of just randomly thrown in as I have here.
Finally I've used a warm, earthy tones colour palette. I'm actually a bit of a fan of beige and earth colours and you'll find I use them a lot. I think they go a long way to making websites look friendlier and more approachable.
So the page is looking OK, but there's nothing very memorable about it yet and it's a bit basic. In the next step we'll add some polish.
3 - Polishing and Adding Some Style
OK so here you can see the exact same layout but I've polished it up and added two visual elements to give it some style. The first element is the arrow cut out of the side menu. This makes the middle panel look like a kind of overgrown speech bubble. The second visual that you'll see when you look close up is a sort of dot theme.
So in all we've used three visual elements to give the page some style: an illustration, an interesting grid-breaking shape, and a subtle theme based on a simple shape. Later we'll add a fourth visual element - a background - to finish off the site's style.
In the image above I've pointed out all the bits of polishing that I added. It's all just little highlights and graduations in colour, dots, and of course the cut out arrow. You might also be interested in a previous article I wrote a year ago about polishing web designs here on PSDTUTS.
View Before and After
So with that we have our basic layout!
4 - Adding a Tiled Background
So the first background we're going to swap in is a tiled image. In this instance we're using a grass photo that I used on that grass text tutorial (a series which I have yet to finish :-) You can get the original grass photo on Flickr.
Of course if you try tiling the original photo it's not going to look very good and it will be obvious that you're just repeating the same image over and over. Instead you need to alter the image so that it tiles seamlessly. Fortunately I just put up a tutorial on this very subject, so head over and read:
How a Turn a Texture into a Seamlessly Tiled Background
Along with the change in background of course I have updated the colouring to suit the new look. Notice that I've avoided using the same shade of bright, light green as the grass - doing so would have been overpowering. Instead picking shades of duller greens darker and lighter complements the background.
5 - Mixing Transparency with the Background
Now backgrounds like this are perfect for adding transparent layers over the top. Here both the About panel and the Menu have some transparency and it looks awesome because you can see some of the grass coming through and it adds some depth. Although you can just simply dim the opacity of the appropriate layer down, another option is to add a couple more layers on top - one with a slight gradient fading to nothing and the other with a 1px highlight.
In the image above you can see for example on the menu that I have a block of white set to 70% opacity, on top of that there is a gradient from white to nothing, and on top of that is a 1px white line on the bottom edge. These additional layers emphasize the transparency and give the image depth.
6 - Creating a Quick HTML Transparent PNG test
So all this transparency is easy to do in Photoshop, but you might be wondering how feasible it is to build such a design.
Happily it is possible thanks to the .PNG file format which lets you use transparency in your images. One thing to be aware of though is that while you can do transparency (e.g. 60% opacity) you can't do layer blending modes (e.g. Multiply or Overlay). Since in a Photoshop design it's important to not do anything that isn't actually buildable, all I've used is opacity settings. It's more limiting but you can still get nice effects.
So let's create a quick HTML test just to make sure everything really works how we imagine it will. To create a transparent PNG, first we'll merge the layers for our big panel shape into one. Because all the layers have some transparency the end-result after merging is also semi-transparent.
Now just copy that into a new Photoshop document, then switch off the background layer (see the image above) and you should see the transparency showing through.
Now go to File > Save for Web & Devices and choose PNG-24 from the options. You should see the same transparency appear in the preview window.
Next I'll do the same thing for a few more image elements, because in our test we want to demonstrate that it's possible to place a transparent PNG on top of a transparent PNG on top of a background.
With all our images created, it's now just a matter of putting some HTML together:
<html>
<head>
<title>Background / Transparency Test</title>
<style type="text/css">
<!--
body {
background-color: #4B7E07;
background-image: url(background.jpg);
color: #FFFFFF;
}
div {
width:802px; height:184px;
padding:30px;
background-image:url(green.png);
color:#ffffff;
margin:auto;
margin-top:50px;
}
-->
</style></head>
<body>
<div><img src="about.png" /></div>
So all we're doing here is setting the background image to be our tiled JPG. Then placing a <div> centred on the page with its background image as the first transparent PNG. Then inside that <div> we have the second transparent PNG file.
View the Transparency Test
That'll do to prove that this design is buildable. Actually you'd need to do some fixing to make it work in IE6, a Google search reveals lots of articles on the topic, but since this is PSDTUTS and not NETTUTS, we'll just end it here :-)
7 - Another variation
What is easily done with a tough texture background like grass is even easier to do with simpler textures like this paper texture from Bittbox. Because the source image is better you can create much larger tiles for the background which are much less likely to look repeated.
8 - Pixel Patterns
Another option for backgrounds are simple pixel patterns that when repeated give a background a bit of texture. The pattern shown in this variation of the layout is the one I used on Creattica Daily.
You can create patterns like this really easily. To make this effect, just create a new image 4px wide by 5px high and zoom in as far as you can, then draw in these pixels:
Then, press CTRL-A to select everything and go to Edit > Define Pattern, give it a name then you can apply the pattern with a Pattern Overlay through a layer's blending options. So back on your main PSD file you right click the layer you want to add the pattern to, then select Blending Options then choose Pattern Overlay. In the image above I've set the pattern to Multiply onto a darkish grey background.
It's actually quite fun to play with these types of pixel patterns. The pixel loving folk at K10K have a library of Pixel Patterns you can also check out for far more advanced designs.
9 - Large Background Photos
The last variation we'll be looking at is using a single, untiled photo. Here I'm using a nice photo of West Bay Cliffs by Cristiano Betta that I found on Flickr:
It's a nice wide photo and it made for a nice colour scheme. So here are a few quick steps I took to place the image.
Here it is just sitting in the background of our design. With some transparency it's already looking quite neat, but what is going on in the top left?
Moving the photo up about 50px pushes the weird discoloured parts off the page. The next problem is that we can't have an endless photo background, so we'll fade it into a colour.
Picking a darker colour from the sea, we create a new layer and draw in a gradient fading from the colour to transparent. This sits above the ocean background nicely and blends it out.
Now the background actually looks a bit flat so it would be nice to brighten up the colours a bit. To do this we'll overlay the photo with a gradient of colours matched off the image.
In the image above you can see I've drawn in a gradient using the purples and oranges of the original image.
Setting the gradient layer to Overlay and 70% really brightens up the sunset and makes it look a lot more vibrant.
Now the next problem is that we need to have the photo blend off on the sides. This is going to be tricky because on one side we have a mountain and on the other it's just sky. So probably the best solution is to blend off into the dark colours. For most people they won't see this, it's just for all those people using a giant screen and opening their browsers right up.
So the first thing we'll do is grab a 1px vertical selection from each outermost edge of the picture and hit CTRL-T to transform it across. The reason we do this is so that if any of the background shows through the colour I'm about to add it won't look weird.
So next we add a new layer and draw in a giant ellipse in the background, press CTRL-SHIFT-I to invert the selection and fill it with the same dark colour we used earlier.
Now we deselect the layer and go to Filter > Blur > Gaussian Blur to blur our colour in, using a radius of 80px. Then duplicate this layer and blur it again using a radius of 120px, then a third time with a radius of 160px. This should give a nice soft graduation.
So our final design with a photo background for most people will look like the image shown above. But we can rest assured that even a huge browser window won't reveal anything silly.
More on Large Background Images
You can learn more about designing with large background images by reading these three great articles:
- Large Website Backgrounds Do’s and Don’ts @ WebDesignerDepot
- How to: CSS Large Background Image @ WebDesignerWall
- 80 Large Background Image Websites @ WebDesignerWall
Summary
As you can see we've gotten a lot of mileage out of our one simple layout and hopefully along the way you've gotten something useful out of the process!
Part of Web Design Week
This week our sister site ThemeForest launched a whole new category of items to sell that are particularly relevant to PSDTUTS readers - namely Photoshop Templates. The new category means you can now design and sell Photoshop designs, as well as regular Web Templates and WordPress themes to earn a side or even full income. And on the flip side if you're coming up short on inspiration, you can get a kickstart by grabbing a PSD design from ThemeForest. So to give the new category the launch it deserves, all this week I'll be bringing you articles and tutorials on web design as part of our PSDTUTS Web Design Week.
Related Posts
Keep reading with more great tutorials and articles!
Enjoy this Post?
We'd love your vote!
User Comments
( ADD YOURS )reader December 2nd
amazing,
thank you
thank you
Tadd December 2nd
This is an amazing tutorial and really jump starts my imagination for designing some web sites in the VERY near future.
Thank you very much!
Martin Berglund December 2nd
This one is of HIGH quality. Thank you for sharing!
Miguel Reyes December 2nd
Priceless. Great tutorial
Steve Rynk December 2nd
Wow GREAT
Marco December 2nd
Only one word: Amazing!
Great tutorial
Jaswinder December 2nd
Is it me or is this better than half the tutorials on on nettuts?… Collis we need you back making more tutorials. Also you should sell these as themes on themeforest!
Nick December 2nd
This is nice. Inspiring too
Digital Revolutions December 2nd
Lovely, very well done tutorial.
BroOf December 2nd
I really love it!
Matthias December 2nd
If there wouldn’t be the ie6 to optimize to…
Jeffrey Way December 2nd
Collis, this is a really fantastic article.
Play your cards right….and there might be a NETTUTS writing gig in it for you.
Wonderful job.
Dan December 2nd
This is what I am talking about. Great stuff Collis thanks for this. Your tuts are always so practical.
Ryan December 2nd
Thanks for the great Tutorial. It’s a simple layout with some simple effects, but it sure has a big impact! And it’s great seeing all that can be done with the same design, just by changing the associated colors, background, etc.
Cspinney December 2nd
Nice job. I got some great ideas from this
Derek December 2nd
What a great tutorial!
I’ve been designing all weekend and was starting to get burned out. This was the jump-start I needed.
Thanks!
Jeffrey Way December 2nd
Collis - I’d love to use the dark blue psd as the subject for a PSD to XHTML screencast for NETTUTS. If that sounds okay to you, email me the psd. If not, no big deal.
Peter December 2nd
Very nice Tut but its all about fixed widths…
would be a litter harder to do things like that with relative width
alifaan December 2nd
wow what a nice post, thanks Collis, this is amazing!
Thomas Offinga December 2nd
Great tutorial Collis!
Kalion December 2nd
wow … thanks alot for this one
Rydgel December 2nd
COOL
Alvaro December 2nd
I love png backgrounds!!! IE 8 it’s coming and there’re still people using IE6
Kevin May December 2nd
Simple and very useful, thanks for the tutorial!
Nate December 2nd
Super helpful information Collis! Thanks man
Amber Weinberg December 2nd
Great ideas. I’ll RT this on twitter
MK Owens December 2nd
Excellent simple design tutorial, but there is a caveat that some of the really strong elements of this design won’t work in IE6, which as Alvaro pointed out (but not specified) would be a problem for roughly 30% (more or less, depending on your audience) of the people who view the page unless you force IE6 viewers into a specially designed version of the site that uses no alpha-transparency or you use one of the unreliable PNG hacks that are available to many (unreliable due to the fact that some IE6 users have Javascript disabled for the same reason they still use IE6).
Either way, great tutorial. This is the kind of stuff that makes PSDTUTS great. Get rid of the screencasts without text-based tutorials to accompany them.
bobmeier December 2nd
Finally, a really good tutorial again-thats how PSDTUTS is supposed to be!
Bjorn December 2nd
Nice. If only I could streamline my work flow as such.
Chris Robinson December 2nd
really nice, Collis I know you’re a busy man but I wish you would write more, your tuts never disappoint
Craigsnedeker December 2nd
AWESOME!!!!!!!!
Adam December 2nd
Excellent tut man. I love that design. Nice, simple, and very effective. Just the kinda design I love.
Nick December 2nd
Great tutorial!
It just sucks because I am in the middle of redesigning my website, and the basic layout of the page is pretty much what this looks like, with a small difference…haha. I hope people don’t think I just went off this tutorial!
B. Tuma December 2nd
This is very nice, Thank-You
Brian December 2nd
Very well done. Thanks for sharing some good inspiration.
OpenSourceHunter December 2nd
AWESOME!
greetz
http://www.opensourcehunter.com
Dead.Pixel December 2nd
Very nice! I really love your designs Collis, so simple, clean and solid.
As for the whole IE6 .png issue, we should learn to design for the future not the past. We can’t cater to them forever. Soon they will be 2 versions behind (come IE8 release) not the worlds problem they are afraid of change.
Looking forward to the rest of Web Design Week!
Jason Armstrong December 2nd
Great post Collis! This is what I would think most web designers would want to see. The tips, tricks and little secrets of design and layout. Well done!
Rishi Luchun December 2nd
Great post, will be using this.
Thanks
Sean Hodge December 2nd
Collis, lookin’ great and I’m excited to have you posting this whole series.
Skellie December 2nd
Love the textured backgrounds / big background images — it’s like adding insta-high-end design cream!
Eliot Sykes December 2nd
Fantastic, has given me some ideas to improve my home page, thank you - and I can’t wait for the rest of this week’s tutorials.
Mabuc December 2nd
Excellent all this templates are simple and clean, good job collis, this is awesome.
DVQ December 2nd
Very cool article!
jerry December 2nd
Oh.
Impressed.
This is really worth some cash.
Love how an easy design can transform itself into a noble one - with the proper use of a simple techniques.
Karen Lau December 2nd
Awesome. Thanks!
Adam December 2nd
Collis, That is an amazing article. Thanks.
Joefrey Mahusay December 2nd
OMG! Great template, very simple and yet looking good.
willian December 2nd
amazing. that’s the kinda stuff we need!
thanks
Heiko December 2nd
Amazing!!! Very cool colors!
dlv December 2nd
i love this post, jsut this..
it’s great!
veerendra December 2nd
veerendra December 2nd
great tips ! thank you
Auron December 2nd
Ok ill eat my words.
After being extremely disappointed with this site (and the sister sites in this network), noupe, smashignmagazine, and about 1,001 other link of the day web design blog, you guys have finally started doing what everyone else was too lazy to do–write articles of SUPERB quality.
If you guys keep doing it this well you might put a couple of well known photoshop and web design magazines out of business.
As they say in business, evolve or perish.. thanks for being one of the first to showcase the useful information us designers really want and need in a blog.
Bravo and thanks!
octagon December 2nd
As someone that constantly b1tches about the content on tut sites i would just like say this is astoundingly well done. Puts out so many mistakes that many people make and in the end make such dramatic differences when combined properly.
This is the kind of tutorial that makes a difference.
RJ December 2nd
It doesn’t happen often that I go through a tutorial and say ‘Wow’, but I must say ‘Wow’, ‘Amazing’, ‘Superb’. I really appreciate you sharing all these techniques.
RJ
Ariful Alam Khan December 2nd
That’s one smart tutorial. Thank you Collis. Supply us more..
Alex K December 2nd
awesome tutorials, thank you!
TuNG December 2nd
Lovely tutorial. Thank you so much.
Daniel December 2nd
YES COLLIS IS BACK…. I BELIEVE IN PSDTUTS AGAIN!!!!!! (I am being completely serious) I was with PsdTuts from the beginning and when I saw that no AMAZING tutorials we’re being written by Collis I started really looking at the site from daily to every other week! But this is AWESOME I hope to see many more to come! THANK YOU COLLIS YOU ARE THE MAN!!!!!!!!
insic December 2nd
wow! its really nice.
leo December 2nd
Seriously, every time this guy posts a tutorial my game gets better. Invaluable.
Sandeep December 2nd
thanks… nice article!
Gary Smith December 2nd
Totally kick-arse tutorial, Collis. The type that I always looks forward to. Mucho thanks for your awsomeness.
Dan December 2nd
Best one yet. Love it.
Sukky December 2nd
So useful. Just one problem, PNG-24 can not be displayed in IE 6.0 or lower..
Brandon December 2nd
Yes, I used to cater to IE6 users, and now I only will in circumstances or projects that absolutely require it. Also, a small message like the little yellow “information bar” can be shown to IE6 users only to let them know they need to upgrade by using some conditional html and a div at the top.
I’ve stopped worrying about IE6 users for most sites. If I test the png fix and it works well, it will work for ENOUGH IE6 users to solve the issue.
If people have IE6 and Javascript disabled, the internet looks like crap to them anyway and they’ll just have to realize that it’s their fault the site breaks, not the developer’s.
Ravinder December 2nd
Gr8 very nice and useful tutorial
Adam December 2nd
Great! I wish more tuts like this ;o)
Alen December 2nd
Nice. Very useful.
ashvin December 2nd
too cool o_O
Tanaka13 - Créations du Net December 2nd
a great one! thanks for sharing!
Orillion December 2nd
super helpful and absulutely awesome…
keep up that kind of work!
Ibrahim Abid December 2nd
Wow awesome
hb2 December 2nd
superb!!! very nice article, it makes my imagination & creativity awaken
Roman Klčo December 2nd
I like tutorial but let me have a question. How do you solve PNG css-background transparency for viewing with IE? I know a javascript fix for png’s inserted as but i havent found anything for fix png in css. Any ideas? Thanks
MiroARRR December 2nd
Simple and efficient, just like a SPOON
great Collis, this one is worth :threethumbsup:
Taote December 2nd
Great tutorial. I like the idea of showing the details that makes a design great.
Thanks!
Chan December 2nd
awesome!
Dave December 2nd
It really is amazing what a few small touch to a design (like 1px highlight and a Soft Radial Gradient here and there) can change a design being Flat.
I already used a Grass Background on one of my website designs but wish i had this tutorial and the “Seamlessly Tiled Background” tutorial to use as reference before for tips
Great Work Collis
demian December 2nd
one question… the png`s render good in internet explorer, firefox and chrome well? in special internet explorer 6, in latinoamerica, a lot of people use this browser
Mike December 2nd
In the 12 months or so that I have been suscribing to this site, this is without doubt the best tutorial/article so far.
Top quality. More of this standard please!!
Kresnik December 2nd
Awesome tutorial!!
Matt December 2nd
This article is amazing! Thanks collis! You put a tonne of effort into these!!
So nice.
Lubes December 2nd
I’m really glad to see such a high-quality tutorial like this. I’m especially glad about your use of png and alpha-transparency. Browsers ers are getting more and more equipped to handle these kinds of things, and I personally believe we as designers need to stop (whenever possible) catering to the lowest common denominator — IE6.
Wallpapers December 2nd
you’re making web design look too easy!
DeveloperFox December 2nd
Great tutorial.
Thanks Collis.
Drew December 2nd
Great tutorial. Keep up the magnificent work!
Zim December 2nd
Great article!
felipexakal December 2nd
Nusss, lindão ^^
Ben Blogged December 2nd
Nice Tips
Yosy December 2nd
Thank you for this tutorial,
But from where I can get this simple illustrator?
D. December 3rd
High-quality, in depth, straight forward tutorial. Probably the best one I’ve seen from this site. I wouldn’t mind seeing more similar to this. Good work.
Vens December 3rd
This kind of tutorial with his explanation remains almost rare, thank you for this tutorial and its explanation. I am familiar French and I translated all of the tutorials PSDTUTS but I think all fantastic.
Thank Collis, continue
M.A.Yoosuf December 3rd
its great, but i prefer you guys better to make public available for a tut witch i love
http://psdtuts.com/tutorials/interface-tutorials/from-psd-to-html-site-build-over-at-nettuts/
pls
thank you
abs December 3rd
this is really good for pepole who want to be a web designer. good work guys keep it up.
Bolor December 3rd
Awesome. Thanks!
aleso December 3rd
amazing tips, thanks
O.T December 3rd
this is to easy for you Collis!!
Jim Cook December 3rd
Suh-weet!
Takumi86 December 3rd
Very cool Tips for Web Designer, thanks
Swapnil Sarwe December 3rd
Its Simple AWWWEEEESSOMMEEE…..
gr8 work… its kinndda blessing in disguise….
thank u so so much…
LUGLIO7 December 3rd
WONDERFUL
Niklas December 3rd
Very, very impressive. Indeed useful and very unique.
Brenley Dueck December 3rd
Great tutorial. Amazing how much a background and good color schemes mean to a layout.
I am more of a programmer, but like dabbling in the design aspect once in awhile as well.
Tough to find good website PSD tutorials!
Cam December 3rd
I agree with dead.pixel and the like… we shouldn’t worry too much about IE… depending on your target audience. Anyway, if you’re using IE6 it’s time to update… it’s 2008!
forman December 3rd
WHOOP WHOOP, COLLIS IN DA HOUSE!!
Edward December 3rd
Great tutorial although PNG can only be taken so far. For IE 6 and below users, there will be an ugly white background and hacks don’t always work.
Mohamed December 3rd
Awesome , i like your colors