Signature Tutorial

Here's a basic tutorial on how to make nifty icons for your signature on a doll-related forum. ^_^ This tutorial will guide you through making a doll icon in Photoshop CS, as well as Photoshop 7.0 whenever possible.  It's not as complicated as it seems; I just go into a lot of detail, probably more than you need.  Pick and choose what you need to know.

Please note, there are many different ways to get to the same result, and I am not going to try and include all of them.  Experiment, see what works best.  This is just one way to get to one result.

Part 1: The Basics
Gathering Materials
Creating a New Picture
Inserting the Name Icon
Inserting the Photo
Sharpening the Image
Arranging Layers
Save

Part 2: The Name Banner
Introduction
Creating the Blank Name Icon
Cleaning Up the Layers
Creating Letters for the Name Icon

Part 3: Gradients and Blending Mode
Introduction
Gradients
Blending Mode

Part 4: Saving the Finished Pic
Introduction
Saving as a GIF
Saving as a JPEG
Uploading to the forum as a Signature

PART 1: THE BASICS

GATHERING MATERIALS

If you want to create something like this:

...you're in the right place.

First and foremost, I did not make the bottom part of the icon, the .  I snagged it from this site: http://kdicons.lil.to/. 

If you can't find it there, then try this page: http://www.denofangels.com/forums/showthread.php?t=5885

Once you've found and saved the icon onto your computer, you next have to make certain you have ready the photograph of your doll which you want to use.

So to finish the step, open up both the icon and the photograph you want to use.

CREATING A NEW PICTURE

With all necessary materials open, we'll move on.  For the moment just leave them as-is.

Go to File -> New at the top of the screen.  You'll get a few options.  (see below)

1)	WIDTH: The width of the icon is 61 pixels, so match that.
2)	HEIGHT: I chose a height of 80 pixels.  If you want a taller banner than mine, add on another 10 pixels or so.
3)	RESOLUTION: Resolution should be 72 pixels.
4)	COLOR MODE: Make sure "Color Mode" is set to "RGB Color" and not "Grayscale."  "CMYK Color" should work, too.  I haven't experimented with the rest of the options.
5)	BACKGROUND CONTENTS: Honestly, you're going to be completely covering up the background, anyway, so it doesn't matter what this is set to.  Personal preference, I choose "White" or "Transparent."

WARNING: On Den of Angels, the forum allows a maximum height of 75 pixels and a width of 300 pixels for picture banners . If creating your banner for that forum, please take this into account, or risk having your doll signature deleted!

TROUBLESHOOTING: These boxes look slightly different between Photoshop CS & 7.0.  "Background Contents" is just "Contents," and "Color Mode" is "Mode" in 7.0.

PHOTOSHOP CS

PHOTOSHOP 7.0

Click "OK" and you should have a small, blank picture.

INSERTING THE NAME ICON

Now, remember those pictures you opened up before?  Yeah, those.  Go to Window at the top of the screen.  All the documents you have opened should be listed at the bottom of the menu. 

TROUBLESHOOTING: If they aren't listed, you might have an earlier version of Photoshop.  In Photoshop 7.0, the documents are hidden.  Go to Window -> Documents.  They're at the bottom of the menu.

Photoshop CS

Photoshop 7.0

Open up the icon.  Then click on Rectangular Marquee Tool on your Tools palette.   Select the entire icon with it.  Copy it.  (Edit -> Copy, or right-click and select "Copy," or use the shortcut command Ctrl+C)

Open up the blank document you made in Step 2.  Paste the icon in the document.  Now click the Move Tool on your Tools palette, so you can move that icon around.  Align it with the very bottom of the the picture.  You can either use the mouse or the arrow keys on your keyboard for this.

For greater accuracy, you can zoom in by selecting the Zoom Tool and clicking where you want to zoom in.  Pressing Alt on your keyboard at the same time will cause it to zoom out rather than in.  It's a handy shortcut.  Otherwise, the only way to zoom out is to right-click and select "Zoom Out," which gets annoying.

Your picture should look something like this:

INSERTING THE PHOTO

Open up the photograph of your doll that you're using.  Use the Rectangular Marquee Tool to select the portion of the image which you want to use in your icon.  Don't worry about being too precise; just make sure you get everything you want.

Now copy.  Go back to your almost-blank document and paste it.

If you're like me, the photo is HUGE, way beyond the scope of the icon.  To remedy this, go to Edit -> Free Transform.  By selecting Free Transform, you will be able to manipulate, and more importantly, SHRINK your massive doll picture. 

A solid line will surround your picture.  On each corner, and right in the middle of each side of your picture, you will see a little square.  If your picture is bigger than the screen, you may not see all of these little squares, but maybe only one or two.

