One Piece At A Time : Windowblind Tutorial Part IV

Putting It Together : Start Menu

By on February 3, 2012 11:29:25 AM from WinCustomize Forums WinCustomize Forums

PoSmedley

Join Date 04/2005
+782

 

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

349 Replies
Search this post
Subscription Options


Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 11:40:35 AM from WinCustomize Forums WinCustomize Forums

Since we will be using the layers function on this skin the first step is the base layers.

 

 

we'll start by using the first 2 layers (Start Panel Base and Start Panel Overlay) of the image and adding guides.

 

 

 

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 11:47:28 AM from WinCustomize Forums WinCustomize Forums

Now we can slice it up.

 

In PS, grab the rectangular marquee tool and block out the top part

 

go to Edit>copy merged ( or hotkey shift+ctrl+c)

 

New doc (ctrl+n) and paste it in (ctrl+v)

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 11:50:13 AM from WinCustomize Forums WinCustomize Forums

Do this for all the sections.

 

Quoting 2of3,
Now we can slice it up.

 

In PS, grab the rectangular marquee tool and block out the top part

Reduced 82%Original 731 x 242

 

go to Edit>copy merged ( or hotkey shift+ctrl+c)

 

New doc (ctrl+n) and paste it in (ctrl+v)

 

save as a .png (I use standard file names for these: sp_top.png)

 

Repeat the process for all the 5 pieces.

Reason for Karma (Optional)
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.
February 3, 2012 11:50:30 AM from WinCustomize Forums WinCustomize Forums

SORRY, JUMPED AHEAD. SAVE THIS FOR LATER.

QUESTION : Assuming when we open SkinStudio and select New Blind, which format do we chose?

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 11:57:29 AM from WinCustomize Forums WinCustomize Forums

the one selected is the one you need

We are advanced after all!

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:01:38 PM from WinCustomize Forums WinCustomize Forums

this illustrates the 5 sections more clearly

 

Notice that the all program section (yellow) is 30 px high. One might as well do that because that section is fixed in height. 30 pixels....no more...no less.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:09:17 PM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
this illustrates the 5 sections more clearly

Now you show me. lol

Can't shake off shot and did it wrong and then did all jpg's. Caught up now.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:12:12 PM from WinCustomize Forums WinCustomize Forums

Once sliced, you should have these pieces:

 

Top

Left

All Programs

Bottom

Right

 

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:12:36 PM from WinCustomize Forums WinCustomize Forums

Got it.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:13:10 PM from WinCustomize Forums WinCustomize Forums

Questions so far?

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:17:59 PM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
Questions so far?

Are there predefined measurements like for the All Programs area? How do you determine the sizes for the left and right panels?

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:19:11 PM from WinCustomize Forums WinCustomize Forums

Check your images against the ones posted in reply#8. They need to be exactly the same dimensions or the painting margins that I will tell you about later will be off.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:21:34 PM from WinCustomize Forums WinCustomize Forums

Quoting PoSmedley,
Are there predefined measurements like for the All Programs area? How do you determine the sizes for the left and right panels?

I eyeballed the width of the slices (it come with experience) . The left side should be wider than the right side. The only thing set in stone is the all prog section (30px high).

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:23:10 PM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
Check your images against the ones posted in reply#8. They need to be exactly the same dimensions or the painting margins that I will tell you about later will be off.

They all match.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:23:41 PM from WinCustomize Forums WinCustomize Forums

sweet!

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:24:05 PM from WinCustomize Forums WinCustomize Forums

Ready to open sks?

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:24:51 PM from WinCustomize Forums WinCustomize Forums

Go for it.

 

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:27:05 PM from WinCustomize Forums WinCustomize Forums

Note that the outer glow and drop shadow serve also in giving you some canvas around the pieces. That will ensure that the SP doesn't hug the left of the screen and doesn't sit right on the taskbar.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:31:27 PM from WinCustomize Forums WinCustomize Forums

Open sks and create a new skin (choosing advanced skin)

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:33:16 PM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
Open sks and create a new skin (choosing advanced skin)

Done.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:33:19 PM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
this illustrates the 5 sections more clearly
"clearly"  Ha.  In my head you made a funny.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:34:00 PM from WinCustomize Forums WinCustomize Forums

First go to substyle management. click yes when prompted to save. Delete the Vista and xp substyles.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:35:32 PM from WinCustomize Forums WinCustomize Forums

I don't understand why anyone would want to start a new skin with 3 finished substyles....they gotta go!

 

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:35:35 PM from WinCustomize Forums WinCustomize Forums

Also, I love you guys.  In a manly sort of way.  Unless we were in prison and you had cigs or something.

Reason for Karma (Optional)
Successfully updated karma reason!
February 3, 2012 12:39:32 PM from WinCustomize Forums WinCustomize Forums

I don't see an option to delete anything.

Reason for Karma (Optional)
Successfully updated karma reason!
Stardock Forums v1.0.0.0    #108432  walnut2   Server Load Time: 00:00:00.0000218   Page Render Time:

Home | About | Privacy | Upload Guidelines | Terms of Service | Help
WinCustomize © 2014 Stardock Corporation. All Rights Reserved.