The 3 Components of Web Design Series

This article is part of a series on the three components of web design, here are links to the other articles

• The 3 Components of Web Design
• 9 Information Design Tips to Make You a Better Web Designer
• 8 Ideas, Techniques and Tricks for Your Web Toolkit
• 7 Interface Design Tips Every Web Designer Should Know

1 - Don’t be Satisifed with 1 Iteration

When designing a website for a client you often have to provide a couple of different design concepts. When you feel like you’ve gotten it right the first time, it’s pretty annoying to have to dredge up another version which you’re pretty sure won’t make it out of Photoshop. But over time I’ve come to realise that it’s actually a good idea to make more than one version, no matter how happy you are with the first one.

Whether it’s multiple iterations of the same design, or multiple designs, generally speaking, more time does seem to get a better result. That’s not to say that you should keep adding to a design, in fact it’s often better to take things away. If you are doing multiple design concepts, you can sometimes successfully merge the best elements of one design into another.

Technique: PSD Snapshots

Snapshots are a simple way to experiment with a design without losing anything or making bazillions of copies

Photoshop has a cool feature that lets you make snapshots of a point in your document’s history. Once you create a snapshot you can flip back and forth between different snapshots as well as the first history point and the most recent 20 or so steps. What this means is you can keep taking snapshots and then trying out new lines of thought to see where they take you. But BEWARE, snapshots aren’t saved when you save a file, so you have to go through individually and save each snapshot at the end of the day.

Here’s how you take a snapshot:

1. Open a PSD file you’ve been working on
2. Make a couple of changes
3. Open the History Palette (Window > History)
4. Down the bottom of the History Palette click the tiny camera icon
5. And you should now have a snapshot! You can now flick between the snapshot and the first history screen

2 - Learn a Library of Styles to Draw On

There’s so many awesome styles and looks around, galleries like BestWebGallery are a great way to see them

As I’ve mentioned previously it’s never a good idea to just hop on the bandwagon of the latest trends and use certain styles blindly. However, it’s perfectly fine to use a certain style when it’s appropriate. So if you’re designing a site that merits a nice, clean web 2.0 look, then it doesn’t mean you should avoid doing so, just because that happens to be trendy at the time. Similarly if you are designing a site that merits a nice grungy, distressed design, then if the shoe fits, wear it!

So with this in mind, it helps to have a library of styles to draw on. When you’re drawing a blank when starting a new project, it can sometimes be good just to fall back on a predefined stylistic choice and then let that guide you. Inevitably you’ll wind up with something totally different to anything you’ve designed before, and it’ll at least help get you started.

But be very wary of using the wrong style just because it looks cool, and not because it is appropriate for the client / message / content. The only antidote to doing this is to know and have a lot of different design styles. How do you "learn" design styles? Well you can start by observing and mimicking them. I love surfing through galleries of great web design and absorbing visual ideas, seeing what types of fonts work with what types of looks, and generally learning other people’s techniques. When it comes time to create my own designs, that information is in my head somewhere, but when it comes out it has the unique twist of the project I’m working on as well as my own creative ideas.

3 - Throw Objects around to Look for Happy Accidents

When I designed RockablePress I was just drawing random rectangles and decided that the sidebar looked kinda neat being a bit off balance, it was a happy accident.

Some of the best designs I’ve ever worked on were the result of what a co-worker of mine once called "happy accidents". You know when you switch off a layer, or accidentally paste in the wrong illustration, or swing the Hue slider too far, and all of a sudden you look at your screen and think "OMG this is design gold!"

I think we all wish we could manufacture amazing design ideas on cue, but let’s face it, sometimes you go to the tank and you’re running on empty. Happy accidents will often kickstart your creative thinking, so it makes sense to not only run with them when they happen, but to encourage them by messing about. I sometimes just move shapes around arbitrarily, try out different colours or do other "random" things to see if I can run into something I never thought of.

4 - Create a Theme Around a Visual Element

TabCorp by DTDesign takes asterisks to a whole new level

Something that I find works well, especially on sites with less inherent visual design (think corporate sites) is to make a play on some visual element. For example you might use dotted lines in your design, then you could mirror that theme in your menu, in horizontal separators, in photo collages, diagrams, as bullet points and so on. There are tons of different visual elements you might pick up and use as a theme, examples include shapes, corner types like curves or diagonals, patterns, text characters like brackets, and so on.

Of course you have to find a balance between a subtle mirroring and going over the top, but it’s a useful technique to tie a site together into a consistent theme - especially as I say if you don’t have much else to work with!

5 - Clean Up Every Pixel

Take care of pixels and they’ll take care of you. Check out my article on polishing a web design

I’m rather fond of saying that web design is all about the pixels. Visitors to the websites you design will be looking at your work up close and personal, often with tired eyes and itchy mouse fingers. It’s important to look after every pixel on your page and neaten and sharpen and tidy so that your design is crisp and clear.

This means ensuring your text is well spaced both between letters and between lines, that your edges are sharpened and pixel perfect, that graphics are sharpened (but don’t go too far and oversharpen!) and that you make use of techniques like 1px outlining to make everything leap off the page.

A little over a year ago I wrote a tutorial here on PSDTUTS called about polishing a website design which has a lot of information about sharpening and cleaning up a site design.

6 - Use Structure!

Wilson Miner’s beautifully designed site relies on structure to look awesome!

