PoSmedley PoSmedley

One Piece At A Time : Windowblind Tutorial Part I

One Piece At A Time : Windowblind Tutorial Part I

Design : Start Menu and Taskbar

 

 

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

291,829 views 227 replies
Reply #76 Top

Quoting 2of3, reply 75
Never seen a disabled taskbar button in Veesta (nor XP for that matter)

Well, I refer you to back to post #57 with the SS of SKS that actually lists it. Are you implying Stardock has listed a button state that is never used or doesn't exist, sir?

And who did you chase down and beat up to get that halo, anyway?

Reply #77 Top

Quoting PoSmedley, reply 61
So..if I get this..if I leave my buttons transparent EXCEPT for the side stitches...Skinstudio is gonna apply a color...that I don't WANT..to my buttons? Cause that would like, blow chunks and I didn't want to use the taskbar graphics to skin the buttons. I want to have them transparent and use the subtle highlights that neone6 suggested with just a hint of the side edges. I don't want no colors added.

No colors.

I don't want no colors, dammit.
You can do that too. Just don't skin the mouseover mask. ;)

Reply #78 Top

Quoting Xiandi, reply 77
You can do that too. Just don't skin the mouseover mask.

Okay.

*Note to self - Keep track of 'who to blame' when something doesn't work

Reply #79 Top

LOL @ Po.

 

Hey, yall need a Johnny Cash soundtrack running in the background on this thread.... :-"

Reply #80 Top

Quoting RedneckDude, reply 79
Hey, yall need a Johnny Cash soundtrack running in the background on this thread....

I was actually thinking of this.

Reply #82 Top

One piece at a time. Jeez ... been years since I've heard that one. My old man was a big fan back in the day.

 

Reply #83 Top

This is gonna look great Po! Docks and Winstep are in your future as well! :thumbsup:

Reply #84 Top

Quoting RedneckDude, reply 81
Naw man, you got it all wrong!!

 

This is it!

 

 

Awesome!!!!!! :beer:

Reply #85 Top

Quoting WebGizmos, reply 83
Docks and Winstep are in your future as well!

I was thinking this would be awesome in Winstep.

Reply #86 Top

A great read and watch.........an real insight...........anyone got any popcorn? |-)

Reply #87 Top

DX too, if ya want.

Reply #88 Top

 

Still stuck on the start button. Liking the 'letters' less and less. I don't care for using the 'Windows' logo. I definitely don't want something that overlaps the top of the taskbar.

Reply #89 Top

Quoting RedneckDude, reply 87
DX too, if ya want.

Quoting Xiandi, reply 77
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.

Let me know what you need. I'm waiting to hear back from Tim on something tomorrow before I move on it, but I hope to uploading all the files as they reach their individual finished states for anyone to play with.

*Just realized Tim is in Norway and fast asleep.

Reply #90 Top

Quoting BoXXi, reply 14
You could end up advancing WB skinning in a previously unheard of way. You could become the guys that showed the DEFINITIVE way of doing it right. To achieve this though, I hope you explain every last little detail as you go along, so that others can look at this and find the information that they need. I hope you cover everything, including things like, what is the optimum size for each piece of the skin, and why certain parts are drawn the way they are.

I didn't miss this and am trying to add stuff to the post at top as I go along. If I miss anything, give a shout here or PM me so I can add it, please. A lot of the details will have to come from the one's helping me, but I will make sure to get the answers if you give me the questions.

Reply #91 Top

I will wait a bit, things do change a lot, especially where Tim is involved...lol...no offense Tim. (He's a perfectionist).  :thumbsup:

Reply #92 Top

Just playin around with what you had available so far to see how it might look :grin: Sub menus might be a bitch though because of the shading and laces...we'll see. Brass rivets for some of the small buttons?...just a thought.

Reply #93 Top

G´mornin y´all (Off 2 werk in 1,5 hr) |-O \o/

-"Regular" height for task bar: 45 However Lethal Industry for example is 49...Optiimal ? Depends on what ya want.

Tim Is right when he says the Stitching should have it´s own layer giving you more freedom ith the tiling.

 I´d like to give some Ideas on your Startbutton too.

 

Reply #94 Top

One idea of many to come down the line...

Reply #95 Top

:sun:

Reply #96 Top

oooooh , I like that second one ! 5*

 

perhaps maybe just a little wider would be perfect :thumbsup:

Reply #97 Top

I agree with Ace .... the second one, a wee bit wider, has more 'wow' to it. You're doin' great Po. Got an Smx if ya want one.

Reply #98 Top

i was thinking of a metal snap  for the startbutton... andy´s number 2 is kick ass,, or you can create your own wicked thingy....

some crazy ideas from the hardstyler gangsters ^_^

Reply #99 Top

Or a brass clasp with the same insert. Just a thought.

 

Reply #100 Top

With the task bar buttons, what about no stitching? Like the button's a loose bit of leather that has come up from the task bar.