This is my second article about about advanced Photoshop techniques for web designers. In case you missed my previous article, we have already covered buttons, navigation, shadows and a few other useful techniques. In this article we look at how to create fold and light Effects as well as 3D elements. This is going to be a long tutorial so grab your favorite biscuits and cup of tea and let’s get started!

Editors Note: Andy Clarke will be teaching an interesting session called “How to Design in the Browser” and Elliot Jay Stocks will be showing you how to design the “The Perfect Portfolio” at The Future of Web Design Tour.

Fold

Now let’s fold some papers, shell we? Used to be, and probably still is, the top feature of Web 2.0 design. You have probably seen this on peel stickers that appeared on almost every website not long ago. I still like this type of fold better then peel stickers, so I’ve chosen this example for you. This example is from Bridge 55

Step 1

Open New Document, set canvas to 470px wide and 300px high, fill it with #d4cdb1. Create a new layer and with Rounded Rectangle Tool draw in this shape, about 310px wide and 400px high. Fill it with #391e0b.

Step 2

Using Pen Tool create a rectangle like shown in the image. Fill it with #e5e2d1.

Step 3

Select the path of the rectangle with Direct Selection Tool. Now, choose Pen Tool again, come near the path and you will notice a small “+” sign appear near the Pen Tool. Click on the path to add two extra points just like shown in the image.

Step 4

With Direct Selection Tool click on one point and bend the curve like shown in the image. Do the same with the second point.

Step 5

Ok, we’re almost done with the fold. No we need to hide the rectangle corner. We will do this almost the same way as we did the actual fold (triangle). Select the path and add few more points where we will transform our path. See the image.

Step 6

Move points like shown in the image.

Step 7

Here we need to do a little bit of extra work to nicely curve the shape. Move the point of rectangle to the nearest point of rectangle shape (fold) just like shown in the image. Notice the handles and their position now.

Step 8

Adjust the handles just like shown in the image. This way we curved the edge of rectangle to follow the fold.

Step 9

Almost done. Just add a Gradient Overlay to rectangle shape. Use the settings like shown in the image. Also, add a tiny Drop Shadow.

Step 10

After adding some navigation items, this is how it should look like. Pretty easy, don’t you think?

Out of the Box

Another nice 3D effect to gain more attention to some parts of the website. This example is from Dave Jay

Step 1

Open New Document, set canvas to 470px wide and 300px high. Create a New layer. Fill the document with #15100c. Draw in a rectangle that divides the canvas (about 280px x 310px)and leave only one side of rectangle (left) inside the canvas. Give it a stroke 2px, inside, #918972. I added a shadow using the same technique I explained in Part 1 of this tutorial (Faded shadow). You should be getting something like you see in the image.

Step 2

Draw in a Rounded Rectangle, radius 3px, filled with #3e726e.

Step 3

Rotate the shape like you see in the image.

Step 4

Now we need to draw the fold. Select the Pen Tool, click once near the edge of the green shape. Second click should be little lower, but this time click and drag to create the curve. You will notice the handles that appear as soon as you drag the point.

Step 5

Now close the path. Move the layer under the green shape layer.

Step 6

With Direct Selection Tool select the green shape. You will notice that two points and handles will appear.

Step 7

With Direct Selection Tool click and drag the right point down to the half of the white shape (fold). Use the image for reference.

Step 8

Adjust the handles of the green shape a bit and you will get the same result as you see in the image below.

Step 9

Select the green shape layer. Add a 3px white outside stroke. Now we need to delete the right end of the stroke. We will do this by distributing the stroke effect to a separate layer and masking the right end. While green shape layer selected go to Layer>Layer Style>Create Layer. Take a look at your layer palette now and you will notice an extra layer above the green shape layer. Select it and add a Quick Mask. With Lasso Tool create a selection like you seen in the image and fill it with black.

Step 10

This is how it should look like now.

Step 11

Now we’re almost done, just a few finishing touches. Let’s create a shadow inside the fold. Select the white shape layer (fold). Create a new layer above. Select a 17px Soft Brush, set background color to black. Now, carefully click few times on top of the selection so that the edge of the brush touches the selection.

Step 12

This is how it should look like. I have created a few more effects on the green stripe that I will explain in next few steps (Light Effects).

Step 13