BEFORE SHRINKING IT, click this little icon on the toolbar at the top:   See that icon in the middle, which looks like two chains linked together?  This will prevent you from making your doll too skinny or too fat. ^^;  If you can't find that little chain icon, the other method is to simply keep holding the Shift key on your keyboard while re-sizing the image.

Now, to actually shrink the image, select that corner square and drag it down, making sure that at least part of the boundary line of the image is still on-screen.  Then drag the image up a bit more on-screen again by clicking anywhere in the middle of the picture - your mouse will turn into an arrow-key icon - and repeat as necessary until the image is small enough.

Alright, shrink away until you're happy with what you see.  If it looks like the face fits, turn off the "Free Transform" by clicking any other tool on the Tool Palette.  You'll get a little dialogue box asking, "Apply the transformation?"  If you're happy with it, click "Apply."  If you wanted to fiddle with it some more, click "Cancel."  If you hate it and want to start over, click "Don't Apply."

SHARPENING THE IMAGE

After being shrunk so much, your doll photo is going to be a bit fuzzy looking.  Kind of like this:

It's not BAD, and I know some probably prefer it that way.  If you think  your image is perfect, this step can be skipped.  But I love crisp, clear images.  To make it clearer, go to Filter -> Sharpen -> Sharpen.

It will look like this:

If you want greater control over how much (or how little) it sharpens, then go to Filter -> Sharpen -> Unsharpen Mask.  This will let you control how much or how little the picture sharpens.

ARRANGING LAYERS

To finish this off, you may have a little adjusting to do.  Make sure the icon is on top.  Or rather, that it looks like this:

If the icon isn't on the bottom of the picture, then you're like me and pasted the photo in front of the icon.   To fix this, we must drag the icon in front.  If the Layer palette isn't open, go to the menus at the very top and click Windows -> Layers.  This will bring up the Layers palette. 

On the layers palette, click on the Layer of your doll photo and drag it just below the Layer of the icon.  Now it should be correct.

SAVE

Save it as a Photoshop (.psd) file so that you can adjust it later (like, say, changing the photo to a different one at a later date).  You now have an icon! 

To create the banner on the top of the picture as well, as pictured here:

...continue on to PART 2.  For some other nifty tricks, see PART 3.  Otherwise, to see how to save for use as a signature banner, go to PART 4 .

PART 2: THE NAME BANNER

INTRODUCTION

For PART 2, I am assuming you know, understand, and have applied PART 1, and any new concepts have been learned.

At this point, your doll signature icon should like something like this:

If the Layers palette isn't open, then open that as well.  You'll need it a lot for this part.

Unfortunately, I have yet to find a blank icon.  In this part, I will teach you how to turn this: into this: . 

CREATING THE BLANK NAME ICON

To start, click on Layer of the icon.  Zoom in until the edges are clear and large.  I generally go to 500-600%.  Now click on Rectagular Marque Tool and select one corner.  Do NOT get any of the lettering, and be as precise about the edges as possible!

Copy & paste the selected area.  Select the pasted corner and drag it to the top of the picture.

Paste again, and drag it to the other corner, opposite the first pasted section.  Then go to Edit -> Transform -> Flip Horizontally at the top of the screen to flip the image the correct direction.  it will look like this:

Alright, both corners of the new banner are made!  Time to make the middle!  Instead of selecting a corner of the icon, select part of the middle.  Not the text; the white parts to the side.

Copy and paste.  Place it at the top of the picture so that it just overlaps the edge of a corner.

Paste again, place it, and repeat until the top is a solid banner.

CLEANING UP THE LAYERS

This step is completely optional.  You have a solid banner!  Time to clean up the Layers a bit.  Right now, because of all the pasting you've been doing, you're going to have a lot of layers.  I've named the layers to make it a bit more obvious which part is which.

Really, all those Layers just have to be one single Layer.  So, select all the Layers which make up the icon by holding down Shift on the keyboard.  Holding down Ctrl also works; you'll just select a layer at a time.

Once all the icon Layers are selected, go to the top to of the Layers Palette and click on the little arrow/triangle next to the word "Layers."  This will bring up a menu of choices.  Select "Merge Layers."

CREATING LETTERS FOR THE NAME ICON

I'm sure you want to put some kind of word in that nifty banner we just made, right?  I wish I had a shortcut here, but if they're using some particular font, I have yet to find it.  For lack of a better procedure, I do the following.  It's tedious, but it works.

Go back to http://kdicons.lil.to/, where you got the icon in the first place.  Find banners with the letters you want, save them, and then open them in Photoshop. 

