UI Guide Part 2

To UI Guide Part 1

Hey Guys~ Ready for Part 2? I might be adding a Part 3 for more detailed-like things, because this turned out to be a bit longer than I expected. By detailed things I mean buttons/icons – which are original, hovered, pressed, inactive, etc. But anyways!

The purpose of Part 2 is to show you guys how I personally work on my .tga files. There is some Channel work involved and that’s the part the confuses some people. So, let’s jump in~

* I tried to snip down these images as much as possible, but I wanted the work space to be shown at all times. So sorry if the image size is too much for ya~

* I use Photoshop CS2 so that will be the program I use in my guide here.

 

Step 1: Familiarize yourself with your workspace.

This is the first thing I see when I open a .tga file. For this guide I’ll be using Rag2_Icon_001.tga, and we’ll be focusing on the Hourly Award Timer Icon.

Step 2: Main Area of Focus and Channels. Yeah I know these first 2 “getting started” steps are boring, but you gotta know where you’re focusing and see where this lovely Channel nonsense is, that we get to play with~

So here’s the original file. What it looks like normally, and what it looks like with the Channels Alpha layer turned on.

 

And this…. is how my file looks after completing both the image layer and the channel layer.

 

Notice how there’s no weird lines and strangeness in my red-channels layer? My goal is to show you how to do that~

Now say, if I saw something like this…

Means I did the channels wrong, or didn’t edit them at all.

Let’s line these up side by side, shall we?

 

So Original Image Layer > With Alpha Channel turned on > With RGB Layers turned off (only Alpha on). Got it? Yeah? Sure? Kay good. Moving on~ :3

Step 3: This it the How-to, the Big One, the Step-by-Step. Prepared?

The first thing I do is make my Image. Yeah that’s the fun part, and usually the more time consuming part. I like to find shortcuts in everything to make my life easier and to save time; so traditionally I’ll make my image on separate layers or in another .psd file entirely, and when I’m ready to mess with the channels, I merge my image.

If you’re going to try this, make sure you have no background layers turned on with the Merge Visible function. We need it to be purely the focused image only.

With the file merged, it’s easier to handle that channels layer. First, I’ll go to my Channels Alpha Layer and wipe the area clean. 100% Black area on the Channels layer is 100% transparency/opacity/invisible/gone/you won’t see it (think I made my point, lol).

Secondly, I take my nifty merged image layer and ctrl+C (copy) it. Don’t forget to click back on the RGB layer and back into your Layers Tab to do this, if you didn’t copy it before (I forget to do this a lot). Then I click back on to my Alpha Layer in the Channels tab and ctrl+v (paste).

Third, we align. The easiest way to tell if you’re aligning correctly is to just turn on that Blue Layer above Alpha and using the Move tool.

Fourth, We’re gonna grab that Brush tool, select the Alpha layer again (if you’re not already on it), set the color to White 100%, which is 100% visibility/opacity/transparency/the most you can see it, and brush over our pasted (selected) area. I use a Hard Round brush on 100-200 pixels, but any size is fine, I’d stick with the hard round brush though. If you’re using the brush tool on anything below 100% you’re going to want to swipe your brush over the entire selected area in one stroke (very important).

If you want the button to be barely visible, 50% white brush (after wiping the area completely black first) is a good transparency. 25% white is more on the “squinting to see it” kind of side.

Easy right? Let’s double check what it looks like. For me, I should end up with something like this with all the layers turned on.

At this point you can deselect your area and continue onto the next area you’d like to work on. But that’s it!

This was simply the way I personally edit my Channels layer, I’m sure people probably do it differently, and obviously they’ll do it differently if they’re using a different program.

You also have the option to manually edit the transparency or opacity (whichever you’d like to call it) using that Alpha Layer. A lot of the time I’ll make the image, then change the Channels image the way I just showed you, and then decide “hey, I’m not happy with this. I want this to be slightly see-through”. So I’ll grab my brush tool and set it to 10% Black for example, select the area in the Channels layer with where I want see-through, and swipe over it in one brush stroke (again, that’s very important).

UI Guide Part 3, may or may not be coming soon~