I just copied the whole stripe, duplicated it and changed base colors of shapes. Done!

Blur

This effect is really neat and simple. Hardly noticeable, yet without it the design would be missing that extra touch. This example is from Phodana

Step 1

Open New Document, set canvas to 470px wide and 300px high. Background used for this example taken from Digital Juice Juice Drops Collection.

Step 2

With Rectangle Tool draw in a shape about 390px x 225px and fill it with white.

Step 3

Create a new layer and draw in a smaller rectangle about 330px x 195x and fill it with light gray color.

Step 4

Now, Ctrl (Cmnd) + Click the big rectangle layer shape to create a selection. Select the Background layer (image). Go to Filter>Blur>Gaussian Blur and enter 2px for Radius.

Step 5

Lower the opacity of big rectangle shape layer to 35%. This is how it should look like.

Step 6

Add a tiny Outer Glow effect to transparent rectangle. Use settings like shown in the image. Set the glow color to #004e84.

Step 7

That’s it!

Light effects

If you don’t add that extra layer of top light, your site design is rubbish. :D No, just joking of course. These are really that extra touches that make some sites better then others. For this example I used one of my own templates I crated. This example is from PRO Design. More about light and shadow here.

Step 1

Open New Document, set canvas to 470px wide and 300px high. Fill it with #3b3a3a. Draw in a rectangle about 60px high and 470px wide. Fill it with #eae7e7.

Step 2

Create new layer above and draw in another rectangle about the same dimensions like the previous one. Fill it with #28b9c6.

Step 3

Now add some effects to blue rectangle. Gradient overlay, use settings from the image. Stroke 1px, inside, color #27c4d3.

Step 4

This is what you should get by now.

Step 5

Now, this looks nice but something is missing though. We need to simulate light and shadow even more. We will do this by adding 1px dark and light lines on top and bottom of the shape. For dark line set #000000 and for light line set #6d6d6d as background color.

Step 6

This looks much better don’t you think?

Step 7

Adding light effects. Ctrl (Cmnd) + Click the blue rectangle layer. Go to Select>Modify>Contract and enter 1px. Create a new layer and change mode to Overlay. Choose a 300px Soft Brush,set background color to white and click few times with the edge of the brush near the selection where you want to apply the light effect.

Step 8

Subtle but nice.

Step 9

Do the same for the top part.

Step 10

Overall it looks better, definitely!

Step 11

I added some navigation items and logo.

Background effects

Even with one good background you can achieve great visual experience. These can be sometimes hard to create and take more time then other stuff but it’s definitely worth it. This example is from FortyTwo

Step 1

Open New Document, set canvas to 880px wide and 560px high. Fill it with #002142.

Step 2

Draw in a rectangle half the height of the canvas.

Step 3

Apply Gradient Overlay with colors and settings as shown in the image.

Step 4

Create a new layer above and draw in another rectangle to fill the canvas. Apply the same Gradient Overlay, set it in opposite direction this time.

Step 5

Place a Light bulb graphic. I used one from iStock.

Step 6

Let’s do some light effects. Ctrl (Cmnd) + Click the upper rectangle layer to create a selection. Choose a 600px Soft Brush, set color to #4a7ba5 and click one or two times so that the top edge of the brush touches the top of the selection. Now, choose a smaller brush size, 300px, set color to #8cb9da and click again two times little lower. Finally, choose 100px Soft Brush, set color to #e5e9ec and click again two times almost at the bottom of the selection (behind the bulb). Copy this layer one time. Set layer mode to Overlay and set opacity to 65%.

Step 7

This is how it should look like.

Step 8

Copy these two layers and merge them together. Go to Edit>Transform>Flip Vertical and nudge the layer down just like you see in the image. The top side of the flipped light effect layer should be touching the top side of the bottom rectangle shape we drew few steps before.

Step 9

Add a Quick Mask to it and with 600px Soft Brush delete the edges of the flipped light effect layer, just like you see in the image.

Step 10

Create a new layer under the flipped light effect, set background color to white and with big 800px Soft Brush draw in more soft light (click once). Again, add a Quick Mask, and with a smaller brush mask the edges. This doesn’t need to be perfect.

Step 11

In order to add a Pattern overlay, we need to create pattern first. I have created this pattern for you, so all you need to do is apply it to the document. Create a new layer above everything, fill it with #ffffff, set mode to Overlay and reduce opacity to 3%. Add a Pattern Overlay with this pattern here:

Step 12

This is how the effect should look like.

Step 13

We need to create a Light bulb reflection on the surface. To do this, copy the light bulb and flip it vertically, nudge it down. With Marquee Tool create a rounded selection about the same size like shown in the image. Go to Select>Modify>Feather and enter 30px. Press Delete few times to delete the bottom of the reflected Light bulb.

Step 14

And, we’re done.

Wait a minute! Where did these two circles behind the bulb come from?

Yup! It’s a small detail that makes the design complete. Let me show you how to create it.

Step 15

Ctrl (Cmnd) + Click the top rectangle to make a selection. Choose a 800px hard Brush, set color to #b4e8ff and click one time to create the circle.

Step 16

Set the layer opacity to 2%. Copy this layer. Go to Edit>Free Transform and scale the copied circle a bit down. Done!

Final Preview

So we’re done with this. I hope you could easily follow my tutorial and managed to recreate the same effects as shown. Here is the final image preview. Btw. the guys at FourtyTwo used an image from iStock

This is it for Part 2 of our Photoshop Techniques, I hope you enjoyed it as much as I did. Furthermore, I hope you also learned something new that you will be able to apply to your next web design job.

If we look at web design today, it’s anything but simple. Sometimes you need that extra Photoshop knowledge in order to achieve the look we need.

In this step-by-step tutorial, I’m going to show you how to create five killer effects for your site.

When I was choosing examples for this article I visited some design galleries and roundup posts and took screenshots of design details that are used (sometimes overused) in web design. I don’t encourage you to follow trends but rather develop your own style. Nevertheless, it is always useful to polish your Photoshop skills a bit more. Let’s get rockin’!

Editor’s Note: Andy Clarke will be teaching an interesting session called “How to Design in the Browser” and Elliot Jay Stocks will be showing you how to design the “The Perfect Portfolio” at The Future of Web Design Tour.

#1 Awesome Buttons

Now what is a site without a great “Call to action” button? The design style and colors will depend on your overall site style and importance of each button. Here is one example of a simple but effective button that we’ll be trying to recreate (taken from transmissionapps.com).

Step 1

Open New Document, set canvas to 470px wide and 350px high. Create a new layer and draw in this shape with Rounded Rectangle Tool with radius set to 80px.

Step 2

Right after that we will add some layer filters to make this button immediately awesome. Drop Shadow – Color: Black, Opacity:65%, Distance: 2px, Size:2px, the rest leave by default.

Step 3

Gradient Overlay. Just copy these hex codes for gradient colors and place color buckets in approximately same position as you can see in the image.

Step 4

Inner Shadow will make this button stand out even more. Notice that this is just a subtle effect. Inner Shadow – Color: Black, Opacity: 15%, Distance: 0px, Size: 5px;

Step 5

Finally add some Stroke. You will notice that this is a Gradient Stroke with same colors as our buttons Gradient Overlay. The only difference here is that gradient direction is set -90, which is the opposite of buttons Gradient Overlay. With this little trick we made a nice light effect to our button and made it stand out a bit more.

Step 6

Done with effects, time for some shine! Create a new layer above others.

Step 7

Cmnd (Ctrl) + Click on Button shape layer. We have made a selection out of it.

Step 8

Choose Marquee Tool. Hold down the Alt key and Subtract the half from selection.

Step 9

Choose Black to White Gradient Tool, set the layer mode to Screen and pull upwards from bottom of selection to about 30px outside the selection. There you have it! A nice shiny button.

Step 10

Add some text like I did here. Draw in a circle and position it like you see it in the picture. Add a Gradient Overlay with same values like shown in the screenshot. Finally give it a 2px white Inside stroke.

Step 11

Choose Shape Tool. From presets choose an Arrow. Rotate it.

Step 12

Like the image says, position the arrow in bottom direction.

Step 13

Now choose Direct Selection Tool and select the shape. Next, select two points from upper part of the arrow and move them with Arrow Keys few pixels to the right. Do the same with the right top side of the arrow, just shift it to the left. This way our top part will become a bit thiner. With the same tool adjust the bottom part (triangle).

Step 14

This is how it should look like. You can also see the layer structure.

#2 Navigation Menus

