GanjaTaz.com ~ Version 3.1 Beta ~ You can now Purchase GanjaTaz.com T-Shirts!

Adding features or more expression.

Smiley Tutorial 2. or How to Post a Smiley "In Detail."

Required applications & programs;

JASC's Animationshop 3/Microsoft Paint -

Or any other basic image making software that allows you to create transparent images.

I create my smileys using JASC's Animationshop 3.

In this section of the Tutorial I will show you how to add a bit of life or expression into the smiley you just made.

1. - Open Animationshop or your chosen program.

2. - Click File & select New.

New Image and Canvas 100x100.

3. - Input a bigger sized canvas this time, I usually start at 100 by 100 pixels, then select OK.

Making sure that again the Canvas was set too Transparent

100x100 blank canvas.

4. - Opening a second New canvas about now is a good idea.

You can have more than one canvas in the same workspace, & within this single canvas you can have many frames.

Frames being like you see on a roll of film, each frame can contain many layers of colour too form a picture, but to make them move (Become animated) the frames must change very slightly within each frame. The frames are contained within the Canvas which can then be saved as a File (In our case a .gif file type.)

We can use multiple Canvas's in the same workspace, & then cut & paste them into one another & make a small animation/.gif

(A complete or partial file that you ware in the process of making or have finished making so want too keep it.)

For the moment we will stick too just using a single canvas & use a couple of frames too produce a small animation.

Dual canvas.

5. - Zoom that puppy in once you have opened up the second Canvas so you can see clearly what you are doing.

The smile1 image we just created will be getting placed into the New 100 x 100 pixel Canvas by simple means of cut & pasting it in where we want it. I opened up the Smiley from The basic "How to create a smiley" tutorial File Name smile1.

6. - Select the Arrow Tool on the control panel.

(The Arrow numbered "1" is for your reference, it is pointing at the Arrow Tool.)

Arrow pointing too Arrow Tool.

Always remember too keep an eye on which tool you are using & each setting is how you want it, cos a small mistake here in one single frame of a 1000 frame animation will stand out & make the animation flicker or look wrong when you play it through. Finding that single frame afterwards too correct it is another lesson all together.

The lesson.

This lesson is the life span of the animation, as in from it's creation, it's editing, saving it & exporting it as a small finished smiley animation as a .gif file; too posting it on an internet forum. It is assuming you know how to do the above & also part 1 of the Smiley making tutorial. (You must also know how too Import one that you have already made.)

Instead of opening the new blank canvas I just showed you how to make I opened smile1, I am now going too give him a bit more life by first of all editing him with/by;

A Paintbrush & pixel by pixel,
Add a body part,
Copy & Pasting different parts of frames & items from another canvas,
Working with Pre made gifs/other parts of an ongoing animation project.

To show you the basics of changing this = smile1.gif

into this = smile2

How to - Add parts.

First of all I will show you how to add the Thumbs up into smile1.

Create a small thumbs up image in a new canvas using a single pixel paintbrush, using one colour as an outline and another to fill it in. Once you are happy with it, save it as a .gif, again making sure the canvas is transparent when you save it.

Now, copy & paste Smile1 (Or the smiley you created/want to work with.) into the 100 x 100 blank transparent canvas. Position it in the middle so you have plenty of room to work with all around the smiley.

Copy image. (As ever, right click over the image & select Copy.)

(Then once copied, right click over the blank canvas & select Paste into.)

Then copy & paste the thumbs up into the same canvas you pasted Smile1 into, position the thumbs up at the side of the smiley into a position you are happy with.

I added a few extra yellow pixels at the side to make the thumbs up/hand look as though it is attached to Smile1. Save the file as a .gif as usual once you are happy with your smiley.

In detail:

Posting a smiley on an internet forum/message board.

OK, you want to post a smiley on a internet forum or message board, no worries.

First thing you need to do is get the URL (internet address) of the smiley you want to post.

This is done by right clicking over the smiley.

From the menu you are presented with, select "Properties".

Right Click

You should then see something similar to this. (Depending what browser you use it may look slightly different.)

Properties - URL

The arrow numbered 1 is pointing at the URL/address/location of the smiley, you should highlight all of the URL & then copy the URL. (Right click over the highlighted text & select Copy.)

Now what we need to do is place the copied URL into the post/reply on the forum you wish to post it on. Simply Paste the URL into the reply box. (Right click, select Paste.)

Then what we need to do is add some Image tags, these are small chunks of code to tell the web browser & forum that you want to display a picture/image/smiley.

You should place a [img] before the URL, & [/img] after the URL, making sure you leave no spaces between the tags and the URL or you will end up with a broken image that will no display.

So, a proper Smiley address enclosed with image tags would look like this.

[img]http://ganjataz.com/tutorials/smiley/images/smile1.gif[/img] & would display this

Some forums like mine have shortcut buttons that make life easier for posting smileys/images, if the forum has these, simply paste in the URL as described above, then highlight it & click the Image button, this should enclose the URL with the correct tags for you.

Other forums may use slightly different tags, sometimes [image] or [IMG], check that forums F.A.Q for the correct code types. Other forums let you use proper HTML to post smileys, we will delve more into that in later tutorials.

Back to the top of the page.

More: - About Smileys on phpBB Forums.

More: - About BB code.

More: - About HTML and Smileys.

On my own forum, I do prefer to use only Smileys I made, or Edited. =P

Well, at least on the Smiley Legend anyhoo.

I find that using the BB Code buttons for speed posting images or Smileys is fastest.

Manually typing out code is great, but for ease of use the buttons work just fine.

You can of course use more of my Smileys on My Forum by grabbing the URL of the Smiley via the URL getting system on the Smiley Mini Site, then posting the URL between a set of BB code tags into your Post or Thread.

Or if it is on the regular Smiley Legend, just Click the Image from this:

[Specific Pop Up] - The Smiley Legend from my Forum.

(Please note, it will generate errors if you try & use this on another forum.)

Or remember the Forum Input code for the Smiley you want to use.

Is it 56k Friendly? This Webmaster uses:
[[Firefox]] to check his WebPages for your surfing pleasure.
Is it finished? Is it the Latest Version? Report Broken/Image/Link?
Version 3.1beta Page. This component last Edited/Revised: on Monday, 03 July 2006 14:40:55
Main Server Powered by Backed up by ~ GanjaTaz.co.uk 2003 ~ GanjaTaz.com 2004
Server Last Revised: 07/03/06. - Web Page Author [GanjaTaz] - All rights reserved.