Because I taught myself web design, there are some really basic design principles I missed out on learning early on. A couple years after I had started making websites I joined a local design association and met a guy named Matt Leach who went on to be editor of the underground Empty magazine. Anyhow Matt did two things for me for which I am eternally grateful. The first is he introduced me to my lovely wife Cyan (yay!) and the marginally less important second is that he taught me to use structure in my design.

At that time I used to just throw things on a page and sometimes things lined up or were evenly spaced or kinda used a grid, and sometimes well they just sorta fell how they fell. Matt critiqued a design I had done and showed me the wonders of alignment and spacing and I’ve never looked back.

If you’re not already doing so, spend some time doing these things:

1. Evenly space things
   For example if you have some text in a box in your sidebar, it’s usually a good idea for the text to be equidistant from the top and side. It’s a simple habit, but makes the box look balanced and uniform.

2. Line things up
   If you have a bunch of boxes, a logo, some headlines, some text, all roughly in the same position you should be lining up the edges as much as possible. There are some tricks to this in that some letters in headings shouldn’t be exactly lined up - the best example is a capital "T", or if you have text in a box you have a choice between lining up the edge of the box or the edge of the text with the other elements. The more you practice aligning and the more you look at how other people and designs do it, the better you’ll get at it until it becomes instinctive and you’ll find it starts driving you crazy when people don’t align things properly

3. Use Grids
   Grids are an extension of lining things up. Here you’re predefining a set of vertical and horizontal spaces and then sticking to them (with variation). Do you have to do this by actually drawing in guides and column lines - not really, personally I do it mostly by just guessing and "making it look right". But of course the more complex the grid and use of it, the more you may want to use guides and helpers.

4. Be Systematic in Font Sizes and Families
   A rookie mistake is to go crazy with typefaces and mismatch sizes, fonts and colours. While variation is good, you also want consistency. It’s best if you have 1-3 typefaces you are using and you do so completely consistently.

7 - Now Mix in Some Unstructured

Jay Hafling has a site that is actually very structured but it feels unstructured thanks to some well placed design elements.

Once you have structure in your design and you’ve gotten used to aligning and being ordered and systematic, only then is it time to break out and start mixing things up. It’s the old adage that you have to understand the rules before you break them.

Mixing some unstructured elements into a structured design is a really nice way of getting a result that looks ordered and comprehensible and yet isn’t boring. Your main aim is to break out of the structure using a couple of bold visual elements, to vary up spacing, typefaces and use of your grid, and yet have an underlying structure.

Actually you can even just completely break out of structure altogether, but it’s pretty damn hard to do well. A famous designer who is known for breaking rules - largely to do with typography, but also with grids and design structures - is David Carson.

SmashingMagazine has a bunch of articles about grid-based design, including this one about breaking out of the grid by our own PSDTUTS editor Sean Hodge.

8 - With every project, do one thing you’ve never done before

When I designed Creattica Daily I decided to try mixing up the comment form a bit, it was quite a cool result and I’ve since used that layout on three other themes.

If I could give one piece of advice to a new designer it would be to make this a personal design habit: With every single project you take on, do one thing you’ve never done before. Whether it’s a new font, a new grid, a new visual style, a new colour scheme, a new graphic effect, a new menu structure, a new technology, anything. Even if it means the job takes a bit longer than it should, even if it leads to a couple dead ends you could have avoided, even if it means you have to spend a bit extra to buy a new font, just do it.

This habit will do a number of things for you. It will force you to constantly expand your horizons as a designer. It will keep your work feeling fresh. And it will prevent you from falling into a design rut and just pumping out the "usual". It’s a habit that you can take on early in your career as a way to become better, and then long after you are established it will keep paying dividends.

If you only take one thing away from all these Web Design Week posts I’ve been working so hard on, make it this: to habitually push yourself as a designer, to try new things, to experiment, to always be learning, and to never stop finding joy in new techniques, styles and ideas.

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.

If that’s the case, you’ll be interested to see the fourteen neat portfolio templates listed below - some for WordPress, some just HTML - that with a pinch of customization, and filled with your own work will have you up and running in no time.

So I should point out that in case you hadn’t noticed with all this Web Design Week stuff - that ThemeForest is owned by PSDTUTS, or PSDTUTS is owned by ThemeForest … whichever … so yes this is Collis cross-marketing shamelessly!

Excellent Portfolio Articles to Read

Before we get to the templates, you might also like to check out these great articles about portfolios (that by a weird coincidence are all written by PSDTUTS staff):

1. Creating the Perfect Portfolio via Digital-Web
2. Creating a Successful Online Portfolio via SmashingMagazine
3. Build a Killer Online Portfolio in 9 Easy Steps via FreelanceSwitch
4. The Secret to Getting a Lot of Web Design Work via FreelanceSwitch

WordPress Portfolio Themes

WordPress is not a bad option for a portfolio, because it means keeping it up to date won’t be such a chore. If you’re used to the interface you’ll know how easy it is, and if you’re not, check out this Getting Started with WordPress article. There’s also lots of web hosts that provide 1-click installs of WordPress - check out WordPress’s list (that way the affiliate payments go to the open source project).

So here are some of the best ThemeForest WordPress portfolios, they all go for about $25.

Folio Theme

A mixture of blog and portfolio, showcases your most recent work, includes five colour variants.

View a Demo and Purchase via ThemeForest

Sleek Slide Portfolio

Some seriously nice AJAX sliding effects, featured projects, blog posts, four variants

View a Demo and Purchase via ThemeForest

Your Folio

Big featured project with AJAX slider, five colour variants, pulls in Flickr feed and blog posts

View a Demo and Purchase via ThemeForest

W-PhotoStudio

Slideshow, multiple galleries, lightboxed images

View a Demo and Purchase via ThemeForest

Briefcase Theme

A mixture of blog and portfolio, showcases your most recent work, includes five colour variants.

View a Demo and Purchase via ThemeForest

HTML Portfolio Templates

If straight HTML templates are more your thing …

Design Portfolio

A simple Javascript-y portfolio theme that slides out to reveal more info on a project.

View a Demo and Purchase via ThemeForest

CleanFolio

A simple, neat and tidy place to present your work.

View a Demo and Purchase via ThemeForest

Premium Photography Template

A neat jQuery photography portfolio

View a Demo and Purchase via ThemeForest

Your Portfolio

Clean, grid based design with a Javascript contact form slider.

View a Demo and Purchase via ThemeForest

Easy Portfolio

Simplicity at it’s best, javascript slider combined with a nice clean, white layout.

View a Demo and Purchase via ThemeForest

Grunge Design Company

A lot more personality than some of the other templates, but if you like grungy design …

View a Demo and Purchase via ThemeForest

Scrolling Portfolio Template

A nice blank work holder that scrolls across with jQuery.

View a Demo and Purchase via ThemeForest

Vintage Theme

A very full featured template married with a sweet layout!

View a Demo and Purchase via ThemeForest

Creative Portfolio

Awesome template that mixes in a bit of style and colour, from uber-author Joefrey

View a Demo and Purchase via ThemeForest

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.

Then later this week we’ll take this same web design and I’ll show you how you can take remixing even further than just changing backgrounds and colour schemes, that in fact you can change the entire style of a design. But first let’s make our paper texture site!

Part 1 - Creating a Paper Texture

There are three different ways you can get a textured paper look:

1. Scan in your own paper
   Check out Bittbox’s Make an Awesome Grungy Paper Texture Tutorial

2. Use someone else’s texture
   There’s heaps of sites that list textures around, check out these links: Bittbox | TextureKing | PSDTUTS Textures

3. Make it in Photoshop
   This is what we’re going to do!

Making a texture in Photoshop will generally result in a more stylized than realistic look, but it has its own charms. Also it means you don’t need any external images.

Step 1

So first we’ll start a new document, this canvas is 1200px wide x 900px high. Next we fill the background layer with a beige colour - #e8e8e2.

Step 2

Now create a new layer on top and make your foreground and background colours: #979a8f and #cfd1c5 which are variations of the original colour. Then go to Filter > Render > Clouds

Step 3

Now we run Filter > Artistic > Palette Knife with the settings shown in the image above. Palette knife turns our clouds into blobs … sort of, eventually this will give a slight crumpled feel to the texture.

Step 4

Next we’ll add some noise to the canvas by Filter > Noise > Add Noise using the setting shown. This should make our texture look rough.

Step 5

Now we take our noisy, crumply layer and set it to Multiply and 30%. This will tone it right back.

Step 6

Now create a new layer on top and make your foreground and background colours: #42433e and #cfd1c5 - which is a darker version of the last set so that we get more contrast this time. Then go to Filter > Render > Clouds

Step 7

Then we again run the Filter > Artistic > Palette Knife filter.

Step 8

And this time we set the new layer to Overlay and 60%. This should give our texture a bit more depth.

And that’s it! This is our texture!

Step 9

For this tutorial the light texture is perfect, but you can easily make other variations just by messing about with blending tools. For example to make this dark brown paper texture:

1. Take the light version and press CTRL-U to alter the Hue/Saturation, set the sliders to -30, -10 and -5 respectively.
2. Duplicate the layer and press CTRL-SHIFT-U to make it black and white
3. Then still on the black and white layer, go to Edit > Adjustments > Brightness/Contrast and go to -30 and +30 respectively
4. Now set the black and white layer to Overlay
5. Then create another layer on top and fill it with #beac93 then change that layer to Multiply.
6. Duplicate the Multiplied layer
7. Then duplicate the black and white layer and pull it right to the top. Set it to Overlay and 20% and rotate it 90′ to get a bit more depth to the texture.

Step 10

If colour variations aren’t enough, you can also change the feel of the texture with the use of different filters. For example here we’ve made a more parchment-y feel by taking our light texture and:

1. Grab the first crumply/noise layer and run a Filter > Texture > Texturizer and use Canvas, 75% and 2 for your settings
2. Grab the second crumply/noise layer and run the same filter
3. Now duplicate the second layer and rotate it by 90′, keeping it set to Overlay and 60%.
4. Create a new layer on top and fill it with white - #ffffff
5. Run a Filter > Texture > Texturizer and this time use Canvas, 200% and 16 then set this layer to Overlay and 20%
6. Now create another layer on top and again fill it with white, this time change the layer blending mode to Color and 53% to get our texture a bit whiter.

Final paper texture notes

Now that you have a texture you can of course turn it into a seamlessly tiled background.

For this tutorial we will be using the first texture we made - the one from step 8.

Part 2 - Creating the Website Layout

So now we’re going to create a portfolio layout to go with our paper texture. Here is the approximate structure for the homepage. As you can see it’s a bit more of a complicated structure than in the previous web layout tutorial because this time we have a layout inside the layout.

So our overall grid is a three column grid, then in the main panel, we’ve used that grid to break the area into two main spaces, one is the size of column 1 and the other spans over both the other columns.

Step 13

So first we’re going to create a working area and lighten it up. So here I’ve dragged two guides on to the screen, one at 100px and one at 1100px - that makes the area I’m working in exactly 1000px which is perfect.

Then we create a new layer and draw a big white box as shown.

Step 14

Next we’ll set the white box back to 25% opacity.

Then we’re going to roughen it up. There are lots of great grunge brushes around, but for this step we’ll just use one of Photoshop’s standard brushes. You can see it in the screenshot above with the 60 underneath it.

If this brush isn’t appearing for you, just click that little right arrow at the top of the brushes screen and choose Wet Media Brushes, then click Append to add them to your current set.

Step 15

So choose the Eraser Tool (E), select that brush we just mentioned and then go around the edges of our shape and just roughen it up however you feel. I’ve left the top edge intact as you can see.

Step 16

Next create a new layer just below the white box, and draw in a Radial Gradient (G) going from white to transparency. This is just going to highlight where we’ll be placing our logo in a second. Set the layer to Overlay and 70%.

Step 17

Now we’ll add a little "logo" - in our case just a word set in a nice typeface. The font I’ve chosen here is Egyptian710 BT which is quite a well known font and suitable for our purposes because it’s very uneven looking - capital letters are thicker than the lowercase letters - and the slab serifs look kind of typewriter-ish which goes with our paper theme.

Step 18

Next we’ll make a watermark just to add a bit more stuff in the background. Actually you can go crazy and add tons of stuff into the background texture, but we’ll settle for a single watermark.

So here I’ve written out the word Folio in some random font (HumstSlab712 Blk) and I’ve set it in this colour - #c5c6ba.

Step 19

Now let’s change the blending mode to Colour Burn and 70% and we’ll add a 1px stroke as shown. Notice that for Fill Type I’ve used a Pattern and then chosen a texture I had hanging about. When combined with a low opacity (36%) and blending mode (Multiply) this makes our outline look like it’s faded out in parts.

Step 20

Now we’ll move our watermark to sit behind the logo.

Step 21

Next we’re going to make a little horizontal separator element. So create a new layer and draw in a 1px line in the dark brown.

Step 22

Now grab that same old eraser brush and just go over the line erasing little pieces out of it so it looks distressed. Also get rid of the edges so that it starts at the same place as the white box.

Step 23

Next create a new layer below and draw in a brown box that is about 3-4px high as shown.

Step 24

Set the brown box to Multiply and 5%. This will be a kind of shadow to our separator.

Step 25

Next create a new layer and this time draw a white box about 20px high above the line.

Step 26

Set the white box to about 50% opacity and once again using our brush, just erase the top in a messy fashion.

Step 27

Now repeat the last three steps to draw a second white box, but this time when you erase it, erase more so that it’s a thinner white strip.

When both white layers are combined they will give a messy sort of highlight.

Group these separator layers into a single layer group.

Step 28

Now we can duplicate our layer group to have three copies to form our horizontal grid area as shown.

Step 29

Here I’ve just placed some content in. As you can see I’ve mixed a little bit of the display typeface with a regular HTML typeface.

For the regular text I’ve actually used Cambria which is a Vista font. In the CSS you would have it default back to Georgia for people who don’t have the Vista fonts. If you, yourself don’t have the Vista fonts, you can get them freely & legally, just follow these instructions. There’s a couple neat fonts, I quite like Calibri as well.

Step 30

Now we’re going to add our main panel. So draw in a large rectangular box in the dark brown colour - #1e1a19 - and do so using the Rounded Rectangle Tool (U) with a Radius of 5px.

Step 31

Now zoom into the top left corner and grab a small square selection then fill it in with the same dark brown colour. We don’t want a curve in this corner.

Step 32

Now zoom in on the top right corner and using the Polygonal Lasso Tool (L) while holding shift down make an angled selection like shown and then hit Delete.

Step 33

Now in a new layer above draw in a square of a lighter brown colour, say #352f2b, and then make another angled selection and delete away half the square so you are left with a triangle which is 1px away from the edge.

Step 34

Next create a new layer and zoom in to the top left corner again. We are now going to make our tab shape. We do this using the pen tool and a few very precise clicks. In the image above I’ve switched off all the background layers so you can see the shape exactly. Here’s how you make it:

• Start on the bottom left point and just click a single point in
• Then hold down SHIFT so that you are getting a dead straight line and click the next point along the line, hold the mouse button down as you click so that the point has handles and drag upwards a little bit. This will mean the next point you click is going to have a curve going between.
• Now click the third position and again hold the mouse button down and also hold SHIFT down to drag the handles out at a right angle. You should be able to get that perfect curve. Having shift held makes sure the angles are all nice and precise so it’s just a matter of getting the size and positioning right. It may take you a few goes, but the good thing is you can just press CTRL-Z to undo if you don’t get it right, and if you need to go back more than one step, just press CTRL-ALT-Z
• Next while holding SHIFT down click the fourth point, again holding the mouse down and dragging right so that you get handles appearing. This handle you can see in the image above (because it’s one of the last two points before I screenshot). As you can see the handle should be dead straight - this is ensured by holding shift down.
• Finally, hold SHIFT down and click the fifth point and again drag right. This will give you that awesome final curve.

Step 35