The most important part of a website: the navigation. I’ve chosen the example that uses some transparency and fade out effect (taken from legacylocker.com).

Step 1

Open a New Document, same dimensions from previous example. Create a New Layer and fill it with Gradient Overlay using the color hex values you can see in the image.

Step 2

For the purpose of this example I added few clouds :)

Step 3

Draw in a Rectangle, paint it with #6bb9ec and set Opacity to 65%.

Step 4

Add a Quick Mask to this layer. Choose 200px radius Soft Brush, set the color to Black and mask the ends of this rectangle, like you see it in the image.

Step 5

Draw in another Rectangle, but much higher. Put it under the small rectangle. Use the same color and Opacity. Again add a Quick Mask to this layer.

Step 6

Choose 600px Soft Brush and carefully mask bottom of the rectangle os that top line stays visible across the document.

Step 7

Now we can play a bit with the small Rectangle by adding some light and shadows. Cmnd (Ctrl) + Click small Rectangle to make a selection out of it. Go to Select>Modify>Contract and enter 1px. Create a New layer and set Mode to Overlay. Choose 200px Soft Brush, color white and click few times the top part of the rectangle just like you see in the image.

Step 8

Do the same with bottom part just change the Brush color to Black.

Step 9

Here you can see how this looks like. It’s really a subtle effect of light and shadow which you can use wherever you want.

Step 10

With Line Tool draw in a line just the same width as small rectangle. For color choose #8dd1fe.

Step 11

Mask the ends of the line just like we did in Step 4. Copy this line and shift it to the bottom of the small rectangle.

Step 12

Finally I added some Navigation items and that’s it!

#3 Typography Inset

Even though we’re used to seeing this technique now, it’s still a good skill to add to your toolbox. Please use it only if you have to :) The example was taken from forabeautifulweb.com.

Step 1

Same New Document filled with #aa8e5c.

Step 2

I added some floral brushes just to recreate the same background from the example :)

Step 3

Choose Type Tool, set font to Times New Roman. Choose color #591e0d and type something.

Step 4

Add Inner Shadow filter and use settings like shown in the image.

Step 5

Add 2px Outside Stroke with color set to #bc9f6c.

Step 6

Done! What, that’s it? Yes, that’s it! Simple and effective.

#4 Faded Shadow

With a little bit of Blur and Quick Mask we can create shadows that fade out in any direction we want to. With this effect you can make boxes look like they pop out of the background. This example is from mint.com.

Step 1

First thing first, the background. As usual by now, within New Document same dimensions like previous ones.

Step 2

Draw in a white Rectangle.

Step 3

Create a New Layer and place it under the white rectangle layer. Cmnd (Ctrl) + Click white rectangle shape. Fill the empty layer with Black.

Step 4

Go to Filter>Blur>Gaussian Blur and enter Radius: 12px.

Step 5

Add a Quick Mask to this layer. Select a 300px Soft Brush Tool and carefully mask all

Step 6

Now this was pretty easy, don’t you think? Now you can play around with this technique and who knows what awesome results you’ll get.

#5 Depth and 3D Space

More and more interesting 3D elements are being used in web design lately. Here you can see how with just few extra layers, you can create an illusion of 3D space. This example is from mosaiko.com.br.

Step 1

New Document filled with Black.

Step 2

With Rectangle Toll draw in rectangle and fill it with #21262a.

Step 3

With same tool selected draw in another, this time smaller rectangle and fill it with #191b1d. These two rectangles will create our space on canvas. It will look like a wall is passing through it.

Step 4

Cmnd (Ctrl) + Click bigger rectangle shape to get a selection. Create a New layer. Choose 300px Soft Brush, color Black and click few times in top center of the selection.

Step 5

Do the same with smaller rectangle but this time click on bottom center part of the rectangle.

Step 6

Now, do the same for the background layer itself just use White as Brush color.

Step 7

Draw in a 85×20 px rectangle, fill it with #555759.

Step 8

Add following effects. Drop Shadow – Color: Black, Opacity: 25%, Angle: 90, Distance: 1px, Size:4px. Inner Shadow – Color: White, Opacity: 7%, Angle: -90, Distance: 1px, Size: 2px. Gradient Overlay, use values provided in the image.

Step 9

Choose Pen Tool and draw in a shape like you see in the image. Fill it with #555759.

