Creating an MV-Styled Icon

Discussion in 'RPG Maker MV Tutorials' started by taarna23, Apr 11, 2016.

  1. taarna23

    taarna23 Marshmallow Princess Global Mod

    Messages:
    2,349
    Likes Received:
    4,630
    Location:
    Saskatoon, SK, Canada
    First Language:
    English
    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.

    [​IMG]
    Figure 1 - GIMP's Edit menu - Preferences


    After clicking on Preferences, the preferences window will open.

    [​IMG]
    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.


    [​IMG]
    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.

    [​IMG]
    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.

    [​IMG] [​IMG]


    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:

    [​IMG]

    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.



    [​IMG]
    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.

    [​IMG]
    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.


    [​IMG]
    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.


    [​IMG]

    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.


    [​IMG]
    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.

    [​IMG]
    Figure 9 - GIMP's Image menu - Scale Image


    [​IMG]
    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
     

    Attached Files:

    Last edited: Feb 7, 2017
    #1
  2. Nightblade50

    Nightblade50 Developer of "Delta Origins" Veteran

    Messages:
    2,069
    Likes Received:
    4,193
    Location:
    USA
    First Language:
    English, French
    Primarily Uses:
    RMVXA
    Nice tutorial !!
     
    #2

Share This Page