After you make the fifth point, you can just fill in the remainder of the shape any old how, because we’re going to just cut away the bottom edge to be perfectly straight anyway.

Once you have completed the shape, right click and choose Make Selection.

Step 36

Now you can fill in the shape with dark brown to match the main box. Then cut away the bottom extra bits so it’s nice and flat and sits perfectly on top as shown.

Step 37

Next we’ll duplicate our tab layer and move the new one below the old tab (so the brown one looks like it’s in front). Then right-click on our new tab and choose Blending Options and give it a Colour Overlay of this nice reddish-orange colour - #cc5630. The reason we do a colour overlay and don’t just fill in the tab with the new colour is that if you do the second method you will get a few left over brown pixels showing through.

Next hold down CTRL and click on the first tab then choose the Rectangular Marquee Tool and press the right arrow a few times until your selection has moved along to overlap with the orange tab. The reason I say you should choose the marquee tool in this step is that to move a selection you must have a select tool up. If instead you had the regular arrow tool selected you would actually move pixels around as well as the selection. Try both and you’ll see what I mean.

Step 38

Now we create a new layer in between the two tabs and fill in our selection with a darker orange colour - #b44724. Then hold down CTRL and click on the orange tab layer, then click CTRL-SHIFT-I to invert the selection and click on the middle layer and hit Delete. This should leave you with only the darker orange part that overlaps the orange tab.

Step 39

As you can see we’ve created a sort of shadow on our second tab.

Now if I do say so myself these tabs look awesome, and the reason they do is because they overlap. Unfortunately this also makes them harder to work with in HTML. You can however do a variety of things with transparent PNGs, or alternately just make text change colours in rollovers and not worry about changing tab colours. Anyhow this is all a bit beyond the scope of this tutorial. Suffice to say the menu might be a bit tricky to build.

Step 40

So here’s our layout so far. I’ve added a couple more tabs and given them some text.

Step 41

Now we’ll draw in the featured work area. This will be a simple white rectangle where the work will go. Then behind that create another layer and use the Polygonal Lasso Tool (L) to draw a kind of wonky rectangle and fill it with a dark, dark brown colour - #0e0c0c.

Step 42

Next we’ll add some descriptive text on the left and the item itself. Notice that with the text I’ve used a dark brown for the two descriptors (Project Title and Project Description) this makes them fade into the background which is good because they aren’t that important. The title of the project and descriptive text on the other hand stand out. These last two items are set in a light beige colour picked from the background with the title being brighter than the text.

Also I’ve added a faint radial gradient to the work sample going from white to a light beige - just because I love radial gradients and can’t get enough of them

Step 43

Now finally I’ll add a couple of little hand drawn doodles to finish off the design. For these I’ve used David Leggett of Tutorial9’s excellent and free hand-drawn brushes. You can add brushes by opening the brush palette as shown, clicking on the little right arrow and choosing Load Brushes, then selecting the brush file you downloaded.

Because the brushes are much bigger than I want them it’s important to sharpen the layer after you’ve resized it. So here I’ve shrunk the arrow down and then run a Filter > Sharpen > Unsharpen Mask to fix it up.

The Design

So there we go, the final design, with a couple of variations for different pages. The final PSD designs are of course up on ThemeForest for sale, and I’ll add the homepage PSD to the Plus system.

Final Thoughts

So that’s my take on a paper texture sort of layout. There are lots of designers who do this look much better than me, in particular check out Liam McKay’s work at WeFunction and also take a look through design galleries like WebCreme and you’ll find lots of neat grungy, papery designs.

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.

Here is a link to the written version of the tutorial How to Simulate Fractals in Photoshop and the video version is below.

The 3 Components of Web Design Series

This article is part of a series on the three components of web design, here are links to the other articles (so far published)

• The 3 Components of Web Design
• 9 Information Design Tips to Make You a Better Web Designer
• 7 Interface Design Tips Every Web Designer Should Know
• 8 Ideas, Techniques and Tricks for Your Web Toolkit

1 - Be methodical

Information design is a problem that gets more and more complex the bigger the website. However even a small website will benefit from a methodical, step by step process to figure out how to order and organise the site’s content. Here are some simple steps you may wish to take:

1. Understand the Site’s Content, Processes and Purpose
   It’s pretty hard to organise a bunch of stuff if you don’t know what that stuff actually is. So your first task is to skim through the site’s content, processes and goals. A site’s content means copy, images, video and other assets you’ve been given or briefed on that needs to go into the site. A site’s processes are the tasks and workflows that users will need to complete to interact with a site. And the site’s goals refers to both the client’s goals and the user’s.

   So for a simple restaurant example you might find that you have text for pages 1 through 20, you know that users will be attempting to complete some task such as making a reservation. You might also see that a user’s goals on the site are to find out what the restaurant serves, where it is located and whether there are tables, and then hopefully make a reservation. Finally the client’s goals might be to serve the user, but also to push them towards a set of specials they run.
   
   

2. Prioritize and Look for User Paths
   Once you’ve got a firm grasp of what’s going into the site, you can begin to prioritize information and figure out how users will traverse the site. What paths will they take to accomplish their goals? What pages are the most important? Which should be seen right up front and which are just supporting information?

   Even with a simple example like our restaurant site, there are many ways of setting out the information. For example you might push specials straight away on the homepage, or you could tie them into the reservation process, or you might work them into the menus. Similarly you may find that given a client’s goals, you will have a different priority on page content. Maybe the client tells you that no-one is ever able to find this restaurant, so you need to make a How to Get Here page and give it a high priority.

