norwegianne
Majesty
- Joined
- Nov 26, 2003
- Messages
- 6,041
- City
- Rogaland
- Country
- Norway
How to make avatars, a short tutorial.
A short tutorial then... not about GIF images, but about the basic simple icons. I'm using Adobe PhotoShop here, the theory should work well enough in all graphics programmes though the technical stuff might vary.
1. We use the large photo of Ingrid Alexandra: as image 0.
2. The first thing that should be done is to pick out the part of the picture that you want to make an icon of. You can just resize the picture to fit the 80x80, but isn't it more fun to make an artistic statement?
If you keep too much of the picture, and not all of it is essential... well, at max 80x80 you can't afford to let too many other things besides the royal in question be there. So use a marquee to mark what you want to have, then copy and paste it in a new window (or if you have another way, use it in the existing window.)
3. If you have the image that you want to use, now is the time to resize it so that the longest side is 80. It will look something like the first picture. Note: Don't try to enforce 80x80 size unless the picture's sides are all the same length. It will look odd.
4. Since Ingrid Alexandra turned out to be rather blurry after the resize: we use a filter that is called "sharpen" on her. After that she'll look a bit like the second picture. Beware of using the sharpening tool too many times. It won't be pretty, and poor Ingrid Alexandra may not look like herself at all.
5. Now the time has come to maybe do some fancy things. Adding another layer perhaps, with a soft colour? Image 3. Or perhaps not. (This layer thing is really quite useful if you want to create a romantic effect, or something else, also the styles section has plenty of pre-created styles to try out.)
6. Going back to the image we have from 4. the time has come to add perhaps something to frame the picture in. In Adobe Photoshop this can be found in the style section in one of the floating boxes. You'll have to add another layer, and colour it for the style to be affected. Here I add a 1 pt. red border to the image, to fit with Ingrid's apron. There are times when the borders aren't necessary, but there are times when they fit quite well in, to make the picture step a bit more out at us. (Image 4.)
7. Now the time has come to add the dreaded text, if you want it. I really don't recommend doing this before you resize your image, as the text becomes as blurry as you saw the picture get earlier. I write "Cookie" See image 5.
8. The problem now: The text. It doesn't really stand out. For there to be a point to the text, it has to be readable. Something must be done. We change the colour of the text, so that it stands out. It can also be nice to add a border to the text so that it stands even more out, or some special effects. Since the font I was using, while it was a pretty font, didn't really get the message out: I changed it. There are plenty of fonts out there, some are better for making icons than others. Some work well when they're small. Others don't.
And the finished result: Image 6.
This image was easier to work with than many others might have been... it didn't require much cropping, or correcting of faults.
If you have Adobe Photoshop, I'd recommend taking a picture and trying out all the effects there are. You could use the filmgrain filter (Image 7) neon glow (image 8) or the photocopy filter (image 9)
You can get quite many things done.
I hope it helped. Feel free to ask questions, there are plenty of talented avatar-makers out there who might help you.
A short tutorial then... not about GIF images, but about the basic simple icons. I'm using Adobe PhotoShop here, the theory should work well enough in all graphics programmes though the technical stuff might vary.
1. We use the large photo of Ingrid Alexandra: as image 0.
2. The first thing that should be done is to pick out the part of the picture that you want to make an icon of. You can just resize the picture to fit the 80x80, but isn't it more fun to make an artistic statement?
If you keep too much of the picture, and not all of it is essential... well, at max 80x80 you can't afford to let too many other things besides the royal in question be there. So use a marquee to mark what you want to have, then copy and paste it in a new window (or if you have another way, use it in the existing window.)
3. If you have the image that you want to use, now is the time to resize it so that the longest side is 80. It will look something like the first picture. Note: Don't try to enforce 80x80 size unless the picture's sides are all the same length. It will look odd.
4. Since Ingrid Alexandra turned out to be rather blurry after the resize: we use a filter that is called "sharpen" on her. After that she'll look a bit like the second picture. Beware of using the sharpening tool too many times. It won't be pretty, and poor Ingrid Alexandra may not look like herself at all.
5. Now the time has come to maybe do some fancy things. Adding another layer perhaps, with a soft colour? Image 3. Or perhaps not. (This layer thing is really quite useful if you want to create a romantic effect, or something else, also the styles section has plenty of pre-created styles to try out.)
6. Going back to the image we have from 4. the time has come to add perhaps something to frame the picture in. In Adobe Photoshop this can be found in the style section in one of the floating boxes. You'll have to add another layer, and colour it for the style to be affected. Here I add a 1 pt. red border to the image, to fit with Ingrid's apron. There are times when the borders aren't necessary, but there are times when they fit quite well in, to make the picture step a bit more out at us. (Image 4.)
7. Now the time has come to add the dreaded text, if you want it. I really don't recommend doing this before you resize your image, as the text becomes as blurry as you saw the picture get earlier. I write "Cookie" See image 5.
8. The problem now: The text. It doesn't really stand out. For there to be a point to the text, it has to be readable. Something must be done. We change the colour of the text, so that it stands out. It can also be nice to add a border to the text so that it stands even more out, or some special effects. Since the font I was using, while it was a pretty font, didn't really get the message out: I changed it. There are plenty of fonts out there, some are better for making icons than others. Some work well when they're small. Others don't.
And the finished result: Image 6.
This image was easier to work with than many others might have been... it didn't require much cropping, or correcting of faults.
If you have Adobe Photoshop, I'd recommend taking a picture and trying out all the effects there are. You could use the filmgrain filter (Image 7) neon glow (image 8) or the photocopy filter (image 9)
You can get quite many things done.
I hope it helped. Feel free to ask questions, there are plenty of talented avatar-makers out there who might help you.
Attachments
Last edited:
