How do I create Menu Icons similar to Paeng's Parks?

[BC Canuck 207]

I've been trying to make better menu icons for some of my lots but frankly they look awful.  The default icons weren't much better.  Most look fine but a couple need tweaking.

I tried using Gimp but not familiar enough with it to create icons form it.

When I Googled for info, it  came up with a thread  here  and thanks to @Cyclone Boom  he placed a link to "SC4LotIcon Creator" in the thread and then I found @Simmer2 for the "really" easy instructions over on the SC4Devotion site on how to change icons here.

I wouldn't mind instructions about how to use the captions in the LotIconCreator program.  They don't seem to work for me.  (ok so I need the "dummies" version).

Below is a screenshot of Paeng's Park icons.  How do you do this?  They look so simple and clear...

Any help would be appreciated.  Thank you!

 

 

[rsc204 21,855]

Making a set of icons like Paeng simply requires a little skill with image editing and an eye for clean functional graphics. But key to all of this is understanding the basics of a good image editing application, i.e. layers.

Layers are really very simple to get a handle on, once you start using them. Imagine you have a blank piece of A4 paper, this is your Background or Base Layer. So in this case that's the green background of each icon. Now each new layer is another piece of paper, which can cover the entire canvas or only parts thereof, like say if you cut it to size with some scissors. So for example the logo Paeng uses on every icon (bottom right), would be such a cut out layer. Only in GIMP-speak, that cut out is called transparency. By choosing the order of the various layers in your image, you can manipulate which parts will cover others. You can move layers up the stack or down it, think of this as the layer order. Additionally you can switch layers on and off as desired. So in short, you can make a template with all the elements you need for every icon and just modify a small part of the whole, when making each unique icon.

Making the small shapes is pretty much pixel art, simply pick a colour and carefully use the pencil tool. Bear in mind you have only 44x44px for an icon and that the border of the icon will take some of that space, realistically you have 38x38px to play with. To make them look good simply requires time and planning. Getting each element of such a set so that they will centre perfectly and with everything symmetrical just requires the effort to get it right. These shapes too can be layers you can turn on and off at will. So you have your base template layers, then you switch between the layers with your shapes, saving each unique icon as you do so.

I use Photoshop and my knowledge of GIMP is pretty minimal. Sadly GIMP can't utilise some of the more advanced stuff PS is capable of, otherwise I could give you a template file that better explains all this stuff and would have most of this done for you. Have a look here, that should provide you with a visual of what I'm talking about.

[Fantozzi 4,068]

When I did my big paeng theory I had to do 80 icons in GIMP and I got used to a certain workflow.

This workflow you may like if you have to do several icons in one session.

1. Download the icon strip psd-layer attached to this post. This file wasn't created by me and I can't remember the original creator nor can I provide a link to the original, sorry.

2. Now create you a second blank image of the same size (176x44 pixel), background color doesn't matter.

3. On this second image turn the grid on, set the grid to 22 pixel and make the grid magnetic. You may safe this as a template too.

4. Now load or create the image you want to use as an icon. Editing/creating you shouldn't work in the final size (44x44 pixel), which is a pain to position and paint things right but also on a size not too big (as later, rescaling may create artefacts) - I found designing the icon is good in 200x200 to 400x400 as a working size, something like this.

5. If you want to use symbols like paeng - think of creating them to be reuseable. Create them on transparent background in separate files  so you simply can copy them as a layer into your main image. Think of giving them outlines as later when being incredible tiny of size of a few pixel this may give some extra contrast/sharper look to them.  Save them separately for later reuse. 

