One Piece At A Time : Windowblind Tutorial Part IV

PoSmedley

Join Date 04/2005

+788

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

Locked Post

Advanced Search

Watch this post

Do not email me updates for this post Email me updates for this post

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

We'll start with the new Item Mouseover for the Start Menu.

Open the Roan WB in SKS ans select the Edit Start Menu Taskbar > Edit STart Menu > Item Mouseover. (The new Mouseover graphics are available in the graphics gallery HERE . )
I chose to use the frame builder to insert the graphic for the mouseover. I'm hearing arguments from both sides of the fence on using or not using frame builder. To date, I have had no issues with it and it's made this whole process much easier for me.

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

In Frame Builder, I am using two images (Normal & Mouseover). Both images are the same dimensions. Becaue Frame Builder is doing all the math for you as far as seperating multiple images evenly, etc., and being new to this, I want to be sure it does it correctly. I select 'Import Into All Frames' and import the non-transparent image.

This will put that image into both frames and tells Frame Builder the dimensions it will be working with in all of the frames. Then I select 'Import Into Selected Frame' and import the transparent image.

Then click 'Save File As', save it and you're done importing your frames.

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

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)

Successfully updated karma reason!

Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.

PoSmedley

Join Date 04/2005

+788

Now we're going to import the right and left separator.

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

The separator image I originally intended to use was this (minus the background)

I tested it and it worked relatively fine. On the left side there was one 'half' stitch showing but it didn't look bad. Tim looked at it and sent back a new image. It was just 'ONE' stitch. Since we are tiling the image, we only need one and SKS will do the rest, tiling it across the area. (You can find the image in the updated start menu in the Graphics Gallery.)

Select Left Separator in your Start Menu window.
Click the arrow next to 'Edit' and selct 'Import'.
Select the image and open.

Now that it's imported, select the Painting tab and set all four margins to '1'.

Now go ahead and do the same with the Right Separator and you're done with this part.

(Notice I am doing all the easy stuff first.)

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

The next image we're going to import will be for the Search Field at the bottom of the Start Menu.

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'.

For this area, SKS suggests '4 Frames' (Normal, Mouseover, Disabled, Focus). This really is optional as to whether you want or think you need to have images for each of these states just for the Search Field. It was pointed out to me that we could use just 1 image. I have to agree that I don't see the need for all of the states here and it makes doing this part a little easier if I can use only one image and that's what I went with.

So, we'll select the arrow next to 'Edit' on our 'Image' tab and then select 'Import' and bring our image into the blind.

Now we'll click on the 'Painting' tab. These are the settings I used. (As stated before, if these need to be changed, I will post and highlight the change later in the thread)

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

Okay. Now we'll get into something a little harder which is the 'All Programs Mouseover'. I'm going to try and explain what we've done here and why.

On a personal note, I didn't want the 'Mouseover' image for this area to 'magically appear' on the background. That was fine for the button mouseovers in the right and left panel and I think the images/suggestion Tim came up with for them are great. For the All Program Mouseover I wanted the image to be constantly visible. Having tried to skin numerous times, I was a little familiar with this area but was't sure I could do what I wanted in WIndows7 (I knew it could be done in XP)

What I had to do to get the results I wanted was to make a NEW background image for All Programs. On this image I had to add the mouseover image in it's 'Normal State'. (File can be found in Updates Start Menu download in graphics gallery)

SO I went inot SKS and slected the All Programs background image and imported it into Photoshop. I then put my Normal mouseover into this in a new layer and saved it as the new background and added it to the blind. I kept the margins that we already set for it in Painting.

Back in Photoshop I added the Mouseover image in a new layer, making sure it aligned with the Normal layer and unchecked the first two layers leaving just the mouseover image. This assures that my new Mouseover image will be the same size as the one I just saved. I saved this as my new Mouseover.

In SKS we'll select Mouseover Image under All Programs and clicking on the arrow next to Edit in the Image tab, import our new Mouseover image.