Use the Rectangle Marque Tool to select the letters you want and copy and paste them into your doll icon.  Line them up at the top, over the icon.  Leave only a space or two inbetween letters (depending on the length of the word you're making and personal preference).

Ta-da!  It's a word! ^_^  If you want, you can merge the letters together.  The picture should look like this:

Save!

PART 3: GRADIENTS AND BLENDING MODE

INTRODUCTION

Take this simple scenario:  You have the basics done...

...but would like to add a nifty color-change effect.  This is where Gradients and Blending Mode comes in.

GRADIENTS

We'll experiment a little.  Create a new layer, and make sure the Layer is the first listed at the very top of the palette.  Then click on Gradient on the Tools palette. If it isn't shown, it's under the Paint Bucket Tool:

You'll get this toolbar at the top:

In terms of the basics, all you really need to know are two things:

Once you're done experimenting with transparency and color and are ready to put a gradient on your blank Layer, click on the picture where you want the gradient to begin, and drag the line which appears to where you want the gradient to stop.

For my example, I began at the upper left corner, and ended at the lower right corner.

Congrats!  You have a gradient! ^_^

BLENDING MODE

If it isn't already open, open up the Layers palette. 

You will be using two things here.  First is Blending Mode.  Blending Mode is the drop-down box in the upper left corner of the Layers palette.

Second is the Opacity box right next to it.  It dictates how opaque the layer is. 

The Blending Options are as follows:

Each one has a different effect, and I highly suggest playing with them using different colors and settings, as it can make a world of difference.  They're an easy way to create a nifty effect on any picture! 

Here is an example of their effects.  I have also included examples of how opacity can change the settings, too.

	Normal	Dissolve	Darken	Multiply	Color Burn	Linear Burn	Lighten	Screen
Opacity 100%
Opacity 50%
	Color Dodge	Linear Dodge	Overlay	Soft Light	Hard Light	Vivid Light	Linear Light	Pin Light
Opacity 100%
Opacity 50%
	Hard Mix	Difference	Exclusion	Hue	Saturation	Color	Luminosity
Opacity 100%
Opacity 50%

PART 4: SAVING THE FINISHED PIC

INTRODUCTION

Saving a picture.  Seems simple enough, doesn't it?  However, there are hidden pitfalls to watch out for.

Go to File -> Save for Web to save any files that will be used on a website.  This will cut down their size, and allow you to preview how it looks beforehand.

It will bring up a large dialogue box with lots of options.  This can be indimidating at first, but is worth it to learn.  Experiment with the settings, see what they do.  Maybe research on the internet what different terms mean and how they change the picture.

There are 5 different ways to save a picture, or rather, 5 formats: GIF, JPEG, PNG-8, PNG-24, WBMP.  For this tutorial, I will go over GIF and JPEG.  Feel free to experiment with the settings on the other 3.

If you have parts you want to be TRANSPARENT, then use GIF format.  If your picture won't be transparent at all, then either choose GIF or JPEG, depending on personal preference.

SAVING AS A GIF

GIF files allow part of the picture to be transparent.  No matter what the background, the parts of the picture you want to be transparent will be transparent.  Like this:

GIF has a number of different options, some of which I know, and others I don't.  I will go over the ones I commonly use.

Now that your settings are chosen, save it!  Click "Save."

NOTE: If you have a "background" to the picture - like a white background, which is typical of Photoshop - then you will need to DELETE it to save the background as transparent.  Cancel out of the Save to Web box.  Go to the Layers Palette, and in the bottom right corner, you'll notice a little trash can .  Drag the Background layer onto this to get rid of it.

SAVING AS A JPEG

JPEG is used for most square pictures, ones without transparency in them.  Like you see below, they cannot be saved with transparent edges.  However, depending on the settings you use to save, they can be smaller in file size, and the color palette isn't restricted to a certain number of colors, unlike GIF.

JPEG has fewer options than GIF.

UPLOADING TO THE WEB

To upload for use as a signature, first you must have a place on the web to store the picture. 

Go to Den of Angels.  Sign in (if you aren't already) and click on User CP in the top left corner.  Then click on Edit Signature on the left side menu.

Method 1:	If you are using your own website, make sure you know/have copied the link, then click the icon to insert a link to the picture.  Click "OK" when done typing in the link.  Done.  Click "Preview Signature" at the bottom to make sure it worked.
Method 2:	If you are using Photobucket, you can just copy the link they provide.  They typically provide 3 formats to copy the link.  Choose the bottom one, IMG.  Copy that.  Paste it into your signature; DO NOT use the icon to do it.  Done.  Click "Preview Signature" at the bottom to make sure it worked.