6. Put the picture together from those separetly created elements (background picture and symbols). Unify layers cut to picture size (command). Resize the picture to 44x44, add a small amount of contrast (5 to 8) and sharpen it distinctly (~40). Now copy and paste it four times (four layers into the blank image, you've created in step 2 and place them each one next to the other. With the grid being magnetic this should take half a second and placement should be automatically correct. Again perform the command unify layers cut to picture size.

7. Now copy this small picture row you've create into the icon.psd. from step 1. Export this as a png. Pay attention not to export it as psd (default) but png - both file formats can easily be confused as spelled almost the same. So this happened to me often.

Don't close images step1 and step2 , leave them open - you can reuse them as often as needed as your workbenches.

8. For import into the game (lot file) easiest way is LEProp.

Done

[EDIT]

I use the german version - maybe the terms (commands) aren't correct in english.

[EDIT2]

The template attached is very easy to use (there are different around) - it does most of the work with different layers f.e. to 'gray out' one of the icons automatically.

 

Icons.psd

[BC Canuck 207]

Hello @rsc204 and @Fantozzi.

thanks to you both for the information.  I'll be printing out your instructions for easy referral.

I was looking at the you tube video about layers over my morning coffee just now, very good tutorial.  Some of those videos are rather like looking at paint dry as they fumble about.  I will look up some more of  that fellow's tutorials.

Thanks for going the extra mile rsc.  I must say you are a font of knowledge for the sc4 community.

Fantozzi - very good instructions and tips on making icons in Gimp (80 no less - you got lots of practice there!).

well Google can translate into English I guess if the commands are in German?

As I am on my iPad I can't open the .psd file.   What type is that exactly?  I presume my PCwith Windows 7 will open it ok? A permanent template would be very handy.

Looks like I will be busy on the weekend messing about with Gimp and icons.

I will let you know how I get on (unless I get hopelessly stuck and send up a Help flag )

Thanks again guys!

[Fantozzi 4,068]

34 minutes ago, BC Canuck said:

As I am on my iPad I can't open the .psd file.   What type is that exactly?

Photoshop. GIMP can handle it.

[BC Canuck 207]

Here is an update on the icons @rsc204 and @Fantozzi

Took a little longer than I thought.  GIMP 2.8 version that I have is not the most user friendly program I've used.  Much reading ensued.  The layers were easy enough to figure out.

Fantozzi your instruction #6 wouldn't work for me only because I suspect the commands were translated from the German and weren't exactly the English commands.  ie:  unify layers is actually "merge" visible layers.  I also discovered that the four little icons 176x44 pixel size I have to copy into the psd file can only be done if I use the "copy from clipboard" command and then "copy what is visible" command - all this in the EDIT menu.  Never did figure out what you meant about the grid being magnetic??

Here is a picture of the menu icon I created for the Restaurant Patio.  The font for Patio doesn't really show up too well - too small.  On the other hand the first one I did you would have needed a 100x magnifying glass to see the fonts   I've never worked in pixels before.

The umbrella came from clip art.  Not at all sure how Paeng created the little fence for his urban park.  More experimenting etc to come...

I also used the Lot Icon Creator program and have a much better understanding of how that worked.  The little 44x44 pixel rectangle can't be enlarged as I tried to do initially as I didn't understand how those icons worked until I started fooling around with Gimp and your instructions.   I now have much better pictures of my little 1x1 lots such as the scarecrow in a field - I can actually see its a scarecrow...

  Only just noticed my description didn't show up.  Its the "CDL" icon.

PS Fantozzi - I see you downloaded your farming lots.  I did blanch when I saw the dependencies however I have been waiting for the new crops.  That looks as though it will have to have its own dedicated plugins and download folder...  That's a huge amount of work.  Thanks for doing that for the SC4 community.

I have plumbers in my place  re-piping the entire building from copper to plastic due to water leaks (soft water is acidic apparently - sounds counter intuitive doesn't it) a big problem in the Lower Mainland of BC, so may get to do this as time permits.  I lose water for a couple of days next week...oh Joy!  Good excuse to go to the movies!

Thanks again to you both for your help.

 

 

[Fantozzi 4,068]

7 hours ago, BC Canuck said:

unify layers is actually "merge"

yes: image -> merge visible layers -> cut to image size.

7 hours ago, BC Canuck said:

grid being magnetic

view -> snap to grid.