Tutorial

Create Your Own Sexy Background Patterns (Part 4: Synthetic Fiber)

Posted on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today we’re continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our fourth edition: Synthetic Fabric Textures. We’ll be looking at how to create believable, tile-able fabric patterns by starting with a plain vanilla approach, and then taking the same principles to create advanced versions.

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.

Be sure to check out the rest of the series, including Carbon Fiber, Noisy Backgrounds, and the Intro to Patterns post!


Today’s Patterns

Today is day four in our series – but it’s worth mentioning that all of these tutorials are “standalone” – meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.

The pattern we’re going to be covering today is how to create an effective “synthetic fabric texture” that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We’re going to do this in 4 steps:

  • Step 01: Basic Fiber Texture
  • Step 02: Basic Canvas Texture
  • Step 03: Intermediate Denim Texture
  • Step 04: Advanced Denim Stripe Texture

For the past few months, subtle, noisy textures have been super popular with web designers (check out our tutorial on creating them here). In the last few weeks though, I’ve been noticing more and more “advanced” noise textures… which is to say that people are going beyond the simple ‘add noise pattern’ approach and trying out funkier effects. There are two main things that I’d like to point out:

1: The textures that we’re going to cover today are all created 100% in Photoshop. We’ll cover how to create photographic textures in our next tutorial.
2. These textures should be subtle and used sparingly. Nothing screams 1995 like a fugly background texture using heavy handed Photoshop filters.

Alright… you’ve been warned. Let’s do this!


The Written Tutorial


Step 01: The Basic Fiber Texture

This introductory texture is incredibly simple to create, but can be used for some highly professional looking results when used properly.

For instance, check out the texture behind the footer of the ‘qop‘ WordPress theme:

Not bad right? We’ll start out with a blank canvas. Set the size to 400 x 400 for now. The size can be changed later on, but you don’t want it to be too small because we’ll need some room around the edges to work with.

Create a new layer and fill it in with Black color.

Go ahead and name it the Black Layer just for the sake of organization.

Now we want to apply a quick filter to establish the foundation of our rough line texture. While on the Black layer, apply the following filter: Filters > Sketch > Water Paper.

You can adjust the settings until you have your own custom desired effect, but the demo texture uses the following settings:

  • Fiber Length: 15
  • Brightness: 42
  • Contrast: 43

Set the Black layer’s blending mode to Screen so that only the white lines show through. At this point you can also add a background rectangle to establish a color for your texture. Note that you can change the color at any point in this process.

We can’t really see anything but white now… so let’s add a simple colored rectangle and name it our Background Color. I used the color #242d34, but feel free to use anything you’d like.

Ahh, much better! Now we can see our texture. It’s a bit flat though. So, let’s add a little depth to our texture – we’ll do this by creating a new layer and filling it in with Black (again). Name this layer “White” (you’ll see why in the next steps).

Now we’re going add the Filters > Sketch > Water Paper effect again, but this time we want to add much more Brightness and Contrast to the settings:

  • Fiber Length: 15
  • Brightness: 63
  • Contrast: 66

Now, just invert the colors for that same layer (Image > Adjustments > Invert), and set the blending mode to Multiply. Bring down the opacity of the layer to around 90% so that the effect isn’t too abrasive.

Whallah! Not too shabby right?

The next step is to crop down the edges of this pattern because Photoshop tends to get a little heavy handed around the edges. Crop in about 50px from each edge using the Crop tool.

Why did we crop this in? Because Photoshop tends to get a little heavy handed around the edges of the Water Paper filter, which means that if we try to make it into a pattern, we’ll get obvious “seams”. Cropping in from the edge helps us to eliminate these visible seams when we go to use this as a pattern or on the web.

The final step is simple – just set the background color to your desired color, adjust the opacity of each filter layer until you get the desired level of texture, then make it into a pattern (Edit > Define Pattern). All done!

And, the final product should look like this when used as a pattern:

This might be a little too dramatic in terms of contrast to use (I usually dial the intensity up for tutorials to make the effects obvious), so feel free to play around with the opacity of the texture layers to get it “just right” for your own particular design.

To customize this effect: The main things you might be interested in tweaking are the “fiber lengths” of the Water Paper filter and the background color. Additionally, it can also be fun to mess around with the scale of the final pattern. Once you crop in, try resizing the entire image to tweak the density of the texture (and use the Sharpen tool to tweak how sharp it is).


Step 02: The Basic Canvas Texture

This next texture is probably the simplest of all four today. Three easy steps will complete the effect:

First, create a new document (400 x 400) and draw a colored rectangle on the document. We’ll use this later on to adjust the color of the final pattern.

Next, create a new layer, fill it in with Black, and add the filter: Filter > Texture > Texturizer. Use the following settings:

  • Texture: Canvas
  • Scaling: 50%
  • Relief: 3
  • Light: Top Left

Set the blending mode on that layer to Screen.

Next, create a new layer, fill it in with White this time. Add the same exact filter: Filter > Texture > Texturizer. Use the following settings:

  • Texture: Canvas
  • Scaling: 50%
  • Relief: 3
  • Light: Top Left

Now just set that layer’s blending mode to Color Burn so you can see through to the background color.

Finally, let’s adjust the background color to something more subtle. Note that as you adjust the background color, you may also want to adjust the opacity and blending modes of the top two layers until the effect is as you desire it.

The final pattern as shown in the demo:

You can create the pattern from here (Edit > Define Pattern), or you can play around with the background color, filter layers’ opacity, and the cropping until you have a pattern that is seamless and fits your design.


Step 03: Intermediate Denim Texture

This next texture is a bit more advanced, so pay special attention if you’re looking to recreate this effect.

Begin with a new document (400 x 400) and begin by drawing a blue rectangle (#2b4891) as the background. You can actually choose any color, but we’re used to seeing blue denim, so we’ll stick with that for now.

Next, create a new layer and Fill it with 50% Gray (you can use the hot key Shift + Backspace/Delete). Give it the name of Horizontal Layer for now.

Next, set the Foreground and Background color to the default black and white by pressing D. We need to add the foundation for our denim pattern. On our gray layer, apply the filter: Filter > Sketch > Halftone Pattern.

Use the following settings:

  • Size: 1
  • Contrast: 0
  • Pattern Type: Line

This should produce a basic line pattern… but denim is “fuzzy”, so we’ll want to mess this up a bit using another filter: Filter > Pixelate > Mezzotint. Set the type to Fine Dots.

Now create a duplicate copy of this layer (Cntrl + J) and name it “Vertical Layer”.

Use the Free Transform Tool (Cntrl + T) to rotate it 45 degrees AND scale it out far enough so that it meets each corner of our document. I happened to scale it up 145% in case you’re trying to match mine exactly.

Don’t worry that scaling the pattern up so big will create some raster imperfections. We actually want those. In fact, go ahead and add additional blurring (Filter > Gaussian Blur set to 0.3) to both this layer and the first untransformed layer.

Finally, set the blending mode on the diagonal layer to Multiple with 70% Opacity — and set the blending mode on the horizontal stripe layer to Soft Light with 60% Opacity.

That completes the denim effect! You can tinker with the background colors and then make it into a pattern (Edit > Define Pattern).

Note: If you notice any obvious seams in your pattern, you’re going to need to play around a bit with the cropping. The trick here is to just make sure that there aren’t any unnaturally bright or dark lines near any of the edges. Try a few different croppings until the pattern is seamless.

If you followed the demo to the letter, you can simply crop down the height of your document to 400px by396px. This will remote the seams (below):

Whallah! How does this work? If you remember back in our first pattern tutorial, the general idea here is that the final few pixels at the right-side and the bottom of our pattern will always need to link to the left-side and top of the document. Cropping off those 4px in this case helps the bottom match to the top. Since the right and left already match up, we’re good to go!


Step 04: Advanced Denim Stripe Texture

Alright! We’ve arrived at the final texture of the day. By now we’ve employed some pretty tricky techniques, so this final step is actually going to seem quite simple.

Create a 200 x 240 document. Go ahead and drag in the three raw layers that we used for our denim pattern (the two texture layers + the background color).

Group these layers together (Ctrl + G) and set a 50px wide mask over the entire group folder. If you haven’t created a group mask like this before, it’s easy: Just use the Rectangular Marquee selection tool to draw a 50px wide selection that fills the document from top to bottom (look at the Info panel to check your measurement). Then just hit the “Add Vector Mask” button at the bottom of the layer panel:

Why 50px? Because with a document of 200px wide, we are going to want to fit 4 stripes of 50px.

Next, duplicate this layer group, move it over to the right of the first group, then (optionally) flip it horizontally to create an opposing diagonal pattern.

To add some contrast in the stripes, simply change the background color (subtle changes are best here) to something a bit brighter or darker than the original color).

