Thread Tools Display Modes
Prev Previous Post   Next Post Next
10-18-13, 06:13 AM   #1
A Rage Talon Dragon Guard
suicidalkatt's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 331
Tutorial, Photoshop Batch image processing and BLP texture handling.

I've been requested to divulge a bit in how I go about creating my Clean Icons packages so I have decided to create a tutorial. Keep in mind this is mainly for the Windows OS.

-- 1. Tools

-- 2. Gathering your textures

Blizzard has given us a nifty command we can use to extract the art files within World of Warcraft as long as we can access the console at the login screen. In order to access this console we must create a shortcut to the wow exe file and add '-console' after the quotations in the target address.

To do this, first find your wow directory and create a shortcut to the 'wow.exe' or 'wow-64.exe'. You can right click and create a shortcut or alt + drag the exe file.

Once you've done this, go the properties of the shortcut and alter the target to include '-console' as follows:

From here we can open up World of Warcraft with that shortcut we created and we can now access the console with the '`/~' key (tilde key) at the top left of the standard US keyboard.

Once you've opened the console type the following command and hit enter (This may take some time to complete):
ExportInterfaceFiles art
This will now create a new folder within your WoW directory named 'BlizzardInterfaceArt' which is all the textures used within the WoW client. These files are in the BLP format which is not easily edited within photoshop. We need convert these images to PNG to edit more easily.

-- 3. PNG Convertion
In the BlizzardInterfaceArt folder we'll navigate to the large list of folders and drag the 'ICONS' folder on to the BLPNG 'to png' button. Alternatively you can open BLPNG and use the 'ToPNG' and navigate to the 'ICONS' folder. Conversion will begin and this may take a few minutes to complete.

From here it's recommended to create a work folder to separate your textures. Copy and paste your PNG files that are now within the 'ICONS' folder to your work folder within its own folder.

-- 4. Photoshop Action Sequence
Now that we've gotten our textures ready for editing, let's first start by opening a single PNG file.

Open your actions panel ('Window' > 'Actions' or ALT+F9) and make a new set for your custom actions by clicking the 'folder' icon at the bottom of the panel.

We're going to be creating an action that allows us to easily add an alpha channel to our PNG image. With the set opened, create a new action clicking the 'paper' icon at the bottom of the panel. We'll label this action 'Alpha Channel' and we'll begin recording.

We're going to make a new alpha channel using the 'Calculations' function within the 'Image' dropdown.
Source 1 Layer: Merged
Source 1 Channel: Transparency

Source 2 Layer: Merged
Source 2 Channel: Transparency

Blending: Multiply
Opacity: 100%

Result: New Channel

Click on the stop button as this is all the actions required. This is useful to have it as a separate action should our icon styling script require using it more than once.
One step is very important for handling our icons and we must re-size the image to a base size of 64x64. Some icon textures happen to be 128x128, 256x256, or even 512x512. This can cause issues with running our skinning process.

Let's create a new action labeling it 'Icon Action'. From here we'll go into the 'Image' dropdown and select 'Image Size' (Alt+Ctrl+I) and set the width and height to 64.

From here we can start a new action and begin styling our PNG however we choose.

For this example I'll be demonstrating my Clean Icons - Thin style.

With our action still recording after our re-size, create a new layer (Ctrl+Shift+N) and fill the layer with a color using the paint bucket tool (G) and set the fill to 0% within the layers panel. We'll be using this layer to create a clean border overlaying the icon layer.

Last edited by suicidalkatt : 10-18-13 at 07:03 AM.
  Reply With Quote

WoWInterface » Developer Discussions » Tutorials & Other Helpful Info. » Tutorial, Photoshop Batch image processing and BLP texture handling.

Thread Tools
Display Modes

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

vB code is On
Smilies are On
[IMG] code is On
HTML code is Off