GUIDE: how to make an icon.

Guides, Q&A, Suggestions

GUIDE: how to make an icon.

Postby flux » Fri 8. Nov 2013, 16:44

Hello! This will be an attempt to show you how to make an icon from scratch. This is just one way of doing it as I am sure there are many other ways. But sometimes seeing how something is done, step by step, will help you in your own work.

I am going to show you how I come to make a ring icon from scratch in eight steps.

NB: this guide was made specifically for the game Fantasy Online. However it can still be of use for other projects, just ignore the game specific settings.

STEP 1
The basic rule for making an icon is that the result should have pixels that are build of 2x2 "real" pixels. You can do this by enlarging your brush to a 2x2 size, but this is often in-practical as the grid is still in 1x1 and you often make mistakes. Therefor I make the icon in 1x1 and in the end I select it all and double the size (ctrl +T). To have a sense of boundary I mark the corners of the icon (13x13 pixels, half the size of the real icon) like this:
Image
Size x 4

STEP 2
I want to make a golden ring so the first thing I do is pick a neutral color and create the general shape of this ring. Doesn't have to be perfect yet, just color in a field of what you think will be the shape of the ring. If you struggle here, I suggest you look at some pictures of the object you want to make, squeeze your eyes and only look at the shape, not the shading, not the details, just the overall shape and try to copy this. This is what I got, very simple looking:

Image
Size x 4

Note: the dots that mark the boundary give me an idea of how the final icon will be. Already in the early stages you should try and think about how to position your item in the icon. Generally speaking an icon will look more exciting if you place your item partially outside the icon. Your mind will complete the image anyway. I could probably fit it within the boundaries, but then it would look cramped. Making it smaller would cause me to lose detail.

STEP 3

I've got my shape but it looks nowhere near a ring yet. The next step will be to pick some colors, slightly darker and lighter than your neutral color and try to give the flat shape some volume. Important here is that you determent your light source. I always chose the left top corner for consistency. This is also why i tilted the ring the way I did, as a large surface will catch light this way. This is probably for most people a difficult step, to "imagine" the flat surface as a 3d object. All I can say is look at pictures and only try to see light and dark this time. It still doesn't have to look perfect right now, just loosely color in the part that should be light and dark, like this:

Image
Size x 4

Note: The lighter the colors, the less saturated I made my colors. Meaning, don't just make your neutral color darker or lighter, but try and play with saturation too. Also play with shifting hue. Note that towards lighter areas the color shifts from the brown/beige color I picked for the neutral color towards orange to warm yellow to bright yellow. This is quite intuitive for me. Again, looking at pictures will help. I also often use the color select tool for this. (hover your mouse over a picture outside ps3k and press shift + ctrl to 'select' the color under your mouse. You must not click, as you will then 'leave' ps3k).

STEP 4
The next step is fine tuning your item. This is again a very intuitive process. Try and zoom in and out to discover any errors in shape or color. Zooming out usually helps to see if the shading and form is right. Also add more contrast to your item by making some parts darker and lighter.

Image
Size x 4

STEP 5+6
The ring is kind of boring, so I decided to place a skull on the ring. I did this in a separated layer the same way I did the ring in step 1-4.

Image
Size x 4

I thought gold might looked better so I changed the skull to gold. having the skull in another layer makes it easy to change the colors or move the skull around a bit. Also made some more small adjustments to the ring.

Image
Size x 4


STEP 7
When you are satisfied with the look you can enlarge the item and add a background. I always end up adjusting afterwards, as the item will look different when you've placed a background behind your item. I created a separated layer and picked some of the darker colors in my item as a start point for my gradient in the background. There are two ways you can make a gradient that will fit the FO style i guess. One is manually creating a gradient following the shape of your item going from light to dark in the edges. This works best for most objects as they are quite often simply connected(have no holes):

Simply connected objects:
Step 1: Color around the object with the lightest color of your gradient with 2x2 pixels.
Step 2: Gradually darkening your color, keep doing it until the background is completely filled. I often use the color mixer to make my own gradient, picking 5 or 6 steps.
(e.g. check out the t5 icons)

This doesn't work well with a ring that has a hole though. So the other way is:

Alternative background(open objects/small objects):
Step 1: Using the gradient tool, picking a dark and lighter(but saturated) color somewhat close to each other.
Step 2: Use the "pixelate icon" button in ps3k to change the gradient icon in 2x2.

Next step for both options is to select the object(ring) and press ctrl+T to double the size and I try to find the right spot within the boundaries. You will notice right away it doesn't look as good as it did before!

Image
Size x 2

Note: The background is rather dark in this icon. Normally a lighter background(larger gradient) is better suited for your icon. The reason why I picked such dark background is because the object(ring) is a shiny object. The bigger the contrast between dark and light the better the shiny 'bling' effect will be. If you have cloth for example you wouldn't need such dark background. Sometimes a complementary color works well too for your background, always saturated though (e.g. red object => saturated green gradient). Never use bright colors in your background.


STEP 8

Last step is fine-tuning your icon. As said before, it looks different with the background added. In this stage I often use the color changer sliders to adjust the individual colors. I made the edges of the ring darker so they blend in better with the background and made some other minor changes. All adjustments are done in 2x2. I just keep the 1x1 brush and color in 4 pixels. But having kept a limited pallet, I was able to make good use of the color changer tool when adjusting the colors. And voila:

Image
Size x 2


Icon real size:
Image

Final note: This is just one way of creating an icon. I'm sure it is not the greatest icon ever made, but hopefully it will help some of you in creating your own icons. I uploaded all the steps on fo-wiki/ps3k under [url="http://fo-wiki.com/ps3k/?menu=showItem&uid=801668090"]GUIDE: how to make an icon[/url]. If you want to take a closer look at each step in ps3k.

Hopefully this will help and inspire some of you to make awesome icons!

Lighterthief
flux
Administrator
 
Posts: 250
Joined: Sun 20. Jun 2010, 00:31

Re: GUIDE: how to make an icon.

Postby Vandenreich » Fri 8. Nov 2013, 17:14

Very nice tutorial! Powerful and inspiring!
User avatar
Vandenreich
 
Posts: 7
Joined: Wed 30. Oct 2013, 16:19

Re: GUIDE: how to make an icon.

Postby magnusi » Sun 22. Dec 2013, 18:31

good tut
I will do everything to save FO.
magnusi
 
Posts: 9
Joined: Thu 24. Oct 2013, 21:10
Location: In the crumbling FO


Return to PixelShop

Who is online

Users browsing this forum: No registered users and 0 guests

cron