Welcome Guest ( Log In | Register )

> Intro 2 Graphics & Animation, Need Help? Post It Here!!
Rating 5 V
post Mar 4 2005, 11:40 PM
Post #1

Upstanding Citizen
Group Icon

Group: Gold Member
Posts: 9
Joined: 5-July 06
From: The Internet
Member No.: 19

Last Update: 25 July 2005. Minor update, corrected some links
Edit 22/12/2006: Since this is quite old some information such as system requirements and links may not be correct however most of the information should still be relevant

1st section by Nanook

Before you ask a question, you should look in this thread, AND!


IPB Image
This is for all the people who want to get started in image creation but don't know how, you can also use it to look up a certain aspect you need help with.

1. Getting Started
2. What To Use?
3. Creating First Image
4. Fonts
5. Hosting
6. Animation
7. Creating First Sig
8. Which Format?
9. Advice From Members


1. Getting Started
So you want to create some cool images like the sigs you see on this site, the first step is to make sure your computer can handle the applications. The two main applications that are used are Adobe Photoshop (PS) and Corel Paint Shop Pro (PSP) which was formally known as Jasc Paint Shop Pro.

System Requirements - taken from the official websites


*Intel® Pentium® III or 4 processor
*Microsoft® Windows® 2000 with Service Pack 3 or Windows XP (unless older version such as 7 or 6 which will run on 98+)
*192MB of RAM (256MB recommended)
*280MB of available hard-disk space
*Color monitor with 16-bit color or greater video card
*1,024x768 or greater monitor resolution
*CD-ROM drive
*Internet or phone connection required for product activation


*PowerPC® G3, G4, or G5 processor
*Mac OS X v.10.2.4 through v.10.3 with Java Runtime Environment 1.4
*192MB of RAM (256MB recommended)
*320MB of available hard-disk space
*Color monitor with 16-bit color or greater video card
*1,024x768 or greater monitor resolution
*CD-ROM drive

Minimum System Requirements

* 300 MHz processor or faster
* Microsoft® Windows® 98SE, 2000 (SP4), ME, XP
* 256 MB of RAM
* 500 MB of free hard drive space
* 16-bit color display adapter at 800x600 resolution
* Microsoft® Internet Explorer 6.0 or later

Recommended System Configuration

* 1.0 GHz processor or faster
* 512 MB of RAM
* 500 MB of free hard drive space
* 32-bit color display adapter at 1024x768 resolution
* Microsoft® Internet Explorer 6.0 or later

If your computer does not have these then it is not recommended to install the products as it will be hard to impossible to use them.


2. What To Use
As mentioned above Adobe's Photoshop (PS) and Corel's Paint Shop Pro (PSP), these are both paid options, though they do have free trials. Another image editor is GIMP (GNU Image Manipulation Program), which is free. This part will run through the pros and cons of each of them.

IPB Image
Adobe Photoshop™ - http://www.adobe.com (30 day free trial)
Probably the most well known image editor it is also one of, if not the most expensive editor, retailing for about $650.00 (USD) for the new version (CS). It is also the most expansive offering many options, most of which won't be used by the average user.
The industry standard for professional photo editing, graphic design, and digital imaging.
Includes ImageReady CS for specialized Web graphics production--rollovers, animation, etc.
Preview, organize, search, and manage image files with an integrated File Browser.
Combines tools for painting, drawing, retouching, adding notes, and working with type.
Edit images non-destructively with layer style effects, adjustment layers, masks, and history.
Automate tasks and speed up production with actions, batch processing, and history tracking.
Now supports preprocessing of RAW camera data from most digital camera models.

  • Offers ultimate flexibility and non-destructive editing
  • The industry standard for professional photo editing, graphic design, and digital imaging
  • Welcome screen and improved help eases the learning curve for new users. Help menu is customizable
  • Comes with Image Ready - for animation and web graphics
  • Steep learning curve.
  • Price may be prohibitive for some.
  • Not compatible with older operating systems -- requires Mac OS X 10.2.4 or Windows 2000/XP (however older versions; 7 and below run on ME and 98)
