Hostingheaderbarlogoj
Join InMotion Hosting for $3.49/mo & get a year on Tuts+ FREE (worth $180). Start today.
Advertisement

How a Simple Layout Can Be Mixed 'n' Matched with Patterns, Photos and Backgrounds

by
Gift

Want a free year on Tuts+ (worth $180)? Start an InMotion Hosting plan for $3.49/mo.

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!

This Post is Day 1 of our Web Design Session. Creative Sessions

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!


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


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


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


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


Step 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 :-)


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


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


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

  1. Large Website Backgrounds Do’s and Don’ts @ WebDesignerDepot
  2. How to: CSS Large Background Image @ WebDesignerWall
  3. 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!

This Post is Day 1 of our Web Design Session. Creative Sessions
Advertisement