3. Organise the Information
   
   With an understanding of what is going into the site, and a clear grasp of how the different elements relate to each other, how users will want to work through them, and how important different sections are, you can now organise the information for the site. This organising involves not just categorizing pages - for example figuring out that ‘about the company’ fits under an ‘about’ tab - but even questioning and rearranging the content you’ve been given. Sometimes you may find that it’s better to combine multiple pages, break up one long section, turn some text into a simpler diagramatical representation, or any number of other rearrangements.

   Develop a sitemap or plan of how the information will site in a heirarchical way. Although sitemaps are usually just a set of boxes indicating pages, you can work in all sorts of extra information explaining how the site is going to be set up, including things like quick links from the homepage, how different sections might tie in together, and paths a user might take through a sitemap.

After realising there was so much information on the marketplaces, we now believe a wiki is the most effective way to organise it

2 - Think out of the Box

Sites with a reasonable amount of complexity can be rearranged and reorganized many different ways. One site that I’ve worked on organising and reorganising countless times is FlashDen. I’ve lost count of the number of times I’ve looked at that menu and rearranged it. In some instances we just move pages into different sets and groups so that they seem more logical, and in others we’ve introduced more out-of-the-box thinking.

For example some months ago the menu was becoming overly complex so we removed a whole heap of the more "fluffy" menu items and created a blog that now houses competitions, newsletters, subsite links and other pages that were cluttering up the menu.

Recently we’ve found we have many of what I call "stragglers" - that is pages without a home in the menu. From an information design point of view, stragglers are terrible - even I can’t remember how to get to some of them! The solution this time is to build a wiki system, pipe top level content into the menu behind the scenes, and then use the wiki to house deeper levels of information with its own search, tagging and categorization facilities.

The point of my experiences with FlashDen is that organising information doesn’t even necessarily have to be about putting it into menus and submenus. You may find that some information shouldn’t be on a site, or that it requires a subsite, or that you need to do something else altogether. With FlashDen I have the advantage that it’s been almost 3 years now that I’ve been looking at the content and still to this day I find new arrangements and solutions.

To be an effective information designer and to find the most optimal solutions often requires thinking out of the box. Of course saying "think outside of the box" is much easier to say than to do! Sometimes we are constrained in a box we can’t even see. Some time ago I heard of an experiment where a bunch of jumping bugs were placed in a glass box and over time learnt to jump only so high. When the glass lid was removed the bugs continued jumping the same, restricted height not even realising they could if they wished get out.

So how do you overcome a box you can’t see? Simple! With the help of others who aren’t restricted by the same issues you have. For complex information designs I will often ask other people for organisational ideas giving them only the raw problem and not my own permutations. Getting say a programmer’s ideas or a user’s views will often surprise you as their perspectives are completely different from your own and unhindered by the same set ways of thinking.

If anyone has a huge website, it has to be Chevron. How would you organise all that information?

3 - Keep your structure balanced

When you do organise large sets of information, an obvious question that always arises is how deep or how wide should your navigation be. Depth refers to how many layers of categories and subcategories there are, while width is about how many of each level there are. The trick is to find the balance. If there are too many items on a single level - especially the top level - then you risk confusing the user. On the other hand if a user has to click many levels in, you risk losing them.

A good rule of thumb is to keep the number of options on a given level to 4 - 8. If you have 8 top level items, each with 8 subcategories, and each with 8 sub-subcategories, you’ll have enough space for a 512 page site. Of course rarely do things automatically balance out so well. So again you have to be careful that you don’t have a heavy side and a light side. For example, on a site with a couple hundred pages, if you put contact up on the top level somewhere, chances are it’s not going to have 8 subcategories with 8 sub-subcategories. It’s more likely that contact is going to be a pretty simple section - even for a complex site.

On the flip side if you don’t put something like contact at the top level, you may get a more balanced depth of information, however you risk not having an important user task completed because it’ll be hard to figure out how to find the contact information. A simple solution to this particular problem might be to add ‘quick links’ where you give a user a few options on the homepage to jump deeper into the structure without navigating the usual way.

On NETTUTS we decided to facilitate user habits with demo and source button placement.

4 - Design for Scanning, Skimming and Jumping

I don’t know about you, but it is seriously rare that I will ever fully read a webpage. Whether it’s to read instructions, terms and conditions, or just regular copy, most of the time I skim, scan and jump. Assuming I’m not the only one who does this, it makes sense to design pages to faciliate this way of consuming information.

Don’t wrap key information in bundles of text - highlight it. Don’t give users paragraphs on end - break them up with headings, subheadings, bullet points, diagrams, whatever it takes! Think about how a user will use your site and design it to facilitate their use.

A good example of designing for user consumption is on our sister site NETTUTS, a site that as most of you know, publishes tutorials about web development topics. Now on NETTUTS we noticed early on that most people, on first viewing a tutorial skip right through to the end, where they try to find a link to a demo and / or source code so they can decide if the tutorial is worth reading in the first place. Once we realised this, it was a simple matter to add special Demo and Source buttons and place them consistently at the top of the tutorials. This simple adjustment to match our design up to user consumption patterns has gotten us a lot of happy feedback.

PatternTap is a good place to get ideas and see how other people design articles and textual information

5 - Design text that wants to be read

I’m not sure if I’m just getting older, or if spending all my time in front of a screen is just making me picky, but lately it really bugs me when I’m presented with text that doesn’t compel me to read it. The aim of a site design is usually to transmit information and most of that is written text, so focusing on displaying it well should be a priority.

Using too-small font sizes, low contrast between text and background colour, or badly using light text on a dark background, are all design sins that we’ve all been guilty of (me on many on an occasion!) But beyond these, there are other ways that your design can make the visitor actually read. Aim to design such that your layout focuses visitors on the copy and leads them in with titles, subheadings, demarcations, pullquotes, and other techniques for pulling the eye.

A simple example of guiding users through a site - ThemeForest’s 4 step guide

6 - Guide the User both across pages and through pages

Earlier I mentioned User Paths - that is set ways that users will tend to traverse a website. Many of these will come about simply by the way people behave, but with planning, you can choose how a user will be guided both through a single page and across multiple pages. Once you know specific paths you can work in visual guides and links to help them move along that path.

For example on FlashDen, when a new user arrives, it is our aim to get them to register, find files, deposit money and then buy those files. So we first give them a summary of the four step process on the homepage, then at each stop there are pointers to direct the user onto the next step. In our next redesign I’m hoping to make this path even more obvious as it’s essential to the site working as it should. Note that the path I’m describing is not 4 pages, but 4 tasks. For example finding files might involve the user looking at dozens of pages, but it’s one discrete task. User paths don’t need to be through set pages, they can just as easily encompass set tasks!

Steve Krug’s very worthwhile book!

7 - Don’t overcomplicate things

It should go without saying that simple is better for users than complicated. Nonetheless it’s all too easy to overcomplicate designs. I know that I often make things seem more complicated so that I have more visual elements on a page to work with (bad Collis, bad Collis!) Another overcomplication sin is using unnecessary words on buttons and calls to action. Steven Krug in his excellent book Don’t Make Me Think gives the example of a hypothetical employment site with a button that reads:

• Jobs
• Employment Opportunities
• Jobs-o-rama

One of these is clear, one is reasonably obvious, and one is - well who knows.

Information can be presented as more than just text!

8 - Visualize Information

As designers, we more than most, know the value of a good visual. And there are plenty of opportunities to diagram or visualize some data, concepts or information. This very article as you will remember begins with a very basic diagram of how interface design, information design and aesthetic design relate. These visuals not only break up text, but they are also more memorable and give you an opportunity to bring a page to life.

DoshDosh have an interesting article on information visualization, diagrams and what the author calls infographics that is worth checking out even if it’s only to see the brilliant graphic examples.

Analysing paths and goals has never been easier thanks to tools like Analytics

9 - Analyse your Information Design

Information design is one of those things that is hard to get right on the first attempt. So once you’ve built a site you should be analysing it to see how people use and digest the information, how they behave and where you can improve your design.

A neat tool in this regard is Google Analytics. For example where I mentioned User Paths earlier, Analytics lets you track paths through pages using the Goals feature. You set up a sequence of pages and Analytics will report the %’s of visitors who make it through (and by extension click away) at each point.

Another Analytics feature you can use is search term tracking which lets you see what users are searching for on your own site’s search field. Knowing what people are looking for tells you what information needs to be more readily available!

Do you have any Information Design Tips?

Share your own tips and ideas about good information design in the comments!

Update: Check out this article on AListApart

By some odd coincidence AListApart has published a neat article about Information Architecture today - Flexible Fuel: Educating the Client on IA. Go information design

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.

Aesthetic Design

Aesthetic design is all about getting the look right. If you are good at this it means you will be able to design sites that not only look good but are appropriately designed. Different designs convey different messages to an end user, so it’s essential that a design matches the site’s message.

The other day I was walking through a supermarket and saw a juice brand that had the visual design of a laundry detergent. There was just something about the way the box was done that I momentarily wondered why there was detergent in the fruit juice aisle. In the same way giving a website an inappropriate package for its content and message - even if it’s a really good looking package, is a bad end result. This is why it’s very important as a web designer that you don’t simply follow fads and trends blindly. You must always be thinking not just how you can make a site design look good, but also look appropriate.

Out of the three components of web design, aesthetic design is surely the one that people most identify as being design. One thing I find interesting about aesthetic design is that it is deceptively difficult. I remember once designing a poster and showing it to a friend who commented "oh it’s just a few lines and some text, you must have done this in about ten minutes" - ah the joys of being a designer!

Information Design

Information design is about preparing the information on a website in the best possible way, so that users can efficiently and effectively find and digest information. In larger sites, just finding information becomes challenging, but in sites both large and small, processing it is always a design problem.

A quick example of information design is in how you organise and format text on a page. Because people tend to skim through content on a screen, it’s much better to organise it with headings and subheadings, diagrams and visual hooks, and general variation for the eye. Techniques like these make the information on a page much easier to digest. But information design isn’t limited to what’s on a single page, itis also about what structures you use to house the site’s parts, how you lay out the menus and submenus and how you cross link different sections.

You may be interested to know that in larger and more complex projects and sites, there is in fact an entire profession dedicated to modelling and structuring information called Information Architecture. The most famous Information Architect that I know of is Jesse James Garrett who incidentally coined the term AJAX. He’s pretty neat and you can read about him at Wikipedia.

Collis’ Awesome Diagram

Since we’re talking about information design, it seems like a good opportunity to turn 6 paragraphs of waffley text into a diagram, so I present to you my awesome diagram of the components of web design! Bask in its red and grey awesomeness!

