You are either not logged in or not registered with our community. Click here to register.
March 22, 2018, 08:38:34 PM

Welcome, Guest. Please login or register.
Did you miss your activation email?

Login with username, password and session length

Click here if you are having problems.
Default Wide Screen Beige Lilac Rainbow Black & Blue October Send us your theme!

Wiki Blogs Dicebot

Author Topic: Signature/Avatar Combo Tutorial  (Read 6469 times)

0 Members and 1 Guest are viewing this topic.

Offline KrysiaTopic starter

Signature/Avatar Combo Tutorial
« on: August 02, 2011, 08:17:37 AM »
This turtorial was done in Photoshop CS. Can be used with other Photoshop versions but keep in mind some of the tools/filters/options might be different or in a different place. I do use a lot of the keyboard short cuts. I've been using Photoshop for the last 11 years. Learning them speeds up your effectiveness in Photoshop. At the end of the tutorial I'll give you a web site for the keyboard short cuts I've used.

Turn on some good music and have fun with this. I suggest anything by Big Bang or any of its members.

Step One: Pick your Art/Photography to use. (remember to credit your sources if and when you can.)

I started with this picture. I liked it and wanted to manipulate into an avatar and signature picture set.


Step Two: Making sure you have the proper dimensions.

Make sure you use the right dimensions for your avatar or your signature. Avatars are a max of 150 width and 200 height. To make sure I got the right dimensions for my own Avatar I downloaded the current one I have on E already and opened it in Photoshop. Deleting what was already there gave me a blank white image to work with.

You can also make a totally new avatar base by going to File> New> and typing in the Width 150 and Height 200. Make sure your option is set to Pixels and not Inches. Background color can either be Transparent or White.

My Monitor is really BIG, so I have cropped some of the images to just the important stuff. If you have questions that's wonderful! Post here and I can try and answer them.

For the signature base I used 600 Width and 100 height. This should span the length of your signature area. Width is an optional length. The height gives us a bit of room to do some fun stuff. This can also be opened the same way as you did with the Avatar Base. New> File> input 600 as the Width and 100 as the height. For this one it's best to use a base transparent layer. That way we can do some fun things with it later on.


Step Three: Working with the art/photography.

We'll be using the photography I picked for doing the Avatar first. I wanted to preserve as much of the picture as I could with in the dimensions given by the avatar base. So in order to do this I shrank the pictures slightly.

Starting with AviIdea01 (renamed for the tutorial) I shrank the picture down to almost the same size as the Avi dimensions. Keeping the Scale Styles, Constrain Proportions, and Resample Image selected so that the image would scale properly down to 200w. The height of the image will resize proportionately with those options selected. This keeps your image from looking weird in the end.

After the image is resized down to the size you want. I then use the Move tool to move the white background of the avi base to the picture. This helps me view what portions of the image I want and will fit in the base dimensions.

I then hover over the layer with the white base on it high lighting it as a selection. Pressing ctrl + the layer selected I make the white base into a selection. You'll see the dancing ants (what we called the moving selection when teaching other students) moving around your white base. Going back over to your white base layer in the layer pallet you can now turn off the white base by poking the eye out. With the layer turned off you can see what part of the image will be placed on to the base avi area.

Turning the layer on and off and moving your selection around you can get a better idea of where things will go. Just remember when making your selections before moving the layer to remove the selection with ctrl + d for deselect. Or going Select > Deselect if using menu options.

If you do not deselect before moving you'll cut that section out of the picture and move it around. And it may look like this.

Now that we've figured out what we want in our avi we simply Cut and Paste it into the avi base image. Ctrl + c for Copy. High light the avi base then ctrl + v to paste the image in. Or if you like menus, you can go up to Edit> Copy. Then move to your avi base and go Edit> Paste to drop the image into the white base.  Or for the short short version you can ctrl + c, then press ctrl + n for a new base, and then ctrl + v to paste the picture in quicker. :)

You should have something like this:

I went ahead with a few more advanced adjustments to the picture. Nothing major just cleaned up the carpet on the picture. Some of the spots on it I found distracting. I'll circle the ones I removed from the original picture, I thought they took away from the picture and your eye went right to them. (Comes from photography class, we had to make sure our pictures were virtually flawless.) I wanted the pose to be the focal point of the piece and not the dust bunnies.

Simple cleaning of pictures can be done with the stamp tool(s) and the healing brush tool(j). Both tools take a bit of time getting used to but if you can master them properly then you do pretty good photo restorations.


Step Four: Adding effects or boarders to your avatar to make it more custom.

We should have something like this when it comes to your avatar:

