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,032 views 349 replies
Reply #76 Top

Quoting PoSmedley, reply 72
derp*
End of PoSmedley's quote

Reply #77 Top

Didn't know about that last trick. Cool.

Ready for last part.

Reply #78 Top

All Programs section.

 

Same as the right side, you can ignore the width and height settings in the extra settings tab. Just change the background effect to......ya know.

 

Painting Margins:

Reply #79 Top

Let's compare

 

My version looks like this:

 

Normal

Expanded

Reply #80 Top

Don't worry about the text colors for now.....we'll get to that

Reply #81 Top

Quoting 2of3, reply 78
My version looks like this:
End of 2of3's quote
Cool!

Reply #82 Top

I just tested the skin with a recent document expansion value of 70 just to see. That will also work just as well as 40, so if you feel that you want more....go for it.

Reply #83 Top

Reply #84 Top

Quoting 2of3, reply 82
I just tested the skin with a recent document expansion value of 70 just to see. That will also work just as well as 40, so if you feel that you want more....go for it.
End of 2of3's quote

I'm good with ti at 40.

Not worried about the font yet.

Looks like you added the highlights to yours? (Mine is darker)

Reply #85 Top

Quoting PoSmedley, reply 84
Looks like you added the highlights to yours? (Mine is darker)
End of PoSmedley's quote

same images...dunno could it be my screen?

 

Yours looks like it should....congrats!

Reply #86 Top

Quoting 2of3, reply 85
dunno could it be my screen?
End of 2of3's quote

Probably a combination of the fonts color and background.

Quoting 2of3, reply 85
Yours looks like it should....congrats!
End of 2of3's quote

THANK you! It wouldn't if it weren't for all of this.

Reply #87 Top

I need to mention one more thing.

 

This is about the top text settings on the right hand side. There is an unusable area at the top of the panel which is reserved for the user pic. Even in the case where you have hidden it like we did here, you cannot utilize the area where it would sit.

As far as I can tell the area is 39 or 40 pixels. But here's the tricky part: the area occupies both the top part and the very top of the right hand side.

If your top part is 20px high, then you need to set you top text margin on the right side to 20 pixels or your item mouseover will get chopped off on the top.

 

To illustrate, go to the right hand side text margin tab and change the top value to say..6. See how the mouseover image is chopped off on the top?

Reply #88 Top

In fact, looking closer, the top value of 12 which I talked about in reply 71 seems wrong. It should be 13.

 

top part of the panel:                      27px

+ the text margins of the right side: 13px

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

                                                    40 px

Reply #89 Top

and Po's head explodes

Reply #90 Top

Quoting 2of3, reply 88
In fact, looking closer, the top value of 12 which I talked about in reply 71 seems wrong. It should be 13.



top part of the panel: 27px

+ the text margins of the right side: 13px

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

40 px
End of 2of3's quote

got it

Reply #91 Top

Next step will be adding the stitching layers.

 

I will need some time to work on it, so expect us to pick up again tomorrow if that works for you.

Reply #92 Top

Quoting 2of3, reply 91
I will need some time to work on it, so expect us to pick up again tomorrow if that works for you.
End of 2of3's quote

No problem. I'll PM you when I am up.

I have to redo the mouseovers and log-off anyway. I will update those in the gallery and send you copies.

Thanks again for your time and help on this.

Reply #93 Top

Quoting PoSmedley, reply 92
I have to redo the mouseovers and log-off anyway. I will update those in the gallery and send you copies.
End of PoSmedley's quote

Make sure that the version you upload has the outer glow and dropshadow on the SP, right?

 

Quoting PoSmedley, reply 92
Thanks again for your time and help on this.
End of PoSmedley's quote

My pleasure B)

 

It only gets harder from here! O:)

Reply #94 Top

Quoting 2of3, reply 93
It only gets harder from here!
End of 2of3's quote

No it doesn't Po with the expert help you have. It's when Tim is out on the boat and then you are without a paddle. By the time you get your 2nd and 3rd done it will be a piece of cake.

Also you said a few post back you were glad to see me. Believe me i'm looking all day long and learning also.

Reply #95 Top

Quoting 2of3, reply 93
Make sure that the version you upload has the outer glow and dropshadow on the SP, right?
End of 2of3's quote

Right.

Quoting DaveBax, reply 94
Also you said a few post back you were glad to see me. Believe me i'm looking all day long and learning also.
End of DaveBax's quote

Great. Jump in once in a while so we know you're there (that goes for any other lurkers as well).

Reply #96 Top

I will say you are doing a great job. Hope Greg is taking all the important parts and saving them.

Reply #97 Top

<---- lurking :grin:

Reply #98 Top

Quoting Xiandi, reply 97
<---- lurking
End of Xiandi's quote

Who doesn't know that

Reply #99 Top

Quoting DaveBax, reply 98
Who doesn't know that
End of DaveBax's quote

I'm glad you said something. I have an aneurism that was about to implode because I was holding back.

Reply #100 Top