Guest Workshop: Wild Icons Domesticated in PS - By: Trollf

[Artisanix]

Trollf's speedy manual and automated way of making all those pesky icons...

INTRO:

I did not like to make any icons that much in the past. And that's why I usually wanted to create them as fast and with the least effort as possible. And here comes the power of actions and shortcuts in Photoshop. Those saved my sanity, definitely. Without them I wouldn't be able to make those over 15 hundred icons for all my mods so far.

The recipe is simple.

Manual way should have the smallest number of clicks and options possible to be quite easy to remember and perform by hand. And should produce quite decent results in the same time. Then you just need to record your actions while creating an icon for the first time, and this step will allow you to make any further icons from any selected area in an instant.

MANUAL METHOD:

STEP I - PREPARATIONS:

For this method to work you need to set up properly some settings in NifSkope, and foreground and background colors in PS to certain values.

NifSkope's settings:

- in Render menu turn off all unnecessary display settings (draw axes, nodes, and havok especially) - you need to have a clear, not obscured view of your item in NifSkope's render window

- in Render -> Settings menu on Colors tab, set color of the background to pure white (that small circle in triangle needs to be in its white vertex) - while this step is not that critical for manual method, the automated way on the other hand may not work correctly when the background is set to any color but white.

Photoshop's settings (with no document open):

- set foreground color to pure white (exactly the same as background in NifSkope),

- set background color to that which you want to see as the color of icon's outline ( I usually set it to #EAD1A3 )

STEP II - OBJECT POSITIONING IN NIFSKOPE

Just open your object in NifSkope, then rotate and zoom the camera to set it to an angle and perspective from which the objects looks the best for you. When you finish just hit PrintScreen button on keyboard.

STEP III - PHOTOSHOP

1. New document

With PS window active press CTRL+N. You should see a window with new document settings - Preset should be set to Clipboard, dimensions exactly the same as your desktop, and you should set Background Contents to Background Color there. Hit OK. Then press CTRL+V to paste your captured screen as new layer.

2. Selecting area

Press CTRL+1 to zoom to 100% percent. Chose Rectangular Marquee Tool from ToolBox. Click with LMB on center of your object and hold it, then press SHIFT and ALT buttons and hold them as well. Now drag a mouse to resize the selection's square (holding SHIFT makes the selection shape proportional, and ALT sets its center at point when you clicked first time). When you have proper selection then release LMB first, and then SHIFT and ALT after that.

3. Cropping

From menu chose Image -> Crop.

4. Deletion of white background around the object

From menu chose Select -> Color Range...

In that window there should be such settings:

Select - Sampled Colors

Localized Color Clusters off

Fuziness 0

Invert turned off

You can switch to Selection instead of Image and set Preview to Grayscale - you should see a black silhouette of your object on white background (if not just click on any area where white background is on your image).

Press OK to confirm selection. Press DELETE to remove white background around your image. Press CTRL+D to deselect the selection.

5. Brightening the image (optional step)

Press CTRL+U to show Hue/Saturation dialog box and set Lightness to 15 or so there. This will make details from the shadows visible better as resizing down usually darkens an image, and this option prevents it to be too dark.

6. Resizing

Chose from menu Image -> Image size... set its width and height to 64, hit OK.

7. Alpha channel

- press CTRL and while holding it click with LMB on thumbnail of layer with your object on Layers tab. This should load proper selection as on layer with your object, the area around it should be transparent,

- from menu chose Select -> Modify -> Expand... set it to 1 pixel and hit OK.

- switch to Channels tab and click on icon at the bottom to make alpha channel from selection (that's the icon symbolized by gray rectangle with white small circle in the middle)

8. Finale

- press CTRL+D to deselect any selection,

- from menu chose Layer -> Flatten Image,

- press CTRL+W to close the document which invokes Save As dialogue box where you will have a chance to save the icon as DXT3 compressed dds file...

AUTOMATED METHOD:

STEP I and STEP II are exactly the same like in MANUAL METHOD.

As for STEP III only point 1 and 2 are the same. The rest of activities should be first recorded as action - then the time it takes Photoshop to do everything from Cropping to closing the document with Save As window is less than a second ;]

[StarX]

Thanks for sharing this. I remember you told me about using actions sometime ago and I still use it to date.

[InsanitySorrow]

I'm sure this will be useful , I changed the topic title so it fits in with the other workshops here

[AndalayBay]

Cool - I like the explanation of how to put it all into an action. I've used actions in the past when I was doing web development and they are super handy!

Thanks Trollf.