Step 10

With a little use of Quick Mask and some Brushing we will create the illusion of 3D space. First add a Quick Mask to the layer and with 100 px Soft Brush mask the sides of the stripe.

Step 11

Next, select the whole stripe and choose 100px Soft Brush again. Create New Layer, set color to white and click few times at the beginning of the path but only with the top of the brush just like shown in the image.

Step 12

I added some navigation links, copied few more stripes, modified the perspective a bit and there we have it.

I hope you enjoyed it and hopefully learned something new. Watch out for Part 2 where we will be covering more interesting Photoshop techniques.

Last week I was presented with a design brief. It was to design and build a site to promote our new Stack Overflow DevDays event that’s happening this October.

Ryan gave me a rough wireframe detailing the content that needed to be included. The layout and design was down to me. As usual I didn’t have a bloody clue where to start… and I didn’t have long to do it. The initial hope was that I get it all done in just over 2 days.

So I thought it might be interesting to share with you the various stages of design the site went through before arriving at the finished design.

Here’s the wireframe Ryan put together for me

Ok so here goes.

Stage 1

Stack Overflow DevDays is mainly gonna be a US tour + a gig in London. So I want a map or something to show where the dates are gonna be. I was going to use a flat map but decided a globe was cooler. I drew the globe based on one I bought from istockphoto.com

(Note: Dates and cities shown in these designs were just provisional last week. See stackoverflow.carsonified.com for actual dates & cities)

Stage 2

I have a play with the globe I bought from istockphoto.

Stage 3

I’ve sort of decided I’m gonna use the illustrated globe. So I colour it and experiment with large city names in the background. I’m thinking the globe will be the focal point of the page, so I’m working from that outwards.

Stage 4

I decide it needs some texture and add some descriptive copy. I’m ditching the large city names too.

Stage 5

I’m not feeling that good about the design at the moment as it’s shit. I’m grasping at straws and adding stuff in the hope it’ll come good.

Stage 6

I make a compete change of direction that doesn’t come to much but at least clears my head.

Stage 7

I’ve now decided to take a slightly more graphical approach. One of the problems I’m having at this stage is trying to place all the logos… Carsonified, Stack Overflow and Devdays logo/title.

Stage 8

I’m now trying to make the “Devdays” more of a feature and experimenting with colour. I like the yellow, grey and black :)

Stage 9

I bring the city photos into the design. The reason it’s a picture of New York at this stage is just because that’s what I have lying around on my machine.

Stage 10

This is the breakthrough moment. I know at this point that it’s all going to be ok. I stop sweating.
A few things happened here. Firstly, I sacked the Carsonified logo from the top of the page and now it says “Carsonified presents”. This takes away the logo placement headache. Secondly I manage to make a feature out of “Devdays”. I got this idea idea from my FOWD Slides… I don’t know why I didn’t think of this earlier! Thirdly I can see a content structure falling into place. Thank f*** for that!
Believe it or not it took me the best part of 2 days to get this far. The reason there’s not that much physical design to show for it is because I spend just as much time thinking about the design as actually outputing designs. I’m now behind on the project big time… but what can you do? I tell Ryan – he understands :)

Stage 11

I Experiment with a new colour scheme which I really like and also go back to using the more graphical globe from istockphoto. This green and red colour scheme is influenced from a safe sex advert that appears on Spotify.

I also decide at this point that I’m going to use the Parallax Effect thingy. It was something I was gonna save for the new Carsonified site design but I couldn’t wait. Besides I think I’ll just use it again in a different way.

Stage 12

I finish designing the content and change the colour scheme. I think I’ll go with this one.

Stage 13

@keirwhitaker calls over to me… “Hey Mike, have you seen that safe sex ad on Spotify? It has a really nice colour scheme.” At which point I’m like “yeah” and promptly open up the previous version of my design to show Keir. I then realise it’s way better than the washed out aqua version (in my opinion). Job Done :)

Stage 14

I just have to build it now… which is a welcome break from designing :)

The Design and build took me just over 4 days in the end. Twice as long as planned… but I guess design isn’t an exact science… it just takes you where it takes you… or you take it.

You can see this finished site here stackoverflow.carsonified.com

I hope you found this interesting and I’d love to hear how this compares with your experiences.

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.