One Piece At A Time : Windowblind Tutorial Part IV

Putting It Together : Start Menu

Published on February 3, 2012 By PoSmedley In WindowBlinds Tutorials

We're going to take a break from One Piece At A Time : Windowblind Tutorial Part III for just a moment and get into the assembling of the windowblind in SKS. There are a few reasons for this that you may have picked up on if you have been following along.

We've been making sections of the blind without putting them into SkinStudio as we go along. A majority of skinners will go back and forth between their graphics program (Photoshop, Paint, etc.) and SKS as they go along. That method hasn't worked for me in the past and I wanted to go through the actual design of several areas without the added confusion of SKS.

There comes a point, once you get past the Start Menu and Window Frames and start getting into the Edit Controls, buttons, etc., that you need to see what they are going to look like and if they will work they way they should. I tried to just keep making the graphics without going into SKS but it's just too much detail and in this particular case, with a lot of the areas we'll be getting into, 'size does matter'.

One of the main reasons that I may have not mentioned for doing the Start Menu and Task Bar areas first is also to assist visually in determining how the overall windowblind will look (per Tim's suggestion). This will actually help a great deal when you get into the buttons, header bars, and other details and you're trying to determine the best colors and other design details.

The way in which I am approaching this is something I came up with some help from 2of3(aka Tim). As I said, not all skinners do it this way and the opinions I offer are just that (my opinions) and by no means written in stone (or sand, Lucite, chalk, crayola, etc.) It if it helps anyone, let me know.

We'll be going back and forth between this thread and Part III. There will also, more than likely, be another thread where we can go over testing the skin and putting on the finishing touches. In this thread we'll be going over the assembling of the Start Menu.

IF YOU HAVE ANY QUESTIONS as to why something is done this way and not that or anything pertaining to the Start Menu ask them here. We will try to explain as we go along and may miss some things that you consider important or problematic.

If you're looking for Part I, II, III you can find them here:

One Piece At A Time : Windowblind Tutorial Part I

Design : Start Menu and Taskbar

One Piece At A Time : Windowblind Tutorial Part II

Design: Title Bars & Window Frames

One Piece At A Time : Windowblind Tutorial Part II

Design: Edit Controls

PLEASE :

I am open to suggestions but may not use any of them. Please, don't be offended if I don't use yours.

Keep the image posting to the skin(s)

If you want to make a skin to go with this, PM me for the files. My PSD's tend to be a mess, but I save everything and will be happy to share. I am uploading the actual files to the Graphics Gallery here on Wincustomize.

We'll be skinning for Windows7, maybe Vista. If someone wants to do XP, PM me and I will get you what you need.

Any files you request will come as I complete them. I won't be jumping ahead. Please be patient.

-----------------------------------------------------------------------------------------------------------------------------------------

The PSD files for the previous threads are in the Graphics Gallery.

Roan WB Title Bars and Window Frames

Roan WB Taskbar Buttons

ROAN WB Start Panel UPDATED

ROAN WB Start Panel Search Mode

Comments (Page 16)

226

2of3

on Feb 12, 2012

PoSmedley

reply 203

On your 'Image Tab' (SKS tabs are at the bottom of your window) make sure you have selected 'This Image Uses Transparency'.

Now click on the 'Painting' tab and use these settings. (These are the settings that I used. If there are betting settings, I will post them in this thread and highlight them in yellow)

For the item mouseover, it's a good idea to check off the Use smart margins when shrinking box.....it will make your image look better in the all programs list mode

227

2of3

on Feb 12, 2012

PoSmedley

reply 206

For this, we'll close the Start Menu window and in the main SKS window select 'Theme Part Details' from the bottom left.

The first area we should see in the new list is the 'Address Field' which is what we want to select.

In our new window we want to look down the left side and select 'Search Field Background'.

I wouldn't do the searchbox image with the little magnifying glass image (search icon). That is a separate section.......a 2 state image.

228

2of3

on Feb 12, 2012

Let's discuss the text color settings for the startpanel.

Firstly a disclaimer: I struggle with the settings on every single skin that I do. If someone every fully understood what does what and why, it would be lovely to have a guide.

229

2of3

on Feb 12, 2012

For this skin, it's pretty straight forward, so we're lucky.

Firstly go to the item mouseover text settings. Make sure all the color and font settings are set to OS default.

230

2of3

on Feb 12, 2012

Before we do anything more, I should show how to edit the color presets or add a new color.

Look for the section Change System Colours. A window will pop up showing all the pre defined colors. Don't touch Colour 0...that is the OS default color.

Here you can edit the existing colors or add a new one.

My advise for the beginner would be to make a new color.....unless you are sure where all the colors are used on the skin.

231

PoSmedley

on Feb 12, 2012

2of3

reply 230

Don't touch Colour 0...that is the OS default color.

Geez. Only a complete idiot would change that.

232

2of3

on Feb 12, 2012

Right.

Now go back to the startpanel left hand side (programs list) and change the text color to the one you just created (click on the down arrow next to the text color box and select the color from the dropdown list)

Do this for both the normal and mouseover states (ignore the 2 in the middle)

233

2of3

on Feb 12, 2012

Repeat this for the right hand side (places list)

234

2of3

on Feb 12, 2012

2of3

reply 232

(click on the down arrow next to the text color box and select the color from the dropdown list)

Not the little button with the 3 dots in it....that will reopen the color preset window (shortcut)

235

2of3

on Feb 12, 2012

You should now have the same color on both sides of your panel (both normal and mouseover)

Notice however that when you click on All Programs, the list above has dark text on normal and mouseover.

I did that because I want a light background for the all prog list.

236

2of3

on Feb 12, 2012

To change the all program list color, go to the top part section > extra settings tab and scroll down to the second to last item. To the right, you'll see the color settings box. Click on it and select the proper color from the list (I chose the same color as the text for the rest of the panel here)

237

sViz

on Feb 12, 2012

/delurk

I applaud your efforts Po (and Tim!) It's going to be one awesome blind. Carry on.

/lurk

238

ZubaZ

on Feb 12, 2012

sViz

reply 237

/delurk

I applaud your efforts Po (and Tim!) It's going to be one awesome blind. Carry on.

/lurk

239

PoSmedley

on Feb 12, 2012

So, now we're going to import the Start Menu Search Mode sections. (Images are available in the Graphics Gallery)

There are guides in the image file to assist you in slicing it into two parts for SKS.

***IMPORTANT - Previously, when we sliced parts, we selected the area with the Rectangular Marque tool and selected Copy Merged and pasted it into a new file based on the images copy merged size. We ran into an issue with the the 'Search Mode Top' section not aligning. Normally, when applied, it should line up in SKS with no problems. If you are following along and using the actual Roan files you will need to make an adjustment. When you copy merge the Search Mode Top the new file you create should be 412 px x 414 px and align the bottom of the image with the bottom of the BG.

And be sure to hide the stitching layers before you copy merge.

240

PoSmedley

on Feb 12, 2012

Open SKS and select Edit Start Menu and Taskbar > Search Mode Top > Image Tab > arrow next to 'Edit' and import your Search Mode Top image.

Then, selecting Search Mode under All Programs in the same window, import your Search Mode Image.

Save and apply.

These two images, as you can see if you make an entry in your search box, cover the start menu from the top all the way down and just over your All Programs area. Your search mode box should look a bit off and we're going to fix that next.

Close the 'Edit Start Menu window in SKS. Open the Backgrounds > Edit Explorer Background Bitmaps > Active Window > Image Tab

Using the arrow button next to Edit, import the windowbitmap.bmp file (from download).

Now do the same for the next section - Inactive Window > Image Tab - Using the arrow button next to Edit, import the windowbitmap.bmp file (from download).

***Note - You must use a bitmap (.bmp) image for these areas.

Now, select the Code Editor tab and for the next seven sections delete all the code. (There should be only one line of code in each.)

Save and apply.

Welcome Guest! Please take the time to register with us.
There are many great features available to you once you register, including:

Richer content, access to many features that are disabled for guests like commenting on the forums.
Access to a great community, with a massive database of many, many areas of interest.
Access to contests & subscription offers like exclusive emails.
It's simple, and FREE!