Finally, duplicate BOTH of our stripe groups and move them over into the blank space on our document.

We’re note quite done yet – to add some visual interest, let’s de-link the group masks for these last two stripes, then move the 3 denim layers inside over about 100px to create a slightly different striation. The end result isn’t dramatically different, but people looking for seams in your pattern will be thrown off by this final step.

Congrats! Select Edit > Define Pattern, and start using this in your own projects. As a final thought, you can obviously do a lot more with this by adding your own customizations. The below example changes up the colors to a brown hue, and then also has scaled down the “knit” of the pattern by reducing the image size. Check out our final example:


Conclusion

Alright! So now you should have a good enough basic understanding to create your own custom variations of these Synthetic Fiber patterns – play around with the levels, colors, document sizes, and more to add your own personal twist on these. Heck, you can even invert the shading to create subtle, light colored patterns.

In the next parts of this series we’ll be showing you how to create some advanced photo-based textural patterns, more shape based patterns, transparent patterns, and even more in the future.

Advertisements

Create Your Own Sexy Background Patterns (Part 3: Carbon Fiber)

Posted on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today we’re continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our third edition: Carbon Fiber Textures. We’ll be looking at how to create sleek, professional carbon fiber patterns by starting with a plain vanilla approach, and then taking the same principles to create advanced versions.

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.

Be sure to check out the first post in the series if you missed it!


Today’s Patterns

Today is day three in our series – but it’s worth mentioning that all of these tutorials are “standalone” – meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.

The pattern we’re going to be covering today is how to create an effective “carbon fiber texture” that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We’re going to do this in 4 steps:

  • Step 01: Basic Carbon Fiber Texture
  • Step 02: Modifying the Basic Carbon Fiber
  • Step 03: Getting Funky: Diagonal Carbon Fiber
  • Step 04: Taking it to the Next Level: Advanced Carbon Fiber

Ready? Let’s do this!


The Video Tutorial


The Written Tutorial


Step 01: Basic Carbon Fiber Texture

The basic carbon fiber texture is actually pretty darned simple to create. There’s tons of tutorials for this basic pattern out there on the web, so we won’t breaking any new ground here. What’s important in this first step is that you pick up the basic principles that we’ll be using in the more advanced stages. The main tricks are:

  • Keep your document as small as possible.
  • Use dark gradients to create a convincing and subtle light source.
  • Don’t get too fancy – a little goes a long ways with carbon fiber.

Let’s start our basic version by creating a 4×4 document:

Next, grab a 2×4 px selection of the background (shown) and create a new layer from it (Ctrl+J):

