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
Reply #245 Monday, February 13, 2012 5:32 AM
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 Monday, February 13, 2012 5:37 AM
I have a question. The colors next to the text. Are they the colors used or do they just denote the margins?
Reply #247 Monday, February 13, 2012 5:59 AM
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 #249 Monday, February 13, 2012 10:00 AM
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 Monday, February 13, 2012 10:11 AM
- 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.
Reply #251 Monday, February 13, 2012 3:34 PM
FYI - We are working in the background. Next up is the taskbar but we hit a bit of a snag with the texture. It may possibly have be fixed but needs some tweaking. I'm trying textures for the first time and kind of learning as I go.

Reply #252 Monday, February 13, 2012 11:05 PM
I have the taskbar texture issue worked out. What I have to do is tweak the images in PS to get the colors to match the original taskbar. (See image in #251)
The stitching...geesh.
This is the base layer for the taskbar.

I've tried several different approaches in applying the stitching.
- One single stitch tiled across ~ It runs right up to the edge no matter how I change the margin or add spacing to the png file in PS
- Two Images of single stitch stacked at 50 px, 100 px, 200 px apart. Same as above.
- Like a noob idiot I thought, why not make thew stitching like the base layer? Which is the base layer with stitching then hide the base layer in PS and save. This ALMOST works.
The issue (as was with ALL of the above) is that the stitching will not apply to the TB if you put it at the top of the screen. I can understand that with the first two attempts, but my noob thinking says if it works with the base layer (the images mirror correctly when applied at top or bottom) it should work with the stitching. Bu no. NO. No. No.


And I forgot one other thing. My Taskbar height isn't showing when applied. It should be 50 px and it is stuck at 35 or 40.
Reply #253 Monday, February 13, 2012 11:17 PM
Po, just popped by to offer encouragement and to say fantastic looking graphics and the whole thread is an interesting read.........especially for someone like me who is more an 'admirer' than an artist.
Reply #254 Tuesday, February 14, 2012 12:00 AM
Are you making the taskbar one frame or two? If you make it two, you can get the stitching on the top of the bottom one (first frame) and the bottom of the top one (second frame). Of course, then all your layers will have to be 2 frames.
Your taskbar height is going to change according to what your text margins are set to on the taskbar buttons. The bigger your text margins on the buttons, the taller the taskbar gets. The whole setup is going to take tweaking as you go as far as the painting margins and text margins go.
What I would do in this situation is just get the taskbar in there, and then get the buttons in there. Once the buttons look right, then mess with the painting margins on the taskbar.
Reply #255 Tuesday, February 14, 2012 12:43 AM
2
Right. You would think. I did the stitching in two frames just like the task bar, same size, etc. Inverted the frames, just like the taskbar etc. I tried it with the stitching as it is overlayed on the taskbar in the psd then hid the base and saved the png showing just the stitching. I tried it with just one stitch in each frame (frames inverted like the task bar). No matter what I try, the stitching never comes out right on the top task bar.
These are all the different methods I tried. The gray is just so you can see the actual size of the png file and how I had the stitch layed out (for the attempts at tiling just a single stitch.)

Reply #256 Tuesday, February 14, 2012 1:18 AM
I'm not sure if I'm reading that image right.
What I'm thinking is this:

I think this may be what you have posted in the 4th one, but not sure.
Reply #257 Tuesday, February 14, 2012 7:30 AM
Yeah. The image with the gray in it is the same as the transparent image. The gray is for this thread only, so you can see the dimensions and layout.
I didn't use the gray, just the png with the stitches on a transparent background.
Going across, those are the 5 attempts, the 6th being the stitching image at the bottom, which is two frames, just like the base layer below it.
*** If I go with tiling the stitches across the top, I solved the issue of them running to the edge. I found the settings in Extra Settings to tell it how far from the left and right to begin and it looks much better.
Reply #258 Tuesday, February 14, 2012 7:50 AM
Looking very awesome Po. Going to be a challenge with the graphics though.
Reply #259 Tuesday, February 14, 2012 7:57 AM
Yeah. I'm tweaking stuff that I don't really know how to or where to start with. It's interesting. I have to walk away from it alot to clear my head.
I did get the buttons in which I really had to tweak and as you can see, am not quite done with.

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!








Reply #241 Sunday, February 12, 2012 10:24 PM
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.