angel-white's avatar


By angel-white
28 Favourites
2 days and 1 hour after making my very first emoticon (my weekend is in the middle of the week ...and i went sleep deprived) and after 7 hours of consecutive work, i am proud to bring you my 1st tutorial ^^

please full view this (its very VERY different than the preview)

hopefully this will give some of you a place to start, and then you can grauate onto more complicated smileys later on (that is why the background is pink, because on animated smilies you have to have the transparencies set as a single colour preferably one easy to pick out when viewing your palette)

if you follow the steps, you should end up with this [link] this is the actual smiley that resulted from creating my tutorial

ill write out the steps so after you view it, you dont have to wait the entire cycle to view each step again

step 1
make a circle for your smiley's head
(my smiley is 15x15)

i use mspaint 4 this b/c photoshop
annoys me when i try to make shapes
step 2
in photoshop, make your background
a unique colour

and then paste your circle over it
step 3
select the outer edges of your smiley
and delete them

select the inner head of your smiley
and cut it (ctrl+x)
step 4
paste your cutout two times (ctrl+v)

and move both of the new layers under
the layer containing the outline of your
smiley's head
step 5
on the layer directly under youre head
out line, select the colour you want
your smiley to be

and use the paintbrush to give him
some nice shading in that colour
step 6
give your painted layer some
transparency so it blends
a little smoother
step 7
on the layer containing your head
outline, select the edges again

keep your selection, go to the layer
containing your shading and press
delete to remove the excess
step 8
on the layer containing your head
outline, use the pencil tool to add
eyes and a mouth
step 9
in the layer options,
flatten your image
step 10
on the image menu
select mode
and then indexed color

make sure transparency is forced
and hit ok
step 11
select your background edges
and delete them

(they should now be transparent)
step 12
now choose save as from the file menu

give your smile the name of your choice

and format it as a compuserve GIF
with your preferance of interlacing


if you would like to post this tutorial elsewhere, you are free to do so providing the following:
-you host it elsewhere and dont link to deviantart's image and use up their bandwidth. (ive found a good host to be imageshack [link])
-you send me a note so that i can see what kind of feedback my tutorial is getting elsewhere

if you would like to edit this tutorial, you are free to do so providing the following:
-you dont remove or alter the initial splash screen that gives me credit (i spent 7+ consecutive hours working on this, pls dont say you made it)
-you send me a note so i can see what kind of edits other people wanted, and what kind of feedback they got


thanks a bunch
Image size
396x259px 418.8 KB
© 2004 - 2020 angel-white
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In
mhawnick001's avatar
Oh my gosh, the most helpful thing to start my morning! Thanks!
Finalrobo101's avatar
You have horrible grammar but it's a great tutorial.
irndit's avatar
that's awsome. will try one day.
tabbaloo's avatar
tabbaloo Interface Designer
i combed the whole deviantart site but i never understood the tutorials!!!!!!!!!!!!!!!!!!:w00t!:
yatri's avatar
yatriHobbyist Photographer
you are G.R.E.A.T........................
EmPrA's avatar
co0l thanx alot for this perfect lesson :)
FluoroBomb's avatar
Very useful indeedy :)
meatwad644's avatar
meatwad644 Traditional Artist
ive been wondering this for a while...does interlacing really make a difference?
angel-white's avatar
not as far as your image is concerned. i always use normal, but i guess its just force of habit.

normal vs interlacing refers to how your image is downloaded and displayed.

normal will download it linerally from the top to the bottom, and once it is entirely downloaded it will display.

interlaced will download the entire image at once and slowly display what it has. meaning at first your image will appear blurry as you only have some of the file downloaded, and as it slowly downloads more data, it will update the image and slowly become clearer. the point of this is to give you an idea of what you are downloading before it is done so that you can tell what you are looking at while waiting, decide if you want to stay and wait for it to finish. obviously if you have cable, you wont notice the difference because it will download that quickly, but for dialup it might help a bit.

in the end, both will download the same image and display it the same.

ive never tried interlacing with animation however, i wouldnt expect it to matter, but it might.

personally ill just stick to normal, i dont want to try it with animation (besides there wouldnt be any benefit), so the only use i would have for it would be an image with transparency [if it wasnt transparent id make it a jpeg, so with a few exceptions based on the flow of my image (and if you are really curious you can ask what these exceptions are) i would only use a still gif for an image that needed transparency] but gifs are created to have low file sizes (esp if optomized) so it would be a small enough file that interlacing really wouldnt matter much.

any other questions or if you want me to clarify anything, go into more detail, just let me know, knowledge is power after all :) and i have always felt its better to educate someone how to do something properly themselves than it is to just continue doing it for them.
budgieishere's avatar
Nice touch, it just seems the way you create simple bases is very cumbersome and tedious. Couple of pointers from my point of view.

:bulletred: When working with Photoshop, to create those 15x15 borders is easy. Select the marquee tool, and change it so it's a circular marquee. Now it will depend on which version you have, but you should be able to define the parameters of the marquee, by telling it's style to be "Fixed Size", and setting the dimensions to 15x15. After doing this correctly, no matter where you click on the screen, you'll have a 15x15 circle marquee. All you need to do after that is use the pencil tool to draw around the inside edges and you'll have your circle. In doing this, it takes out the need to open paint, and continually delete stuff as you did in your tutorial.

One more thing, The purpose of the pink, background layer defeats me. It seems as though you didn't really use it, and it's only there as a contrasting colour. Doesn't this just take up more time?

Nice step though on moving towards a tutorial. Good luck with all your emotes.

angel-white's avatar
that is a good idea :) i knew someone somewhere could get it to work.

anyway, the pink background isnt really relevant in this particular instance, but once you start animating with transparent backgrounds, you need all the backgrounds to be one colour, and preferably an easy colour to pick out. so i just naturally make all animated things have a pink background, then once ive got all my frames into my gif animator, i can just tell it to make all pink transparent and it will take it all out for me.

i got the idea while looking at some images used in a windowsblinds skin by treetog, i was confused by the pink backgrounds, then after looking around i realized why he did it that way, it auto formats all 255,0,255 (rgb) as transparent, and i kind of just adopted the same style as he used.
angel-white's avatar
for the record, the pink background thing changes depending on the program you use, ive been using imageready alot more than i used to, and the pink background is unneccessaryin this instance, but in other gif programs it is the easiest way to do things
Jessibell's avatar
Awesome tutorial! Thanks so much :D
anonymous's avatar
Join the community to add your comment. Already a deviant? Log In