Page 1 of 1[ 36 posts ]
SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
First you want your image editing program. Photoshop or GIMP is good for this.
Then you need to make your OC. Sometimes you can use parts from existing smilies to make you.
Once that is done you need to decide, are you going to make completely new smilies or are you going to edit existing ones?
For making new ones you want the smilie base.
Experiment with things like shrinking parts of your OC down to fit the head.
Some examples I have made in the past.
Crystal
Marilyn Grant
BrianWhat I did was removed what I didn't need from the sprite, resized, and played with the skin color until it matched the base.
If you edit existing sprites you may want to use the base under the existing sprite in case you have to erase anything.
Just keep what you need and erase the rest. Then paste and shrink your extras down to the size of the head. There are different settings for how the computers handled the image when you shrink it. Experiment and find the best setting for the situation.
Once you are done it's time to unleash your smilie hoard.
My reason for doing this is because I keep getting comments about my OC smilies. People asking for help or saying that they wish they could make smilies like that too.
It's really simple to do! These are just basic tips to get you started.
If there are any questions or if anyone wants advice with their smilie that they are working on please post here. There are tons of great spriters here on CR that would love to help.
And when you are done let us know!
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
Once I get home, you'll bet I'll be trying this one out. Besides, I've always wanted to make a Celestial Smiley! >D
Be warned, Dearest Don, I will make Celestial give you Hell!
.... The good kind, of course! <3
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
Harra Arial wrote:
I love you, Don! <3
Once I get home, you'll bet I'll be trying this one out. Besides, I've always wanted to make a Celestial Smiley! >D
Be warned, Dearest Don, I will make Celestial give you Hell!
.... The good kind, of course! <3
Once I get home, you'll bet I'll be trying this one out. Besides, I've always wanted to make a Celestial Smiley! >D
Be warned, Dearest Don, I will make Celestial give you Hell!
.... The good kind, of course! <3
...One thing I did was I saved a bunch of the CR smilies and all the sprite sheets onto my laptop.
That way if I decide to work on something I have it all right there, even if I may not have the internet with me.
It takes up space but it makes finding what you need a breeze!
Another good thing is having a folder for your smilies saved in your picture hosting service.
I even made a shortcut to my OC smilies right in my browser!
Spoiler: Look at the upper right. Next to the Court Records shortcut.
This makes getting your smilies even faster!
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
Now that I am safely home, now to attempt that Celestial Sprite with the base you gave! <3
Edit: Celestial has come to give you Hell! <3
Re: SMILIE MAKING 101
Gender: Male
Location: Australia
Rank: Medium-in-training
Joined: Tue Jan 15, 2008 2:50 pm
Posts: 309
And I've begun working on others.
Thanks Don.
Feel free to MSN me- lordnathaniel@gmail.com
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
And yes, Mr. Serrot, sir is an amazing teacher, one of the nicest people around CR. ((Now, do remember, I love you all and everyone here is nice in my eyes, I'm not saying you're not! >< ))
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
I plan on hitting animating in my next lesson!
I may even include screenshots!
And I welcome any of the other smilie makers to come share some tips!
Boss Velotix, I'm coming for you. Your smilie work is amazing! I would love to know some of your techniques!
Edit: And I would like to point out the official CR Smilie topic.
There is allot of good smilies there. And some that are waiting to be added still.
You can learn allot from the people in that topic. I did.
Re: SMILIE MAKING 101
Rise and shine, Mr. Judge.
Gender: Male
Location: Hugging MMF!
Rank: Ace Attorney
Joined: Wed Jan 09, 2008 12:55 pm
Posts: 2169
Lord Nathaniel wrote:
Ah, how Avi makes Nat feel.
Actually, you can make smileys with MS paint, too.
I took the phoenix sprites, cleared the area around the hair, removed everything except the hair from my OC sprite, take the hair, press ctrl - once, and put it on the smiley. ^_^
Last edited by Aviv on Wed May 07, 2008 7:00 am, edited 1 time in total.
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
((Master)) Vadim:
Verwirrter Schwarz:
Jake:
Harra Arial:
Re: SMILIE MAKING 101
Gender: None specified
Rank: Ace Attorney
Joined: Wed Apr 18, 2007 4:23 pm
Posts: 2155
Vera telling you to "google it":
Crumpy Maggey:
Sidepose Luke:
My take on Ashley from Trace Memory:
Pepe, my teddy bear:
As you might notice, these smilies don't just have hair and props added from a sprite. I have drawn all the hairs and faces you see here and the only thing I haven't done myself is the smilie base. You can get it from Don's post above.
Now, don't take me wrong: I DO use actual sprites for my smilies (alright, Pepe was made with the help of a photo, but that's basically the same thing) but I use them more like a model. What I do is resize them and redraw all the hair, hats and other stuff on a different layer. I don't redraw them pixel by pixel, because that would leave ugly white or transparent-like stuff in the smilie.
First, I select a darker color from the sprite to use to the borders of the hair and hats. As you can see in the Maggey or Luke smiley, the color of the border of the hair is a little darker than the actual hair. This is actually how some real game sprites usually are made. All the borders are a little darker version of the color near them. After selecting the color, I draw the outline of the hair to another layer. Once I'm complete, I select few colors from the original sprite's hair and use them to color the hair on the same layer the outline is on. Again I use the actual sprite as a model on how it should be colored.
For all the props like glasses and monocles, I do the same that I do with the hair and hats. I can't really help you on faces because I'm not that good making them. I can tell you though that I've made all the faces with the same method, but I find it difficult at some times.
That's it. If you don't understand anything I said, I'll try to rewrite it when I have more time.
Edit:
Re: SMILIE MAKING 101
They call me Bogard. Terry Bogard.
Gender: Male
Location: Everywhere, firin mah lazor
Rank: Prosecutor
Joined: Fri Dec 21, 2007 8:00 pm
Posts: 816
Father of XDGummyDX
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
DokenMan wrote:
Serrot, do you drink Brawndo? Because you're somehow winning at things that not even I'd see you win at.
Um... thanks... I think...
I had to look "Brawndo" up... now I'm frightened.
Re: SMILIE MAKING 101
♪ YOUR AFFECTION~! YOUR AFFECTION~! ♪
Gender: Female
Location: San Diego, California
Rank: Ace Attorney
Joined: Wed Dec 26, 2007 5:01 am
Posts: 1963
I'll try once I'm NOT on my Wii.
BACK, BABY!
Re: SMILIE MAKING 101
They call me Bogard. Terry Bogard.
Gender: Male
Location: Everywhere, firin mah lazor
Rank: Prosecutor
Joined: Fri Dec 21, 2007 8:00 pm
Posts: 816
Donald Serrot wrote:
DokenMan wrote:
Serrot, do you drink Brawndo? Because you're somehow winning at things that not even I'd see you win at.
Um... thanks... I think...
I had to look "Brawndo" up... now I'm frightened.
Shoulda warned you. I win nonetheless in this round, Serrot. Muwahahahahaha.
Father of XDGummyDX
Re: SMILIE MAKING 101
The Potatoe's NOT a lie!! *cheers*
Gender: Male
Location: Having fun in the land of potatoes! (Ahh! Potatobadger!)
Rank: Prosecutor
Joined: Tue Aug 28, 2007 6:24 pm
Posts: 713
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
You guys are starting to get really good at this!
I'll work on that animated smilie tutorial (for GIMP) soon.
Re: SMILIE MAKING 101
Justice with a G!
Gender: Male
Location: Somewhere.....
Rank: Medium-in-training
Joined: Tue Jan 08, 2008 11:36 pm
Posts: 563
Married to Tooth_Paste_Kisses ^^
Father of Jade Edgeworth,skyfairie,and SuzuneAyasato
(Trying to make sig awesome)
Father of Jade Edgeworth,skyfairie,and SuzuneAyasato
(Trying to make sig awesome)
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
*Passes a perfect mug of cocoa to Don* <3
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
Here is the next lesson,
SMILIE ANIMATING 101!
(For GIMP)
(For GIMP)
It's a pretty easy thing to do once you have the basic idea down.
If you look at the picture you will see that I have two layers, these are good for keeping different parts of a sprite separated for editing.
They are also what you use in animating a smilie!
First you need to make each pose. If you want to do them in the same picture just make the previous layer invisible by clicking the eye next to the layer.
This can help you make sure things match up as you make the smilie.
After you have your layers you need to work on the speeds. These are controlled by a command in each layer.
(100ms) is the standard speed. The lower the number the faster it goes. But don't try to go to fast! Some internet browsers read a max speed. Try to stay above (60ms) to have mostly consistent speeds in each browser.
If you don't put a speed it will automatically be set for (100ms). Each layer is set individually.
There is also a very important command. (replace) makes the new layer remove all traces of the previous layer when it is shown.
This is good for smilies that move around allot.
An alternate command is (combine). This makes the new layer show on top of the old one.
If you put in no command it will automatically combine.
While you are editing the speeds for each layer you may want to preview things.
The playback feature shows you the animation in action! Use this to make sure that the speeds are just right.
When you are ready to save set the file type to ".gif". Make sure to check the the "save as animation" box when this comes up! If you don't you will save it as one layer!
Now all that's left is to upload your new smilie and share it with the world!
This also works for those who are working on animating full sprites not just smilies!
Once you get the hang of animating you come to love it! And you get to see something you made come to life right before your eyes!
So get out there and show us what you got! I can't wait to see what you all come up with!
Re: SMILIE MAKING 101
Jammin' like it's 2024
Gender: Male
Location: UK
Rank: Ace Attorney
Joined: Sat Jan 12, 2008 12:50 am
Posts: 1044
GIMP is awesome for creating animations, guys, and it's free. ^^
Does we even do these things anymore?
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
Is there any smilie wisdom you have to share? You made some epic fixes for some of the smilies people posted in the smilie topic!
I'd personally love to know some of the tricks you used! XD
Re: SMILIE MAKING 101
Jammin' like it's 2024
Gender: Male
Location: UK
Rank: Ace Attorney
Joined: Sat Jan 12, 2008 12:50 am
Posts: 1044
The only true parlour trick - taught to me by master amateur spriters (they're probably doing pro work now - they were insanely talented) - is knowing how to shade and set up a sprite palette for good shading.
I'm happy to do a little tutorial for that if you'd like. ^^
Does we even do these things anymore?
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
That is what this topic is for after all! XD
Re: SMILIE MAKING 101
Jammin' like it's 2024
Gender: Male
Location: UK
Rank: Ace Attorney
Joined: Sat Jan 12, 2008 12:50 am
Posts: 1044
Expect me to add a tutorial for creating a good colour palette for shading soon. :)
Does we even do these things anymore?
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
Re: SMILIE MAKING 101
Jammin' like it's 2024
Gender: Male
Location: UK
Rank: Ace Attorney
Joined: Sat Jan 12, 2008 12:50 am
Posts: 1044
...What's a palette, you ask?
A palette is a limited set of colours used to draw sprites with. The smaller your palette, the smaller the image's file size will be. Making the most out of as few colours as possible is a long-standing technique that made the quality graphics found in 8-bit and 16-bit games look better than should have been possible at the time.
When making animations for the internet, this is still important, because .GIF (animation) files can only save 256 colours maximum. Expert spriters can create masterpieces with even 15 colours or less. We're not going to be so restrictive today - today I will show you one of the keys to making your work look good.
Surprisingly, this is actually much easier to do in MS Paint. Open up Notepad (or any other text editor), get a calculator ready, and open up Paint. There are quicker, but more complicated, awkward and imprecise, ways to do this, so I've decided to show you the simplest, if the slowest, method. It looks harder than it is. ^^
Resize the image to 10x2, zoom in to 800%, and paint 2x2 squares in alternating shades of grey. Sounds awkward? Here's what it should look like when you're ready.
You should now have 5 little squares. Now, for the ease of demonstrating this technique, we'll stick with basic colours. Colour the far left square pure white, and the far right square pure black:
Now, pick the master colour. For this tutorial, I'll go with the infamously eye-burning lime green. Colour the middle square with your chosen colour.
Now for the boring bit that totally pays off in the end. From the Menu, click Colors > Edit Colors. A window will appear. Click the "Define Custom Colors" button. You will see the colour you picked. Use that Notepad window and make a note of the RGB colour code - that's the three numbers in the "Red", "Green" and "Blue" fields. White is 255, 255, 255, and black is 0, 0, 0, so make your notes like this:
255, 255, 255
?, ?, ?
?, ?, ?
?, ?, ?
000, 000, 000
The middle colour, our master colour, happens to be 0, 255, 0 (nothing but eye-burning green!), so we'll add that to the middle:
255, 255, 255
?, ?, ?
000, 255, 000
?, ?, ?
000, 000, 000
Time to calculate the shades. Yup, calculate! If you calculate them, your shading will appear much more even. We'll calculate the deeper shade first. Use the master colour and the extreme deep colour (in this case, black) as the bounds.
1) Add the channel numbers together. (So, for our example, that's 0+0, 255+0 and 0+0, giving us 0, 255 and 0.)
2) Divide all the numbers by two. (Leaving us with 0, 127.5, 0.). Round the numbers down. This is the shade we're after. Make a note of it:
255, 255, 255
?, ?, ?
000, 255, 000
000, 127, 000
000, 000, 000
Input the values to the Paint window. There's our colour!
Click OK, and colour in the correct square:
There's your deep shade. Now for the lighter shade. Repeat the technique, using the master colour and extreme light (white) colour as the bounds.
255, 255, 255
127, 255, 127
000, 255, 000
000, 127, 000
000, 000, 000
There are your five shades! This works for any group of colours, no matter how different. This technique is used best when you use it to generate nine shades rather than five. Here's an example of what you can do with this system if you put it to good use, and also an odd result, shown in the fourth row, if you don't use this technique carefully... :)
One way to avoid the poor blending situation in the fourth row is demonstrated in the fifth row - by working out the middle colour from the two extremes instead of choosing it. This, by the way, is why gradient tools only let you blend two colours. In case you were wondering, here's the table for the fifth row:
193, 190, 062
175, 179, 080
157, 168, 098
139, 157, 116
121, 147, 134
103, 136, 152
085, 125, 170
067, 114, 188
049, 104, 206
Finally, here's an example of a sprite I re-shaded using this palette creation technique, with the palette left in for reference:
Does we even do these things anymore?
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
That smilie was originally made by me by the way. Velo did the shading for me.
Here is the original and the shaded versions for an idea of how much of a difference this makes.
Mine | Velo'sThis was my first hand drawn completely from scratch smilie by the way. :)
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
Mr. Serrot, you ought to add all of the tutorials to your original post with credit to each author, please? I just feel that might be easier for all those accessing your guide aren't likely to read all of the posts like some do. Just a thought, you don't have to, lovie! <3
But yes, so many brilliant people on CR, I am amazed. <3
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
It'll be goo to have all of that in one place.
Re: SMILIE MAKING 101
Jammin' like it's 2024
Gender: Male
Location: UK
Rank: Ace Attorney
Joined: Sat Jan 12, 2008 12:50 am
Posts: 1044
I know what good spriting is because I've seen it firsthand, and I know I'm nowhere near that good.
Does we even do these things anymore?
Re: SMILIE MAKING 101
Let the dream begin~
Gender: Female
Location: Gant's Office? Nah, I wish, either my desk, my room, or school.
Rank: Prosecutor
Joined: Mon Apr 14, 2008 4:21 am
Posts: 684
And yes, Herr Serrot, just thought I'd try and help just a mite! <3 ((Herr Serrot, oh no, I'm turning into my character!))
Re: SMILIE MAKING 101
Jammin' like it's 2024
Gender: Male
Location: UK
Rank: Ace Attorney
Joined: Sat Jan 12, 2008 12:50 am
Posts: 1044
Example:
Don't see it?
Now you do. ^^
So, what is anti-aliasing? As a matter of fact, what is aliasing? The easiest way to explain is simply to show you.
THIS is aliasing:
Notice how obvious the rough edges are. As you are probably aware, computer monitors and TVs use a series of dots called pixels to create complex images. However, if graphics are designed carelessly, the rough edges are too obvious - your eyes can actually see the individual pixels themselves making up the image, and the illusion is destroyed. This is aliasing.
So how do you combat this problem? Modern computers with graphics cards feature an inbuilt anti-aliasing feature to prevent graphics from looking rough and choppy. Of course, this puts the card under a lot of pressure, but improves the quality of the image substantially. When it comes to sprites, the images are simple enough for it to be realistic to anti-alias the image manually. Here's an example:
Each anti-aliassing attempt uses a slightly different set of shades. The far-left version uses white twice. The same technique is used in each version - only the colour schemes are changed. Notice how the darker colours make the line appear much thicker, which highlights how much anti-aliasing can contribute to the detail of an image.
Use this optical illusion wisely.
The idea for this tutorial was shamelessly stolen from this topic. ;D
Does we even do these things anymore?
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
I'm going to take this opportunity to post all of my Don smilies into one place.
Feel free to use some of there for ideas for your own OC smilies.
The last one is a play on the SuperLOL smilie.
Spoiler: HULO THAR!
Re: SMILIE MAKING 101
Rise and shine, Mr. Judge.
Gender: Male
Location: Hugging MMF!
Rank: Ace Attorney
Joined: Wed Jan 09, 2008 12:55 pm
Posts: 2169
(C wut i did thar?)
Re: SMILIE MAKING 101
I may or may not be here.
Gender: Male
Location: Drinking a mug of hot chocolate
Rank: Ace Attorney
Joined: Thu Nov 29, 2007 11:58 pm
Posts: 4916
Transparency 101
For GIMP
For GIMP
There are two tools that can help make transparent backgrounds an easy thing to do.
The wand, and the hand.That is what I call them.
The wand lets you select a single area of a specific color while the hand selects all the times that color is in the picture.
Let's start with this simple circle to show how these work.
We want to remove the white area around the circle, leaving the white on the inside alone.
First we need to "add alpha channel" to the bottom layer. Then select the wand tool and click anywhere in the outside white area.
If you hit the "delete" key it will clear that area.
Now let's take a step back and use the hand tool.
Let's say we want to remove all the white in the picture. Just select the hand tool instead and click anywhere in the white. Hit the "delete" key just like you did before and you will remove all the white in the picture.
I have a version of the base with the background already made transparent.
Re: SMILIE MAKING 101
Gender: None specified
Rank: Medium-in-training
Joined: Sun Jun 24, 2007 6:19 pm
Posts: 449
http://www.freewebs.com/softwarethings/smiley.htm
Page 1 of 1
[ 36 posts ]
Who is online
Users browsing this forum: No registered users and 3 guests
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum
News
Site map
SitemapIndex
RSS Feed