Step 2 - First, we’re going to work on Mario. The first work you’ll want to do with Mario is to seperate his head from his body. Decapitation is always fun. Grab your polygonal lasso tool and trace around the head. Then click on Select >> Inverse. Press delete. Save your file as a PNG.

Step 3 - Now, create a new document roughly the size of your head, and body combined. Drag the head over, then the body. Now your body will be on its own layer. Shrink your body down until it’s obviously smaller than the head. You should have this…

Step 4 - Ok, create a layer in between the head and body. Use your rectangle tool and make a think and tall triangle that will act as Mario’s think neck. Then add this blending option..

and your Mario should look like this…

Step 5 - Combine your neck, and body layers. Then make Mario’s head invisible and then trim the image to get rid of all transparent pixels. You should have this.

Then backtrack, and make it to where only the body is visible. This is all important for what you’re going to do in Flash.

Beyond this point is all Flash work. If you’re familiar with tracebitmapping, tweening, and animating images then this is a very easy Flash swf to create.

Step 2 - The first thing you want to do is find the pictures you’re going to want to include with your forum sig pic. I’m going to start out with two for this tutorial. Once you’ve saved them, open them up in Photoshop.

(Stop drooling)

Step 3 - Here we’re going to select our color scheme for the background design. Click on the eyedropper tool and select two colors from the Christie pictures that you like. For this tutorial I’ll be using #30267A and #A13089

Step 4 - We’re going to design the background first, which is very open in terms of options. Just download some brushes, and find ones you think will go well for what you’re trying to create. What I do for forum signatures, is have one brush used for the background image. Then put the other on a seperate layer. There’s a reason for this later on. Monteiro has dance like fighting moves, So I’m going to try and create something very kinetic.

Here’s my background…

Step 5 - Ok, now we’re going to bring in the first picture. This is what I like to refer to as the ‘background’ or ‘backdrop’ picture. It’s not going to be the image that stands out, but fades into the background.

Drag in your picture, situate it around to where you want it. Here’s mine..

Step 6 - Now, we’re going to blend our backdrop picture of Christie into the background. There’s numerous ways to do this. I like to my put my effects on ‘Hard Light’ and drop my opacity. The actual settings are down below, along with the actualy picture.

and here’s what it looks like

Step 7 - Ok, here we’re going to bring in the second picture of Christie and we’re going to do a whole lot to it. Bring it in, and make sure its layer sits just above the backdrop image. Here I just use the channel mixer to swith the color pallete up a bit. Here’s the settings I used, and I like the outcome..

Step 8 - Here you can add anything extra you’d like. I just added text with Christie’s name. I used a drop shadow, and a stroke using the same color as purple i used in the background.

2. Then, create a Gradient Overlay, with the settings below:

3. Next, we’re going to create the speakers. First, select your Rounded Rectangle Tool again . Only this time, set the radius to 10px. Fill the rectangle, with this color #7A7A7A. Then, add an Inner Shadow blend, with the settings below:

Now, we’re going to give the speaker some texture. Select the brush tool, and then go to the brushes options, and put in the following settings:

Ok, now create a new layer. Select the line tool and make a selection like the one below.

Then right click on the selection, and click Stroke path. In the drop down menu, select “Brush”. Now, delete the path. Take the layer that the brush strokes are on and duplicate, and spread them out evenly across the speaker. It should look like this:

Then, to create the speaker on the left, merge all of your speaker layers down. Then move it to the left side.

4. This step, you’re going to have to some drawing of your own. Grab your pen tool, and create a shape like this, which will be your boombox’s handle:

Fill it with the color of the background. Then add the blending options, from below:

5. Next, we’re going to create the CD player. Grab your Rounded Rectangle Tool again, set your radius to 10px. Make a shape like the picture below, fill it with #5A5A5A. Then create a smaller rectangle inside that one, and fill it with 1D1D1D.

It should look like this:

6. Beyond here it’s up to you how detailed you want to make your jukebox. If you’re using it for site, then what you have should be enough. Here’s what I added to mine, which could still go up on a site as well.

Step 2: Then create a new layer on top of the initial one, and fill it with any color. After you make your fill, take the rectangle marquee tool and make a box like below:

Step 3: With your new box, fill it in with any color you want, select Gradient Overlay under the blending options for the layer. You’ll want to set the Gradient Overlay to the settings below.

Then set the colors of the gradient like below. You can choose whatever color you want, but I decided to go with a blueish background.

Now, your document should look something like this:

Step 4: Now, select the Custom Shape Tool , and then select this shape . Spread it out, to create the shape below.

Then, create a new layer. Fill the path with any color, then delete the path. It should leave you with something like this:

Step 5: For this next step, we’re going to be adding a bunch of blending options to this shape. Starting with a Drop Shadow:

then add a Satin blend

and finally a gradient overlay

All of these should result as this:

Step 6:

Next, take your rectangle marquee tool, and make a selection about halfway down that custom shape layer.

then press delete

Now, select the Rounded Rectangle Tool , and make your selection like below:

Create a new layer, then fill the path with any color and delete it.

Next, create a Gradient Overlay blending option. Have it set to the settings below:

Set the layer to screen, and voila you’re done.

The rest is up to you, add some buttons, and some images to go in the background. Here’s an example of how it can look.

2. Select the Rounded Rectangle Tool and create a rounded rectangle within the document. Keep the edges somewhat inside the document. For a reference, check the picture below.

3. Next, fill the rounded rectangle with any color, for this tutorial I’ll be using #0000FF. Then once that’s filled, add an inner glow with the settings below.

and add a gradient overlay with these settings

and add this Bevel and Emboss blend

4. Next click on the Custom Shape Tool , Then on the shape menu, click on the arrow . Stretch the arrow on the left hand side of the bar. Right click the arrow and fill it in with white. Then you’ll want to add yet another bevel and emboss blend option.

Here’s what it should look like by now

5. Then right beside the arrow, add the text, “http://”, and add this outer glow blending option.

6. Next we’re going to add the actual bar into the image. Select the rounded rectangle tool again . Expand it from the http:// close to the right edge. Fill it with white. Then add the blending option below.

Voila, you now have a custom made http:// address bar.

2. Throughout most of this tutorial, you might want to stay zoomed in so you can see better what you’re doing. Fill the background with black

3.Create a new layer. Then make a rectangle box that wraps around the document, and fill it with white. There should be only a small portion of black left showing

4.Next, you’ll want to add a blending option; Bevel and Emboss (use the settings below)

and your document should look like this:

5. Next, make another box inside the white one. You’ll want the right edge to stop right where the inner bevel begins. Yet again, we’re going to add a bevel and emboss blending option, use the settings below:

then add a satin blend:

Your document should look like this now:

Next, we’re going to add the circle and two curves that makes a RSS image a RSS image. First grab add the circle, and put it in the bottom left portion of the colored box. Then add the two curves, spacing them equally away from the circle

Yet again we’re going to add a bevel and emboss blend to the RSS circle and curves. Their settings are a bit different though, and you can find them down below

This is should be what your final product looks like. So congratulations, you’ve just created your very own custom RSS image.

First, you’ll need your base photo. For this tutorial I’m going to use this stock photo I found.

The first step is to load the picture of the snake skin that you’re going to use to cover the person with. Feel free to use this skin as it’s a stock photo as well.

Select the Move Tool (M) , and drag the entire snake skin picture into the picture of the person.

Select the Transform option under the edit menu. You’ll want to click on scale, as we’re going to shrink the snake skin down. Once you have selected the transform option, drag the snake scale down to about the size shown in this picutre:

Once you have the snake scale layer shrunk, add a Vector Mask . Next, under the drop down menu in the Layers palette, select the Overlay Option .The first part of the picture that we’re going to transform is her cheek. So, for her cheek go ahead and turn the opacity to 40%.

Her face should look like this so far:

Ok, here is where we have to start getting pretty intricate, and paying attention to detail. The next step is selecting a brush to use for erasing so that the only snake scale left is on her cheek.Select the Eraser icon (E) , once you do this at the top of your screen there should options for changing the brush for your eraser. For the brush you don’t have to be too picky. The only requirements is that you don’t want it to be so big that you can’t brush away smaller parts of the snake scale. Also, you don’t want the brush to have any hardness to it what-so-ever.

To change the hardness of the brush, click on the brushes button . Once you click on that there will be a drop down menu, click on the “Brush tip shape” option. There should be a slider for hardness, so go ahead and slide that down to zero.

Ok, now that you have your eraser picked out, it’s time to get the snake scale to appear to contour to the person’s cheek. Here is an outline of what I decided to erase, everything outside of the black line should be erased away.

From here on out, it’s all about copying the scale layer and making sure that each piece fits correctly wherever you need to put it. A good rule of thumb is to increase the amount of opacity the lighter the area you put the snake scale over. The reason being is you want the snake scale to mimic the light of the photo as much as possible. So if you come across a part of the person’s skin which is darker from a shadow, you don’t want the opacity to be as high as a part of the skin that’s receiving light.

Ok, now if you followed my tips about where to raise and lower the opacity your skin should look something like this:

From here it’s up to you to see how creative you want to get with it. I went ahead and added a fork tongue and dark slits in her eyes for extra effect.

Step 2 - Next you will want to decide what you want your background color to be. Then click on the Paint Bucket Tool (G) , and click inside the design window. You can also use a patterned background, but for this demonstration, and what I’m wanting to design, I chose black.

Step 3 - For the third step, you need to decide what the layout of your site is going to look like. The easiest way to do this, is to put down some Guides.

You can select either a horizontal guide or vertical. Don’t worry about putting in a measurement, as you can drag them once you put in a measurement. Once you put a guide down, select the Move Tool (V)
, and now you can drag your guides wherever you want them to go. For beginners here is a labeled example of what my layout looks like…

Step 4 - Next you’ll want to create a new layer, and call it “Border”.

Step 5 - This is where the true excitement begins, as this is where you begin to make your big design choices. I find that when I’m doing a layout it’s best to work from the outside-in, much like a jigsaw puzzle. First select the Rectangle Marquee Tool (M) . Once selected, find the area that lies between the bottom of your document, and the bottom guideline of the footer. Drag the Rectangle Marquee Tool (M) from one end of the area down to the other.

Once the area is selected, grab the Gradient Tool (G)
. Once the Gradient Tool is selected, there should be a gradient toolbar at the top of your screen. Click inside that box where there should an option for two colors to select.

For my colors I chose #7A171A and #FFFFFF

After selecting your colors you’ll need to make a path inside the selected area. This step is another design decision, so feel free to do something different. But I started my path on the left side and ended it on the right side.

Make sure that you stay on the “Borders” layer when completing all sides of your border. If you don’t stay on the “Borders” layer then your colors won’t coordinate properly and turn out sloppy. The next portion, you’ll be repeating alot of steps.

Next, select your Rectangle Marquee Tool (M) again, and create a selection on the top border section. Then select the Gradient Tool (G) , once again and make a path from the bottom to top.

For the top border section, do everything like on the bottom, except start you gradient path on the right side and end it on the left.

Now, finish up your border, by doing another gradient on the right side, starting from the top and ending at the bottom.

If everything went according to plan, then your final product should look something like this…

The next part of the series, we will be working on the header and nav menu, so hope you come back next week to see the project through.

For this tutorial I will be adding some raindrops to this window picture


The first step is to zoom in on the area you want to add your water drop. The reason for this is because once you are finished, you can’t resize the rain drop because it will throw off some of the overlays we will be adding in.

Create a new layer for your first rain drop. The next step is to trace the shape that you want your first drop to look like.

You will then select the gradient tool.

Once you have the gradient tool selected, double check to be sure the gradient goes from black to white.

Once the gradient is applied, you can deselect, and then in the layers palette, select the layer the drop is on and change it to Overlay.

The next step, you will want to add a drop shadow. Depending on the size of your drop you’ll want to change the size of the drop shadow. For the size i’m doing this is the correct settings.

You will then need to add an Inner Shadow. Like the drop shadow, the settings will need to change depending on the size of your drop.

This is probably the trickiest part in this tutorial (not very tricky though). You need to make sure that white is the foreground color. Once this is done you need to select the hard brush tool. Then you need to make a single stroke in the bottom corner of the raindrop.

Your finished with the first drop after this step and will look like something like this:

Then once you finish your first drop, you’ll need to add more. The best way to do it is to use the liquify tool. Just remember to distort the image before you add any of the overlays. Because if you distort or liquify the drop after the overlays it will off and put certain shadows in the wrong place.

Here’s the picture with a few more drops added to it.

2.You should know have a path set out, now fill it with a darker color of your choice. As you can see, we chose a darker-light-blue to fill ours with since we intend on the bar being light blue. You can fill your path by going to the paths tab, and clicking on the filled in icon on the bottom of your panel. When done with this, make your path into a selection; click the dotted circle on the footer of the panel.

3.Now we will apply some basic styles to our box to give it texture. On the layer you created when you first began, double-click it. This will bring you to the Layer Style panel. Here are the settings we used:

4.At this point, depending upon your color combination, you should have something like this:

5.Now, create two layers and then select Gradient tool. Also, go back to the paths panel, and create a selection again. Now on one layer, draw a black gradient from the bottom to the top. On the other layer, draw a white gradient from the left-top to the right bottom.Lighten the layers, and set the opacity to your choosing. It may depend depending upon the color. You should have something like this:

6.Without the selection delected, create another layer and using Stroke (Edit>Stroke), draw a 1px white layer on the inside of the selection.

7.To add the finishing touch, you can add an arrow to the end like I have done in this extra example. But other than that, you’re done! Hope you learned something :]