SIGNATURES, How to make them...

[GreenBean-HH-]

SIGNATURE INSTRUCTIONS,
How to make them...

Signatures, commonly referred to as Sigs, are a great way to capture your personality and help identify your posts to others. It's also a great way for you to find your posts as you will recognize your sig. Instructions for making screen shots from your game can be here: Screen Shots which can become base images for this tutorial on Signatures.



GENERAL IMAGE USE:
_________________________________________________
NOTE: HackHunter Sigs may not be larger than 576w x 144h.
This translates to 8 inches wide [at 72 dots per inch (dpi) that equals 576 pixels] x 2 inches high (at 72 dpi that equals 144 pixels).

_________________________________________________
HOST YOUR IMAGE:
In order to post your signature on a forum, you will need to find a server that will host the image. This is so the forum doesn't have to actually store hundreds or thousands of images themselves. Remember, these are public places and anyone, although unlikely, will be able to not only see your image but will also be able to use them.

A great free service is PhotoBucket
It's very easy to join, just click on the JOIN NOW button.

What is especially great about this service (and many services) is they provide the text you will need to post your image on a variety of websites like: Email & IM, Direct Link,, HTML Code and IMG code.

Other services include:

• ImageShack
• TinyPic (Images & Videos) (small url text tags supposedly)
• Kodak Gallery
• Picture Trail
• Slide
• PB Base
• If you Google Search 'Photo Hosting' it will provide additional results.

Note: Use at your own risk. If a service is found to have obscene images hosted, let us know so that we can remove their link.

_________________________________________________
A WAY TO USE IMAGES WITHOUT HOSTING THEM:
Any image you see posted on the web you can also use unless there is a copyright issue. Generally speaking, images related to gaming are available to everyone as the images are of the game itself and not something created by an individual or company. If you see an image you'd like to share quickly, just RIGHT CLICK on the image and select OPEN IMAGE IN NEW WINDOW, look at the top url that is displayed and copy it. Then, look at our instructions on how to POST AN IMAGE below. That's it, your newly found image will be displayed.

The only downside is that the image might be removed by the original user or even switched to something else.

_________________________________________________
HOW TO POST AN IMAGE:
POSTING A SIG: Go to your profile > Modify Profile > Forum Profile Information and click. Scroll down to: Signature: You will see this message or something like it plus a text box:
"Signatures are displayed at the bottom of each post or personal message. BBC code and smileys may be used in your signature."
Put in your url information for your sig following the instructions below.


OPTION 1: Generally speaking, you just add [****img] at the beginning of the images url and [/img] at the end leaving out the **** from the tag.

OPTION 2: When making a post (reply or new post) you type your text in a box... above this box are buttons that allow you to modify your text. Typically there is a button to add an image. You can 'mouse over' these buttons to see which one is for 'INSERT IMAGE'. When you click on it, it will either add [****img][/img] tags to your text box or bring up a dialogue window where you can type in the url of your image.

OPTION 3: If I go to my PhotoBucket page: http://s302.photobucket.com/albums/nn83/arc362/
All I have to do is click on the 'IMG CODE' and it copies the correct 'img' tag information as well:

[****IMG]http://i302.photobucket.com/albums/nn83/arc362/brit-avatar.jpg[/IMG].

The result, leaving out the **** produces this:


To check to see if in fact it is the same code minus the 'img' tags, just RIGHT CLICK on the image and select OPEN IMAGE IN NEW WINDOW, look at the top url that is displayed, they are the same.

REMINDER: all images end in either .jpg, .gif, .png, .bmp or other image format. Make sure at the end of your url one of these, and the correct one appears. Also, you should note that if there are any mistakes in the url the image will not display and you'll get something like this: . If this is the case, check and revise the url until it works. Sometimes I will just start over as there might be an extra space or extra bracket ]][ or something that is hard to see.