On the new 2x4px layer, let’s add a basic gradient from the Layer Styles panel (double click the layer, or right-click it and select Layer Styles). The gradient we’ll be adding will run from the bottom to top and use the colors Black (#000000) on the bottom to Dark Grey (#4f4f4f) on the top:

This gradient is going to be the foundation of our carbon fiber… so you can always return to this step to change the the outcome of the final product.

Next, let’s take a 1×4 pixel selection of the gradient layer using the Rectangular Marquee tool and create a new layer by cutting it off (Right click > Layer via Cut).

Now set the opacity on this second layer to 92%.

Why? We’re trying to create very subtle variations in the grey-tones so that the carbon fiber appears to have a believable light source. Obviously, there isn’t a true light source and we can’t create one without having a massive image (which defeats the point of a web pattern), but small changes in shading will deceive the eye into thinking that there is depth.

Merge the two 1×4 px layers together (above) and then, using the marque tool again, take a 2×2 selection off the top of the new layer:

Next, to create our pattern effect, swap the ordering of the two 2×2 px tiles from top to bottom, and vice versa:

Our pattern is now complete! Simple save it to your library of patterns by using the Edit > Define Patterntool. Give it a name of your choosing, and it will now appear whenever you use the Layer Styles > Pattern Overlay library.

Alright! So we have one very basic carbon fiber complete… let’s move on to the next step, where we’ll create some modifications on this idea.


Step 02: Modifying the Basic Carbon Fiber

The basic carbon fiber can be manipulated quite easily. In this next short example, we’ll use the exact same process and principles to create a slightly larger fiber texture.

Note: I’m purposefully going to skip over some of the repetitive screenshots that we reviewed in the last step, so I’ll only be highlighting new techniques.

Start this time with an 8px by 8px document.

In the first carbon fiber pattern that we created, we took a shortcut by creating a single gradient for the entire left side of the document. This worked becuase the document was only 4×4 and really couldn’t handle any more detail than we went over.

In this second version we’re going to get a little more meticulous with our shape. Begin on your document by adding a 4×4 rectangle:

Add another 4×4 rectangle for the bottom space (I’ve colored it in so you can see it better):

Now we need to add a subtle gradient to the bottom square. Remember, the bottom left region is dark… nearly black, so use a very dark gradient:

Repeat the gradient step for the top 4×4 layer, but this time it’ll be a light gradient:

Duplicate both 4×4 layers and perform the “fliperoo” trick where we swap the position of each square to opposite corners of the document.

Now we have our basic carbon fiber pattern, but let’s add one level of customization by adding a Levels Adjustment layer. Do this from the Layers menu at the top; You’re looking for the “Layer > New Adjustment Layer > Levels” button.

The Levels Adjustment layer will allow us to tinker with the brightness and contrast of our fiber pattern. When you’re done, Define the Pattern (Edit > Define Pattern) and you’ll be set to go. Here’s what your pattern will look like:

Note: When trying to use the Define Pattern tool, make sure you’re not selected on the Adjustment Layer… for some reason Photoshop won’t let you use “Define Pattern” when you are on layers like this one (it’ll be grayed out until you select another layer).

Now we have a second carbon fiber pattern complete! You can use this same basic process over and over to create your own variations. Try different document sizes, adding color, adjusting the contrast of your gradients, and anything else you can think up to create unique effects.


Step 03: Getting Funky: Diagonal Carbon Fiber

Ok, so you’ve got the basics down… that’s great! In this next step, we’re going to create a diagonal carbon fiber pattern using the same basic principles that we used in the first two steps – but we’ll use a radical little twist on the grid-layout of our pattern to create a unique effect.

Start with a 30px by 30px document. Once you finish this step you can repeat the process using a different document size, but this should be a good starting point.

We’re going to be working in cells of “5px” as a general rule of thumb… so let’s start our pattern by creating a rectangle that’s 5px tall by 15px long.

Next, add a gradient across our first shape:

Now add a 5px by 5px square shape with the color of #191919 directly next to our rectangle shape.

Tip: Use the “Convert Point Tool” (under the Pen Tool panel) in you need to adjust or sharpen up any edges. Your shapes should end exactly on defined pixels, not show any blurry “half pixels”.

What we have here is our basic pattern that we’re going to repeat quite a few times… so let’s convert these two shapes into a single “Smart Object” so we can always return back to them to edit the gradient.


Right click on one of the layers (when you have selected both using the Shift Key) to open up the context menu and find the Convert to Smart Object button.

Note: You can always go back and edit your smart objects by right clicking on the layer and selecting “Edit Contents”. This will edit each instance of the smart object… which makes edits quick and easy when you have 10 or more duplicates floating around.

Next, we need to duplicate the smart object and nudge it down by 5px and to the left by 5px.

Repeat the same “Duplicate, then Nudge” process over and over until you’ve covered your document. Refer to the screenshot if you get lost, but there should always be a 5px unit of measurement between all major parts.

Now let’s add a background color layer. I used a simple rectangle for this – set the color to #1e1e1e:

Finally, just to be safe, lets add another of those trusty Level Adjustment layers so we can tinker around with the darkness and contrast on the fly.

Whallah! You can now use the Define Pattern tool again and use the pattern wherever you want, like this:


Step 04: Taking it to the Next Level: Advanced Carbon Fiber

For this last step, we’re going to use the same basic principles again… but this time we’ll flip things by 45 degrees to create another unique diagonal carbon fiber effect.

This final pattern is actually the easiest of all to master, so this should be a cakewalk if you’ve made it this far!

Start with an 8×8 document and add a background color. I used Black (#000000), you can use whatever you’d like… just keep the exact color in mind for the next step:

Now add a rectangle, measured at 4px wide by 8px tall:

Everything should be familiar now – add a subtle gradient – the ending color should match our background color (my gradient here is #555555 to #000000). Note the angle – we’re setting it to be 135 (or -45 depending on how you want it) so that it will match up nicely when we rotate the layer:

Bingo! We have our final pattern… adjust the document size and gradient colors to get your own custom variations:

… and here it is:


Conclusion

Alright! So now you should have a good enough basic understanding to create your own custom variations of these Carbon Fiber patterns – play around with the shapes, colors, document sizes, and more to add your own personal twist on these. Heck, you can even invert the shading to create subtle, light colored patterns.

In the next parts of this series we’ll be showing you how to create some advanced textural patterns, more shape based patterns, transparent patterns, and even more in the future.

Create Your Own Sexy Background Patterns (Part 2: Noise Patterns)

Posted on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today we’re continuing our tutorial series on creating background patterns that can be used on the web (and during the design phase) with our second edition. We’ll be looking at how to create the ever-popular “noise” patterns that so many websites have been using lately. Be sure to check out thefirst post in the series if you missed it!

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.


Today’s Patterns

Today is day two in our series – but it’s worth mentioning that all of these tutorials are “standalone” – meaning that you should be able to pick right up on Part 4, even if you missed the first couple parts.

The pattern we’re going to be covering today is how to create an effective “noise texture” that can be used as a pattern in Photoshop as well as a tiling background on your web pages. We’re going to do this in 4 steps:

  • Step 01: Creating the foundational noise pattern (Basic Grey)
  • Step 02: Inverting the noise pattern (Black)
  • Step 03: Adding color (Blue)
  • Step 04: Adjusting the shading and hue (Green)
  • Step 05: Adding additional vibrancy (Orange)

Ready? Let’s do this!


Step 01: Creating The Foundational Noise Pattern

The first step in today’s tutorial is probably the most crucial, because we’re setting up the foundational elements. There are a lot of different ways to create these noise patterns… but I’m going to show you one of the best (and most flexible!) methods to save you frustration and headaches down the line.

Start by opening up a new document. The size doesn’t matter much (we’re using 200px by 200px in the demo), but it’s best to keep it above 75px to ensure that your noise pattern is believably random. Smaller documents are liable to start looking like “repeating tiles” – documents that are significantly larger will increase your file size without much added value.

Let’s add a basic rectangle shape and name it “Base Color” (organization will make life easier later on!). You can use whatever color that you’d like (we used #EBEBEB), but make sure the rectangle occupies the entire space.

Now let’s open up a new layer and name it the “Noise Layer”. It’s just a blank layer right now…

Using the “Rectangular Marquee” tool (M), draw a selection across your entire document while selected on the Noise Layer. Then select “Fill…” from the context menu (Right Click when over the selection – or it’s also under the Edit panel) and let’s fill it with the color White.

Tip: Next we want to convert the “Noise Layer” to a Smart Object. You can do this by right clicking on the layer and selecting “Convert to Smart Object” or selecting “Convert for Smart Filters” from the Filters menu.

Why make it a smart object? Because this will allow us to retain the ability to edit the intensity of the noise texture later on! There may be steps in the future where we end up needing to flatten the texture, but it’s always best to keep things editable for as long as we possibly can.

Alright, Smart Object in hand, we want to add the noise texture.

  • Filter > Noise > Add Noise
  • Use 4.8% for the amount (you can adjust this later on if you want something more subtle or more intense)
  • Select Gaussian for the Distribution.
  • Select the Monochromatic checkbox (to remove those annoying colored pixels).

Finally, set the Blending Mode on the Noise Layer to “Multiply” so that only the darker noise pixels are visible. Now you can change the color on the base layer for different noisy color.

Whallah! We now have established the foundational elements for our basic noise pattern…

…and that would be the end of this humble tutorial if we were lazy…

In the next steps though, we’re going to show you how to invert, alter and add believable depth and vibrancy to your noise pattern to make it truly stand out from the pack!

Before you move on: Go ahead and group your layers together (the Base Layer and the Noise Layer) using Ctrl+G to create a layer folder. Duplicate it once and hide the original so we always have a copy of it. For each new step, we’re going to create a new duplicate group. This is just a good basic habit to have because it ensures that you always have a backup of our foundational pattern.


Step 02: Inverting the Noise Pattern (Black Noise)

Alright, let’s twist this noise pattern into something dark and delicious now. I’m going to show you how to create an inverted noise pattern that appears to have a subtle sparkle to it.

Start with a copy of the original noise group (see the end of Step 01). The first thing we want to do is make the background color Black, so go ahead and do that on your Base Layer.

Next, because our Noise Pattern is composed of only “dark” pixels, we need to essentially invert it. Unfortunately, we can’t do this as a “Smart” effect, so we need to flatten out the noise pattern. Make sure you have the intensity level set to what you’d like, then “Rasterize” the layer. You can do this by Right Clicking on the layer and selecting Rasterize from the context menu, or from the Layer > Rasterize > Rasterize Layer menu.

Now that we’ve essentially flattened out our noise pattern, we want to invert it. Do this from the “Image > Adjustments > Invert” panel.

What’s wrong? You can’t see the Noise Pattern anymore?

We’ll need to make some slight modifications to see our inverted noise pattern. First, set the Blending Mode on the noise layer to “Screen“.

Next, adjust the “levels” of your noise pattern (Ctrl + Alt + L … or Image > Adjustments > Levels).

Alternate Method: You can also simply add an adjustment layer for the levels (Layer > New Adjustment Layer > Levels). You might prefer this way if you want to make changes to the intensity later on.

Presto! Now we have a sparkly, inverted noise pattern. Obviously, you can adjust this to your heart’s content – make it darker and more subdued – or brighter and more intense. You can even change the base layer color to a dark blue or red to get other effects. Go nuts!

Remember – you save save these as “Patterns” in Photoshop by selecting “Edit > Define Pattern“. Do this and later on you’ll be able to use these patterns over and over again. You can even save your patterns as libraries and share them with friends and colleagues.

Next we’re going to show you how to add depth and vibrancy to your noise patterns…


Step 03: Adding Color, Vibrancy and Depth (Blue)

Let’s add some color and vibrancy to our noise pattern now. It’s worth mentioning that in the following steps we’ll be using some general techniques… you don’t need to follow them to the letter – just keep each one in mind for when you go to create your own custom patterns.

Start by adding some color to your Base Layer.

Now create a copy of your Noise Layer and set both blending modes to Color Burn. The duplicate layer will help us get the bottom layer darker. It’ll also give us the ability to shift the opacity on a finer scale later on.

Create yet another copy, but this time we’re going to Rasterize it and Invert it (see Step 2, Black Noise, for details if you missed it).

Set the blending mode on our new layer to Screen. We also want to add a new Adjustment Layer (Layers > New Adjustment Layer > Levels) so that we can control the intensity of the light noise.

Now let’s create a subtle offset by nudging the light layer away from the dark layer (1px up and 1px left) using the Move Tool (V) and your keyboard.

Next, add a layer mask over your Light Noise layer so we can play with it.

Using a roughly textured brush (set to about 130px and the color Black) we want to essentially mask off a bit of our light noise by painting away from the Layer Mask. One brush stroke should do the trick, but use your own judgment. The idea here is to create a rough, random pattern.

Set the Opacity of the layer down to around 45%. You can do less or more according to your own preferences… we’re just trying to drop the intensity of the contrast back a little bit though.

Now we have a nice pattern with a bit of depth to it. If you’re not digging the depth though, you can easily tinker with this by flipping the light noise layer horizontally to remove the offset and create a simple “sparkle” effect.

Alacadabra! Not bad huh? Here’s what the final texture would be:

Bonus Tip: If you notice any subtle “seams” when you go to use your new pattern, try cropping your original pattern down by 5 or 10px all around the edges. You’ll often get seams if Photoshop decides to clump up darker noise pixels around the edges of your Noise Layer, so simply cropping off the edges will result in a clean, seamless pattern.


Step 04: Adjusting The Shading and Hue (Green)

The next two steps are going to go quickly. By now we’ve set the main principles that we need to create just about any noise pattern that you can imagine – so we’re just going to show you what this texture can look like when you start playing with the Color and Intensity of the contrast. Let’s peek at the Green version…

Start with a copy of the Blue Noise layer group. Go ahead and change your Base Layer color to green.

You’ll notice a funny thing when shifting colors around… the contrast coming from the noise tends to shift from subtle to dramatic with different colors. This essentially means that we’ll want to adjust the opacity of the noise layers to account for the shifting intensity. There isn’t a hard-set rule for this – just play around with the opacity settings until you have the look you’re going for.

Finally, here’s the finished noise pattern:

I’ll mention it once again to be safe – if you notice any seams on your pattern when you go to use in on a larger shape or on your website, what you’ll need to do is crop in about 10px all around your shape to remove the “edge” pixels which can be darker when Photoshop adds them in during the very first “Filter > Add Noise” step.


Step 05: Adding Additional Vibrancy (Dual Hued Orange)

Alright – so I’ve got just one last trick up my sleeve for this tutorial. Up until now, we’ve only been adjusting the Base Layer when we wanted a new color. This is all fine and well when we want a basic noise pattern… but what if we want something with a little extra life to it?

Well, this last step if for you guys who want just that – a dual hued noise layer that has a bit of a “spark” to it.

Go ahead and start it up by changing our background color. Adjust your noise level opacity as you please (I didn’t mess with it at all for this particular demo).

Here’s where we throw the curve ball in – add a new Adjustment Layer (Layers > New Adjustment Layer > Hue/Saturation) and make it a clipping mask over the “light noise” layer. Now just tinker with the settings until you get a nice golden color coming from the light noise layer.

The final effect is here:

It’s subtle, but the light “glow” coming from that top noise layer is going to add some great life to any projects that you use it in. Enjoy it and create your own variations!


Conclusion

Alright! So I hope you’ve gotten a little something out of this second session. By now you should have a good understanding of noise patterns and how to use them in your own projects. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too… but we’ve really only just begun.

In the next level of this series we’ll be showing you how to create some advanced textural patterns, shape based patterns, transparent patterns, and even more in the future.

Create Your Own Sexy Background Patterns (Part 1: Pattern Basix)

Posted on Updated on

Reprinted from webdesign.tutsplus.com

Ever wondered how to create perfect, seamless background patterns that work on Photoshop and on the web? Look no further because today we’re going to break it down for you – step by step. You’ll be creating your own background patterns in no time!


Introduction

Heya everyone! Today I have the pleasure of starting a screencast series I’ve been wanting to do for a while now: How to create web patterns that work in both Photoshop and on the web. We’re going to do this as a series, starting with the most basic patterns and moving up to some of the most advanced background patterns that we can find, including complex textures.

Our objective is simple: To teach anyone how to create background patterns that are intended for the web (but that can also be used easily during the design process). We’re going to be “program agnostic”, meaning that most of the tips will work in both Photoshop and Fireworks.


Web Patterns

Let’s be clear: The ideas behind creating background patterns are all pretty simple – most patterns take just a couple steps and can result in remarkably effective textures. In fact, the worst patterns for the web are usually those that “try too hard” by attempting to fit too much inside of each tile.

Why is that bad? Because background patterns (in most cases) should be subtle and nonabrasive. Harsh textures distract a user’s attention away from the real star on any web design: the content.

So why use textures at all? Because, user properly, background patterns give a site a sense of character and personality that can blow away flat colors. Patterns and textures give content depth and separation, help develop hierarchy, and can give websites (which are flat by their nature) a sense of tactile feeling. They can make a site feel polished, refined, and professional – which helps to emphasize the content and make it memorable.

While the ideas behind creating patterns are simple… getting them to actually work perfectly can often be tricky. Rest assured though, this tutorial series is going to show you all the tricks you’ll ever need to create your own custom variations to use in your own projects. We’ll even hand out some freebies along the way!


Today’s Patterns

Today is just day one in our series – so we’re going to be starting with some uber-simple patterns just to get our brains moving. We’ll start with a simple grid, move to a crosshatch pattern, show how to create a scaling diagonal pattern, and then we’ll get a little bit funky by showing you how to add some subtle color and texture.

Ready? Let’s do this!


The Video Tutorial

The video portion of this tutorial will help smooth out any steps that you don’t quite follow in the written version (below). Plus, sometimes it’s also just nice to see how someone else works, so enjoy!


The Written Tutorial

Because some of these patterns are going to be difficult to see on a web-resolution screencast, I’m also providing a step by step written tutorial. You can watch the video or the written version (or both!), it’s pretty much up to you which way you learn best. Let’s dive in…


Step 01: Create a Basic Grid Pattern

The basic grid pattern is about as simple as it gets, so it’s a fantastic starting point. Let’s begin by opening up a document that’s 7px by 7px.

Why this size? Because we’re going to create a grid pattern with a 1px line running down the center… and we will want to have an equal amount of space on each side of the grid. This isn’t mandatory for this particular pattern (so long as the grid is a perfect square, it’ll still repeat seamlessly), but it’s a habit that we’ll want to have when we move onto the more advanced patterns later on.

The steps are simple:

  • Open up the document (7px by 7px).
  • Draw a 1px line down the center vertically (hold Shift for it to be straight).
  • Apply your preferred color (we used #F3F3F3 for the demo).
  • Draw another 1px line down the center – horizontally this time.
  • At 800% zoom, grab the Convert Point tool and fix the points so that the line only occupies one pixel of space. This last step is the most important as it will get us the crisp, sharp grid lines that we’re looking for.

Here are the screenshots:

Once you have your pattern exactly where you want it, we want to save it as a pattern. To do that, select from the top menu in Photoshop “Edit > Define Pattern“. This will automatically save your document as a pattern that can be used inside of the “Layer Styles > Pattern Overlay” library.

Now that we have the basics done, you can tinker with this a lot. We used a 7px document, but if you wanted a tighter grid, you could go down to 5px or 3px. Alternatively, if you wanted a more wide open grid, you could use a larger document size. The line width, spacing, and colors are all up to you.

Tip: Color that might look subtle (low contrast) on the pattern document may look way too intense when you use them as an actual pattern in another larger document. The trick here is to:

  1. Use a lot of trial and error – Save your pattern (Define Pattern) and then try it out immediately in a larger document to test for it’s overall appearance.
  2. When in doubt, use the most subtle color combinations that you possibly can. Less is definitely more in this case, as you don’t want your pattern to distract from the content. Remember, even very subtle patterns can have dramatic effects.

Step 02: The Classic Crosshatch

For this second pattern, we’re essentially just going to be rotating our lines by 45 degrees. Remember that spacing is crucial though – so we’re going to have to use a little critical thinking to get the pattern to repeat:

Open a new document at 8px by 8px this time. Why 8px and not 7px like we did before? Because we want our lines to exactly meet each corner and if we use and if we use 7px, the lines won’t quite work.

  • Open a new document at 8px by 8px.
  • Zoom in using the Navigator panel to 800% or greater.
  • Draw two diagonal lines, each matching the opposing corners. Tip: Hold the Shift Key and drawn diagonally for a perfect 45 degree angle.

Here’s the screenshots:

Pay special attention on that last screenshot, as it illustrates how you can really change the entire feel of the grid by spacing it out or cropping down on it. A tight crosshatch pattern can make a great texture just as well as a big juicy pattern. Play with the spacing and line width until you’re happy with the results.


Step 03: Diagonal Lines… Scaled

This next pattern is pretty easy as it essentially just uses the crosshatch pattern ideas (using just one line instead of two of course!). Simple diagonal line patterns are a great way to add subtle texture behind text (such as headlines) because it adds character without making the text unreadable.

For the diagonal line, go ahead and start with out crosshatch document – but this time, remove one of the lines before you save your pattern (Edit > Define Pattern). The document size in this case is going to be crucial, as it directly correlates to how tightly knit the lines will be.

The screenshots:

The second image shows how, by adjusting the spacing of the document and the line weight and direction, you can get a really wide range of patterns. Not too tricky huh?

Tip: For the purists out there, you can get a much cleaner, sharper line by going through your line – pixel by pixel – and removing any of the “feathering” that we saw from Photoshop’s rendering. This happens essentially because Photoshop is drawing an anti-aliased line where we ideally want a pixelated line. The pixels are so small though that, in most cases, it doesn’t matter either way. Here’s just a screenshot of the super-sharp version just in case you want to see it.


Step 04: Adding Color and Texture

Alright, so we’ve got the basics down! Now let’s add just a bit more personality using two more quick techniques: Adding color and texture.

The color part is probably pretty easy if you haven’t figured it out yet. Just add color to your background and lines until you have the desired effect. My tips: Keep the contrast low – there’s nothing more obnoxious than an overly vibrant pattern.

The texture part is a wee-bit trickier. Texture has always been a notoriously difficult thing to master on the web. Why? Because in most cases, the texture repeats… and most people can spot it a mile away. Even high resolution textures will repeat and show off the tile separations unless you use images that are huge (such as 1920 x 1080)… which isn’t always a practical solution.

The trick with textural patterns?

  • Keep your tile big enough that people won’t be able to easily see the repetition. (Use your own judgement here – obviously a tile size that’s 1200 x 1200 isn’t really a “tile”)
  • Keep your textures subtle and low-contrast so that the textural spots don’t jump out at people.

In later parts of this tutorial series we’re going to examine how to create some advanced textures… but to round up today, let’s look at a very simple pattern with a bit of grunge to it. The steps:

  • Open up a new document (99 x 99px is about what we used… but play around with it based on your own grid sizing).
  • Draw a rectangle over the entire document.
  • Apply your basic Crosshatch pattern (using any color combo you wish).
  • Using a lightly textured brush on a blank layer (set to the same color as your pattern’s background), very lightly (click once) paint a small brush stroke over the crosshatch.
  • Adjust the position and opacity until you get the desired effect.

And the screenshots:

And last but not least, let’s take one last look at the four textures we just created:


Additional Tips (and Using These on the Web)

Bonus Tip 01: When saving your pattern (Edit > Define Pattern), remember to hide the background layer if you want to create a transparent pattern. Sometimes you’ll actually want to save the background color, but other times it can be really handy to be able to overlay a pattern onto another color without needing to go back to the original file and make changes. Obviously, using White or Black as the pattern color is your best bet in terms of extending the usability of these transparent patterns.

Bonus Tip 02: We’ve gone over how to turn these patterns into “Patterns” that can be used by Photoshop (or Fireworks), but how do we use them on the web? Easy actually – just same them as .GIF, .PNG, or .JPG files (I recommend PNG for transparent patterns). Then just add them to your web folder and use them as the background images via CSS! Remember to set the “repeat” value if you want them to tile themselves across the entire page.


Conclusion

Alright! So I hope you’ve gotten a little something out of this first session. By now you should have a good understanding of the theoretical concepts behind how patterns work – and a technical understanding of how to create and use them in Photoshop. You can save all of the files that we created here as .GIF, .PNG or .JPG files and use them instantly on the web too… but we’ve really only just begun.

In the next level of this series we’ll be showing you how to create some “noisy” background patterns that make you swear that you could touch ‘em. We’ll also be touching on how to create advanced textural patterns, spae based patterns, transparent patterns, and more in the future.

Great Design Hurts: Striving for Pixel Perfection

Posted on

Reprinted from webdesign.tutsplus.com

I’m going to share a design theory that I’ve been working on implementing into my own workflow for the past couple of years: pixel perfect mockups. To some it might be obvious, but its a tenet so crucial to my own design process now that I’d say it’s been the single most influential idea that I’ve been presented with in over 10 years of designing.

To adopt this theory isn’t just another step in the design process, it’s a perspective changing revolution of the mind that will undoubtedly improve the quality of every design you ever work on from now on. Want to be a better web designer and take on bigger projects? Read on.


Great Design Hurts

Pixel Perfect Comps

It was a few years ago at SXSW 2008 that I was first introduced to the idea of “pixel perfect” design mockups. Michael Lopp (author of several great design books and a senior engineering manager at Apple) was on the panel for a session entitled, “Great Design Hurts“; His speech was hilarious and as littered with as much profanity as a Bill Maher episode. Among his incredibly insightful lecture points was a little gem that explained how at Apple, each designer is devoted to the idea of pixel perfect comps. That is, each and every comp passed around the company is so precise, so pristine, so detailed that the casual viewer can’t tell the difference between the design comp and a fully coded screenshot.

…Each and every comp passed around the company isso precise, so pristine, so detailed that the casual viewer can’t tell the difference between the design comp and a fully coded screenshot

“That’s it!”, I thought, “the idea that will revolutionize my design process”. And indeed it did.

See, to begin each and every design project with the intention of following it through to the very last pixel changes just about every aspect of the design process. Even if you don’t actually follow through every time, the very notion of having started the design with that intention will have dramatic effects on the final product.

After a month or two of trying this out, my PSD’s were cleaner, my files moved faster, my projects weren’t ‘dragging’ in their later stages anymore, and I was spending less time on the phone with clients trying to explain the difference between a rough design mockup and the finished product. Oh, and I was being hired more, which is a good metric to follow by any measure.

So what makes a pixel perfect comp? Essentially, it’s designing a mockup (esp. a web mockup, but it can be anything) as if you were styling it by code in the first place. If you’ve worked at all with CSS/HTML you’ll know what I mean. It includes:

  1. Perfect margins
  2. Perfect padding
  3. Perfect and consistent font usage
  4. Perfect borders & backgrounds
  5. Consistent color usage
  6. Intelligent and justifiable deviations from the first 5 rules.

Let me elaborate upon this idea though; When most designers begin a project, they design is as if it’s just a mockup. The knowledge that some developer or Quality Assurance specialist is going to come in later and fine-tune everything limits how much time and effort they put into the individual designs.

What happens next is natural to most designers: Clients are told that images and icons are “just placeholders”. Lorem Ipsum text gets used in place of real content. Heck, even navigation and other major user interface elements get swapped with “filler” content until right before the launch in most cases.


What is “Perfect”?

“Perfect” means that every element of every design comp is exactly as you intend them to be in the final programmed product.

With margins & padding, this means that they are consistent across the entire site design. If each sidebar block in a design is intended to have a 10px margin, then design it that way each and everyt time there is a sidebar block.

With font & color, it means consistent use across the site. Design each piece of font as if it were a linked to an HTML element (ie: all H1′s are always 18px, bold, Georgia using black color). Don’t deviate – as one of my favorite project manager’s once told me, there really shouldn’t be more than 3 or 4 font styles on any single page unless you have a damned good reason to do it. If you are using a specific color of red as a highlight color on the site, make sure that it’s that exact color of red in every single place (unless you’ve got a reason for it to be different).

Borders, HR rules, & backgrounds should also be consistent – I’ve seen some comps where every border & HR are different shades of the same color – this ultimately leads to comps looks sloppy and unprofessional. To an untrained eye, it’s easy to see when a design feels half-baked… even if that person can’t put their finger on exactly what’s wrong.

Finally, use icons, images, titles, and text that are as near to the real thing as possible. If you’re redesigning a website, use the content that they already have published instead of Lorem Ipsum. If the client says that they have new icons or images that they’ll use in the redesign, ask for them and include them in the design.

Remember, we’re striving to create design comps that are so precise that they look like screenshots of the actual, live, coded implementation.

 

The Argument Against Perfection

Before I go another step though, let’s address the obvious counter-arguments. Cost. Time. Effort. Frustration… the argument already forming in your mind might sound like this:

“If I spend the time it takes to meticulously detail each and every design mockup that passes through my hands, I’ll be spending 3x as much time on design… not to mention the fact that if the client doesn’t like the design, it all goes in the trash”.

A fair argument, and one that certainly has it’s merits, but it’s not enough to derail this article 🙂 Remember, the goal isn’t to make every design mockup actually perfect (that would be insane and expensive) – the goal is to change your approach to design. The fact is that the pixel-perfect approach isn’t really practical in lots of cases… but that should stop you from striving for it.

Let’s examine the benefits of pixel perfect comps and then we’ll return to this argument.


Benefits of Pixel Perfect Mockups

It forces you to be more organized. More organization means less time spent wrestling with your PSD’s and more time spent kicking ass at design.

No more explaining to clients. If you’ve designed a comp perfectly, that is, everything is in the place that you intended it, you don’t have to explain to clients that what they see in the design comp isn’t actually what will be in the final product.

No more explaining to developers. This comes especially in handy when your client sends your design comps off to a development team in India where lengthy explanatory emails just don’t translate. If their only job is to code EXACTLY what they see on the comp, it reduces the chances that they’ll misinterpret any design specs. And heck, it’s even easier for the fluent programmers that I work with; They get to focus on programming, not trying to figure out if I want 10px margins or 15px margins.

Less time spent in QA. Quality analysis, if you’re not familiar, is the nails-on-the-chalkboard final rounds of design where you go back into a rough ‘proposed’ design and prep it for final presentation. To developers, this is also the name of the final ‘pre-launch’ round where each and every detail, functional bug, and stray pixel get’s straightened out. Sure, in small projects you might never go through a QA cycle; but in larger projects that have the budget, you simply don’t walk away from a project until this step is complete and the cleaned up source file is handed over.

Happier Art Directors/Clients. If your art director (or whatever his/her title is) is able to spend less time nitpicking the details on your comps and more time giving valuable directions, their blood pressure (and yours) will inevitably go down during design review meetings.

More professional looking final results. Yes, your comps will look more professional. Now that you’re spending less time explaining or making excuses for sloppy mockups, you can spend more time raising your rate…


The Counter-Punch

So, as a response to the argument against pixel perfect comps, I’ll make these final points.

Your comps should already be perfect. It’s the end-goal of any design project, and if you’re not getting there eventually, it might just be because you never meant to in the first place.

It takes LESS time than the alternative. Pick one: spend 6 hours meticulously designing a web mockup and get client approval quickly OR spend 4 hours on a design and another 4 fixing dumb mistakes before you finally get the client to sign off on a design.

Edits & Revisions happen faster this way, not slower. If you’ve designed your mockup using this mentality, and your PSD is organized to reflect this, each subsequent set of revisions that the client requests will happen at lightning speed.

Excellent mockups mean less time in development. This saves you (or your client) cash. This is the basic tenant of rapid prototyping – get it right before it goes into an expensive development cycle.

It’s the biggest gap between small projects and big budget gigs. The simple fact is that a recruiter looking for freelancers to take on their projects uses “attention to detail” as the single most indicative measure of whether a freelance designer is capable of tackling a major web project. If you’ve got a portfolio full of sloppy comps, it’s just going to be that much harder to prove that you’re trustworthy and capable.


Final Thoughts and Caveats

I said it before, but it’s my final point. You won’t actually achieve pixel perfection on every comp and that’s fine. There is a time and a place for the rough-sketch-comp and you (and your client) will know when it is. This theory of ‘pixel perfect comps’ doesn’t require 100% results 100% of the time, it only dictates the basic attitude that you bring to each project. After years of working on this in my own projects, I can say it’s well worth the pain.

Mathematics and Web Design: A Close Relationship

Posted on

Reprinted from webdesign.tutsplus.com

Math is everywhere, even where you wouldn’t expect it. You can find mathematical ratios and constants in architecture, but also in the instruments we use to make music. You can find math in certain games we play, and therefore it should not surprise you that mathematics plays an important role in web design too. But what is this role? And how can we use these ratios, constants, and theories to make our web designs more beautiful?

 


Math is Everywhere

Walt Disney once made a film about Donald Duck in Mathmagicland. In this video – available on YouTube – they introduce children to mathematics and what it’s used for. It shows that a mathematical ratio is used to define the notes on our instruments, and that a mathematical rectangle can be found in both ancient and modern architecture. Also, we can find this exact same rectangle in some Renaissance art by, for example, the famous Leonardo Da Vinci.

Math In Web Design

The general lesson is simple: you can use some basic mathematical principles to design order and beauty in your own creations.

A Little History

In ancient Greece there was an elite group of mathematicians who called themselves the Pythagoreans. The Pythagoreans had the pentagram as their emblem. They chose this shape because of its mathematical perfection: The linear shape of the pentagram already contains the golden ratio three times already! Also, there are tons of golden rectangles hidden inside the shape as well, these are the same golden rectangles that are present in the Mona Lisa.

Rabbit Breeding

A while after that, in the 12th and 13th century, lived a talented Italian mathematician. His name wasLeonardo Pisano Bigollo, although you might know him better as Fibonacci. For his book Liber Aci, he observed the natural breeding of rabbits. In this ideal world of him, where no rabbit would ever die and every individual rabbit would start reproducing as soon as possible, he found out this cycle contained a special sequence of numbers. This sequence later became known as the Fibonacci Numbers.

Math In Web Design

The thing that’s so special about this sequence is that if you divide a chosen number with the number prior in the sequence, you will (approximately) get the same number, every time. This number is approximately1.618, better known as Phi. The further you go in the sequence, the closer the result of the division comes to Phi. Fibonacci also found out that this sequence is not only found in the breeding of rabbits, but also in other things in nature, such as the arrangement of seeds in a sunflower.


The Golden Ratio

As you might already know, Phi is also a very prominent constant in design; This is because a ratio of 1 to 1.618 is better known as the Golden Ratio – often referred to as the Golden SectionGolden Mean or theDivine Ratio. If you create a rectangle according to this ratio, you get a shape known as the Golden Rectangle.

The Golden Rectangle
The Golden Rectangle, shown here, shows how you can divide it upon itself infinitely (and perfectly).

The Golden Ratio and the Golden Rectangle is used in many forms of art and design. In the Renaissance period, many artists proportioned their artworks according to this ratio and rectangle. In ancient Greece, architects used this rectangle in the design of the buildings; the Parthenon is a good example of this. Even in modern architecture, the golden rectangle has a strong presence.

But what is it that makes this ratio so special? Because this number, Phi, finds its origins in nature, we humans automatically find ourselves comfortable with this ratio. Because we are so acquainted to this ratio, it naturally triggers a feeling of balance and harmony. For that reason, using this ratio can guarantee you a balanced composition of your elements.

Examples of The Golden Ratio in Web Design

Before we even start thinking about applying the ratio to our designs, we must first look at a few examples that use the ratio already.

One good example is this website, as its design houses multiple cases of the ratio. In the image below, you can see a screenshot of this website. As you can see, I’ve used two colours to mark the different columns. The width of the main column with the blog posts in it is more or less 1.618 times as big as the sidebar with the ads. A quick calculation on the bottom proves this.

Math In Web Design

But not only does this website use the golden ratio on its total width, it’s also applied to some of the smaller parts of the website.

Let’s take a quick look the main column, and then the content inside. As you can see below, the containing element is about 1.618 times as big as the content that’s to be read inside this element.

Math In Web Design

Another good example is the famous Smashing Magazine blog. Its main column has a total width of just over 700 pixels. When you divide this number by 1.618, about 435 is the result: The exact width of the sidebar.

Math In Web Design

How to Apply this Ratio to Your Next Design

The canvas of a painting and the width of a building all have a fixed width, the monitors that display our work vary in size. Therefore – and especially in fluid designs – there’s an extra variable that should be taken in consideration when calculating the golden ratio.

However, there is an easy way to overcome this problem. When you want to calculate the width of an element according to the ratio, you just need to take the width of its parent-element, so the containing element. In our first and last example, this was the complete width of a website. In the second example, this was just the width of a smaller part: their main column.

Anyhow, when you’ve determined the width of the containing element, you should now divide this value by Phi. The result will give you the width of the main element. Now, all that’s left to do is to subtract the result from the main element from your original width, this will give you the width of the secondary column.

If you have any trouble remembering Phi, or when you’re just lazy to fill in some numbers on a calculator, I suggest using Phiculator. This little application requires you to fill in a value (the width of the containing element that is) and it automatically calculates the corresponding width. You can even ask it to calculate with integers, so you don’t have to worry about decimal numbers either.


The Rule of Thirds

Another famous mathematical division is the rule of thirds. This rule can help you create a balanced composition by dividing your canvas in nine equal parts. The rule is a little similar to the Golden Ratio, as the division by 0.62 is closely similar to 0.67 – which equals to two-thirds.

Photography

A form of art where the rule of thirds is used very often is in Photography as it’s an easy and quick guide to get you a good composition. This is why you’re likely to find a function on your digital camera that divides its LCD screen in nine parts, using the rule of thirds. Even some dSLR’s have this function, as they plant a few light dots in the viewfinder when focusing.

How Does it Work?

Using the rule of thirds, you will divide your canvas horizontally and vertically in by three. This division gives you nine equal rectangles, four lines and four intersection-points. You can create an interesting and balanced composition by using these lines and points of intersection.

The key in a good composition, obviously, lies in positioning your elements correctly. When using the rule of thirds, there are two things you can position with.

The first are the lines used to divide the canvas. In photography, things with a long and straight shape are often aligned to these lines. In design, things with this same shape – such as a sidebar – can be aligned to these lines as well.

The second things to align to are the points where your dividing lines intersect. You will need to put one or two objects on these points, because too much will still kill your composition.

A good example of this I found on Photography-website Flickr. As you can see below, the photographer aligned the row of buildings with the top line, and on the upper-right intersection point, you will find a house that stands out the most because of its colour. Because it’s a focal point by itself already, aligning it with the intersection point adds to a good composition and a balanced feel.

Math In Web Designflickr photograph found here

We’ve seen the rule of thirds applied to photography, but how about applying it to website design, can we find examples of that?

The Rule of Thirds in Web Design

A good example of the rule being applied to web design is, again, this website. I’ve prepared an image that you can see below. It shows that, on the right, the sidebar is aligned very closely to the vertical line on the right. On the left, you can see that the articles are positioned on the intersecting points.

Math In Web Design

The two alignments you see above create a feeling of harmony in the layout of this website.

Applying the Rule of Thirds to Your Next Design

So how exactly can the rule of thirds be applied to your site’s design? Again, the varying width of our ‘canvas’ can bring some trouble. When we use the same technique as we did with the golden ratio, though, we’ll be fine.

To apply the division, you must take the full width of your containing element and divide it by three. You then have to draw a line – or a guide, whatever suits you best – two times on the value you get as a result (multiply them by two to get the position of the second line).

The second part of the division can give you some problems, though. The height of our ‘canvas’ is also variable, therefore dividing this variable by three will give us some trouble. The way I use to work around this, is to calculate the ‘height’ of the division with a 16:9 (widescreen) ratio or just use the height of the containing element. Divide the width of the containing element by 16 and multiply that number with 9 and you’ve got yourself a height. You can now divide this number by 3 again, and draw the lines/guides.

When you’ve got the guides set up, you can now position your elements according to these guides. Align your elements with the lines, and you must put some elements of interest and contrast on the points of intersection.


Grid Systems

You might not think of grids as being mathematical, but they are. You are dividing your canvas in different columns and gutters, this division by two, three – and I’ve seen up to sixteen – is really mathematical.

A lot of people argue that grid systems limit your creativity, because you’re limiting your freedom with a grid system. I don’t think this is true, as book called Vormator taught me that limitations actually boost your creativity. This is because you will think of solutions with these limits in mind, whereas these ideas would never have been thought of if you don’t have these restrictions.

The reason grid systems ‘work’ is that they can guide you in sizing, positioning and aligning your website design. They can help you in organizing and removing clutter from content. But most importantly, they’re easy to use.

Another good reason to use grids is that rules are meant to be broken, aren’t they? If you ‘break’ your grid once in a while, it’s not bad. On the contrary! ‘Breaking’ your grid can create special interest for a specific element on the page, because it’s in contrast with the rest. This can help you achieve certain goals, like a call to action that stands out more because of this.

How to Create a Good Grid

There is no real set way to construct a good grid system, as they revolve around content and no content is really the same. But for the sake of it, I’ll demonstrate a simple process in how to construct a 6-column grid in a 960-pixel wide environment.

First, we will divide our total canvas width by 6 so we have the total width of each column. The result of this division is 160 pixels, as you can see below in the image.

Math In Web Design

Secondly, we’ll create an image of one column, we’ll duplicate this later. This way it’s easier to create our complete grid afterwards, as we don’t have to repeat this step for each column.

We’ll decide on the size of our gutter, I think 20 pixels will suffice. The gutter should be added to both sides of the column, so we must divide it by two. If we don’t do this, our gutter will be 40 pixels wide. As you can see in the image below, we’ve added a 10-pixel gutter on each side.

Math In Web Design

Now we can duplicate this image until we reach the total of 960 pixels again, and we’ve created ourselves a (basic) grid.

I’m Lazy!

Don’t worry; even if you’re lazy you won’t have to live without grids. There are lots of nice – and free – grid systems up for grabs on the internet. My favourite, and I’m sure you’ve heard about it before, is the famous960.gs grid system, which has a CSS-framework and a PSD-file with all the guides installed.

Math In Web Design

Conclusion

I hope I’ve shown you that mathematics can be beautiful when applied to design, and that I’ve given you enough techniques to use in your next design. Be warned though, lots of other things are required to make a design a success, and therefore using these tricks is no guarantee for a good design, but they can sure help you and guide you in the process of making one.

Thanks for reading!

Using the 960 Grid System as a Design Framework

Posted on Updated on

Reprinted from webdesign.tutsplus.com

The 960 Grid System has been around for a while now… but it’s been mostly used on the coding side of projects as an HTML/CSS framework. Today, we’re going to discuss the advantages of using grid systems like 960GS at the very start of a project, before you even open up Photoshop or Fireworks. If you haven’t used a framework before, or you just want a good refresher, this is a great place to start!


A Bit of Context: Our sister site, Nettuts has posted a bunch of great articles about using CSS frameworks as a coding tool. They’re all relevant to this discussion, so go check them out when you get a chance. This article, however, will look at the advantages of using a framework for Web Designers specifically. We won’t dig too deep into the coding, instead, we’re going to discuss how using a framework can be a powerful tool in the design phase, before the coding even begins. Alright, let’s dive in!

 


Diving Into Frameworks

Chances are good that you’ve already heard of or used some sort of CSS framework already… but just in case, let’s review the key benefits of using a CSS framework (aka grid system) in any web project:

  • Provides a “framework” that’s designed to look good on all monitors.
  • Streamlines the design process by defining exact measurements.
  • Reduces development time by providing pre-coded HTML/CSS.
  • In a perfect world, it helps designers and developers communicate better – smoothing out the process of moving from Design to Coding.

Ultimately, a CSS framework should help establish some basic guidelines for content columns, while still providing designers with full control over their designs.

In this article: I’m going to explain what a CSS framework is, and why I chose 960. Then, I’ll go over the basics of how to apply the 960 Grid. To wrap up our discussion, I’ll show you a few sites that are using the 960 grid, and how they are structured.


CSS Frameworks: A Brief Overview

A CSS Framework is a series of stylesheets created to make a web developer’s life easier. They account for the various quirks of browsers, are easily adaptable, and apply basic design principles (such as establishing visually pleasing margins between elements).

Oftentimes, these frameworks also have typography stylesheets, which can act as a great place to begin working on your site’s typography (for more information about Typography, check out this article).

There are two major CSS Frameworks at the moment: Blueprint and 960. Both are perfectly capable frameworks, with great features and ease of use. It simply comes down to a matter of preference of which Framework you feel most comfortable using.

Before you begin the design phase of a project, it’s important to discuss the selection of a framework with the person who is going to code the site. Often, developers will have preferences towards a particular CSS framework, and as one of the main reasons we use frameworks during the design phase is to smooth out the transition from design to coding, it’s a major decision. If you’re coding the project yourself, just make sure you are comfortable with the grid framework you pick – there’s nothing worse than design an entire site based on a framework that you end up disliking.


960 GS: The Gritty Details

Personally, I found the 960 Grid suits my needs better, so that’s what I’ve adopted and that’s what we’ll be discussing in this article. However, the overarching principles that we’ll be discussing will apply to any framework, including Blueprint.

960.gs is based around putting all of your site’s elements in a 960px wide (clever girl) container, and dividing that container into 12, 16, or 24 equally sized columns. They provide a tool to use alternate widths, but 960 is what the entire system is developed for and it happens to look pretty sharp.


The CSS Generator at 960GS

Why 960px? Because 960px is a width that is suited for the wide number of platforms on which we browse the web. It essentially allows for a 1024px wide monitor to show the site accurately and without horizontal scrolling, accounting for the width of the browser chrome, scrollbars, and a bit of padding for legibility. There is always a 10px margin placed at the right and left of the main content column, which means that smaller browsers will always be able to read the farthest left content without the text butting but against the browser window.

Additionally, all numbers in the 960GS are whole numbers based on the golden ratio – there are no decimal points or funky spacing issues. If you’ve read our article on Mathematics and Web Design, you know how important getting these numbers right is.

One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling.

How is Blueprint Different?

I won’t go into too much depth here, but let’s briefly discuss the key differences between 960.gs and Blueprint. First, Blueprint is a CSS framework that’s based on 950px – it’s very similar to 960 in the way that it handles the basic layout stuff (BP uses 24 columns with similar approaches to padding and ratios)… but that’s where Blueprint stops being similar.


Blueprint does allow for form-specific styling and notifications, something I wish 960 would implement.

Blueprint is a much more complex, robust, and comprehensive framework system. It’s been built as a full fledged stylesheet for pretty much every element that you can think of (radio buttons, tables, etc.). There are things I like about Blueprint, the most notable being its styling for form elements and built in notification classes. Additionally, it includes a full suite of styles for:

  • Typography – BP provides typography size and spacing defaults for all elements.
  • Form Element Styling – Styling for forms and some classes that can be used to add to forms (like required fields).
  • Print Styles – Print stylesheets for when surfers hit the print button.
  • UI for Plugins – Pre-built CSS (and sometimes images) for buttons, tabs, and sprites.

The problem that I had with Blueprint is that it’s just too complex to use at the design phase… creating a design from scratch means re-formatting everything that they provide, and it’s often hard to keep up with the sheer comprehensiveness that BP provides. In contrast, 960.gs offers just a layout – perfect for letting a designer get creative within realistic boundaries.


Using the 960 Grid System

The 960 Grid is almost frighteningly easy to use (in fact, you may start to ask yourself: “Why wasn’t I using this earlier?”), with only a few simple rules you need to abide by.

Download the 960 Grid from 960.gs

After you download it, take a look inside the directory you just unzipped. I want to draw your attention to two folders: “sketch_sheets” and “templates”. The “sketch sheets” folder contains a PDF of the various grid sizes in a within a browser window, and the “template” folder contains templates for almost every graphics program under the sun (such as GIMP, Fireworks, and Photoshop).

Sketch Sheets: Making Your Life Easier…

The purpose of a CSS Framework is to make your life easier, and you should always be looking for ways to help you decrease the time it takes to create a design. Use these templates when creating a design in Photoshop, print off copies of the “sketch sheets” when discussing the details of a project with a client (and make sure to look at this before you go!).


Example of a printed out Sketch Sheet… with some sketching on it.

In fact, I would suggest using these sketch sheets every time you start a project: they’ll allow you to experiment freely before locking yourself down to any layout. It will only take you 5 minutes of sketching to realize a design will or won’t work, as opposed to 50 minutes+ if you had been designing and coding it.


Designing With the 960 Templates

Once you’ve come to a basic agreement on the sketched out concept for the site, it’s time to crack open the template files. This is probably the central reason why I like using the 960 system… it comes pre-packaged with templates for just about any program you can think of. I happen to use Photoshop, so here’s a screenshot of the provided template:

The key benefit here is simple: The template has pre-built guides for all of the main content columns that directly correspond to the CSS framework on the coding side of things. It’s easy to quickly draw your main content columns and keep everything in your design clean and organized.

Experienced designers might see this as “design with training wheels on”, but frankly, there’s nothing wrong with having a simple overlay system to help guide the framework for a web design.

You still have to design everything on the site (of course!), but by keeping your design in line with the guides, it’ll make the development side of things much easier. As as added benefit, having a uniform approach to padding between content cells is a great way to make your design look more professional. Read more about why “Pixel Perfect Comps” here.


Setting It Up

Now that you’ve gotten a design nailed down, it’s time we talk about the 960 grid syntax. As I mentioned at the intro, you can find a lot more information about using and prototyping with CSS frameworks at Nettuts, so I’m just going to cover the basics here.

First, you’ll need to reference the appropriate CSS files into your design: reset.css (the reset file that accounts for browser quirks), text.css (the built-in typography stylesheet), and 960.css (or 960_24_col.css if you are using a 24 columns grid). Usually, I place all of my site-specific styling in a separate file (usually called style.css), to ensure I don’t break anything in the Framework.

Quick Tip: Reference your own stylesheet after you reference the Framework, so that you can adjust specific aspects of the framework without altering the Framework itself (and if you make a mistake, you don’t have to re-download and overwrite the Framework’s files). With these 4 files, you’re now ready to begin to design your site.

Here’s a quick overview of the syntax, pulled from the 960.gs site:

 

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>
        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

 

The first div is your container, what your content will be stored in. By defining it’s class as “container_12″, you’re saying: “I want this container to have a 12 column grid” (The same practice applies when using a 16 and 24 column grid).

Now that you’ve defined the container as a 12 column layout, you begin to structure your site in such a way that it fits within the layout. If you look at the next div elements in the hierarchy (as noted by the tabs), you’ll see the syntax for their definitions. “Grid_7″ and “grid_3″ are easy enough to understand: you’re saying that this div element is going to take up X number of columns. However, 7+3 = 10 < 12, which means you’ll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of “grid_x suffix_y”, you’re saying: “I want this div to take up X columns, and for there to be Y number of empty columns after it.” (This also applies to prefix). So, since “Grid_7″ has a prefix of 1, and “Grid_3″ has a suffix of 1, 7+3+1+1 = 12!

By now, I know you’re wondering about the Div elements nested in the “Grid_7″ div. Well, you can nestle divs which take up a specified number of columns inside another div, so long as it does not exceed the size of its parent grid. Furthermore, the first and last elements must have “alpha” and “omega” appended to their class definition, respectively. So, in our sample code: “grid_2 alpha” is the first div nested within “grid_7″, the next element “grid_3″ is in the middle (and therefore does not need an “alpha” or “omega” appended to it), and finally “grid_2_ omega” is the last div nested within “grid_7″. And since 2+3+2 = 7, the definition is proper.


Putting It All Together: A Short Example

For the purpose of illustrating this whole process, let’s go through a quick example of using the 960 Framework during the design phase of a personal project of mine.

The design itself is pretty simple, but it’s the perfect way to show you how the framework can act as a tool through the design process.

The Cerberus Website: The Example that We’ll Use

Mass Effect 2 is one of my favorite games of the past 5 years, and I felt creating a site for the fictional organization “Cerberus” would be a challenge. The main aspects of the organization are: professionalism and technological prowess, which I wanted to convey with a clean design that used their entire color scheme. To start, I sketched out the design for the site (it would be hypocritical for me to act otherwise, right?).

As I looked the design sketch, I saw how to make the design work in the 960 Grid.

Below is the HTML skeleton for my site:

001
002
003
004
005
006
007
008
009
010
011
012
013
014
015
016
017
018
019
020
021
022
023
024
025
<div id="container" class="container_12">
    <div id="header" class="grid_12">
        <div id="logo" class="grid_2 alpha">Logo</div>
        <div id="subHeader" class="grid_12 omega">
            <div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
            <div class="grid_8 omega">Navigation</div>
        </div>
    </div>
    <div id="content" class="grid_8">
        Content
    </div>
    <div id="sidebar" class="grid_4">
        <div class="sidebarSection">
            Sidebar
        </div>
        <div class="sidebarSection">
            Sidebar
        </div>
        <div class="sidebarSection">
            Sidebar
        </div>
    </div>
    <div id="footer" class="grid_12">Footer</div>
</div>
   

If you noticed, I had the logo only cover 2 columns, while the sub header took up all 12 spaces. Since the header div was 12 columns long, any sub elements can up to 12 columns long. This trick allowed me to make the header, as the logo was took up 2 columns, and left the rest empty (the image is actually the background image for the header div). And since the sub header was 12 columns wide, it filled up the entire width under the logo (since it couldn’t fit all of its content inside the 10 spaces left after the logo).

This is actually an important distinction to make, and is another design tool you should utilize (and to be safe, you could use “prefix” or “suffix” to ensure a certain amount of space is reserved). The rest of the site is pretty cut-and-dry: 8 columns for the main content and 4 for the sidebar. Each sidebar element is a separate div element; they stack on top of each other because they are constrained to the width of 4 columns.

To illustrate how the site is set up, I’ve taken a screenshot of the site and clearly marked the columns:


Examples of The 960 Grid in Action

Now, my own example might not be the best way to really inspire you to go out and create some killer web designers, so here are just a few examples of the 960 system in action. You can find more at the 960.gssite.


Closing Remarks

One of the most appealing aspects of a CSS Framework is the convenience they offer to designers. However, like any other tool, you have to ensure that you are using it in a relevant and worthwhile manner. Don’t try to use it if it doesn’t fit the design, and don’t let it restrict your creativity. For most projects (especially those for complex newspaper or blog-inspired layouts), a CSS framework can be a great time-saving tool, not just for spitting out quick HTML/CSS, but for the entire design process.