Results 1 to 11 of 11

Thread: VB.NET or VB6 application re-skinning guide

  1. #1

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    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.



    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.



    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.

  2. #2

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    Re: VB.NET or VB6 application re-skinning guide

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

  3. #3
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: VB.NET or VB6 application re-skinning guide

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

    VB.Net Codebank

    VB6 and earlier Codebank

  4. #4

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    Re: VB.NET or VB6 application re-skinning guide

    Quote Originally Posted by .paul. View Post
    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.

  5. #5
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: VB.NET or VB6 application re-skinning guide

    Go on then explain...

  6. #6

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    Re: VB.NET or VB6 application re-skinning guide

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

  7. #7
    eXtreme Programmer .paul.'s Avatar
    Join Date
    May 2007
    Location
    Chelmsford UK
    Posts
    25,464

    Re: VB.NET or VB6 application re-skinning guide

    Ok. Carry on...

  8. #8
    Super Moderator Shaggy Hiker's Avatar
    Join Date
    Aug 2002
    Location
    Idaho
    Posts
    38,988

    Re: VB.NET or VB6 application re-skinning guide

    It's still a CodeBank, or perhaps a tutorial, submission. It's not a question, just an answer, if a pretty complex one.
    My usual boring signature: Nothing

  9. #9

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    Re: VB.NET or VB6 application re-skinning guide

    Quote Originally Posted by Shaggy Hiker View Post
    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".



    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.



    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.
    Last edited by yereverluvinuncleber; Dec 14th, 2019 at 06:30 PM.

  10. #10

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    Re: VB.NET or VB6 application re-skinning guide

    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.
    Last edited by yereverluvinuncleber; Dec 20th, 2019 at 04:25 PM. Reason: added images

  11. #11

    Thread Starter
    PowerPoster yereverluvinuncleber's Avatar
    Join Date
    Feb 2014
    Location
    Norfolk UK (inbred)
    Posts
    2,235

    Re: VB.NET or VB6 application re-skinning guide

    Stage III coming.

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  



Click Here to Expand Forum to Full Width