_________________________________________________
HOW TO ADD A LINK TO YOUR SIGNATURE:
You can add a link to your signature by adding [****url=http://www.website.com][***img]image url[/img][/url] without the ****.

_________________________________________________
HOW TO ADD MULTIPLE SIGS:
Quite simple, just add one img string, hit return once or twice (if you want a space) and then add another img string for a different image.

[GreenBean-HH-]

IMAGE PROGRAMS TO MAKE SIGS:

PhotoShop, Adobe, comes with ImageReady: http://www.adobe.com/products/photos...?promoid=BPDEK

PS Elements, Adobe, ±100.00 USD: http://www.adobe.com/products/photos...?promoid=BPDEM





If you know of any other programs, please post them (with link & cost) and I will add them to this list.

[GreenBean-HH-]

MAKING A SIMPLE SIG: PHOTOSHOP

STEP 1: BASE IMAGE:
I created this base image with a screen shot using XFire (Instructions Here), then made a screen shot of the xfire image that I could open in Photoshop. It is a png format and is 365 kb file size:


_________________________________________________
STEP 2: ROUGH IMAGE EDIT:
I removed the refrigerator by copying part of the wall to its left (select, copy, paste, transform, flip horizontal, blend), by flipping this pasted piece the lighting will match. I then blended out any odd patterns using the Clone Stamp tool. Last I slightly cropped it. It is a png format and is 293 kb file size:


_________________________________________________
STEP 3: ROUGH CROP:
I cropped it down to what I think is a good proportion for a sig... long and short. It is a png format and is 113 kb file size:


_________________________________________________
STEP 4: ROUGH ENHANCEMENTS:
Here I make adjustments to enhance the effect I'm looking for.

• FileMenu>Image>Adjustments>ColorBalance>Blues
• Select/Copy/Paste image to new layer: FileMenu>Image>Adjustments>Brightness/Contrast>Dull new layer>Erase soldier part to show soldier under layer >
• FileMenu>Layer>MergeDown (merge both layers)

It is a png format and is 109 kb file size:

_________________________________________________

STEP 5: REFINEMENTS:
Further Adjustments, feel free to experiment.

• Using the circle select tool I draw a circle around the head area >
• Go to FileMenu>Select>Inverse>
• Go to FileMenu>Select>Feather>3 pixels
• Go to FileMenu>Filter>Blur as you desire;
• Go to FileMenu>Filter>Texture>Texturizer just for the sake of something different.

I also reduced the height from 150 pixels down to 110 to compress the action (FileMenu>Image>ImageSize)... when you do this don't change the width (turn off Constrain Proportions). It is a png format and is 132 kb file size:

_________________________________________________


STEP 6: TEXT:
Add text. You can select the text copy/paste it to make shadows, or to alter the background image. There are lots of options. It is a png format and is 132 kb file size:


_________________________________________________
STEP 7: FILE SIZE:
Go to FileMenu>File>SaveForWeb... I was able to reduce this to only 32 colors significantly reducing the file size by 100 kb's and you really can't tell the difference between step 6 and step 7. GIF format, 36 kb file size:


To HOST your newly made sig, just scroll to the top of this thread and locate HOST YOUR IMAGE instructions. Good luck.

[GreenBean-HH-]

ANIMATED SIG, How To Make One:
Using PHOTOSHOP & IMAGE READY

_________________________________________________
STEP 1: BASE IMAGEs:
I start with these two images, they both have the same width. For this animation example do not crop the height on the larger image.

'SOLDIER'

'RUINS'

_________________________________________________
STEP 2: SET LAYERS:

• Go to the second image and select all, copy.
• Then return to the smaller image and paste.
• The larger 'Ruin' image layer should be on top of the 'Soldier' layer.
• If you like, you can use the nudge tool you can move the 'Ruin' layer around, or turn it off to see your base layer.
• Return the 'Ruin' layer to its original pasted in position.

_________________________________________________
STEP 3: MODIFY 'RUIN' LAYER:
With the Erase Tool with 100 brush size set at 30%, erase the area that would cover the soldier as we want him to show throughout the animation... you can further erase but leave some parts of the 'Ruin' in this area. Don't touch the rest of the image. You'll have to nudge the image down to get other parts. Be sure you are on the middle layer.


I am showing three layers, you only need two.

_________________________________________________
STEP 3: ANIMATION IN ImageReady:
Within PhotoShop, go to FileMenu>File>Edit In ImageReady. This automatically launches and imports your file into ImageReady. You should see 3 things: A-your image; B-layers palette; C-animation window at bottom.

Notice the RED #1, this should be set to '0'. Red # 2 is the 'FRAME' button we will use to add frames to the animation in the next step.



_________________________________________________
STEP 4: ANIMATING:
What I will show you is how to fade in and fade out an image. I will also show you how to make the same image 'move'. With these two effects, there is a lot one can do. For instance, you can start slow and increase the speed of an image, you can fade in your name, you can use multiple images, etc. Just don't over do it as there is a limit on how big your GIF's can be.

• Turn off the top layer.
• Click on the FRAME button to create another frame in the animation window.
• Turn on the top layer setting the transparency to 20%.
• REPEATING STEP 1: Click on the FRAME button to create another frame in the animation window.
• REPEATING STEP 2: Set the top layer setting the transparency to 30%
• REPEATING STEP 3: Using the nudge tool (with it selected) and using the the arrow keys, hit the up arrow key 12 times.
• Repeat the 'Repeating steps 1, 2 & 3' adding 10% opacity and 12 'nudges until you reach 100% opacity.
• Add 3 extra frames with 12 nudges each to keep the animation moving.
• Now, while still nudging 'UP', start to decrease the opacity by 10% for each frame until you reach 0%.

_________________________________________________
STEP 5: FINAL ANIMATION STEPS:
Using the bottom scroll bar in the Animation Frame window, slide it all the way over to the left and click on frame 1. At the RED 1 as noted above, set the time to 5 seconds. At this point you can click on the PLAY button and make adjustments to the timing, add a name or whatever you like. You can also return to PhotoShop to edit but be sure you leave the layers on or off as they were when you entered PhotoShop. You can also add extra frame, remove frames, adjust frames until the animation looks good. Remember it will play smoother online than within ImageReady.

_________________________________________________
STEP 6: SAVING YOUR ANIMATION:
Return to PhotoShop. FileMenu>File>Edit In PhotoShop. Go to FileMenu>File>Save For Web.... Select GIF (3) and 128 colors (4). Click on Save, name your file and select it's destination.

NOTE: You will only be able to see your animation once it is online, it will not 'animate' on your desktop. I think you might be able to e-mail it to yourself to see it (Mac Mail works).


_________________________________________________
STEP 7: ENJOY, YOU DID IT!:
And it wasn't even that hard to do.



Wait 5 seconds for it to start!

[GreenBean-HH-]

MORE EXAMPLES:
In the first example, one can make a separate animation and put it into a stationary sig frame.

MAKING AN ANIMATION FROM A .mov FILE:
You can use a QuickTime MOV file, save as..., saving to 'single frames in a new folder' at 15 fps, giving you the separate layers you'll need to make an animation. Examples:

_________________________________________________


<Base | To make this:

It's important to cut out unnecessary frames to reduce file size. In this sig example I cut too much out.

_________________________________________________
Other Examples:


THE RESPAWNER


TWO STEP DANCE


WHAT NEXT


RAT A TAT TAT "Hey mister, ur outta bullets!"

[GreenBean-HH-]

Inspiration...

http://www.youtube.com/watch?v=9TCsA...eature=related

http://www.youtube.com/watch?v=5F2kj...eature=related

http://www.youtube.com/watch?v=7IrMG...eature=related


Tutorials...
You can also find many tutorials on YouTube for making sigs.

http://www.youtube.com/watch?v=32EMn...eature=related

[andy186]

Painthsop Pro-$79.95 USD

Adobe Fireworks-$299 USD

[breault]

Gimp:free
Paint:free(i know paint is bad enought but i used it for my sig

[GreenBean-HH-]

Cool, thanks for the heads up on this... here&#39;s some more info on CIMP:


Free Imaging Program: GIMP


http://www.gimp.org/

GIMP is the GNU Image Manipulation Program. It is a freely distributed piece of software for such tasks as photo retouching, image composition and image authoring. It works on many operating systems, in many languages.

It has many capabilities. It can be used as a simple paint program, an expert quality photo retouching program, an online batch processing system, a mass production image renderer, an image format converter, etc.

GIMP is expandable and extensible. It is designed to be augmented with plug-ins and extensions to do just about anything. The advanced scripting interface allows everything from the simplest task to the most complex image manipulation procedures to be easily scripted.

PLATFORMS:
GIMP is written and developed under X11 on UNIX platforms. But basically the same code also runs on MS Windows and Mac OS X.


_________________________________________________
Painting

Full suite of painting tools including Brush, Pencil, Airbrush, Clone, etc.
Sub-pixel sampling for all paint tools for high quality anti-aliasing
Extremely powerful gradient editor and blend tool
Supports custom brushes and patterns

System
Tile based memory management so image size is limited only by available disk space
Virtually unlimited number of images open at one time

Advanced Manipulation
Full alpha channel support
Layers and channels
Multiple Undo/Redo (limited only by diskspace)
Editable text layers
Transformation tools including rotate, scale, shear and flip
Selection tools including rectangle, rounded rectangle, ellipse, free, fuzzy
Foreground extraction tool
Advanced path tool doing bezier and polygonal selections.
Transformable paths, transformable selections.
Quickmask to paint a selection.

Extensible
A Procedural Database for calling internal GIMP functions from external programs as in Script-fu
Advanced scripting capabilities (Scheme, Python, Perl)
Plug-ins which allow for the easy addition of new file formats and new effect filters
Over 100 plug-ins already available

Animation
Load and save animations in a convenient frame-as-layer format
MNG support
Frame Navigator (in GAP, the GIMP Animation Package)
Onion Skin (in GAP, the GIMP Animation Package)
Bluebox (in GAP, the GIMP Animation Package)

File Handling
File formats supported include bmp, gif, jpeg, mng, pcx, pdf, png, ps, psd, svg, tiff, tga, xpm, and many others
Load, display, convert, save to many file formats
SVG path import/export

Much, much more!

[slaygirl]

I know my signature is not very professional lool but if you want to make an animated signature (Gif File) then check out this website: http://gifmake.com/
Just upload all your pics and generate and voila an animated signature. I use this website for making all kinds of Gifs

[Psych0]

Well, I like your signature...

Thanks for the link :P .

[GreenBean-HH-]

Thanks Slaygirl,

we're going to move your post to our tutorial section on how to make sigs. I think it looks like a great tool for those who don't have photoshop or imageready. Thanks. bean.

btw, nice sig, like the avvie too

[slaygirl]

Yea Im a noob when it comes to Photoshop lol I tried it once and it was too dam complicated

[GreenBean-HH-]

I know what you mean, that&#39;s why we posted a pretty simple to follow tut.

For more advanced Tutorials, check out some of these HERE

_________________________________________________
Top Sig Sites:
http://www.topsigsites.com/

[ocgsx]

Thanks! This helped a lot!

[GreenBean-HH-]

Nice Sig ocgsx, glad this helped and ty for letting us know

[FS-Jarhead755]

Hey everyone, When you have more then one sig. This may help till you learn the programs. www.gifninja.com Can load up to 5 at one time.

[GreenBean-HH-]

this site is pretty cool. just upload a photo and it&#39;s apply some graphics effects.

http://www.befunky.com

[GreenBean-HH-]

here&#39;s a photoshop tutorial i found over at ACI Inc. that is more about experimenting in photoshop than anything else, but this guys artwork speaks volumns about how effective his line of thinking is.

Thread post by TorrentThief: http://www.anticheatinc.net/forums/s...t=40061&page=5

Check out his 3 EASY STEPS to improving your photoshop work, and then check out the beginning of that thread.