taarna23

Marshmallow Princess
Global Mod
Joined
Jul 20, 2012
Messages
2,433
Reaction score
5,228
First Language
English
Primarily Uses
RMMZ
Creating an MV-Styled Icon

Introduction
Welcome! This tutorial is meant to help you to create icons in the same style as the RTP icons. Initially, I had planned to create some icons, but I realized there are so many backgrounds for the MV icons, and so many possible shapes to put on them, it might just be easier to show people how to create what they need for themselves. This will be step-by-step, so even if you’ve never edited anything, there should be enough to work off of to get you going in making your own icons.

To start, I have assembled a set of icon backgrounds by editing the default MV icon backgrounds. For more information, and to grab a copy for yourself, check over here:

http://forums.rpgmakerweb.com/index.php?threads/blank-mv-icons.60303/


For this tutorial, I will be assuming that you will be using the graphics program GIMP. If you don’t already have it, you can snag it over here:

http://www.gimp.org/


Part 1: Setting Up the Grid
To work with icons, setting a grid is extremely helpful, so we’ll look at that first.

First, we’ll need to set up the grid in GIMP. This can be done as a default setting, or after the image is open.


Change the Default Grid
Changing the default settings for the grid will change what grid is set when a new image is opened.

Note: GIMP’s own image format, xcf, saves the data for the grid with the image, and will ignore the default settings.

To change the default grid settings, open the Edit menu and click Preferences.

index.php

Figure 1 - GIMP's Edit menu - Preferences


After clicking on Preferences, the preferences window will open.

index.php

Figure 2 - Editing the default grid


With the preferences window open, click on Default Grid in the menu on the left-hand side of the window. From here, you can change the settings for the colour and style of the default grid, as well as the spacing.

If you don’t want to change the default grid, the grid can also be changed for an individual image.


Change the Image Grid
To change the grid for a single image instead of the default grid for all images, use the configure grid window. The window displayed is very similar to the default grid settings in the preferences window. To access the configure grid window, have an image open that you want to change the grid for, and open the Image menu and click Configure Grid.


index.php

Figure 3 - GIMP's Image menu – Configure Grid


With the configure grid window open, you can now change the settings for the grid for the current image.

index.php

Figure 4 - Configure grid window


Same as with the default grid, you can change the colour, style and spacing of the grid.

For the purposes of this tutorial and working on icons in general, a grid spacing of 32 pixels is recommended.


Enabling the Grid
After setting up the grid, the next step is to make it show over the image you’re working with. Also, to make editing easier, allowing the editing tools to snap to the grid is suggested, but not necessary. The images below show how to enable the grid and enable snapping to the grid from the View menu.

index.php
index.php


Part 2 - Selecting an Icon Background
To begin, you need to pick out an icon background. For this tutorial, we’ll make an icon for an ice skill, so perhaps a blue background will be fitting.

First, open the icon backgrounds image. That can be done by pressing Ctrl-O or from the File menu. After it is open, be sure to use the options outlined previously to display the grid.

Next, we will need the Rectangle Select tool. As the name implies, it is used to select rectangular parts of an image. Select the tool by pressing R or clicking this button in the toolbar:

index.php

Next, drag a selection box around the icon you want to use. If it looks too small, you can zoom in by holding down the Control key and using the scroll wheel to zoom in or out. Alternatively, use the number keys on the keyboard to set the zoom level.



index.php

Figure 5 - Select box around an icon


With the icon background selected, press Ctrl-C or click Copy in the Edit menu to copy the image to the clipboard, a neat system thing that holds copied data for you.

If you’re making this icon on a new or existing icon sheet, the easiest way to place the icon where it is needed is to enable the grid and use the Rectangle Select tool to select an empty space on the icon sheet and then press Ctrl-V or click Paste in the Edit menu. This will place a copy of the icon background into the icon sheet. At this time, click somewhere in the image other than the pasted image so that the new pasted layer is made to merge with the rest of the sheet.

Now, you have a nice blank icon on your icon sheet! But that’s no fun. We need it to be an actual icon. That’s outlined in the next step.


Part 3 – Working With the Icon Foreground
This step outlines obtaining an icon image and placing it on the background, turning it into a complete icon! For the purposes of this tutorial, we will be using an icon from game-icons.net. The site’s a great source of all kinds of icons that are free to use in games. The icon selected for this with this tutorial can be viewed here: http://game-icons.net/lorc/originals/ice-bolt.html

When using the site, you can change the colour of the icon right on the site and download the modified icon. Alternatively, a zip of all current icons is available, however they will all be black on transparent. Changing the colour is pretty simple, and will be outlined later, so grab one or grab them all, it’s up to you!


