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 3 of 12 Next Last
Wizard1956
Reply #41 Tuesday, January 17, 2012 1:29 PM

@HeirOfSlytherin: I'd love to see you make something for Win7. A remake of Iron Horse would make my year.

Back on topic: I'm really liking that leather look. Any chance of a black substyle?

DaveBax
Reply #42 Tuesday, January 17, 2012 1:37 PM

Xiandi
One thing you should know about the taskbar. When you set your text margins on the buttons, it will change the height of your taskbar. The bigger you set the text margins, the taller your taskbar gets.

Man this thread is going to be great and already is actually. I never knew about the taksbar height changing with the button text margins. I always set it at one number and used that number for all my skins. No wonder changing the height of my actual taskbar didn't do anything. Me thinks a lot of hidden stuff is going to come out to help everyone. This rocks.

AceMatrix
Reply #43 Tuesday, January 17, 2012 1:41 PM

PoSmedley
PM me and let me know if you need anything from me.

P.M. Sent......................  -- Ace --

teddybearcholla
Reply #44 Tuesday, January 17, 2012 1:46 PM

PoSmedley
I'll say it one time. I'm committed. These threads will be the only forum posts I make on WC from here on out, until it's done.
   


Proud of you Noah!!!  

PoSmedley
Reply #45 Tuesday, January 17, 2012 1:46 PM

Wizard1956
Any chance of a black substyle?

I don't know about black. I had considered blonde (seriously) but substyles...I was just thinking versions (Vista, 7). BUT - This does desaturate rather nicely in PSP (Black had crossed my mind so I wanted to see) and I assume it will in Windowblinds.

neone6
Reply #46 Tuesday, January 17, 2012 1:48 PM

PoSmedley


 It just occurred to me these may look awful when grouped in 7.

It will werk if you put the stitches all the way to the edge

AND choose one style, for it will be enough werk as it is -trust me. (Black WAS nice) 

BoXXi
Reply #47 Tuesday, January 17, 2012 1:54 PM

Xiandi
Gawd, I'd love to get my hands on some of the things you've 'binned'.

I binned my butt cheeks a while ago............

PoSmedley
Reply #48 Tuesday, January 17, 2012 2:24 PM

I binned my butt cheeks a while ago...........

You had no choice. I heard Goodwill wouldn't even take them.

Vampothika
i personally prefer the taskbar with the rounded edges, it matches the startmenu.

So do I.

Top or Bottom?

Wait..

I mean 'A or B'?

 

 

 

neone6
Reply #49 Tuesday, January 17, 2012 2:27 PM

PoSmedley



I mean 'A or B'?



 

 

 
-Kitty says A.

PoSmedley
Reply #50 Tuesday, January 17, 2012 2:28 PM

neone6
-Kitty says A.

Yeah. The stitching at the bottom doesn't work with the rounded corners as well.

SO...the buttons. (HA!)

Anyway .. with or without the edges visible? I'm really torn on this.  And if I do the edges what about the shadow? (See circles - with and without)

Xiandi
Reply #51 Tuesday, January 17, 2012 2:54 PM

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

neone6
Reply #52 Tuesday, January 17, 2012 3:10 PM

Only shadows on the sides.

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

Vampothika
Reply #53 Tuesday, January 17, 2012 3:13 PM

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

 

 

PoSmedley
Reply #54 Tuesday, January 17, 2012 3:16 PM

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

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

neone6
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

neone6
Reply #55 Tuesday, January 17, 2012 3:27 PM

PoSmedley


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.

neone6
Reply #56 Tuesday, January 17, 2012 3:29 PM

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

PoSmedley
Reply #57 Tuesday, January 17, 2012 3:37 PM

neone6
Default is 6

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

RedneckDude
Reply #58 Tuesday, January 17, 2012 3:39 PM

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? 

neone6
Reply #59 Tuesday, January 17, 2012 3:47 PM

PoSmedley



My order IS CORRECT

Xiandi
Reply #60 Tuesday, January 17, 2012 3:58 PM

PoSmedley
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?

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