IPB Image
Corel Paint Shop Pro™ - http://www.corel.com (60 day free trial)
Despite often being compared with Photoshop it retails for only $130.00 (USD), less than a quater of the price of Photoshop!
Paint Shop Pro is an affordable yet flexible photo editor and graphic design tool.
Includes Animation Shop for creating and enhancing frame-based animations such as animated GIFs.
Photo enhancement tools for correcting color and tone, red eye, noise, and other common problems.
Draw and paint with gradients, textures, and patterns in vector, raster,a nd art media layers.
A mix of fun & serious tools; hundreds of special effects, distortion tools, frames, quick fixes.
Integrated image browser, screen capture, optimizer, multiple image printing, batch processing.
Includes Web tools for image slicing, image mapping, and coding image rollovers and buttons.
Customize toolbars, save personalized workspaces, save effects presets and share them with others.
Record automated scripts that can be replayed and shared; batch process, rename and convert images.
For Windows 98SE/2000/Me/XP. Minimum 256MB RAM. Boxed version includes 500p. printed user guide.

  • Affordable, yet full-featured and flexible
  • New art media tools and digital camera RAW support
  • Detailed user guide, plus guided tutorials & demos
  • Features border on being overwhelming for inexperienced users
  • Could benefit from integrated tips for new users
  • Some functions perform sluggishly
IPB Image
GIMP - http://www.gimp.org/ (FREE)
For free you can't get much better, throw away paint right now and download this! GIMP is a popular open-source image editor originally developed for Unix/Linux. Often lauded as the "free Photoshop," it does have an interface and features similar to Photoshop. Because it's volunteer-developed beta software, stability and frequency of updates could be an issue; however, many happy users report using GIMP for Windows without significant problems. It doesn't support GIF format.
Full suite of painting tools including brushes, a pencil, an airbrush, cloning, etc.
Tile-based memory management so image size is limited only by available disk space
Sub-pixel sampling for all paint tools for high-quality anti-aliasing
Full Alpha channel support
Layers and channels
A procedural database for calling internal Gimp functions from external programs, such as Script-Fu
Advanced scripting capabilities
Multiple undo/redo (limited only by disk space)
Transformation tools including rotate, scale, shear and flip
File formats supported include GIF, JPEG, PNG, XPM, TIFF, TGA, MPEG, PS, PDF, PCX, BMP and many others
Load, display, convert and save to many file formats
Selection tools including rectangle, ellipse, free, fuzzy, bezier and intelligent
Plug-ins that allow for the easy addition of new file formats and new effect filters

  • Free download
  • Robust set of image-editing tools
  • New interface makes it much easier to use
  • Not as refined as other Windows-based image editors

So which to get?
If you have money to spare and want the best then go with Photoshop, its features give you everything you could need, and allows you to keep up with industry standards.
If you want more than basic editing but don't want to spend a lot of money then go with Paint Shop Pro, it allows you to do a lot of Photoshops features, though some are harder in PSP, without the phenomenal price tag.
Want to just try your hand at image editing and scared by the big price tags then go with the GIMP, allowing you to do a lot more than paint for free you can't beat the price.