Changing an Icon’s Colour
If you’re working with a single icon in the website, it is probably easiest to simply use the interface there to change the colour to your liking before downloading.


If you’ve downloaded the entire set or downloaded an icon as the default white and now want to change it, this can be done pretty easily in GIMP.

index.php

Figure 6 - GIMP's Colors menu - Invert

If you have a black image (such as the ones in the full downloaded set) and want it to be white, or a white image that you want to be white, using the Invert option makes this quick and easy. If the image has colour already, the result may not be what you expect.


index.php

Figure 7 - GIMP's Colors menu - Colorize


To add colour to a black or white image, the easiest way is to use the Colorize tool.


index.php

By default, this tool will make an image something of a teal or cyan colour. On a black or white image, this won’t be visible immediately – to see colour on a white image, decrease the Lightness value. To see it on a black image, increase the lightness value. From there, just play around with the sliders until you get a result you like.


Changing the Icon’s Size
Next, the icon needs to be scaled down to fit on the background without being too small, and without going over the edges of the icon. First, we trim off the excess empty space around the icon.


index.php

Figure 8 - GIMP's Image menu - Autocrop Image

The autocrop tool will trim excess transparent pixels from an image. As soon as you click on it, it processes; there are no settings for this to play with.

Next, we rescale the image.

index.php

Figure 9 - GIMP's Image menu - Scale Image


index.php

Figure 10 - Scale Image window


The Scale Image window lets you change the size of an image. To set things the way we need it, ensure the dropdown to the right of the Width and Height is set to “px” for pixels. Under Quality settings, I usually use “Sinc (Lanczos3)” for Interpolation, but Cubic should have similar results in this case.

To correctly scale the image, change the width or height, whichever number is larger, to 26. Then click the scale button. Now, you have an icon that will fit on the background you set up earlier! Press Ctrl-A or click Select All in the Select menu to select the entire icon. Then press Ctrl-C or click Copy in the Edit menu to copy it.

Go to the image that has your empty background. Use the Rectangle Select tool to select the entire icon background and then press Ctrl-V or click Paste from the Edit menu to paste your new icon. The reason for selecting the background is to make it unnecessary to move around the icon – it will already be centered.

Click somewhere other than the icon to lock the pasted image into place, and your icon is complete.


I can’t wait to see what you will create!

If you'd like to download this tutorial as a Word document, here you go!

Download
 

Attachments

  • image001.png
    image001.png
    30.2 KB · Views: 613
  • image002.png
    image002.png
    65.2 KB · Views: 604
  • image003.png
    image003.png
    103.7 KB · Views: 600
  • image004.png
    image004.png
    22 KB · Views: 590
  • image005.png
    image005.png
    27.5 KB · Views: 10
  • image006.png
    image006.png
    22.7 KB · Views: 596
  • image007.png
    image007.png
    69.2 KB · Views: 10
  • image008.png
    image008.png
    23.1 KB · Views: 589
  • image009.png
    image009.png
    68.7 KB · Views: 9
  • image010.png
    image010.png
    2.8 KB · Views: 579
  • image011.png
    image011.png
    8.2 KB · Views: 580
  • image012.png
    image012.png
    19.3 KB · Views: 566
  • image013.png
    image013.png
    19.4 KB · Views: 555
  • image014.png
    image014.png
    19.9 KB · Views: 552
  • image015.png
    image015.png
    19.6 KB · Views: 526
  • image016.png
    image016.png
    19.2 KB · Views: 527
  • image017.png
    image017.png
    25.1 KB · Views: 523
  • Creating an MV-Style Icon.docx
    350.2 KB · Views: 25
Last edited:

Latest Threads

Latest Profile Posts

I'm familiar with MZ thanks to jam now. I say it's a better working and looking MV. Lots of plugins too and FOSSIL helps alot. It's not bad.
Some more progress <3 and in most important news:
ALPACARAPTOR SPRITE! (not animated yet, though :( )
h4u90Sz.png
Caz
At the risk of giving myself even more work to do, I kinda wanna redraw the faces of the MV RTP to be a little less.. uhhhhh..

mv-redraw.png
Hmm...you'd think in this day and age, what with Japanese Schoolgirls frequenting anime, JRGs and whatever else...that someone might have made some gym clothes for the generator. You know, the ones with the short bloomers.
finished the draft of some of this dude's motions!

mc0xoB4.gif


gonna work on the drafts of the other 3 now before i put detail, need to position these rather tall sprites well on the field

waiting for the term to end so i can get more time w this :kaodes:

Forum statistics

Threads
113,641
Messages
1,076,386
Members
147,663
Latest member
kiliharaki
Top