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:
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.
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:
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 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 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.
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.
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 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 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 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 Eight
Now add a mask to each image layer.
Step Nine
Grab a standard feathered brush to start masking out some of the image to make it flow with the web design.
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 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 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 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 Fourteen
However, I like the original colors the best so I will just make some small adjustments.
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 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 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 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.
Conclusion
Congratulations! You have just finished your first Auroral Background!
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.
