The modern signature line of online forums has become a space not only for witty quotes, but a space for digital artists to display their latest works. I’m not sure what the original intent of having a flash graphic in a signature line was, but there are a number of reasons why they are included. Some use them to more easily locate their posts in threads; a ‘calling card’ if you will, others wish to show off their artistic ability, others do it because everyone else is.
Whatever your reasons, there a numerous ways to get your own signature image. The most satisfying way is to simply make one yourself. In this article, I’ll show you some of the basics of digital imagery and set you on your way to making a great signature image.
WHAT DO I USE TO DO THIS?
The first and most important step in digital imaging is a digital imaging program. The two most popular programs available are JASC Paintshop Pro, and Adobe Photoshop. Both programs are moderately affordable, and are a worthy investment. While the full version of Photoshop can run upwards of $500, you can buy ‘lite’ versions for considerably less. If you wish to try either program, trial versions can be downloaded both companies’ websites.
Adobe Photoshop (you want to download the Photoshop CS tryout)
Paint Shop Pro (you want Paint Shop Pro
THE BASICS
I’ll be writing the rest of this article referencing Photoshop, because that’s what I use. While Paintshop and Photoshop are different programs, the same basic techniques can be applied to both.
The most important element of a digital image is its resolution, or size. Basically, more pixels are better. The following image demonstrates the concept of resolution. Image 1 was originally the smallest, about 20 by 20, stretched to fit in the space. Image 2 was a little larger, 50 by 50. Image 3 was larger still, maybe 75 by 75, and image 4 is at its normal size, 100 by 100 – not stretched at all. (I didn’t need to write this, but I wanted an excuse to post a picture of the beautiful Keira Knightley :-) )
Now, the size limit for signature images here on ArmoramA is 75 high by about 550 wide. The limit for file size is 30kb. This usually isn’t a problem for images with a pixel resolution of less than 75 x 550. However, if your image does exceed 30kb you can adjust image quality when you save your file. The higher the quality, the larger the file.
The next important thing when using Photoshop is the concept of layers. This simply means you can have image A appear on top of image B, but edit either without affecting the other. Think of good ol’ cell animation. On the animation plate there are a few layers. The Background, usually an environment (living room, store, martian planet, etc.), on top of that layer is the character(s), and on top of that is anything in the foreground (say a character is standing behind a table).
At this point, I know what you’re thinking, “Quit your babbling you young college punk! Just tell me how to make a darned signature image!” Eh, I must comply….
MAKING YOUR SIG IMAGE
The first thing I do when creating a graphic signature is find my source images. This may consist of finding pictures on the internet, scanning them in from printed material, or if I feel lucky, creating them myself. For this example, I’ll use my favorite signature creation based on the computer game Homeworld 2.
The above signature was created using only three images (shown below at a reduced size), blended together in fancy fashion.
First, I created a new image file, choosing a resolution of 950 by 300 – twice what the image’s actual size would end up being. I usually make blank image bigger because it is easier to work with that way. When I’m done, all I need to do is change the pixel dimensions.
My background image for my signature is the top half of image 2, so I loaded up image 2 and cropped it to what I wanted to use. Then, find the ‘select’ menu on the top of the screen and click ‘all’. Now, go up to the top menu and select ‘edit’ and ‘copy’. Then, load up the newly created 950 by 300 image and hit ‘edit’ and ‘paste’. There you have your background! NOTE: Each time you paste a selection into a new image, that selection becomes its own layer in the image. For the other two images (1,3) I used the eraser.
In image 1 all I wanted to use was the blue frigate. So I carefully erased everything else around the image so the only thing left of the picture was the frigate. Now, select the magic wand tool and click anywhere on the empty space around the frigate (where you just erased). What the magic wand does is select every connected pixel of the same color. Now you see the ‘marching ants’ around the perimiter of the image and around the frigate. Since the frigate is a different color from the now non-existant background, it is not selected. But wait, we want the frigate to be selected! On the menu bar in Photoshop there is a column that is labeled ‘select’. Click on that and choose ‘inverse’. Congratulations, you’ve just selected the frigate! Now, go up to the top menu again and select ‘edit’ and ‘copy’. Switch back to the image where you pasted the explosion background and hit paste. Boom! You’ve got a frigate in front of the explosions!
Repeat the process in image 3 with the schematic. Now, you’ve probably noticed that the schaematic is slightly tansparent. This is a really easy effect to do. Find your layers palate (see image) and select the layer with the schematic on it (all you need to do is click). Now look at the upper right corner of the layers palate – see the button that says ‘Opacity : 100%’? You can lower that number all the way to 0, but for now 75% will do. There you go, a see-through schematic!
To get the text across the top, all you need to do is use the rectangular marquee tool. Select what you want to copy and when you have what you want, do another round of ‘edit’ – ‘copy’ – ‘edit’ – ‘paste’. There you go, text! You may need to adjust placement of the pasted elements in the new image; you can do that by using the move tool.
OK, so you’ve got everything you want in your signature image where you want it. What now? Save your image as a Photoshop document (which I hope you’ve been doing every five minutes or so). Go up to the ‘layers’ area of the menu bar and when you bring that up you’ll see ‘flatten image’ waaaaay at the bottom. Flatten the image. (what this does is get rid of the ‘layer’ info that image files in Photoshop format keep. The ‘flat’ image allows the file to be saved as a JPEG). Before you save your image you need to resize it, remember? On the menu bar, click ‘image’ and ‘image size’. Simply reduce the pixel dimensions to what it needs to be; in the case of the Homeworld image, 150 by 450.
Now you can save your image in JPEG format and post it online. You’re done!
Your sig image can be as simple or as complicated as you want it. This how-to post is merely the tip of the huge iceberg that is graphic design, and only a scratch on the surface of what Photoshop can do. I’m not the best teacher, but if you’ve got some questions, post away and I’ll do my best to help.
I will also note that this article is 300 words longer than anything I wrote for my college composition course. Go figure.
For some good imaging tutorials, visit this website:
http://www.spoono.com/
Any questions? Post away!
YM
