Icon production process

About Truespace Archives

These pages are a copy of the official truespace forums prior to their removal somewhere around 2011.

They are retained here for archive purposes only.

Icon production process // The Garage

1  |  

Post by splinters // May 15, 2007, 12:36pm

splinters
Total Posts: 4148
pic
I have spent a long time making tS icons only to realise there are dozens of other potential functions and activities and I could not cover them all. Also, custom plug-ins etc. would need a unique icon and many users would want to make their own.


So, this is the process I use and I thought I would share just so tS can keep a consistent look to the rather lovely UI.


1. Render your icon against a completely white background (255,255,255) at a size of 300x300 and with 1x AA (this is actually no AA but that is fine).


2. Open Photoshop (if you have it). If you use another package then look for a similar function to those I describe. Then make a new photoshop document (RGB) with a size of 300x300 @ 72DPI. Fill the background colour with a dark grey (112,112,112 should be OK)


3. Open your rendered icon(s) and drag the image into this photoshop document making sure it fills the frame completely.


4. Use the magic wand tool with a tolerance of between 20 and 50 (depending on how many light colours there are in your icon) and no Anti-Alias selected, making sure not to select any of the actual icon. Select all of the background white colour in your icon and delete it.


5. Go to Layer>Matting>defringe... leave the value at 1 pixel and hit enter.


Do this for each layer (icon) in the photoshop document.


6. Make all layers invisible then each layer visible in turn so that only the icon you want to save is visible and save the icon as a 24 bit BMP.


Do this for each icon you need then save your photoshop document if necessary.


The next bit can be automated if you have a lot of icons, simply use the 'record new action' tool in actions window otherwise just follow this.


7. Open each BMP file you need to process and use the magic wand with a tolerance of 0 and Anti-Alias enabled to select the grey background of the icon.


8. Hit Q (this enables the quickmask mode) and the main part of the icon should now be a pinky/red colour.


9. Go to Image>Image size and change the size of the icon to what you need. There are different size icon in the UI but the following is a general guide;


Workspace icons 26x26

Library icons 128x128


(Note that the library icons do not currently support alpha channel so would need to be 24 bit with a background colour of 131,125,125)


Model side icons are framed at something like 32x24 but I used a 24x24 image for the icon anyway.


Now go to Save as...(save will overwrite your original 300x300 icon) and save your BMP to a designated folder. The options should automatically be set at 32bit (24 bit + 8bit Alpha) but change them if they are not.


Voila, one BMP with alpha channel ready to use ...


Hope this is useful for some of you.

Post by xmanflash // May 15, 2007, 2:20pm

xmanflash
Total Posts: 335
I have spent a long time making tS icons only to realise there are dozens of other potential functions and activities and I could not cover them all. Also, custom plug-ins etc. would need a unique icon and many users would want to make their own.

So, this is the process I use and I thought I would share just so tS can keep a consistent look to the rather lovely UI.

1. Render your icon against a completely white background (255,255,255) at a size of 300x300 and with 1x AA (this is actually no AA but that is fine).

2. Open Photoshop (if you have it). If you use another package then look for a similar function to those I describe. Then make a new photoshop document (RGB) with a size of 300x300 @ 72DPI. Fill the background colour with a dark grey (112,112,112 should be OK)

Hey Splinters - thanks for that! Can you supply a Photoshop image for us to work from, maybe a simple icon?

Post by splinters // May 15, 2007, 9:07pm

splinters
Total Posts: 4148
pic
Sure can...once I get home from work...:D

Post by nowherebrain // May 16, 2007, 5:06pm

nowherebrain
Total Posts: 1062
pic
You must work long hours.;)

Post by splinters // May 17, 2007, 12:57pm

splinters
Total Posts: 4148
pic
You must work long hours.;)


yeah, sorry about that, To make up for it here is the PSD file stripped down to just three 'unused' icons. I often make more than one for each function so I imagine just how many were made in total for 7/7.5.
Awportals.com is a privately held community resource website dedicated to Active Worlds.
Copyright (c) Mark Randall 2006 - 2024. All Rights Reserved.
Awportals.com   ·   ProLibraries Live   ·   Twitter   ·   LinkedIn