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.
Are you kidding me? Somebody paid you to write a lame tutorial on how to look like an Apple desktop picture used as an iWeb layout?
Talk about lame.
There are several sources for that kind of images at the NASA’s archives. I don’t know if they are free to use or what kind of licence they underly, but you can give it a try. Anyway, it’s better than buying images.
@ John Joyce
LOL, nobody is getting paid here bro :)
Interesting tutorial, I actually haven’t seen too many sites with the Auroral background yet. I’d be curious to find out how large that jpeg (i assume) is.
I’ve been using this effect more and more. It can definitely bring in some energy when needed. The key is a good base image with the right colors and contrast, experimenting with motion blur (and sometimes the Liquify tool), and masking it out to look natural in the environment of your design.
Not sure why John felt he had to lambaste you for writing a tutorial mimicking Apple. I think it’s a clear concise tutorial which will lead some beginners down the right path to experimenting with the details of their design, for better or worse.
Nice tutorial. I like the use of light in your work and would like to see it more widely used.
I think the design looked best at step 13 or 14. The faint grey lines look really out of place on the black background.
Hopefully there will be more Photoshop related articles on this site.
@ Colin
Glad you got it, and like it. Thats what the tutorial is for, to add another tool to your design bag :) Thanks Colin!
What I love about this tutorial is not so much the finished product but the techniques/process that can be adapted and used in a variety of situations. Thinking outside the box and applying this to some other subjects could produce some amazing results. Gonna have to set some time aside.
Thanks for sharing!
While we encourage feedback and debate, a small number of recent comments have been rude and disrespectful.
Vitamin is a free resource that exists purely because of the generosity of people who give their time to write for the benefit of the community. Our Reader Survey is already showing you all have a really mixed bag of skillsets and levels.
If you’re at the cutting edge of YOUR area of expertise, please feel free to submit an article to us and share with the group!
Any tutorial is a good tutorial for somebody! Even if some of us (you) already used similar tricks there might be a lot of people who will really value this tips. Keep on the good work and keep sharing your knowledge ;)
Awesome work Drew I was very excited to see the tutorial up here and can’t wait to try it out. Can’t believe anyone would even think about putting down not only a well made tutorial but one with such a cool end product. Anyway love your work keep it up.
Cheers
Nice tutorial. I did a similar article on my blog about using the hubble telescope images for color palette inspiration and used one of the exact same images. It is nice to see people using different sources to fuel their creativity.
Nice tutorial, and an interesting take. A lot of poeple just take a stock image and fade it - nice to see some extra jazz applied here.
Don’t you think your effect is bad for the readability of the texts in the header of your design ?
Other than that it’s a beautiful effect but i would not use it in the background of a website.
I suppose it is getting more popular but I’m glad I’m near the front of that trend as my sites re-design was up a few months ago using a similar look.
I decided i want my portfolio to also have a blog and that layout isnt well suited for a blog so im reworking a re-design as we speak and it’s not using this type of imagery.
www.digitalskraps.com
@John Joyce
By the look of your site dude, you should be begging for more tutorials like this.
It’s an effect and it shows how to re-create that effect. If you want to just use WP templates and not customize your site then don’t bother reading the tutorial.
Nice tutorial! I will give it a short sometimes tonight!
Can’t say I get it myself, and more to the point, I’ve a) never heard of this technique and b) never seen it used, at least not since 1998.
DANG! I just launched my new Aurora style sheet yesterday!
Check out this tongue-in-cheek ripping off baby:
http://www.itgoesclick.com/
@Lisa: I guess when you really think about it, 1-2 idiot trolls per post out of 68000+ subscribers isn’t THAT bad ;)
@Mark: Then I’m afriad you haven’t been looking. Scroll through Smashing Magazine’s latest blog design roundup and you’ll see at least 4 of this style.
@Adam: To add to your list, I used a similar effect for my part of designing the Kentucky Derby and Kentucky Oaks Web sites. I was struggling for awhile on what is a rather awful Kentucky Derby logo. So, in a fit of frustration, I started attacking the logo with a barrage of filters. I ended up with an Auroral Background and, eventually, a design everyone was happy with.
I can see people’s tendency to shrug it off as another 2.0-like trend. It’s certainly trend-worthy. But, I feel it’s just the punch that’s needed given the right context/restraints.
I admit I was a bit surprised to see a Photoshop effect tutorial on Vitamin, but I appreciate a well written guide when I see one :)
As Joshua said, the process is most interesting and the possibilities for going off at a tangent. I wouldn’t want to simply ape a current design trend but put a personal twist on it. Maybe anyone that does so could post a link in this thread?
… makes me want to do some pure Photoshop experimenting - it’s been too long since I did.
Thanks Drew, keep up the good work!
Really great tutorial! Maybe i could have figuredit out myself, but it really gave me a boost of creativity! Awsome! More of this please.
Ah, the common problem when touching upon doing things creative. Unfortunately design is completely subjective. What looks great to one person may look awful to another. I see comments like John Joyce’s more and more on posts. I’m not saying the same doesn’t occur on coding posts, just much more prevalent on creativity ones.
Anyway, fine work Drew. Keep up the good work
I think the reason people are reacting because it feels like the effect is used randomly on this composition without any mention of concept or purpose.
To me, its just a tutorial and people should lighten up but I think that might be it.
I’m glad to see a graphic tutorial on Vitamin. I think something that many people overlook is how much a role this plays in website design. A huge factor in the so called “Web 2.0″ is the fact that we have very appealing designs on our websites, it’s not just the CODE! It’s easy to copy and paste code from websites to make a js script work, but when you speak about design people get uncomfortable because they don’t understand it. It’s not about cut and dry answers, it requires creativity. Honestly if this type of tutorial makes you uncomfortable, your in the wrong industry. Because to survive in this game, you need to be a jack of all trades and you sure as hell need to be creative.
Good tutorial, keep it up!
@ Alex
“Because to survive in this game, you need to be a jack of all trades and you sure as hell need to be creative.”
I like that :) Makes us web designers sound like we are Spartan Warriors fighting in 300. lol
Just play that phrase through your head right now as if Leonidas himself was saying it out on the battle field. lol Hilarious
Thanks a ton for that Alex! You rock!
Nice tutorial drew!
Thanks for sharing Drew,
An interesting legal question for the group… If you use a selection of copyrighted images as your base and then mangle them to such an extent that in the ‘final product’ none of those orginal images are recognisable, should you still be expected to pay for those photographs as part of your “derived work”, or have we successfully created something sufficiently new and original that we can use those originals free of charge?
@ James
Great question! Anyone wanna do some research and post their findings?
Vitamin should do an article on copyrights and other legal stuff. That would be sweet :)
Has anyone else discovered the excellent (and free) electric sheep screensaver? It’s a fractal-based random screensaver which I find is a really good source of inspiration for these kind of aurora-style graphics.
James, another one you might like for fractals is Apophysis. It’s only for Win platforms though *coughs* but a great piece of freeware. I think there are some freeware fractal generators out there for Mac, but none are coming to mind…
You can get these images from NASA.gov.
Check their image use guidelines at http://www.nasa.gov/audience/formedia/features/MP_Photo_Guidelines.html.
Their images are not copyrighted unless they include NASA logo or personnel.
Good Stuff, these days we have been aiming for very minimallistic designs, this is perfect to add some fresh design flare.. (without going for a specific graphic relating to the site)
[…] Awesome up your design with A.B. […]
@Drew
@James - Copyright Law
From the US Patent and Trademark Office..
http://www.uspto.gov/web/offices/dcom/olia/copyright/basics.htm
The 1976 Copyright Act generally gives the owner of copyright the exclusive right to reproduce the copyrighted work, to prepare derivative works,…
Derivative works could be construed as anything that has direct lineage to the original - like a PS distortion. Just a guess on my part. Don’t have any legal basis or bias, not an lawyer.
re copyright:
I believe that as long as the image can be reverse engineered back to it’s original state it is infringing the original copyright of the image. Or if it can be easily proven that the copyrighted image was the starting point for your creation and you do not have permission to use the image, you are acting illegally.
[…] Visit Tutorial […]
Thanks for Sharing… Nice articles…
Andy, Andy, Andy. What part of “public domain” don’t you understand. NASA images (funded by the US taxpayers) are in the public domain. But you are correct, obscurity through processing is still a copyright violation -if- the image had a copyright.
Excellent tips!
I will try something similar to this style, but with grass and sky - thanks - awesome !
[…] [ Visit Photoshop Tutorial ] […]
[…] Vitamin Features » Awesome up your design with A.B. Looks like someone else reads Vitamin. Anyway, I think it looks nice. The Windows Vista style glowy thing looks nice enough. __________________ Find good advice in the beginners web design thread. patrick o’neill web developer | blog | spam humor […]
Nice tut! Found through our web hosting company using Stumble!
@vlado: Finally! Someone who is seeing this tutorial not only as a “how to copy apple” tutorial, but as a source of inspiration to take some techniques and apply them to other situations.
I hope your design turns out great!
I was taught in Audio school that you had to make 7 material changes to something, in the spirit that at the end of those 7 changes, the work was something unique and served a different function to the original (i.e. landscape photograph becomes pop-art geometirc thing). I took these changes to include cropping (both with visual and audio, thinking of montages or samples respectively), or adjusting colour, adding typography, stretching, whatever.
I think copyright is constantly in Flux. The expectations are changing by the day with YouTube and bittorrent skewing perspectives and stretching boundaries. I think one should do it if it feels reasonable, and then retract it if requested by the copyright owner. Course I’ll probably be crying in a jail cell one day.
Yus, this Drew Wilson guy is hilarious.
I like the way he replies in his comments.
Drew Wilson FTW.
Vitamin, more articles from this dude! Funny people rock.