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

from WinCustomize Forums

 

 

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,807 views 227 replies
Reply #51 from WinCustomize Forums Top

"A" definitely, and maybe ease off on the shadows on the leather a bit...seems a bit dark.

Reply #52 from WinCustomize Forums Top

Only shadows on the sides.

Your Png should look something like this (not sure about the pixel accuracy on this ;) )

DeskScapes - Bring your desktop background to life.
Reply #53 from WinCustomize Forums Top

hmm, your task bar buttons..... loose the bottom glow, it steals too much of the buttons thunder.

andys pic is a good example of what to go for, have a extremely gentle glow for the top... (so hard to explain) but i think you know where im going

 

 

Reply #54 from WinCustomize Forums Top

Quoting Xiandi, reply 51
ease off on the shadows on the leather a bit...seems a bit dark.

Working on it. Cuff and collar gotta match, ya know. 2of3 mentioned fixing some of that with lighting masks (?) when we start putting it together.

Quoting Vampothika, reply 53
loose the bottom glow, it steals too much of the buttons thunder.

Quoting neone6, reply 52
Your Png should look something like this

Noticed that on the last shot I posted. ;) *plus the brighter hightlight will wash out my fonts (Vista), since I will be going with a lite colored font, right?

I don't like the grey, sorry. How many states do I HAVE to have, neone6?

*note to self - turn off auto-dj on MediaMonkey - going from 'El Paso' to hardcore Trance with no warning will f*** your head up

Reply #55 from WinCustomize Forums Top

Quoting PoSmedley, reply 54


I don't like the grey, sorry. How many states do I HAVE to have, neone6?
Default is 6...normal ,pressed, disabled, highlighted, activated, activated & highlighted. (Help -Tab in sks) What I would do If I don´t want them to differ in design too much is to have them not change so much color & brightnesswise between them, although the more difference the easier to define the state of the button. |-)

Reply #56 from WinCustomize Forums Top

Gray´s for disabled... some make it transparant but In this case it wouldn´t werk (color-placing Not correct on my example)

Reply #57 from WinCustomize Forums Top

Quoting neone6, reply 55
Default is 6

Quoting neone6, reply 55
normal ,pressed, disabled, highlighted, activated, activated & highlighted

When I make the png is that ^^^^^^^^^the order I want them in? That always confuses the hell out of me. I've looked at a lot of skins and everyone is different in how they alter their buttons for each state. I just want to know the order they need to be in first.

Skinstudio lists them but how? L to R? T to B?

And the (AHEM) Wiki Page is blank on this.

Reply #58 from WinCustomize Forums Top

Quoting BoXXi, reply 14
This could turn out to be one of the most important posts ever made on these forums if you two guys go about it the right way. If you go through EVERY section of the skin showing the best way to do things it will remove a lot of the mystique and difficulties surrounding making a WB skin.

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 have every faith in Tim's ability to show the right way to do things, and equal faith in Noah's graphic abilities to give us a great skin at the end of this. I will also be following along closely and hope to get enough information from this to finish some of MY problematic WB skins!!

The community needs this thread, I hope it works out for everyone. Go for it guys!!!

Nuff said!  Ditto. Yes. Hell yes.  

 

 

 

 

Did I mention that I agree?  :thumbsup:

Reply #59 from WinCustomize Forums Top

Quoting PoSmedley, reply 57



My order IS CORRECT ;)

Reply #60 from WinCustomize Forums Top

Quoting PoSmedley, reply 54
2of3 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?

Reply #61 from WinCustomize Forums Top

Quoting Xiandi, reply 60
He may have been referring to the mask for the taskbar buttons.

He mentioned it when I first sent the drafts of the start panels. I have a lot of light effects on them from PSP and I think he was saying to leave them out and we could play with the lights and shadows in Skinstudio. I'm guessing with Skinstudio you could do it with the taskbar as well? I'm trying not to get ahead of myself. Everything I am doing can fly as is or I can remove the lighting and shadows.

*reaches for more Advil

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.

Reply #62 from WinCustomize Forums Top

Quoting neone6, reply 59
My order IS CORRECT

Yeah, I know. Kitty said you had burgers and fries and they were all 'nummy'. What about the order of the buttons?

Reply #63 from WinCustomize Forums Top

Remember to breath.   And sounds like your rushing.    No Rush.   Just one step at a time.  :inlove:   And a Wow.

Reply #64 from WinCustomize Forums 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.
Yes doing it with the masks will give you blue, orange, red n shit, moving as you move the cursor over them....

Po...We´ll go in a steady pace getting it where YOU want in ways YOU (and hopefully others) understand it -ok  ?  ;)

Reply #65 from WinCustomize Forums Top

Quoting PoSmedley, reply 61
PSP

paint shop pro? that's what I use, version 7

Reply #66 from WinCustomize Forums Top

Quoting PoSmedley, reply 62



Quoting neone6,
reply 59
My order IS CORRECT


 What about the order of the buttons?
My order IS CORRECT - top to bottom in sks

Reply #67 from WinCustomize Forums Top

If you wanna know/get somethin more to work on til 2morrow tell me now as I´m going to bed soon (up 06.00 -w o r k)

Reply #68 from WinCustomize Forums Top

Quoting gmc2, reply 65
PSP

My bad. Meant PHOTOSHOP.

Quoting neone6, reply 67
If you wanna know/get somethin more to work on til 2morrow tell me now as I´m going to bed soon (up 06.00 -w o r k)

Go to bed. I'll be working on the taskbar and start panel. Nothing that can't wait. Oh wait.....ha...states for the Start Button? Same as the TB Buttons? Then ya can go to bed. ;)

Image above should have shown transparent background for the png state. Sorry bout that.

*Have tweak the differences in states..looked different in photoshop.

Reply #69 from WinCustomize Forums Top

Quoting PoSmedley, reply 68



Quoting gmc2,
reply 65
PSP


My bad. Meant PHOTOSHOP.




Quoting neone6,
reply 67
If you wanna know/get somethin more to work on til 2morrow tell me now as I´m going to bed soon (up 06.00 -w o r k)
 Oh wait.....ha...states for the Start Button? Same as the TB Buttons? Then ya can go to bed.


Startbutton states: normal, pressed, disabled, mouseover, focus&default (5)

Your Image looks great ! But remember that there will be quite hard to identify what state is showing. :sun:

G´nite Poster lol ^_^' |-O :time: :zzz:

Reply #70 from WinCustomize Forums Top

Quoting neone6, reply 56
Gray´s for disabled... some make it transparant but In this case it wouldn´t werk (color-placing Not correct on my example)

Win 7 doesn`t use the disabled or pressed states of the taskbar buttons, so you can do them the same as the normal state. I essence, you need a normal state, highlighted (aka mouseover), activated (the button that shows an open/active window) and active and highlighted (an active button mouseover) Like I said you`ll never see the pressed and disabled states, so there you can put anything (I just copy the normal state as a "filler")

 

What I said about the lighting on the startpanel was: when we assemble the startpanel in sks, I can see us using up to 3 layers to acheive the look.

base layer would be the brown with the texture on it (tiled)

second, the stitching (tiled)

third, any lighting/gradient effects (stretched)

 

The reason I would do the stitching as a seperate layer is because it will give you more freedom in where you set your tiling margins.....you won`t have to worry about it effecting the tiling on the textured layer.

Reply #71 from WinCustomize Forums Top

Don`t rush. Get your design drafted and we`ll worry about making it actually work later. A lot of things are possible just hard to make work....but I`m very creative at finding solutions to these things.

All sections will be gone through in detail as we start putting the skin together in sks.

Reply #72 from WinCustomize Forums Top

Quoting 2of3, reply 70
Win 7 doesn`t use the disabled or pressed states of the taskbar buttons, so you can do them the same as the normal state. I essence, you need a normal state, highlighted (aka mouseover), activated (the button that shows an open/active window) and active and highlighted (an active button mouseover) Like I said you`ll never see the pressed and disabled states, so there you can put anything (I just copy the normal state as a "filler")

8(| Well, I already did them so na-na-na-na-boo-boo. They can be used in the Vista version, right?

Quoting 2of3, reply 70
What I said about the lighting on the startpanel was etc., etc....

Right. That's exactly what I said...while I was dreaming during my nap.

I get the lighting and shadows. How you're gonna do that with the stitches boggles my mind and has me nervous but I'll blow that bridge all to hell when we get to it.

Meanwhile...

Reply #73 from WinCustomize Forums Top

I agree with the others about the taskbar.......no stitching on the bottom. This image in reply #68 looks great and very doable.

Reply #74 from WinCustomize Forums Top

Yes....it`s important to note that using overlay or screen blending may not work if your image is semi trans. The layers in sks do have blend modes similiar to that though so it is possible to tweak the image there.

Reply #75 from WinCustomize Forums Top

Never seen a disabled taskbar button in Veesta (nor XP for that matter)  O:)

 

 

 

Pressed state is used in Vista, though.