3. Creating Your First Image
So you have your software, now how do you start?
The best way to learn how to use the software is to use it! So get on Google and start searching for Tutorials (help guides), of which millions are avaliable for free!
A good place to start is Pixel2Life (http://www.pixel2life.com/), which has tutorials for almost every editing program ever made, all for free!
If you decided on Photoshop then another good place to start is Good-Tutorials (http://www.good-tutorials.com), which at the time of writing had 6460 tutorials!

You may also want to use some images already made in your sig, for which these sites may help
  • www.intuitivmedia.net
  • www.deviantart.com (stock photos)
  • www.google.com - to search for images wink.gif
Photoshop TutorialsPSP TutorialsGIMP TutorialsRemember tutorials are there to help you learn how to use features, experiment, try out new things and mix and match to get a truely unique image.


4. Fonts
This is a basic guide to installing custom fonts. There are lots of FREE fonts avaliable online from many different sites, the best of which are linked to below.
This is a step by step guide to installing one font from the site http://www.dafont.com, though the process is roughly the same for all font sites.

Before you start you will need a utility to uncompress the font file such as WinZip (http://www.winzip.com) or WinRAR (http://www.rarlabs.com)

Some fonts will not work on macs

Step 1
Enter the address of the site you want to go to into your browser and find a font you like.

Step 2
Find the download link to that file.

Step 3
Save the file to disk, or open the file from it's current location (whichever you prefer)

Step 4
Find the file you just saved and open it (in the screenshots we shall be using WinRAR but the process is the same for WinZip)

Step 5
You should find one or more Font files (.ttf). Select the one you want to use and extract to C:\Windows\Fonts (for Windows)
Screenshot (Large file size)

Step 6
Open up your favourite editor and select your new font (if your image editor was open during font installation you will need to close and re-open it)
Screenshot (Large File Size)

Free & popular font sites:----------

5. Hosting
So you have created your new image and you want people to see it, how do you get it on the web? There are several sites that will allow you to do just that, the most popular of which is Imageshack™. The two below are free!

Imageshack allows you up to 1024k file size and supports gif, jpg, png, bmp, swf, tiff and you do not need to register to use. Unlimited uploading.

Photobucket allows you up to 250k file size. You need to register to use and if you do not log in, in 90 days your account is deleted. You are only allowed 25 megs of space.

Most people here (gta-sanandreas.com) use Image Shack.
It is customary to say thanks to your host with some text or a button, if you use Image Shack you can use this:
IPB Image


6. Animation
Both PS and PSP come with applications to create animations, in PS you get Image Ready® and in PSP you get Animation Shop®. Both of these are too intricate to go into detail with here, but below are links to give you help with these apps.

Pixel2Life do it again, this time for Image Ready - http://www.pixel2life.com/tutorials/imageready.php?tut=11

Animation Shop®
Beginners guide to Animation Shop - http://www.pinoy7.com/anim/default.htm
Some more Animation Shop tuts - http://arizonakate.com/animations.html


Creating First Sig
OK, so you have an idea for an image, you know where to host it, and using the collection of tutorials you know how to get effects you want. How do you create a sig?

First keep in mind the sig rules for this board:
7. Max Signature Sizes
All signatures must be no more than 500 pixels wide and 175 pixels high. Any sigs breaching those rules will be removed. Max file size for sigs is 200kb.

8. Max Avatar Sizes
All avatars must be no bigger than 100x100 pixels and be no more than 75kb in size.

Now create your image within these boundaries. When that is done you have hosted it on Imageshack or another such image host and have a web address (URL) for it you need to put it in your sig.

If you are using image shack make sure you use the direct link -screenshot-

Step 1
Go to My Controls
My Controls

Step 2
Go to Edit Signature

Step 3
Click IMG then paste the URL of the image

Or to manually enter tags then do steps 1 & 2 then in the signature edit box add, without the spaces:
[IMG] [URL=http://www.imageshack.us/logo.gif]http://www.imageshack.us/logo.gif[/URL] [/IMG]

To add a URL to it enter the following, again without the spaces:

[URL=website_address] [IMG] image_address [/IMG] [/URL]


8. Which Format?

Listed below are the formats you can save in and what they do -

There are lots of file formats to choose from:
Some of the following is from the site linked to at the end

.bmp - (BitMaP) files are the Windows "standard" image file format. I cannot imagine any reason to store images in BMP format. Huge file size.

.gif - Graphics Interface Format is a format with a limited amount of colors (in general a maximum of 256 colors per image)
It is ideal for images with a few colors, flat cartoon like images, it can have animation, it can have transparent backgrounds.
Do not use for large files or files with lots of colours

.png - The Portable Network Graphics format was designed to be a lossless format for use on the WEB (among other things). It does reduce the size of your files. However since it preserves all the detail and all the colors the size reduction is not as much as GIF or JPG. PNG is a good format for saving your images. Most modern browsers support PNG. It allows transparent images (like the Imageshack button shown above, which is a png file.)

.jpg - JPG stands for Joint Photographic Group, which is the name of the organization which created this format. JPG was designed for the storage of photographs and is in fact used in most digital cameras. It is lossy, so you do lose detail, but you can choose how much detail you lose.

For more information and examples see http://www.ransen.com/Articles/Formats/Image-Formats.htm

9. Advice From Members!
Here is advice from members of the forum, if you have some tips or resources then post in the thread and I will add them here smile.gif

If you want to make a grunge sig you can use theese brushes.
For best results start by making on layer black then white, then black


Good luck with your images... thumbup.gif

If this tutorial helped you why not link to it in your sig with the button below, just add the code shown under it without the spaces!
IPB Image

[IMG]http://img38.exs.cx/img38/8776/intro1cg.png[/IMG] [/URL]

If anyone has any good suggestions to add please PM me and I'll add them!

Edit - Now backed up wink.gif


gnarkill's Intro 2 Animation

Step one:
To make an animated sig/avatar you will obviously need a animation program.

IPB Image

If you want the best you should go for the one that comes with the free trial (or full version) of Adobe Photoshop CS™:
Adobe Home

IPB Image

Or you could get Corel Paint Shop Pro. The free trial of that doesent come with an animation program, the full version does though.
Order from here

Screen Shots:


Step two
Get to know:
Before you actually start making animations you may want to play around with your program first, to get used to its funtions and stuff. You will probably want to play around with effects mainly.

Step three:
First you will need some images to animate. You first create a sequence of images that flow well, make the movement of each very little, and make lots of them.

You may want to start off with a b/g first, then another image the same with text or a picture.

Now for the animation part. Select animation wizard and add the images in the order you want them to appear, and how long you want them to appear for. Make sure all the frames move together smoothly, there is nothing worse than a bad animation!

Animation Wizard for PSP:


You can set your animation to loop, or just play once. If you set it on loop make sure that you copy/paste a few of the last frame so that there is a period in between the next loop.
If you set it to play once, you might want a longer animation. Just make sure you dont make it too long!

Now to edit it. if one of the frames doesent appear for long enough, copy the frame, and paste it where you want it to go. If one appears for too long, delete one copy of it.

Now preveiw your animation. If you are happy... Save!, you dont want to lose your work. If not, keep editing untill you are happy!

When you make an animation you must save it as a .gif.

Now, youve made your first animation! But where do you upload it? Most people use Image Shack, it is easy fast and simple

There are quite a few good sites which have good tutorials, not just for animating:
Photoshop Cafe
Good Tutorials

Paint Shop Pro

I hope this has helped you!

If it has helped you please put this in your sig:




Thanks to image shack for hosting:

Image Shack

Photoshop Cafe

This post has been edited by Nanook: Dec 22 2006, 03:59 AM

Go to the top of the page
+Quote Post

Posts in this topic
- Nanook   Intro 2 Graphics & Animation   Mar 4 2005, 11:40 PM
- - Xtortion   Nice write nanook. Thanks a lot. ~Pinned~ I lef...   Mar 5 2005, 12:02 AM
- - Pitbull   i reakon, you should start off with psp9, then jus...   Mar 5 2005, 12:14 AM
- - Kuwong   QUOTE (Xtortion @ Mar 5 2005, 01:23 AM)Speaki...   Mar 8 2005, 06:49 PM
- - Xtortion   I'm having trouble with the fonts. I download...   Mar 27 2005, 07:47 AM
- - Y2J   Xtortion, Try the following : - Check to see if t...   Mar 27 2005, 10:49 AM
- - Blow*Pop   Nanook, The Gimp won't open for me. I double ...   Apr 2 2005, 06:00 PM
|- - FX   QUOTE(Blow*Pop @ Apr 2 2005, 07:00 PM)Nanook,...   May 13 2005, 06:32 PM
- - Nanook   QUOTE (Blow*Pop @ Apr 2 2005, 08:00 PM) Nanook, Th...   Apr 3 2005, 12:53 AM
- - Blow*Pop   Yeah. It also says that I shoudl have a 1000x??? s...   Apr 3 2005, 01:59 AM
- - Nanook   So your using screen size 800x600?   Apr 3 2005, 02:00 AM
- - Blow*Pop   Yeah... 800x600   Apr 3 2005, 02:09 AM
- - Kuwong   try changing screen-size, shouldnt matter that muc...   Apr 6 2005, 10:33 AM
- - FX   this is doing my head in... how do you take a scre...   Apr 6 2005, 03:18 PM
- - Kuwong   psp? do you mean photoshop? just press print scree...   Apr 6 2005, 03:19 PM
- - Daz   im going to rate the guide.. its about a 4/10.. do...   Apr 6 2005, 04:38 PM
- - FX   if anyone can get a screen shot of ImageReady...   Apr 6 2005, 05:32 PM
- - Bulldog   -Screen-   Apr 6 2005, 05:39 PM
- - Tootsie_Roll   Don't say it isn't a good guide. He is tel...   Apr 12 2005, 04:21 AM
- - The Demon   Can someone simply tell me how to size a paint thi...   Apr 22 2005, 05:23 AM
- - Ruzdur   Damian adviced me to post it here If you want to ...   Apr 27 2005, 04:58 PM
- - Domino   grrr... how the fuck do I get different layers in ...   May 29 2005, 01:03 AM
- - FX   what animation program?   May 29 2005, 03:28 PM
- - Domino   Image ready CS   May 29 2005, 06:54 PM
- - FX   try here.   May 29 2005, 06:57 PM
- - Domino   That doesn't help any all it is is tutorials, ...   May 29 2005, 07:00 PM
|- - FX   QUOTE(MRBLUE @ May 29 2005, 08:00 PM)That doe...   May 29 2005, 07:12 PM
- - Domino   Well, basically, I need to know how to animate thi...   May 29 2005, 07:15 PM
|- - FX   QUOTE(MRBLUE @ May 29 2005, 08:15 PM)Well, ba...   May 29 2005, 07:21 PM
- - Domino   so wait, i just make diff pics, then open them in ...   May 29 2005, 07:23 PM
- - Nanook   Make each frame a layer In IR make all the frames...   May 29 2005, 07:24 PM
- - Coreyko   So how does linking your self made av or sig to th...   May 30 2005, 04:54 AM
|- - Nanook   QUOTE(coreyko_2003 @ May 30 2005, 05:54 AM)So...   May 30 2005, 08:16 AM
- - acearchie   ANyone else using flash, Im rubbish what ive don...   Jun 6 2005, 07:37 PM
|- - FX   QUOTE(acearchie @ Jun 6 2005, 08:37 PM)ANyone...   Jun 6 2005, 07:39 PM
- - Coreyko   I have been planning on making an avatar for mysel...   Jun 15 2005, 05:31 AM
|- - FX   QUOTE(Coreyko @ Jun 15 2005, 06:31 AM)I have ...   Jun 16 2005, 07:32 PM
|- - Coreyko   QUOTE(Verve @ Jun 16 2005, 08:32 PM)QUOTE(Cor...   Jun 20 2005, 03:24 AM
|- - R3D_WUD   QUOTE(Coreyko @ Jun 20 2005, 04:24 AM)QUOTE(V...   Jun 20 2005, 08:53 AM
- - Teflon   How do I add Gifs into the sigs?? P.S. I make my ...   Jul 9 2005, 12:27 AM
- - FX   You mean an animation? You just make the animation...   Jul 10 2005, 03:48 PM
- - SleepyMexican   I got a question Im using Photoshop 7 and I tried ...   Jul 11 2005, 11:30 PM
- - FX   Yeah. You have to save it as one of the compatible...   Jul 14 2005, 04:46 PM
- - SleepyMexican   Thanks FX that helped now I got another question y...   Jul 16 2005, 01:56 AM
- - Ender   www.deviantart.com The best out there.   Jul 16 2005, 02:43 AM
- - Mechanicalizzle   Oi Whats a vector?   Jul 19 2005, 02:36 PM
- - Nanook   Vector graphics can not be used to represent objec...   Jul 19 2005, 03:26 PM
- - Mechanicalizzle   How do i go about doing these ''vectors...   Jul 19 2005, 03:28 PM
- - Nanook   http://www.cuyamaca.net/WebDevFAQs/photosh...ors/d...   Jul 19 2005, 03:29 PM
- - Nanook   Last update: 25th July 2005 Some picture links up...   Jul 25 2005, 09:07 AM
- - Domino   How do I get new brushes and renders and stuff?   Aug 1 2005, 03:09 AM
|- - Nanook   QUOTE(MRBLUE @ Aug 1 2005, 05:09 AM)How do I ...   Aug 1 2005, 04:51 PM
- - Domino   No, I mean like, after I download them, how do I g...   Aug 1 2005, 04:53 PM
|- - Nanook   QUOTE(MRBLUE @ Aug 1 2005, 06:53 PM)No, I mea...   Aug 1 2005, 04:55 PM
|- - Domino   QUOTE(Nanook @ Aug 1 2005, 12:55 PM)QUOTE(MRB...   Aug 1 2005, 05:58 PM
- - Coreyko   The thing in my situation is how to upload it to i...   Aug 4 2005, 04:49 PM
- - Albino   Move the picture to your desktop. Go to imageshac...   Aug 4 2005, 04:50 PM
- - Coreyko   Oh and I have to register first?   Aug 4 2005, 04:55 PM
|- - Nanook   QUOTE(Coreyko @ Aug 4 2005, 06:55 PM)Oh and I...   Aug 4 2005, 05:30 PM
- - Coreyko   Hmmm it appears that nothing comes up with the ...   Aug 4 2005, 05:43 PM
- - Nanook   http://imageshack.us/ click browse click host it...   Aug 4 2005, 05:46 PM
- - Vato Loco   register then, or go to another pic host but image...   Aug 4 2005, 05:48 PM
|- - FX   QUOTE(Vato Loco @ Aug 4 2005, 06:48 PM)regist...   Aug 6 2005, 07:29 PM
- - Coreyko   Thanx man I finally got the uploading part EDIT: ...   Aug 4 2005, 06:52 PM
- - SleepyMexican   Ok. Quick question, what's a render and why do...   Aug 13 2005, 06:38 PM
- - FX   A render just a picture, like the one in your sig:   Aug 13 2005, 07:41 PM
- - mat5   is photoshop 7.0 pretty good cause i cant afford a...   Aug 19 2005, 12:39 AM
- - Nanook   Photoshop is the industry standard for photo editi...   Aug 19 2005, 07:06 AM
- - Nostradamus   Ok, so I made a transparent sig, I saved it, but i...   Aug 19 2005, 02:16 PM
|- - Nanook   QUOTE(Perspicacious @ Aug 19 2005, 04:36 PM)O...   Aug 19 2005, 02:19 PM
- - Nostradamus   Ok thanks.   Aug 19 2005, 02:28 PM
- - Mechanicalizzle   .Gifs dont give that much of a worse quality. Just...   Aug 19 2005, 04:27 PM
- - rocking 2 -apc- 4 ever   ya...im a hopeless gfx maker at the moment...i rea...   Aug 28 2005, 01:49 PM
- - FX   What programs do you have?   Aug 29 2005, 03:04 PM
- - rocking 2 -apc- 4 ever   Paint shop pro 9   Aug 29 2005, 06:00 PM
- - icecream man   How do you make scan lines?? I have used them befo...   Sep 6 2005, 08:48 PM
- - noiz   If you have photoshop, do the following to get the...   Sep 6 2005, 09:03 PM
|- - Ender   QUOTE(noiz @ Sep 6 2005, 06:23 PM)If you have...   Sep 7 2005, 06:21 PM
- - noiz   shoot, my bad, it's teh other one. variations ...   Sep 9 2005, 08:32 PM
- - Scrappy   OMG I NEED AN ANSWER!!! How do you ac...   Sep 17 2005, 11:51 PM
- - noiz   Go to Image>Mode> choose Grayscale. Or when ...   Sep 18 2005, 03:25 PM
- - Scrappy   OMG, I love you. It was such a bastard not to know...   Sep 19 2005, 11:00 PM
- - mat5   on the gimp for clouds do i select plasma or solid...   Sep 19 2005, 11:54 PM
- - 6KAM9   I am wondering how to insert a grid into my backgr...   Jan 9 2006, 10:34 PM
- - εήĐέя™   Well depending on what size you would want the box...   Jan 13 2006, 08:01 PM
|- - 6KAM9   QUOTE(εήĐέя™ @ Jan ...   Jan 14 2006, 02:30 AM
- - DameDaSnipa   where do i find soft grunge brushes...?   Jun 30 2006, 07:26 PM
- - Last post by: ENDeR™   www.deviantart.com ftw.   Jul 1 2006, 10:51 PM
- - The_End90   This is a great resource.   Jul 18 2006, 04:39 AM

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:


Lo-Fi Version Time is now: 21st June 2018 - 01:08 AM

GTA 5 | GTA San Andreas | Red Dead Redemption | GTA 4