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 7 of 12 Next Last
vStyler
Reply #121 Wednesday, January 18, 2012 1:11 PM

Nice Job Po, wish I had the time to contribute but I cant even seem to get to my own work right now..

looks like your in good hands tho...

Keep up the good work.

benmanns
Reply #122 Wednesday, January 18, 2012 1:12 PM

Xiandi
Quoting PoSmedley, reply 542of3 mentioned fixing some of that with lighting masks (?) when we start putting it together.He may have been referring to the mask for the taskbar buttons. What that does is IF your buttons are transparent, you can set the mask to show where the default button colors show through.

Meaning, if you have your taskbar buttons transparent, and only have the stitching in the graphic, the color of the button is determined by what application is being used. In this case, you would not have to alter your button image much for each state. What I typically do in this case is make all the button states exactly the same, and add a subtle highlight glow for the active and active/highlighted states. Make sense?

they dont have to be transparent as far as i know if a mask exists the color defined by the program will be shown when you mouseover your Taskbarbutton and will move with your cursor...while the mask activates that feature + size of the mask will define the size of the area on your Taskbarbutton or over your taskbar button...
The mask section is or can be pretty neat if you trick it -using a full scale Mask size -while having smaller Taskbar button : That way you can achive a small afterglow effect in the same color as the program defines : i think my explaination is to weired but here is what i mean just if someone wanted to know...
 1.state ( left )mousover and mask applyd 2nd is the normal state ( the mask of the mouseover will glow 1 second longer when your mouse is already off the button ) if you look close the sides are still glowing... while this is only a little effect it can be amazing on a transparent taskbar...

PoSmedley
Reply #123 Wednesday, January 18, 2012 1:14 PM

Vampothika
what numbers are these set to? try setting them both to zero and see what happens

I haven't applied any of this yet. The other skins are on my Vista Boot.

Yeah, the horz and vert are a bitch with the start panels I have made. Like I said, it's my design and not knowing the limitations of the area. When I have tried to adjust the x/y on it I can only go so far because of the area I have allowed myself for it and what SKS will allow. When we get to SKS I'll do it the way I usually do and you'll see then. lol.

PoSmedley
Reply #124 Wednesday, January 18, 2012 1:20 PM

vStyler
looks like your in good hands tho...

Keep up the good work.

Yup.

and thank you!

WebGizmos
Added your new start button and threw in some other buttons to play with.

You're going to be done before I am!

* Note to self - New year, new List. Start updating.

Roloccolor, you lost me at 'mask'. Haven't played with that area of SKS yet but if you will hang around until we get to SKS you can try and inflict a migraine on me then.

 

gmc2
Reply #125 Wednesday, January 18, 2012 1:29 PM

PoSmedley
Tell me about the search window. I've had issues with that as far as skinning.

for me at least, if I skin the search window from the "edit vista/7 explorer parts", "search field background" it eliminates the need to do the start menu graphic and provides better results.

gmc2
Reply #126 Wednesday, January 18, 2012 1:36 PM

I'm taking most of the graphic shots from this thread so far. I might need some idea of what is wanted to be placed into the wiki. lot of info to sort through here, make a note to the "wiki note:" would be helpful.

PoSmedley
Reply #127 Wednesday, January 18, 2012 2:02 PM

PoSmedley
Reply #128 Wednesday, January 18, 2012 2:12 PM

oops

PoSmedley
Reply #129 Wednesday, January 18, 2012 2:20 PM

I think I am almost done with the TB and SM.

I need to do the v-TB and do I want to do the expanded start menu panel for when you hover FF or whatever?

*I'm not going to do the user icon panel-btw

*Also probably not going to use the 'separator' stitching. Thinking of leaving the separators out.

neone6
Reply #130 Wednesday, January 18, 2012 2:21 PM

I'm taking most of the graphic shots from this thread so far. I might need some idea of what is wanted to be placed into the wiki. lot of info to sort through here, make a note to the "wiki note:" would be helpful.
cool

Vampothika
Reply #131 Wednesday, January 18, 2012 2:23 PM

for me at least, if I skin the search window from the "edit vista/7 explorer parts", "search field background" it eliminates the need to do the start menu graphic and provides better results.

damn straight, greg is right, follow that advice to the t.

PoSmedley
Reply #132 Wednesday, January 18, 2012 2:25 PM

Vampothika
for me at least, if I skin the search window from the "edit vista/7 explorer parts", "search field background" it eliminates the need to do the start menu graphic and provides better results.

damn straight, greg is right, follow that advice to the t.

So, if I skin the search windows in the explorer parts, that will apply to the search window in the start panel? What is the size limitation?

neone6
Reply #133 Wednesday, January 18, 2012 3:34 PM

PoSmedley
Quoting Vampothika, reply 131for me at least, if I skin the search window from the "edit vista/7 explorer parts", "search field background" it eliminates the need to do the start menu graphic and provides better results.

damn straight, greg is right, follow that advice to the t.

So, if I skin the search windows in the explorer parts, that will apply to the search window in the start panel? What is the size limitation?
Look for it in Sks -"Diamond" the regular size is there.

Actually That´s a good place to check for the Size limitations on parts overall

BoXXi
Reply #134 Wednesday, January 18, 2012 3:38 PM

PoSmedley
So, if I skin the search windows in the explorer parts, that will apply to the search window in the start panel?

This is correct, and my advice is, keep it a plain color..... you should see the fun I'm having making a patterned one!!!!!

PoSmedley
Reply #135 Wednesday, January 18, 2012 3:55 PM

 

  • Do I need to skin the expanded panel for when you hover over FF for example and it shows you your recent visits?
  • Do I need to skin the background for the All Programs or do I just select a color when I get to it in SKS?
  • Anyone 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)
AceMatrix
Reply #136 Wednesday, January 18, 2012 4:00 PM

K10 - Karen, would be an excellent candidate for that,  from what I know.                        -- Ace --

gmc2
Reply #137 Wednesday, January 18, 2012 4:27 PM

PoSmedley
Do I need to skin the expanded panel for when you hover over FF for example and it shows you your recent visits?

just my opinion but if you can skin it then...

PoSmedley
Do I need to skin the background for the All Programs or do I just select a color when I get to it in SKS?

I'd make my own Po. You can make something really light that just gives a hint of mouseover. otherwise, you're stuck with a solid color. you do mean the mouseover to the all programs and not the all programs background color, which is a solid color and can be selected almost anywhere in the "edit start menu" panel under "estra settings".

it's coming along rather nicely.

Xiandi
Reply #138 Wednesday, January 18, 2012 4:35 PM

Those 'x' stitches on the start menu mouseovers are probably going to be a problem. The little arrow on the right side,next to FF and the like, will sit right there, and the icons will probably sit over the stitches on the left.

Edit: Yes, you should skin the expanded start menu, but I think you can hold off on worrying about that for now. Worry about that when you get to it in SKS.

 

PoSmedley
Reply #139 Wednesday, January 18, 2012 4:41 PM

the all programs background color, which is a solid color and can be selected almost anywhere in the "edit start menu" panel under "estra settings".

This one, yes.

Xiandi
Those 'x' stitches on the start menu mouseovers are probably going to be a problem. The little arrow on the right side,next to FF and the like, will sit right there, and the icons will probably sit over the stitches on the left.

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)

Xiandi
Reply #140 Wednesday, January 18, 2012 4:41 PM

PoSmedley
Anyone 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.

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