Reply
Thread Tools Display Modes
Unread 10-18-13, 06:13 AM   #1
suicidalkatt
A Rage Talon Dragon Guard
 
suicidalkatt's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 317
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):
Code:
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.
suicidalkatt is offline   Reply With Quote
Unread 10-18-13, 06:14 AM   #2
suicidalkatt
A Rage Talon Dragon Guard
 
suicidalkatt's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 317

Select the image layer and transform the layer using the 'Edit > Free Transform' function (Ctrl+T) and set the scale to 110% for both width and height and click the check mark at the top to apply the changes.

Select the overlay layer (this is important to ensure the action edits the right layer) and then right click the layer and select blending options. We'll be greeted with the blending styles prompt. Here we'll select 'stroke', setting the thickness to '2' pixels, set it to display on the 'inside' and set the fill to 'color' setting it to black. Click 'OK' or edit this overlay however you choose, add a gradient overlay or an inner shadow.

Now that we have our icon looking how we'd like, we can now add our alpha channel using our action we used earlier. With our 'Icon Action' still recording we can click on our 'Alpha Channel' action and play it, recording it into our action.

We're going to now use the 'Save for web and devices' option under the 'File' dropdown. We use this save method since it allows us to set our quality parameters as well as a specific file path to save the image to.

Set the dropdown to PNG-24 and uncheck the 'Convert to sRGB' to allow us the full color range we're looking for.

After clicking save it'll prompt us for where we'd like to save it. Save to your 'UPDATED PNGS' folder or a separate folder if you had created one. It's not recommended to save the same folder of the source PNG images as that can leave you having to start from square one again should some issue occur.

After exporting the image we can now close out of it, choosing not to save the document, and stop our action, recording our 'close' action. This will prevent photoshop from continuously opening new images and not closing them during our batch image processing.
-- 5. Batch Image Processing
Now that we have our actions ready we can now process all of our images.

From the 'File' dropdown we're going select 'Automate > Batch...'. From our action set we made we'll select our 'Icon Action', choose the source folder which contains our unprocessed PNG images. We don't need to set a destination since that's saved in the 'Export' part of our action.

This process can take some hours depending on how many icons you're planning to convert and of course the speed of your computer.

-- 6. Spell checking!
Even though our photoshop skills are amazing, using our 'Export' has flawed some of our exported images' filenames.

Using a folder comparing tool we can compare our PNG folders and find out what files may not be named correctly.

(I won't really go into much detail here)

The most common error is the substitution of spaces with hyphens. An example file change would be the file named
'WARLOCK_SUMMON_ VOIDLORD.png' being renamed to
'WARLOCK_SUMMON_-VOIDLORD.png'.

-- 7. Converted back to BLP
Using the same method we used in step 3 we can convert our images back from our 'UPDATED PNG' folder to BLP.

Copy the BLPs out of the 'UPDATED PNG' folder to your 'BLP COMPLETE' folder for safe keeping.

You can now place the converted BLPS into your 'WoW/Interface/Icons' folder and have your custom styled icons display in-game!

Last edited by suicidalkatt : 02-13-14 at 09:11 PM. Reason: grammar / spelling
suicidalkatt is offline   Reply With Quote
Unread 10-18-13, 06:14 AM   #3
suicidalkatt
A Rage Talon Dragon Guard
 
suicidalkatt's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 317
Tutorial Images, Example Folders with icons included, and Photoshop Action Set:

Tutorial.zip (2.7 MB)
Via Mega:
https://mega.co.nz/#!n0xgxCJb!KpDuKy...L2PRqKRToVdMkI
Via Dropbox:
https://dl.dropboxusercontent.com/u/...9/Tutorial.zip

Please don't hesitate to ask questions about the process or anywhere you may be stuck! I'm here to help!

Check out all the Clean Icon packages and the ever so handy Masque skin.


Last edited by suicidalkatt : 10-18-13 at 07:22 AM.
suicidalkatt is offline   Reply With Quote
Unread 10-18-13, 11:20 AM   #4
zork
A Pyroguard Emberseer
 
zork's Avatar
AddOn Author - Click to view addons
Join Date: Jul 2008
Posts: 1,391
Are you sure that the console command is correct? I just tried to reproduce this on the german client.

There is no "ExportInterfaceFiles" command.

No clue. I doubt it is a language pack problem. Wierd.

Ah...maybe it is because I used it on the console while being logged in. I used the actual console but was logged in since I had to rebind the console key.

Maybe it only works from the login window.

*edit*

Ok got it working now. On the german client I need to first log into a character and remap the console key. Then get back to the character selection window and get the commands. It is working now.

ExportInterfaceFiles code
ExportInterfaceFiles art
__________________
| Simple is beautiful.
| Roth UI | Roth UI FAQ | GoogleCode | Zork | TDMOG

"I wonder what the non-pathetic people are doing tonight?" - Rajesh Koothrappali (The Big Bang Theory)

Last edited by zork : 10-18-13 at 11:33 AM.
zork is offline   Reply With Quote
Unread 10-18-13, 05:00 PM   #5
Tonyleila
A Scalebane Royal Guard
 
Tonyleila's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2010
Posts: 444
In German jutst set yout keyboard layout to US and than you have to press the ^ key (next to the 1).

I'm still not converting the blp files - that saves them from loosing colors and its faster for me.
Love BLP Format Plug-in for Photoshop
__________________
Author of: LeilaUI and Aurora: Missing Textures
__________________
Tonyleila is online now   Reply With Quote
Unread 10-19-13, 01:26 AM   #6
suicidalkatt
A Rage Talon Dragon Guard
 
suicidalkatt's Avatar
AddOn Author - Click to view addons
Join Date: Mar 2008
Posts: 317
Originally Posted by Tonyleila View Post
In German jutst set yout keyboard layout to US and than you have to press the ^ key (next to the 1).

I'm still not converting the blp files - that saves them from loosing colors and its faster for me.
Love BLP Format Plug-in for Photoshop
I do have that plugin installed however with my automated actions it's not possible to determine if there's a default locked background or not which throws a spanner in the gears of my action scripts.
suicidalkatt is offline   Reply With Quote
Reply

Go BackWoWInterface » 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