PoSmedley PoSmedley

One Piece At A Time : Windowblind Tutorial Part IV

One Piece At A Time : Windowblind Tutorial Part IV

Putting It Together : Start Menu

 

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

160,088 views 349 replies
Reply #226 Top

Quoting 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)

End of PoSmedley's quote

 

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

Reply #227 Top

Quoting 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'.
End of PoSmedley's quote

 

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

Reply #228 Top

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.

Reply #229 Top

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.

Reply #230 Top

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.

Reply #231 Top

Quoting 2of3, reply 230
Don't touch Colour 0...that is the OS default color.
End of 2of3's quote

Geez. Only a complete idiot would change that.  :-"

Reply #232 Top

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)

Reply #233 Top

Repeat this for the right hand side (places list)

Reply #234 Top

Quoting 2of3, reply 232
(click on the down arrow next to the text color box and select the color from the dropdown list)
End of 2of3's quote

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

Reply #235 Top

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.

Reply #236 Top

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)

Reply #237 Top

/delurk

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

/lurk

Reply #238 Top

Quoting sViz, reply 237
/delurk

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

/lurk
End of sViz's quote
<3

Reply #239 Top

 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.

Reply #240 Top

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.

Reply #241 Top

At this point, your Search Mode panel will still be 'off' but you should be able to see your windowbitmap at work instead of the white background.

What we need to do now is edit the text margins to fix this.

In SKS -  Edit Start Menu and Taskbar > Search Mode Top > Text Margins tab

Set your margins as follows : 

This will  center and blend your bitmap in with the Search Mode layers you just added.

 

NOW, (I hope) we are done with the Start Menu. The mouseovers for search mode will be skinned in another section.

 

Reply #242 Top

That is beautiful, Po!

Reply #243 Top

Quoting Xiandi, reply 242
That is beautiful, Po!
End of Xiandi's quote

I have to give credit to Tim for the whole search mode section. Not that I would have known how to skin it, but I missed it completely when I was pre-making all the parts for the menu.

Reply #244 Top

Getting more awesomness.

Back to lurking.

Reply #245 Top

Looks great!

 

You forgot to mention adjusting the painting margins for the searchmode top. You don't have to fix the middle (all prog) searchmode because that will never expand in any way, but the top will expand up for users that have a lot of content to their SP.

 

Search mode top > painting tab. I chose these settings:

Reply #246 Top

I have a question. The colors next to the text. Are they the colors used or do they just denote the margins?

Reply #247 Top

Quoting Uvah, reply 246
I have a question. The colors next to the text. Are they the colors used or do they just denote the margins?
End of Uvah's quote

They represent the margins, yes. To the right of that section, you'll see a preview of the image you are adjusting. There is a checkbox above that that if checked off will show the diff margins in those colors.

 

You'll see this shown in reply #241

Reply #248 Top

Good morning!

Reply #249 Top

Excuse me for interrupting. It's great to see that you are determined to finish this one, Po'. What would Skinhit think? I hope that you'll consider finishing up some of your other great skins as well. Thanks to Tim and Vampothika and that Neone guy as well.

Reply #250 Top

Quoting willistuder, reply 249
Excuse me for interrupting. It's great to see that you are determined to finish this one, Po'. What would Skinhit think? I hope that you'll consider finishing up some of your other great skins as well. Thanks to Tim and Vampothika and that Neone guy as well.
End of willistuder's quote

  • Interrupt anytime. :)
  • Thank you.
  • WHO?
  • I'm looking them over as I go through this one to see what's do-able and stuff. ;)
  • All three should get medals.  :star: :star: :star: :star: :star: