One Piece At A Time : Windowblind Tutorial Part I

Design : Start Menu and Taskbar

Monday, January 16, 2012 by PoSmedley | Discussion: WindowBlinds Tutorials

 

 

Okay. This is it. I've been sitting on it most of the day after bugging a few folks  for their opinions.

2of3 offered to help me with this. Vampothika & neone6 also offered help and support.

I decided to go with something new to get a fresh start and came up with this. Hopefully, it's simple enough so as not to be problematic along the way, but stylish enough that a lot of you will like it and it won't be too easy so I (and you) can learn from it as we go along.

2of3 was kind enough to send me some files to follow as sort of a workflow to keep organized. We're gonna go one piece at a time and won't be moving on to the next until the one we are on is good.

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

So...this is pretty much it. How the rest of this thread progresses and shapes up will depend on how the back and forth transpires. If I leave something out as we go along and you want me to back up, give a yell. I'll be happy to.

If this is the only skin I ever do, we're gonna go through it from start to finish so enjoy.

What you see above is the Start window (I'll probably be going with the darker of the two). (401 px x 500 px)

These were the drafts.

 

UPDATE 1/17/2012 : gmc2 is going to attempt to do the Wiki for this. Woot! Based on that, I think we'll be doing more than one thread as we progress. THIS particular thread will be the basic design/draft of all the parts. Hopefully, this will make it easier for gmc2 to do his thing and make it easier for anyone to follow the progress.

I'll be asking for suggestions from time to time. Feel free to PM me anything.

Also - If you want to make anything to go with, this here is a color chart if it helps. I'll be sticking to these colors. Any variations will be due to shading/effects or 'overlay' layers.

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

NOTES: Start Menu and Taskbar -

  • Leather Effect - There are a lot of good tutorials for leather effects around. For Windowblinds there is the issue of tiling and stretching and the details of the effects can make or break the skin. I had to come up with my own to try to keep it simple. In PHOTOSHOP, make your object and go to Filters>Textures>Texturizer - Select Sandstone - Scaling 60 - Relief 2 - Lighting Top (IF you have a copy of Rust Flakes in your Texturizing filter, you can make a much more textured leather)
  • Thread/Stitch Effect : There are a lot of tutorials for this but most involve Adobe Illustrator at one point or another. My issue was keeping the stitching straight and uniform. (The draft on the far right of the second image above shows how it looks 'freehand' .) I did find one for Photoshop that was great (It was the only one I found that relied entirely on Photoshop). Besides helping me with this, it also shows what you can do with your brushes to get some different results and can be fun to play with if you're unfamiliar with this technique. Here is the link for the Photoshop Tutorial.
  • Start Menu - 401 px x 500 px (This was my choice after talking to Tim. I will get back here as to recommended size and why)
  • Taskbar  - 400 px x 50 px - If you have looked at a lot of skins like I have, you may notice that 35 to 38 px is pretty common. Some mentions have been made in this thread as to what specifically can alter/control your taskbar size. For this particular skin, I am going with a 50 px taskbar to accommodate the stitching. It is a 'rounded corner' taskbar' and the png is different than one you might use for a taskbar that spans the width of the screen. (I will post the png when it is ready) I will, for sake of this tutorial, skin all of the buttons for the taskbar so we can give an example of what the finished png might look like. (Again, I will post when I have it done.)
  • Taskbar Buttons - For this skin, mine will be 50px x 50 px - They will be in the following order normal ,pressed, disabled, highlighted, activated, activated & highlighted. (Picture to be posted when complete)

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

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 Title Bars and Window Frames  

  Roan WB Taskbar Buttons

First Previous Page 8 of 12 Next Last
Xiandi
Reply #141 Wednesday, January 18, 2012 4:56 PM

PoSmedley
I will have to look. I'm using 'Corporate' right now and there are no little arrows when I mouse over anything in the start panel. (if thats what you mean.) Can you give me an example of a skin so I could see that in action? (Corporate has no expanded panel)
Corporate does have the expanded panel. If you don't have arrows, then you need to put a program on your start panel that has an arrow. On mine, I have Photoshop, Notepad, CCleaner and Firefox, all those have an arrow.

Left is Corporate normal, and right is expanded.

theAVMAN
Reply #142 Wednesday, January 18, 2012 4:57 PM

Xiandi
Quoting PoSmedley, reply 135Anyone want to take a shot at making the Trinity Circles spin in the start button (Just have the 'logo' spin on mouseover) ? (My animations are horribly jumpy) Harley would be my first choice. My animations are ok, his are perfect.

I will be glad to help anyway I can I will take a closer look when I get home off my phone and back on the PC.

PoSmedley
Reply #143 Wednesday, January 18, 2012 4:59 PM

Xiandi
Left is Corporate normal, and right is expanded.

Got it. Put PS on it and can see it.

I suppose there's no way to lose the arrows or those little stick pins? ( I see in SKS that using the expanded panel is optional..but I do what to skin everything, dammit.)

BTW - I'm sending you a bill for my Advil.

PoSmedley
Reply #144 Wednesday, January 18, 2012 5:00 PM

damn double post

Xiandi
Reply #145 Wednesday, January 18, 2012 5:08 PM

PoSmedley
I suppose there's no way to lose the arrows or those little stick pins?
nope, sorry.

PoSmedley
Reply #146 Wednesday, January 18, 2012 5:24 PM

Are you sure? (Sorry, 'quotes' aren't working for me right now)

DrJBHL
Reply #147 Wednesday, January 18, 2012 5:29 PM

???

Why is Xiandi's avatar different in the screenie? Po'... if you're playing instead of skinning...

PoSmedley
Reply #148 Wednesday, January 18, 2012 5:32 PM

DrJBHL
Why is Xiandi's avatar different in the screenie? Po'... if you're playing instead of skinning...

It looks exactly the way it always does when she comes in here and stomps all over my heart. I don't know WHAT YOU'RE talking about.

 

So...I notice it is different colors in different skins...maybe I can make the arrows the same color as the background I use I can blend them in?

Xiandi
Reply #149 Wednesday, January 18, 2012 5:44 PM

I'm sure. (seems quotes are not working for me either)

The color of those arrows is determined by the color of the text there. <--- intentionally oversimplified statement

DrJBHL
Reply #150 Wednesday, January 18, 2012 6:23 PM

This is what I see:

 

 

RedneckDude
Reply #151 Wednesday, January 18, 2012 6:35 PM

roflmao!!!!! 

PoSmedley
Reply #152 Wednesday, January 18, 2012 7:44 PM

I'm going to have to wait until I get to the SKS part to see what it all looks like.

Doc, you need to get your eyes checked. I still don't know what you're seeing and I'm just as cute as I always was.

neone6
Reply #153 Thursday, January 19, 2012 1:25 AM

PoSmedley
Reduced 73%Original 600 x 600

Do I need to skin the expanded panel for when you hover over FF for example and it shows you your recent visits?
Po, I know that you want to skin EVERYTHING....But, trust me......

you seem to be picky about your design....Ditch the expanded startmenue alltogether. It´s a nuisance and it´s fugly

With the right settings everything will work as it should exept the start menue won´t be stretching sideways  and you Don´t want that !

Trust me on that one too !

 

neone6
Reply #154 Thursday, January 19, 2012 1:29 AM

Off to work now, but In sks later it will be piss easy to set the values so you don´t get that sideway stretch that´ll fuck up your design

-Later b r o

-lol

AceMatrix
Reply #155 Thursday, January 19, 2012 1:48 AM

test

gmc2
Reply #156 Thursday, January 19, 2012 6:01 AM

neone6
Ditch the expanded startmenue alltogether. It´s a nuisance and it´s fugly

that's a pretty broad statement. I don't care a lot for the left side but the right side has it's uses and sparkles up the experience.

but it is an optional graphic and not required for form, fit or function.

2of3
Reply #157 Thursday, January 19, 2012 6:27 AM

There is no reason an expanded menu won't work with your design, Po

DrJBHL
Reply #158 Thursday, January 19, 2012 7:03 AM

PoSmedley
Doc, you need to get your eyes checked. I still don't know what you're seeing and I'm just as cute as I always was.

You have gmail.

neone6
Reply #159 Thursday, January 19, 2012 7:26 AM

neone6


I know that you want to skin EVERYTHING....But, trust me......


you seem to be picky about your design....Ditch the expanded startmenue alltogether. It´s a nuisance and it´s fugly

With the right settings everything will work as it should exept the start menue won´t be stretching sideways  and you Don´t want that !

Trust me on that one too !

 
Read what I write with a pinch of salt and read between the lines a little -It´s no lawsuite for god´s sake.

-Of course it would work to have an expanded startmenue on your blind, Po. I personally don´t like it,but...

Some seem to forget that it is your first blind and not all parts have to be skinned, personally I think some Parts are idiotic, but that´s just me. Instead concentrate/skin the more the important parts really Proper.

However -It´s your skin in the end and it will ofcourse be done according to your preferences.

Vampothika
Reply #160 Thursday, January 19, 2012 8:16 AM

question.... for some reason i thought that the search mode pieces replaced the expanded menu? right or wrong?

see po...even masters like moi get fugged up in sks sometimes...hehhe

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