• Moose
  • Announcements

    • Dirktator

      Please help us for July   06/30/2017

      This month we're hoping for a little bit of a boost this month or next, in addition to covering the regular bills, we could benefit from some hardware upgrades. STEX Collector's Set gifts can now be sent to you via digital download as well as regular mail if you wish! Every donation dollar goes toward keeping Simtropolis online and humming along. Your contribution counts! Hardware Upgrades As our website community software improves with more and more features, and as we bolt on additional features such as chat, the increased load to handle all these new toys is taking the server a bit to task. You may have noticed that we'd been forced to temporarily disable the chat as we worked out allocating resources for more optimal performance. Following this, we've applied a number of 'soft' changes such as caching options and experimented with server configurations (nginx as proxy, for example), so the hardware aspect is also an area we'd like to focus on. The last time we upgraded hardware was back in 2012, prior to the release of SC13. Your contribution means a lot! Your donation will go toward helping us to 1.) migrate to a newer server or 2.) at least get some ram/cpu/storage updates and any other infrastructure hardware or services. Donate and Get a Gift or Donate Any Amount Thanks so much! - Dirktator & The Admins
  • Creating Custom Lot Icons


    deadwoods

    Level: Intermediate

    Please PM STomnibus if you have any questions about this article.

    This tutorial walks through my approach to creating custom lot icons that show up in the game menus.

    The tutorial assumes the following knowledge:

    • A basic understanding of graphics formats, such as PNG
    • Familiarity with Adobe Photoshop (a recent version, such as 8.0CS)
    • Familiarity with loading icons using one of; DarkMatter's EasyGen, iLive's Reader, or iLives LEProp
    • If using the Reader, you will need to understand TGI's and IID's.

    This tutorial walks through how I've been creating custom icons. There are some slicker mechanisms created by Andreas_Roth and GasCooker, but I'll leave it to them to upload these. Attached to this tutorial is the Photoshop template I use.

    Background

    This tutorial arose out of my frustration with the existing custom icon creation mechanisms. Currently there is:

    • The icon files generated by LE. Yep, say no more.
    • The sample template supplied in the "Help with Icons" download by Metabomb. It creates close to what the game supplies, but the corners are angled rather than rounded.
    • DarkMatters EasyTweaker - but this doesn't create icons using the full 44x44 image you supply, it takes roughly the top/left 75% of the image (he was working on fixing this at the time of writing).
    • iLives LEProp - but it doesn't create the four icon "strip", just loads what you give it.

    Now I like to create stuff for the game that is in sympathy with how the game does it. With menu icons this means rounded corners, transparency and the right thickness borders (yes I know it's pretty anal).

    So I started to play with a new copy of Photoshop and then Adobe ImageReady. Why ImageReady? It has a Rounded Rectangular Marquee tool that I thought the vanilla Photoshop didn't. I later found a way to do rounded corners with the Photoshop Marquee tool. So the rest of this tutorial uses Photoshop.

    Before we Start

    Before we start you will need the following:

    1. Adobe Photoshop (preferably a recent version, this tutorial may not work on older versions)

    2. An image you will use for your icon (the icon portion will be 44x44 pixels)
    3. The icon strip template (see icon_base.zip).

    Be aware that the "highlighted" icon (the one on the right of the four) has a 3px solid white border that curves around the icon. So you need to be careful of anything within 4 pixels of the edge and 7-8 pixels in from the corner. Don't expect something on the edge of your 44x44 pixel image to show up properly.

    FYI, the icon strip template was built in ImageReady (you could do it in Photoshop). It has the four 44x44 icons as per the standard game ones;

    1. The "locked reward" greyscale icon. It has a 1px rounded border, black with 40% opacity, created with a Style of "1pt Black Stroke No Fill".

    2. The "normal" icon. It has a 1px rounded border, black with 40% opacity, created with a Style of "1pt Black Stroke No Fill".
    3. The "currently selected" (last one used) icon. It has a 1px rounded border, black with 80% opacity, created with a Style of "1pt Black Stroke No Fill", and a 3px rounded border, white with 40% opacity, created with a Style of "3pt White Stroke No Fill".
    4. The "highlighted" (mouse currently over) icon. It has a 3px rounded border, white with 100% opacity, created with a Style of "3pt White Stroke No Fill".

    This is about as close as I could get it to the ingame ones.

    Steps to Create the Icon

    To create a custom icon in Photoshop using the template:

    1. Open the icon_base.psd file and expand the view to 400% (Ctrl+=). This will make it easier to work with later on.
    2. Open the image you want to use for your icon. I find it easier to first crop it to 46x46 pixels but you don't need to.
    3. Select the Rectangular Marquee Tool and set it to Fixed size of 44 x 44.

      image4.jpg


    4. Select the area you want for your icon with the tool.
    5. Choose Select -> Modify -> Smooth and set the Sample Radius to 5 pixels.

      image1.jpg



    6. Your selection should have rounded corners like in the following picture.

      image2.jpg


    7. Copy the selection (Ctrl+C) and paste it (Ctrl+V) onto the icon_base.psd file.
    8. Move the new layer (what you've just pasted) to the very left, so that the image is touching the left border (it should line up with the left most grey border).
    9. Next we convert this layer to greyscale. There are a few ways to do this. The way I've done is to select Image -> Adjustments -> Hue/Saturation and set Saturation to -100 and Hue to +30 (makes it a bit lighter). Close the dialog.

    10. Paste the image again (Ctrl+V) and move it left to line up with the second border (it should touch the greyscale one you were just working on).
    11. Paste the image again (Ctrl+V) and move it to the right to line up with the third border.
    12. Paste the image again (Ctrl+V) and move it to the right to line up with the fourth border. It should be hard against the right of the base image, i.e. you should now have for copies of the image (one greyscale) touching each other with no gaps.

      image3.jpg


    13. It's highly likely that the new images are on top of the borders. To fix this you will need to go to the Layers box/tab and move the new layers down so that the borders show.
    14. You might want to save this file as a Photoshop File (.psd) but it's not necessary.
    15. Do a "Save As" to save it to a .PNG file. You must save is as not Interlaced (i.e. on PNG Options dialog, select None).

    You should now have an "icon strip" (a 176x44 image) ready for loading into your custom lot.

    Importing the Icon into your Custom Lot

    There are a number of tools you can use to do this, such as DarkMatter's EasyTweaker (in DatGen), iLive's Reader and iLive's LEProp. EasyTweaker and LEProp are very straightforward, with a button to import the custom png file and replace the LotEditor-generated icon.

    Using the reader you will need to import the custom icon file and either

    • Set the TGI values of your custom icon to the TGI values of the LotEditor-generated one, and remove the LotEditor-generated one, or
    • Give the custom icon a new/unique IID and change the "Item Icon" exemplar to point to the new IID. You should also remove the old icon png file from your lot file.

    That's all that's needed. You should now see your custom icon in the game menu.

    One thing to be careful of with custom icons. If you modify your custom lot using the Lot Editor, it will overwrite the custom png file (if you've used the same IID). This means you will have to reload the custom icon if you use the Lot Editor on the lot.

    That's pretty much it. If you have any questions, PM deadwoods or email at st_deadwoods@optusnet.com.au.


    Jack³ and I. Lostalim like this


    User Feedback


    Jack³

    Posted

    Works great! Thanks!

    Share this comment


    Link to comment
    Share on other sites
    nos.17

    Posted

    Just for further info - this does work without Photoshop. Just follow the rest of the instructions, but use an online converter to convert the .psd icon base (from above) to .png, or similar.

    Share this comment


    Link to comment
    Share on other sites


    Create an account or sign in to comment

    You need to be a member in order to leave a comment

    Create an Account  

    Sign up to join our friendly community. It's easy!  :thumb:


    Register a New Account

    Sign In  

    Already have an account? Sign in here.


    Sign In Now

  • New Articles

  • Recently Browsing   0 members

    No registered users viewing this page.