IndustryAwesome up your design with A.B.

Drew Wilson
writes on February 20, 2008

Share with your friends










Submit

So you want to add some sweet savory flavor to you website, but you can’t place your cursor on what is lacking in your design and what needs to be added. May I suggest something I call Auroral Background (A.B. for short). It’s a great way to add depth and “awesomeness” to your design. With enough practice using the techniques I am going to show you, your designs can start looking like this:

Final image

I’m going to take you through a detailed step by step tutorial to create an original A.B. treatment using a basic web layout I threw together in Photoshop; which by the way is where all my magic happens and is required for optimal A.B. results.

Original image

One thing you should be aware of before you start is what exactly you are doing here. You are adding detail to your design. It’s that simple. So take the time to do it. Be very, very detailed as you create your A.B. Don’t expect to spend just 5 minutes on this.

There are many different styles that could be explored, but for this article I am going to show you how to do a “sci-fi” look, layered with a hand drawn feel. That way we hit a gamut of different popular styles. We’ll start with a few images of stars and space:

Space image 1

Space image 2

Space image 3

You can either buy stock images to start with, or search through the many free image resources out there to get what you need.

Tip:

I find it works better if you have some idea of what you want the finished design to look like before you start hunting down images. Otherwise you could spend hours browsing images for inspiration, and before you know it the day’s completely shot. So it is a good idea to have some purpose/vision when browsing images.

So what’s the first step?

It’s optional. However I put into practice every single time. Music. Turn up your favorite tunes and let it set a mood for you. I find that the artist or genre I listen to will often dictate the style/flavor of my art. It’s all a matter of taste, but if you want something fun and original, listen to that type of music (Thom York Remixes are good). So turn it up.

Now that your speakers are getting you stoked to start designing, let’s move into the thick of it.

Step One

Open up your web layout in Photoshop, then go to the “Layers” panel and create a new group using the “Folder” icon and label it “A.B.”

Step 1

Step Two

Pull the space images into the “A.B.” group in your web layout. Resize the images so they are a bit larger than your canvas width, giving you plenty of pixels to play with.

Step 2

Step Three

Pick one image to play with first, and hide the other 2 images. Move the image into a spot that looks good and change the Layer Transparency Style to get a look you like. I am going with “Overlay” here.

Step 3

Tip:

If you have a solid White or solid Black background you will notice a blank canvas when you try all the different layer styles…

Here is a Top Secret tip: Put a really light gray (or any really light color) gradient on a layer below the images and voila! You got yourself some A.B.

Gradient Tip

Step Four

Do this for each space image. Remember that you may not need to add Layer Transparency Styles, it could look best without it.

Step 4

Step Five

Now that you have a look you like, let’s add some light trails. Here I am going to take the layer with a bunch of colors and texture in it, and turn it into light trails. The more contrast and texture an image has, the better the light trails. Add a “Motion Blur” (Filter > Blur > Motion Blur) to get the beginnings of light trails.

Step 5

Step Six

Then, if it needs it, play with the Brightness/Contrast (Image > Adjustments > Brightness/Contrast) on that layer to give the light trails some punch.

Step 6

Step Seven

Next play with the Layer Transparency Styles again to see if there is a better look available. For me there was, so I switched the styles. This is always a good practice, switch through the layer transparency styles often and you may find a better look than your current one.

Step 7

Step Eight

Now add a mask to each image layer.

Step 8

Step Nine

Grab a standard feathered brush to start masking out some of the image to make it flow with the web design.

Step 9

Step Ten

Just paint until you get something you like. Don’t be afraid to switch your brush color back and forth between black and white to add and subtract area to the mask. Also the brush’s opacity is a key factor in making subtle changes to the mask. Turn that baby down to an opacity of 8% to throw in some fine tune adjustments. You can also change the size of the brush when painting to get different effects.

Also, play with the placement of the layers. Drag them around the canvas, even change the layer hierarchy to get a feel you like. You can also change the opacity of these layers to get subtle effect changes.

Step 10

Step Eleven

Rotate the images to change up the dynamics in the composition. I am un-hiding the “Stars” image layer and re-sizing and rotating it to get the look I want.

Step 11

Step Twelve

You can see here I added a mask to the “Stars” image layer, gave it a Layer Transparency Style, and duplicated it a few times.

Step 12

Step Thirteen

Next is color treatment. Select one of the image layers that has color in it. In the main Photoshop menu go to (Image > Adjustments > Hue/Saturation). Slide the “Hue” toggle back and forth to get color variations, and see if one of them looks better.

Step 13

Step Fourteen

However, I like the original colors the best so I will just make some small adjustments.

Step 14

Step Fifteen

Now that we have got a sweet looking A.B., let’s layer it with some hand-drawn elements. You can get great hand drawn vectors over at www.YouWorkForThem.com. I will be using some stock vectors I created, which can be purchased at YouWorkForThem.

Step 15

Step Sixteen

Pull the vector elements in one at a time. Select the artwork by Command clicking on the artwork layer in the Layers Palette. Contract the selection by 1px by going to Select > Modify > Contract.

Step 16

Step Seventeen

Then hit the delete button to end up with an outline of the original artwork. This will give you that hand drawn feel.

Step 17

Step Eighteen

Now rotate the artwork to follow the angle of the light trails, and play with the transparency. Do the same for all your hand drawn elements.

Step 16

Step 19

Conclusion

Congratulations! You have just finished your first Auroral Background!

Final image

I hope this tutorial gave you some new insight and new skills to freshen up your designs. Now go pull up that defective web design of yours and throw it some A.B. flavor.

0 Responses to “Awesome up your design with A.B.”

  1. I was taking a look at your post and it seems that the links aren’t working anymore. Just thought you should know 🙂 Have a dandy day.

  2. Hey, just coming back to post the fruits of my labor. I used your method to create a nice background for our new blog. I think it looks great! Thanks again.

    link: http://blog.abwebsitedesign.com

    Cheers,

    Chris

  3. stunning stuff 🙂

  4. Can’t see any of the images in this post – they all 404.

  5. Cool tutorial, I will give it a shot.

  6. Your article is very helpful

  7. made a transcript that covers about 95%. Very interesting, especially the part about the importance of writing skills. Thanks.

  8. Definitely awesomed up that page. Great advice.

  9. awesome. i like the way it is.

  10. Great step by step tutorial. I had fun trying it out and will use the idea often.

    Thanks!

  11. Great step by step tutorial. I had fun trying it out and will use the idea often.Thanks!

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more