Interface Design

Interface design is the arrangement and makeup of how a user can interact with a site. The word interface means a point or surface where two things touch. So a web user interface is where a person and a website touch - so menus, components, forms, and all the other ways you can interact with a website.

Good interface design is about making the experience of using a website easy, effective and intuitive. It’s actually much easier to demonstrate bad interface design because that’s when you really notice it. A simple example of interface design is the use of icons. Have you ever looked at an icon and thought "what is that meant to represent?!" - well that would be bad interface design. Using icons to label and signify different types of content or actions is just one part of interface design.

Incidentally another example of interfaces that you will likely encounter as a web designer is Application Programming Interfaces or APIs. An API is the set of functions and protocols by which you (or your program more precisely) can interact with whatever the API is for. So for example Google Maps provides an API which you can use to create applications or sites that work with Google Maps.

What about …

Now you may be thinking, that’s all very well and good Collis but where does CSS fit into this? Or what about Flash? Well as I say, these are the three non-technical aspects of web design. On the flip side there are all those technologies and skills like HTML/CSS, Flash, Javascript and so on. But I tend to think they are more a part of web development than web design. In the same way that it’s important to separate HTML and CSS to keep information and presentation separate, you could argue that how you make a design come into reality is separate from the design itself. In simpler terms, is knowing a specific CSS hack anything to do with design?

Don’t get me wrong, you need to know how to build things in order to design them appropriately. However when it comes to saying what makes up web design, my answer remains Interface Design, Information Design and Aesthetic Design.

What’s your take? Have I missed some essential part of web design? Or do you think that web development is an essential part of web design itself?

Later this week you’ll be able to read more in-depth articles of tips and tricks for each of these three components of web design - interface design, aesthetic design and information design. In fact the first one is going to go up in a few short hours.

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.

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:

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!

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.

Why you can’t just tile any old photo

So in this tutorial we want to create a tiled background of a grass texture. There’s a fantastic photo of grass on Flickr by 100kr

which we can use. However if we just tile the image as is, the result isn’t very good. As you can see above it’s very clear where the image is being repeated and the dark patches look pretty weird. So to turn that photo into a tiled background we need to first remove any irregularities, and then make the edges blend in to each other.

Step 1

So the first step is to grab the main image and then crop into a section that doesn’t have the really dark corner patches. Something like the box shown above.

Step 2

Here is our segment. I’ve actually shrunk it down a bit so that the texture isn’t so oversharpened. Now although it’s mostly evenly coloured, we could do with lightening the edges. The more even we can get the image the better as slight differences are quite glaring when the background is tiled.

So just grab the Dodge Tool (O) and with a large soft brush, just gently brush over the left and right edges to lighten them up a shade. Don’t go overboard though as the grass will look washed out.

Step 3

As you can see above the grass is looking a lot more uniformly coloured. But there is a little leaf in the top left, that is going to be a dead giveaway if the same leaf appears over and over again, so we should get rid of it. To do this grab the Patch Tool (J) and draw a shape around the leaf then drag with your mouse to get an area nearby to patch it with. (Note that the Patch tool should be set to Source and not Destination, otherwise you use it slightly differently)

Step 4

So our background is looking pretty nice and uniform now. We just need to make the edges bleed into each other. So duplicate the grass layer. Then move the first layer to the left and the second layer to the right. Keep doing this until you can see both layers with a white gap in between. Now bring them together so the right most edge of the first layer touches the left most edge of the second layer.

Step 5

Here you can see the two layers almost touching. Bring them together so there isn’t any white in between and merge the two layers into one.

Step 6

Now we again use the patch tool to draw a rough shape around the edge where the two layers meet, then use your mouse to drag a nearby area over to patch it up.

Step 7

The patch tool makes this sort of operation really easy, especially with a background as noisy as this grass. As you can see unless you look really carefully it’s not apparent where the blend line is. If you wanted to you could go into fine detail and clone individual blades of grass - but this is fine for our purposes.

Step 8

Now we repeat the same process vertically. So duplicate the layer and move one down and one up until the bottom and top edges meet. Merge the layer together and use the patch tool to get rid of the edge.

Step 9

And now we are ready for tiling!

The reason this will work is we’ve effectively gotten rid of those edges, the new edges of the document already match up because we moved the layers equally left and right so that the right edge of this document actually is the next pixel along from the left edge.

Step 10

So press CTRL-A to select everything and go to Edit > Define Pattern.

Step 11

Now we give the pattern a name

Step 12

Now on any layer if you select blending options and tick the Pattern Overlay box you can choose from your set of custom patterns as shown, including the grass one we just made. In the image above you can see me applying the pattern into a website background.

Of course you should also save the pattern image as a PSD or JPG itself as you may need it as a standalone image. For example if you were to use it as a background image in an HTML document you’d need the single JPG image, not a Photoshop "Pattern".

Finito!

Here’s our tiled grass. As you can see there is a bit of a dark patch that gives it away, but because I’m going to be using this as a background to a website it’s not a big deal as there will be stuff over the top. Nonetheless you could easily go back and patch up that spot to make it more seamless.

Update - Filter > Other > Offset

Thanks to the commenters who pointed out that there is in fact a simpler way to offset the background using a filter! Just go to Filter > Other > Offset and select a pixel amount to move the image by both horizontally and vertically. Thanks for the tip guys! I learn something new everyday

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.