It's good on it's own but how about we make this one just a bit more personalized. I picked black and white because it's awesome to work with personalization and adding your own colors to it. I'm not going to do that but I will be adding a boarder color and an effect or 2. I personally am a purple fan so I'm going to pick up the foreground color changing it to a purple I enjoy. On top of that I'm going to be adding a transparent layer on top of the original picture. I never do anything directly on the original in case I don't like what I did. That and I might want to re-edit my avatar later with the same picture just different effects.

For just a quick boarder: Have the top layer high lighted in the layers pallet then click ctrl + a. This selects everything on the boarder of the picture. You should get the dancing ants around your picture again. Once you have that you can go Edit> Stroke. Once the options open up you can play with them to get what you want. I suggest keeping one of the options on the "Inside". This makes sure that your stroke will show up as a boarder around the picture.

If you do not like what you just did there is a quick way to go back 1 step or multiple steps in the history pallet. Ctrl + z will be your best friend. Ctrl + alt + z takes you back multiple steps. This is great for seeing what you did and seeing if you like it. You can take your history pallet back a few steps then ctrl + z right back to the first one. I use this a lot when coloring images.

With the first stroke around your picture it should look a bit like this:

Not bad but we can spice it up a bit more with a few more strokes. Use the ctrl + click on the top layer with the stroke. You should get the dancing ants again around your stroke. When you make your new stroke how ever instead of "Inside" we want to pick "Outside" This'll give you another stroke around the last stroke.

For this avatar I decided to use 3 strokes so I can do some effects with the line work. I'll show you what mean. First you have to blow the image up a bit. You can do this with your zoom tool(z). Clicking on the image is a good idea but the edge usually doesn't move properly. Hover over your image and right click on it setting it to "Fit on Screen".

With the image blown up like this you can cleanly see the boarders around the image. They look a little bit plain don't you think? Well then lets add some subtle effects to them to make them just a bit more interesting to look at. I tend to stick to thinks you can see in the corners. Since black is the less dominant color in the boarder lets work with that.

To quickly get your colors back to black and white on the side bar you can press D on your keyboard. This resets your colors. And to quickly toggle between the background and foreground color press the X button on your keyboard. This makes it easier for you to use your 2 colors. Make sure black is the foreground color you are going to use.

Pick up your brush tool (B on your keyboard) and set it to the pencil tool by pressing shift and B. This toggles your tools listed under the brush tool. Make sure your pencil is set up for the square brush tool. Click the arrow key to open up your brush options. Scroll down to the Square brushes option. Once highlighted you'll get a prompt to over write the other brushes. Don't worry you can get them back. To save on confusion I said ok. This just puts the square brushes in my options. This is fine.

Pick a brush that is about 3 pixels in size. A quick way to toggle the size of your brush is the bracket keys ([   ]). The left ([) bracket will make your brush smaller, where as the right (]) bracket will make your brush bigger. With the brush you can now make a simple design on the corners of your boarder.

Pretty cool so far. I just wanted to take mine a little bit farther. I took the eraser tool (e) and erased the black stroke we made earlier. Because it never touched the original picture it should have the background come through the picture just adding a bit more class to the picture. As you can see I left some of the black in the corners though. This seperates the picture from the boarder making it more of a picture frame.

You obviously can explore filters and other options. Maybe even some text! Let's put some text on this avatar so you can make it a bit more custom to fit with the signature we'll work on as well. I'll add my name to my signature.

Finding the right font is key as well. I have a huge long list of fonts in my pc. A great free resource for fonts is a web site called Since I just celebrated my 3rd year wedding anniversary by going to Walt Disney World I've been digging the font they use. So I'll be using it for my Avatar and Signature set. Here is the finished Avatar.

You'll notice I put a stroke around the text as well. This can be done quickly from the layer styles. This can be done quickly by double clicking the text layer. Bringing up the layer styles pallet. I just selected Stroke and selected my background color. I placed the stroke at 2 so it's not so over powering. Hit ok when you got things how you want this settles the options onto the layer. Save the image out and voila you have your own personalized Avatar ready for upload!


Step five: Working with the Art/Photography to make a matching signature.

First I make a random background for the photography to fit into. Keeping with the black and white theme from the picture I hit the D key on my keyboard to get my colors back to black and white.

Hitting G on my keyboard I bring up the Gradient Tool. Seeing as my colors are black and white it should default to a black and white gradient. If not you can change the gradient colors by going into the gradient picker at the top of Photoshop.

For the mode I used Difference because it makes really cool designs over top of each other. With the black and white you won't get colors turning to those you don't want. This is how my base background came out:

