Stage II
When you compose your original VB program you may not be thinking about the implications of including certain components on your design that will compromise your ability to skin it. In VB.NET (unlike VB6) items such as groupboxes cannot have their border easily removed programatically, there is no .borderstyle = 0 as in VB6. You may not want a clumsy VB style border on top of your lovely re-skin.
It is also worth noting that the groupbox border does not delimit the end of the groupbox and there is in fact a lot of extra space all around the border, especially at the top. This is hard to cater for when creating the design in Photoshop as it is hard to determine where the groupbox actually starts and ends. So, when you are designing your program think about replacing the groupboxes with panels and set the panels with a temporary thin line border so that you can determine the size of the panel exactly.
It is a real pain but if you want the title text that a groupbox provides by default then you will have to add them manually as separate entities. I find the VB6 groupbox equivalent, the frame, to be more useful with regard to skinning as you have more control over the border style by default.
The groupbox area real boundary shown in red.
When I am creating a skinned program I find it is best to do away with panels and groupbox altogether. On my design I recreate the lost frames as part of the image.
The example below is the framing added as part of the image in another of my skinned VB6 applications:
Now we dig into photoshop. If you've never used it before then there is a paradigm shift in the way you operate. In VB there are objects and you can click on each to select. This is
not the way that photoshop operates. You have to think of your design as existing as layers of transparent plastic, each placed on top of the other to build a stack. Each small thing you create sits on one of these layers and you easily select the correct one by selecting the named item from the stack. Note you should not place more than one item on a single layer though it is possible to do so as it will mess up your design later.
Photoshop CS showing the design in the middle, the tool box on the left and the layer stack on the right.
The concept of layers is a complete change from the way you operate with VB and it takes some getting used to. Nevertheless, when you 'get it' it becomes clear as to why and it begins to make sense.
Follow this method and you can't go wrong - use the stack on the right to determine which element you currently have selected, never click on the graphic design and assume you have selected the correct object, nine times out of ten you haven't. Instead, always use the stack to confirm what you have selected.
Just the stack showing each group named according to the VB naming convention, one group expanded to show the layers within.
So, it will soon become clear that each button, frame image, any individual component exists on a layer and you simply paint it onto that layer using the various methods that Photoshop has to do that. You create a shape on the layer, fill it with a colour or a pattern and then you can add shadows, internal gradients, colours, glows and the like using Photoshop's built-in tools. You build up the design in layers, each layer having a separate item on it. You can make a handy button in no time.
Showing the baseline image overlaid on the final design. You can set the opacity of any layer and you can make the baseline semi transparent. This will allow you to see exactly where the button elements need to be.
As you have the baseline image of your program in VB, you can simply use the various tools to create new button layers with new and unique skins, in exactly the right location as on your VB program. The level of complexity is entirely up to you, what you create is down to your own style and your own artistic capability.
As you create a button and do such little things as adding rivets and text to it, each of these elements will comprise an additional layer (to do that select the menu option New - Add layer) but when you look at the button design on the desktop it looks just like a normal button when seen from the top layer.
To make this collection of layers into an actual object you need to add all the button's layers to a single photoshop 'group' (to do that, select the menu option New - Add group and drag/drop each element into the new group).
Basically, you group the layers according to their function on the program. Fundamentally, anything that is going to perform a function needs to be created as a group. Note that on earlier versions of photoshop these are called "layer sets", from CS2 onward they are simply known as groups.
Naming the layers correctly is vital at this stage, every layer and group should be named according to its function. A silver ball on the end of the bar needs to be called something like "RH silver ball slider bar". Groups need to be named appropriately after their function, the slider group for example should be called "slider". A group of layers that will be a moving component, for example a crank handle, needs to be named? Yes you've guessed it - "crank handle".
Showing a Photoshop Group with layers below.
To skin a VB program it is more likely that you will be skinning buttons and the like. In this case name every group element using exactly the same naming convention as the related control in your VB program. If you have a button named btnSave then name the layer group btnSave. This will help you enormously later when it comes to skinning the program itself.
It is vital that each new layer in your design needs to have a fully transparent background or the background will appear on top of other elements in your finished design.
Keep the individual group designs tight to the original boundaries of your VB program elements. Accuracy is everything!
Clever external shadowing looks good on your design but will extend the boundaries of your button and it will no longer be square and just as in reality you can't force a round peg into a VB square hole, the same limitation exists within VB.
By the time you have created a full design, you will have replicated all the program elements as visual ones, every single item on your program will have been defined as a group element and you will be ready to extract the layers as objects.
To skin my app took me an evening but I am very familiar with Photoshop and I can bash out a design using my library of graphic components just as you can bash out a complex program using extracts from your own libraries of code. It just takes time to become skilled.
