One Piece At A Time : Windowblind Tutorial Part IV

Putting It Together : Start Menu

Friday, February 3, 2012 by PoSmedley | Discussion: 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

First Previous Page 3 of 18 Next Last
PoSmedley
Reply #41 Friday, February 3, 2012 1:24 PM

Got it.

Why are we deleting all of this code?

2of3
Reply #42 Friday, February 3, 2012 1:27 PM

PoSmedley
Why are we deleting all of this code?

some of those sections will override the images you have imported and some are unneeded.

2of3
Reply #43 Friday, February 3, 2012 1:36 PM

Let's adjust the top part.

First go to the extra settings tab. set the Recent documents expansion value to 40 and the search mode expansion to 0. I think the default is 70 which in my opinion is excessive. 40 is good for this skin.

Still in the extra settings tab, scroll down to the width settings. The first 2 are for xp, so set them to 0. then set the vista/win7 width to 412 and the height to 27.

scroll down more and set the background effect to semi transparent and enable hide the user pic.

 

 

 

2of3
Reply #44 Friday, February 3, 2012 1:38 PM

and the search mode expansion to 0

Again, a personal preference on my part. Since the search mode takes up the entire width of the SP, I see no reason why it should expand. It looks stupid IMO.

2of3
Reply #45 Friday, February 3, 2012 1:41 PM

Now for the painting margins:

PoSmedley
Reply #46 Friday, February 3, 2012 1:41 PM

set the background effect to semi transparent
Why?

2of3
Reply #47 Friday, February 3, 2012 1:43 PM

Still in the extra settings tab, scroll down to the width settings. The first 2 are for xp, so set them to 0. then set the vista/win7 width to 412 and the height to 27.

Those numbers are the exact dimensions of the image used.....in my experience it is a good idea to draw you sp in true size.

2of3
Reply #48 Friday, February 3, 2012 1:46 PM

PoSmedley
Why?

use blur only for transparent images where you want the blur effect on the startpanel......using it here you risk getting a crappy looking blurring on the outer glow and drop shadows. This will show up against certain backgrounds.

2of3
Reply #49 Friday, February 3, 2012 1:48 PM

Notice my painting margins in reply 45. when tiling it's very tricky to get it right. I "hid" the tile in a place it won't show.

PoSmedley
Reply #50 Friday, February 3, 2012 1:51 PM

Notice my painting margins in reply 45. when tiling it's very tricky to get it right. I "hid" the tile in a place it won't show.

Why won't it show there ?

2of3
Reply #51 Friday, February 3, 2012 1:57 PM

PoSmedley
Why won't it show there ?

because if you look closely at the startpanel image as a whole, you'll see a lighting difference on the upper left and lower right hand corners. I needed to set the tiling in an area where the pattern can repeat itself (tile) without a color difference.

 

It looks like you had some kind of lighting effect on the base layers of the image.

2of3
Reply #52 Friday, February 3, 2012 1:58 PM

No biggie.....It just made it a teeny bit more difficult to find a good place to set the margins.

PoSmedley
Reply #53 Friday, February 3, 2012 1:59 PM

It looks like you had some kind of lighting effect on the base layers of the image.

Okay. Yeah, I did.

2of3
Reply #54 Friday, February 3, 2012 2:07 PM

Ready for the left hand side.

Again in the extra settings tab:

Background effect to semi trans. Zero out the first 2 height and width settings and set width to 251 (same as the image). The height setting does NOTHING, so ignore it.......the height of your panel is defined by how much content you have on your SP.

 

 

2of3
Reply #55 Friday, February 3, 2012 2:11 PM

Painting margins:

PoSmedley
Reply #56 Friday, February 3, 2012 2:21 PM

Background effect to semi trans. Zero out the first 2 height and width settings and set width to 251 (same as the image). The height setting does NOTHING, so ignore it.......the height of your panel is defined by how much content you have on your SP.

Painting margins:

Both done.

QUESTION: Normally, when I have attempted this in the past, I bring the paint margins in just over the edge and stretch or tile everything else. Are we bringing the paint margins in on this more than normal (whatever normal is) because of the texture?

2of3
Reply #57 Friday, February 3, 2012 2:27 PM

PoSmedley
QUESTION: Normally, when I have attempted this in the past, I bring the paint margins in just over the edge and stretch or tile everything else. Are we bringing the paint margins in on this more than normal (whatever normal is) because of the texture?

 

Yes...the texture and the tricky lighting. Remember this section has to expand up for users that have a lot of content on their SP. If the margins fall in the area on the top left (where the lighter "spot" is), you will get a funky looking lighter section in the middle of your SP as the pattern repeats itself when it expands upwards.

 

DaveBax
Reply #58 Friday, February 3, 2012 2:31 PM

Sorry to interrupt. Is the latest version of SS 7.3

2of3
Reply #59 Friday, February 3, 2012 2:31 PM

Normally I would also adjust the text margins on this section at this point, but we will probably have to redo that anyway when we add the stitching layer.

I have it temporarily set to:

top 6

bottom 2

left 12

right 2

2of3
Reply #60 Friday, February 3, 2012 2:32 PM

DaveBax
Sorry to interrupt. Is the latest version of SS 7.3

I believe so, yes

Please login to comment and/or vote for this skin.

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 and downloading skins.
  • 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!



web-wc01