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 6 of 12 Next Last
PoSmedley
Reply #101 Wednesday, January 18, 2012 8:29 AM

Good morning.For anyone who cares, I had a rough night. For those bored by that shit, I slept like a gorram baby (insert big smile and sparkling, alert eyes) Either way, I'm looking forward to today. I think I have the taskbar done (start button is in limbo) and hope to get the start panel done today.

WebGizmo, just WOW.

Thanks for the start button ideas. Unfortunately, nothing is working for me. I may just stick with the 'O' or the 'A' and come back to it (because there are no excuses and nothings gonna hold this back). I need something that grabs me.

BoXXi
Reply #102 Wednesday, January 18, 2012 8:44 AM

PoSmedley
Good morning.For anyone who cares, I had a rough night

We don't care....... Just make the damn skin!

PoSmedley
Reply #103 Wednesday, January 18, 2012 9:06 AM

We don't care....... Just make the damn skin!

THE IGNORE BUTTON IS A MYTH!

DrJBHL
Reply #104 Wednesday, January 18, 2012 9:51 AM

Looks like a good start, Giz. The 'θ' actually looks very good too.

ZubaZ
Reply #105 Wednesday, January 18, 2012 9:52 AM

PoSmedley
THE IGNORE BUTTON IS A MYTH!
As is every WB you have ever started.  

2of3
Reply #106 Wednesday, January 18, 2012 10:10 AM

Sorry if I was unclear about the taskbar buttons states yesterday. Of course you need to have a button for every state (6 total) it is just not important what the pressed and disabled buttons look like as you will never see them.

 

As for the start button..... why not let it lie for a bit and go on to drafting the window frames? I find that one thing leads to another. Something you do in one section may inspire you to mirror in another. You are still in the design stage, so you are free to hop around as much as you like.

Details like what all the state of one button will look like are not as important at this stage as getting a fuller picture of what the skin "feels" like.

 

One final thing for now. If it takes me a while to reply to anything here, it is because I am

1. At sea....somewhere in between Norway and Germany

2. Not in the same time zone as the US

AceMatrix
Reply #107 Wednesday, January 18, 2012 10:49 AM

1. At sea....somewhere in between Norway and Germany
2. Not in the same time zone as the US

 

REALLY ??  I didn't know that ....

PoSmedley
Reply #108 Wednesday, January 18, 2012 10:55 AM

 

blah blah yadda yadda derrrrrrrrrrp!

I see the short bus has arrived.

ZubaZ
Reply #109 Wednesday, January 18, 2012 11:03 AM

PoSmedley

 

Like!

PoSmedley
Reply #110 Wednesday, January 18, 2012 11:03 AM

2. Not in the same time zone as the US

You , Vamp, and neone6 are 6 hours ahead of me.

You're all light-years ahead of Zubaz but that's a whole other derp.

RedneckDude
Reply #111 Wednesday, January 18, 2012 11:21 AM

 

Hell yeah!!!   

 

 

PoSmedley
Quoting 2of3, reply 1062. Not in the same time zone as the US

You , Vamp, and neone6 are 6 hours ahead of me.

You're all light-years ahead of Zubaz but that's a whole other derp.

 

Po, you are certifiable, I like you!

AceMatrix
Reply #112 Wednesday, January 18, 2012 11:58 AM

here's a concept I made to share some of my ideas as well......

Start Button-- Ace --

PoSmedley
Reply #113 Wednesday, January 18, 2012 12:40 PM

AceMatrix
here's a concept I made to share some of my ideas as well......

Nice. Very ornate.

I'm going with the last one I made. I have personal reasons and will explain later.

RedneckDude
I like you!

Excuse me while I have my Sally Field moment.

.........

Okay, I'm back.

 

I know there are going to be a lot of issues with this.

REMEMBER - When you mention them, mention why so the other folks can follow. (Don't forget we're trying to update the Wiki from all of this)

  • I know I need to add a drop shadow to the menu I just don't know if/what the standard is.
  • I know the SHUTDOWN buttons are probably too large for the area (I may go to just one button and text any way.

If I'm missing or am off on something else, let me know.

 

neone6
Reply #114 Wednesday, January 18, 2012 12:46 PM

PoSmedley
Okay, I'm back.



 
logoff´s look nice , but they´re too big...Sks is very stubborn when it comes to that place...

-Actually it´s the Height that´s the main concern here, If you look at many skins they´re quite wide, well the left one is and the right one"arrow" is short.

button´s 216 x 25 px

Edit: You can fiddle with it, but then you´ll have to have PNG-Air/space sideways to make it look shorter/smaller.

PoSmedley
Reply #115 Wednesday, January 18, 2012 12:52 PM

neone6
-Actually it´s the Height that´s the main concern here, If you look at many skins they´re quite wide, well the left one is and the right one"arrow" is short.

button´s 216 x 25 px

ech.

Doesn't leave much room to play with.

okay.

Tell me about the search window. I've had issues with that as far as skinning.  Is that going to revert to some default when you try to enter text?

neone6
Reply #116 Wednesday, January 18, 2012 12:54 PM

Edit: You can fiddle with it, but then you´ll have to have PNG-Air/space sideways, That way you could actually have the design made 25 x 25 placed on a 216 x 25 png space.

neone6
Reply #117 Wednesday, January 18, 2012 12:58 PM

PoSmedley

Tell me about the search window. I've had issues with that as far as skinning.  Is that going to revert to some default when you try to enter text?
Don´t really understand what you mean.... I usually just skin it rectangular in the fashion I like it (plain/transparent) and it works fine

PoSmedley
Reply #118 Wednesday, January 18, 2012 1:00 PM

neone6
Don´t really understand what you mean.... I usually just skin it rectangular in the fashion I like it (plain/transparent) and it works fine

When I have skinned it (the few times) whatever I make for it doesn't apply or vanishes on mouseover when I test it. I'll see if I have one of those disasters saved so you can see what I mean.

*N/M Can't find one to show you. I'll see how this goes. Probably something I'm doing wrong when I am in SKS.

WebGizmos
Reply #119 Wednesday, January 18, 2012 1:06 PM

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

Vampothika
Reply #120 Wednesday, January 18, 2012 1:10 PM

PoSmedley
When I have skinned it (the few times) whatever I make for it doesn't apply or vanishes on mouseover when I test it. I'll see if I have one of those disasters saved so you can see what I mean.

1. what template are you using for it?

2.how high is your bottom part of your startmenu (height does matter in this case)

3. go into skin studio/edit startmenu and taskbar/edit startmenu

click on bottom bar and go to extra settings tab. scroll down until you see :

Search box horz offset

Search box Vert offset

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

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