VB.NET or VB6 application re-skinning guide

Chaps, Ladies, I have recently skinned this VB6/VB.NET application, it is an extreme example of skinning using photoshop and some additional tools that allow you to create a skin that can be cut/ and sliced automatically to create the required image objects for your reskin of a VB app.

http://www.vbforums.com/images/ieimages/2019/12/1.png

The process creates an intermediate RAD widget so that you can see how your app will look on a desktop and then gives you all the bits and pieces you need to skin your VB app.

https://i.imgur.com/teootQK.jpg

This is the intermediate RAD widget actually running on the desktop.

If anyone is interested in the process then I could post the whole procedure I use to reskin such a VB6 or VB.NET app. IF you are interested and would like to know more then please let me know here and if I can make time in my busy life I'll detail it here.

OK, no-one is interested, I'll keep my method to myself.

It is interesting, but the VB Codebank is the place for examples...

VB.Net Codebank

VB6 and earlier Codebank

Quote:

---

Originally Posted by .paul.

It is interesting, but the VB Codebank is the place for examples...

VB.Net Codebank

VB6 and earlier Codebank

---

Ah Paul, I wasn't offering code.

It was the process for creating a skin that I was offering. I have a fairly unique process for skinning an app, any theme, any style, as complicated as you like, a process for creating a skin that can be easily tested firstly as a RAD widget, then applied to your VB program.

Go on then explain... :D

I'll do it in stages then, if that's OK and since you are the only one interested :)

Ok. Carry on...

It's still a CodeBank, or perhaps a tutorial, submission. It's not a question, just an answer, if a pretty complex one.

Quote:

---

Originally Posted by Shaggy Hiker

It's still a CodeBank, or perhaps a tutorial, submission. It's not a question, just an answer, if a pretty complex one.

---

Please feel free to place it where you will.

I have man flu (so my wife calls it) and in no strength to protest.

Stage I.
Get yourself a copy of photoshop by hook or crook, preferably a genuine copy but it barely matters how old, so an old copy from ebay will do perfectly well.

I use Photoshop CS ver 8.0 that dates from 2003. It seems to be the definitive early version that really can do anything you ask of it. It doesn't have all the bells and whistles that the later versions have but it can still do it all with a little effort.

You could obtain it from Adobe itself when they were giving away old versions as a free download. I had a licence from way back but never got around to using it and when I decided to do so I had lost the disks. I took advantage of this download to reacquaint myself with Photoshop. The download link has now died but you'll have to get a copy of photoshop to use my method. GIMP will not do as it does not support Photoshop .JSX scripts - and that is what we will be using to create a VB skin.

Photoshop can now be rented for a subscription and that might be the best method, it is up to you but I'll assume you have a copy.

The first thing you need to is to capture your finished VB design and if you are going to skin a VB app it is best to set it out in such a way that a skin can be easily applied. When working in VB, lots of components don't take a theme let alone a skin, .NET is better in this regard.

It is easy to capture your app on the desktop, simply run it and press ALT+prt scr (print screen) and it will be copied into your clipboard.

Open photoshop and create a new Photoshop project ALT+F then N or CTRL+N.
This will open a new window to the same dimension as your copied screenshot.

Paste the image into the project and name the layer "baseline".

http://www.vbforums.com/images/ieimages/2019/11/1.jpg

That will be the template for your project and next we will set about building the skin around the objects that comprise your application.

My app is the same in VB6 or VB.NET so it does not matter which I use as the template. You are probably quite sick with my images of 'my' app, I promise you, you will be more so by the time this tute is complete. :)

https://i.imgur.com/ZeG1mtw.png

The above process all sounds straightforward enough and we've probably all progressed thus far ourselves but the later stages I will provide will reveal themselves as being an advance on what you have previously been doing, at least I hope so.

Stage II coming - I'm off to my bed.

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.

https://i.imgur.com/NWFndI9.png
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:

https://i.imgur.com/TKL6HxT.png

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.

https://i.imgur.com/HK9GOuI.png
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.

https://i.imgur.com/XzX3RZ0.png
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.

https://i.imgur.com/DcNQw3u.png
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".

https://i.imgur.com/adUnoDH.png
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.

https://i.imgur.com/xLLCUJ0.gif

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.

Stage III coming.