I'll be using this for the base. Now to add some filters and smooth it out some so it's not so harsh on the eyes. This is where you have to find what filters you like best for yourself. You can add multiple filters over top of this to create fun and unique effects. In the drop down menu under filters you will find folders of a bunch of things to do with the picture. Experimentation is fun and also helps you learn the program better.

So after playing with a few filters I came up with this:

I think this will make a good base to start playing with and blending the photography/art into the back ground. I'll then take the original sized image I picked and place it over top of the background. Placing the image where I think it would look best on the base, I then use the eraser tool (e) to cut down the sides giving the picture a focal point. Also positioning the part of the picture I want to see on the base.

Playing with a few blending options on the layer pallet I got my image to blend down pretty well so it looks as if it has always been a part of the background. I used the Hard Light option from the drop down menu. This bended my image down pretty well and this is what I have it at now:

Ok on to doing some effects and text on the base. We'll have to open a brand new document to do some of the effects but that's ok. I'm sure you remember our dimension for the signature base? 600 w x 100 h? We'll be opening 2 new documents. One that is 600 w x 25 h and one that is 600 w x  75 h. White or transparent background. Doesn't matter.

We'll work with the 600 w x 75 w file first. The boarder that we made for the last image can be reproduced for this as well. :) We'll do the 3 strokes again, only opposite colors this time, one black (Inside), one purple (Outside), then one black again (Outside). We'll put this aside for a moment until we get back to the base signature. Mine looks like this:

Ok picking up the new document we made with the smaller dimensions. Pick up your move tool (V) and go to the thinner document. Drag and drop this onto your signature. And let it snap into place at the very top and sides of the signature.

Remember the dancing ants trick with the layers? Yep we're going to do it to our top layer of the image to get a selection of it.

Now comes a bit of fun. With that layer selected, select your other layers and press delete. On each of the layers. You should get a transparent effect with the other layers being delete. Hit ctrl + D to deselect the dancing ants and you should have this. Pretty cool so far. The transparent layers means you can now see things behind it. Like the colors of the forums giving an added effect of it being part of the background.

Now remember that boarder we put away for later use? Time to bring it out and into play. You can drag and drop it onto your background like you did with the bar to be deleted. And once it is there snap it into place aligned with the bottom of your picture.

I'm not liking the boarder around the picture so I'm going to change it to just how it is on the avi. Purple then black then purple. It seems the black doesn't stand out too well on the background. This is fine I still have the original boarder I made in the other document so it's a quick change/fix.

Much better. The boarder stands out a bit more. Now let's put some text on it. I'm still digging this Disney font so we'll be using it again this time. I placed my name on the signature again. Just testing how things would look right now. Also placing a few other text on the signature to be cut up as buttons later. Remember to not make things so small or cluttered that you can not read things. If you can't read it yourself chances are other people won't be able to either.

My old signature had 5 buttons for Ons/Offs, Characters, Game Ideas, Games I play, and Apologies. Some of that signature pointed to the same place so we're going to just ditch them and combine them under the ons/offs listing. A link to my Idea thread, and then one to my apologies. Going to keep it rather simple so as to not clutter the signature. Keeping it clean is a good idea.

After seeing what everything looks like. It seems that having my name on the signature looks way out of place. I can simply select that layer and hit the trash can at the bottom of the layer pallet.

This also poses a problem of the unneeded transparent sections. Not an issue we can solve this with a slight modification. First what you want to do is merge your layers down to a flat image. Layers> Merge Visible or Ctrl + shift + e.

Using the document we used for the boarder we can fill in that with white and use it just like the delete trick. Only we'll be copying the signature into a new document to fit the correct size. Once you have moved your white bar over to the signature you can ctrl + click the layer to get your selection.

Once you have the dancing ants turn off the top layer and select the bottom layer. Hit ctrl + c, ctrl + n, enter, then finally ctrl + v. Voila we have our signature in the new correct size.

From here you have a finished Signature.


Step Five: Finishing off your signature.

Cut up your finished signature into something you can use as buttons for the links you want to have go places. This is what my buttons look like when I'm all finished.

Once you are finished with all the steps you should now have a working avatar and signature set. From here the tutorial Caeli has done should help you with being able to upload your images to the wiki and then posting them in your signature. The forum post for this can be found here:


Photoshop Keyboard Short Cuts For Photoshop CS:
Free Fonts:

Note: Original Signature/Avatar image is from here: The model's name is Tita it would seem. Originally found on a random tumblr web site.

I did not change it to black and white, I found the picture that way.