When I did this for the first time, I had issues with my mouseover jumping to the right and not aligning with the background. (See post #187). I don't know WHY (and hopefully someone can explain it) but it was explained that I needed to go to the background layer and set all the text margins (Text tab) to zero (see post #188) which fixed the issue. (Thank you, Xiandi)

In the Painting tab these are the settings I have used for the new All Programs Mouseover.

Now if you are actually following along in SKS, you'll notice that there is an arrow that SKS provides that is hovering over the left end of our image. Personally, I don't want it in this skin. Under All Programs, I selected Arrow and in the window that has the name of the image there, I scrolled to the top and selected 'None' and saved the skin. The arrow is gone. You can also do this by selecting Arrow and clicking on the Code Editor tab and remove all the code there and save.

And that is that. I hope it wasn't too confusing.

Q's I have for the Pro's at this ,,,,

I made an image for the All Programs Mouseover and SKS stretched it out to the size/width I ended up going with. I had no idea it would. SO when I had to go through all the stuff of making a new BG and Mouseover I used the size SKS gave me with my first attempt to draw the new images in True Size and line it all up. Long story short, it works but I got lucky because I had no idea what I was doing. What is the 'True Size' of the Mouseover button? Is it adjustable? If I (or anyone) wants to do this in the future this way, it would help to know what I'm doing and why.

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

This is the last part we'll do here for the Start Menu. We're skipping the All Programs List Background, the Extended Menu Separators, and the Text Coloring. We're skipping those becuase whatever we apply to them also effect other areas of the skin and vice versa and to be honest, I'm not that far along to start deciding what colors I want where without knowing how they will look when they cross over into other areas.

The part we'll do now is the Star Menu Log Off Buttons.

Though it looks like one button/image above, it is actually two images and each has three frames. (Normal, Mouseover, Pressed)

To create this, I just did what I did with the Start Menu background which was to make the image as whole (in all 3 states/frames) and then slice it up. In this case we would make from the main image a Normal Button and a Normal Arrow for SKS.

I used guides in PS to slice it.

****I guessed on the size of the two parts-I don't know what they actually are and again, I got lucky*****

In SKS go to Edit Start Menu and Taskbar > Edit Start Menu and Log Off Images. We're skinning for Windows 7 so in the new window select Normal Button under WIndows 7 Start Menu Buttons.

On your Image tab, slect the arrow next to Edit and select Frame Builder.

Select 'Import Into All Frames' and import the Normal image..

This will put that image into all 3 frames and tells Frame Builder the dimensions it will be working with in all of the frames. Then I select 'Import Into Selected Frame' and importanat your next two frames respectively.

Then click 'Save File As', save it and you're done importing your frames for the Normal Button.

Now do the same thing with your Normal Arrow.

The first thing I noticed after importing both images is that they looked awful. They weren't aligning and they weren't in sync. I had to play around with the margins in Painting until they did. These are the settings I used.

NORMAL BUTTON

NORMAL ARROW

Now, not to back track..but...

I had an issue with the arrow button. I created the three states. When I imported them and set all my Painiting margins and applied the skin I noticed the normal Arrow was out of sync withe normal button when I moused over it. When I hovered my mouse over it, it would change to the pressed state and it looked odd next to the highlighted normal button. Tim's solution for this was to use the Mouseover image in the mouseover AND the pressed state which solved the issue.

The only thing I have left to do with theses two buttons is to center them more in the area they occupy. This is something I haven't figured out how to do yet.

Other than that, hopefully, and as clearly as I could make it, we are done with putting together the Start Menu in SKS.

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

Possible 'Please Wait' screen....

Successfully updated karma reason!

2of3

Join Date 10/2006

+816

Quoting PoSmedley,

reply 207

Long story short, it works but I got lucky because I had no idea what I was doing. What is the 'True Size' of the Mouseover button? Is it adjustable? If I (or anyone) wants to do this in the future this way, it would help to know what I'm doing and why.

True size is relative. The width of the all prog section is defined by the width of the SP left hand side (the section just above the all prog) the height is and always will be 30 px.

The mouseover item size is controlled by the text margins of the all program background. The reason it worked is because Cyndie (rightly) told you to draw the image in "true size" (IE the size that it will be applied). Setting the TEXT MARGINS to all 0 means that the image will not be "pushed" inward in any direction.

Successfully updated karma reason!

2of3

Join Date 10/2006

+816

Quoting PoSmedley,

reply 208

The only thing I have left to do with theses two buttons is to center them more in the area they occupy. This is something I haven't figured out how to do yet.

Win 7 start menu buttons >normal arrows section > extra settings tab.

You have 2 settings here. The first (horizontal shift) will move the button left or right. 0 is default....a pos. number like 25 will move the whole button section to the right. A neg number like -25 will move it to the left.

The Second (vertical shift) will move the buttons up or down (0 is also default here)

Successfully updated karma reason!

2of3

Join Date 10/2006

+816

I know it feels like the start panel is finished......but wait......

There's more!

Tomorrow I'd like to go over the search mode (requires more graphics......shit....po's gonna kill me)

And we'll discuss the text settings for the item mouseover, and logoff buttons

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

Quoting 2of3,

reply 213

There's more!

5 hours later.

Excuse me a moment, please.

Successfully updated karma reason!

ZubaZ

Join Date 11/2001

+917

Quoting PoSmedley,

reply 210

Possible 'Please Wait' screen....

I double-dog dare you!

Successfully updated karma reason!

2of3

Join Date 10/2006

+816

Oh he's erasing me from the "list".........I knew you loved me!

Successfully updated karma reason!

2of3

Join Date 10/2006

+816

I would get into it today, but I'm not sure I can be of much assistance.

Me and my bud, Scott were drinking beer and playing Wii this evening. I'm a bit "tired" now........

Successfully updated karma reason!

Xiandi

Join Date 07/2007

+840

Quoting 2of3,

reply 217

I'm a bit "tired" now........

then...

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

Quoting 2of3,

reply 217

Me and my bud, Scott were drinking beer and playing Wii this evening. I'm a bit "tired" now........

No problem. In fact, I think I might be jumping on Star Trek Online for a few. I got the new Odyssey Class Flag Ship and wanna take her for a spin.

[e digicons](\(\[/e]

Successfully updated karma reason!

Uvah

Join Date 05/2006

+874

Stay buckled up in the center seat Po. I hear those Odyssey Class Flags can haul ass.

And ..... very happy you're sticking with the WB. Its turning out quite awesome!. Been playing with the psd's and its gonna take some finagling with the graphics to get it just right. Right now I'm just grouping the different effects like the stitching and stuff to make it easier to handle. Loving it so far.

Successfully updated karma reason!

ZubaZ

Join Date 11/2001

+917

Po': If you don't post, I can't make fun of you.

Successfully updated karma reason!

DrJBHL

Join Date 04/2002

+4249

Quoting PoSmedley,

reply 210

Possible 'Please Wait' screen....

Missing the proper head gear:

Successfully updated karma reason!

DaveBax

Join Date 10/2007

+629

Quoting DrJBHL,

reply 222

Quoting PoSmedley, reply 210Possible 'Please Wait' screen....

Missing the proper head gear:

Having that Please wiat screen pop up would make one make sure they have a very fast computer so not to wait to long. It is a scary thought to have to see that.

Successfully updated karma reason!

PoSmedley

Join Date 04/2005

+788

Good morning. I'll be around today. Sorry I missed yesterday. My hands and arms were pretty bad. I got online but it was difficult just to maneuver the mouse and I could only stay on for a minute or two here and there and finally just gave up. I'm a little better today and want to finish this chapter up if possible. I really got get a different mouse. Hopefully, next week I will be on my way to having the pain addressed and corrected.

Successfully updated karma reason!

Uvah

Join Date 05/2006

+874

Morning Po. Sorry to hear that. Just hang in there cause the old saying about a silver lining in the cloud can't be all bad. Hard to see but not too shabby.

Successfully updated karma reason!