One Piece At A Time : Windowblind Tutorial Part I

Design : Start Menu and Taskbar

By on January 16, 2012 10:05:01 PM from WinCustomize Forums WinCustomize Forums

PoSmedley

Join Date 04/2005
+782

 

 

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

227 Replies +2
Search this post
Subscription Options


Reason for Karma (Optional)
Successfully updated karma reason!
January 16, 2012 10:37:11 PM from WinCustomize Forums WinCustomize Forums

Git Er Dun!! 

 

This is gonna be good! 

Reason for Karma (Optional)
Successfully updated karma reason!
January 16, 2012 10:43:06 PM from WinCustomize Forums WinCustomize Forums

Wow! Can't wait to see how this develops!  

Reason for Karma (Optional)
Successfully updated karma reason!
January 16, 2012 10:50:35 PM from WinCustomize Forums WinCustomize Forums

If the start menu graphics are anything to go by, Po............You could well be building a potential all time classic. Every encouragement to you and ..........like many others here.........I'll be watching the progress with eager anticipation. Good luck 

Reason for Karma (Optional)
Successfully updated karma reason!
Sign Up or Login and this ad disappears!
There are many great features available to you once you register. Sign Up for a free account and browse the forums without ads.
January 16, 2012 11:03:59 PM from WinCustomize Forums WinCustomize Forums

You are gonna want to rename it (g)roan by the time I'm done with you, Po!

 

Great start! I think it would be a good idea to draft the taskbar and window frames before we start slicing and dicing. It will give you a better idea of how things will look finished and help you decide what you buttons will look like.

Reason for Karma (Optional)
Successfully updated karma reason!
January 16, 2012 11:25:26 PM from WinCustomize Forums WinCustomize Forums

Stylish. I think you made the right choice by using the dark one, best of the lot, IMO. I like it.

 

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 12:07:48 AM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
I think it would be a good idea to draft the taskbar and window frames before we start slicing and dicing.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 12:24:40 AM from WinCustomize Forums WinCustomize Forums

Really great idea !

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 12:25:44 AM from WinCustomize Forums WinCustomize Forums

hope this happens, looks great!

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 12:30:52 AM from WinCustomize Forums WinCustomize Forums

Tres cool Po !

I already see you could have an upward stretching problem depending whether you´re gonna have a "user pane/top part"or not and number of layers.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 12:32:29 AM from WinCustomize Forums WinCustomize Forums

They all look good. I hope that this is only the first. Good luck with seeing it through to the end.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 1:50:32 AM from WinCustomize Forums WinCustomize Forums

I'm rootin for you Po. Your a brave man. 

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 2:25:17 AM from WinCustomize Forums WinCustomize Forums

vampy will be watching this closely.....

and when its finished (yes, im going to make sure you finish this) i would love do to a sysmetrix for it.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 2:51:30 AM from WinCustomize Forums WinCustomize Forums

This is going to be a great experience. Looking forward to this journey.                              -- Ace --

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 4:42:39 AM from WinCustomize Forums WinCustomize Forums

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!!!

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 8:23:31 AM from WinCustomize Forums WinCustomize Forums

Quoting neone6,
I already see you could have an upward stretching problem depending whether you´re gonna have a "user pane/top part"or not and number of layers.

Right. If you look at the early drafts of the leather start panel it could have been worse (which I suspected as I did them) and Tim pointed that out. I'm hoping the new design will minimize that. Tim mentioned the layers and lighting and I think this will work.

For noobs (like me), tiling and stretching textures are a bitch. In my first few attempts at this I learned that the hard way (which often led to my frustration and stopping). This is also one of the reasons I wanted to have some texture. I didn't want it to be to easy and I wanted some of the folks who are just starting on Windowblinds like I am to see what can or can't be done. To be honest, I'm more concerned about the stitching, but I think Tim has an answer for that as well to try out.

Quoting BoXXi,
This could turn out to be one of the most important posts ever made on these forums

nopressurenopressurenopressure

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 8:29:21 AM from WinCustomize Forums WinCustomize Forums

Fantastic job.  When it's done maybe we can get it in a downloadable .PDF format, and I can help format it into a web version that's better than what the forums do.

And we can't forget the WC Wiki.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 8:59:02 AM from WinCustomize Forums WinCustomize Forums

Quoting PoSmedley,
I'm hoping the new design will minimize that. Tim mentioned the layers and lighting and I think this will work.

For noobs (like me), tiling and stretching textures are a bitch.
Tiling it would be the solution if the pattern is not too irregular.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 9:30:41 AM from WinCustomize Forums WinCustomize Forums

wiki, did someone mention wiki??? I can do that.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 9:36:33 AM from WinCustomize Forums WinCustomize Forums

Quoting gmc2,
wiki, did someone mention wiki??? I can do that.
I know... You kick ass when it comes to that department (too) 

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 9:46:21 AM from WinCustomize Forums WinCustomize Forums

Since Vamps beat me to the smx I can do a rainy and/or docks. This is going to make WC history. YES!

Good luck Po, take your time with this beauty.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 10:41:15 AM from WinCustomize Forums WinCustomize Forums

This is gonna be Big.     

An epic in the making for sure. I agree with BoXXi 100%. This could be a real milestone.

You can do it, Po.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 11:35:24 AM from WinCustomize Forums WinCustomize Forums

TASKBAR

This is what I have for the taskbar. As you can see, there are two options. I like the floating taskbars, rounded corners myself, but I'm not sure how it will look with this skin and am leaning towards the more traditional that fills the width of the screen. The taskbar drafts are 400 px x 43 px. The '43 px' is accommodate the stitching. I'm tempted to go 45 px (part of me says 50 but I can already hear the moaning). I wanted to do stitching around the buttons on the taskbar and start menu, which is why I was thinking a larger taskbar. (If I make the stitching to small it won't be as aesthetically pleasing)

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 11:47:54 AM from WinCustomize Forums WinCustomize Forums

Guessing you like the crossbar in the 'A'... No biggy - Leave the 'A' (for angus1949).

As for size? Remember who you're skinning for, Po'. It has to please you.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 11:49:59 AM from WinCustomize Forums WinCustomize Forums

Quoting DrJBHL,
Guessing you like the crossbar in the 'A'... No biggy

Yeah, but I'm not married to it. I like it in the shot at the beginning of the post along with the reflection effect but I'm open to ideas.

Reason for Karma (Optional)
Successfully updated karma reason!
January 17, 2012 11:52:24 AM from WinCustomize Forums WinCustomize Forums

Quoting PoSmedley,
TASKBAR

This is what I have for the taskbar. As you can see, there are two options. I like the floating taskbars, rounded corners myself, but I'm not sure how it will look with this skin and am leaning towards the more traditional that fills the width of the screen. The taskbar drafts are 400 px x 43 px. The '43 px' is accommodate the stitching. I'm tempted to go 45 px (part of me says 50 but I can already hear the moaning). I wanted to do stitching around the buttons on the taskbar and start menu, which is why I was thinking a larger taskbar. (If I make the stitching to small it won't be as aesthetically pleasing)


Actually,Po, you could do the Taskbarbuttons exactly the same height as the taskbar itself and therefore use the Side-stitching aswell as parts of the T.B. top/bottom-stitching for the button-sides. Just make a little nice shadow under the buttons and they will look nice on the T.B. although same height/covering it....

Reason for Karma (Optional)
Successfully updated karma reason!
Stardock Forums v1.0.0.0    #108431  walnut1   Server Load Time: 00:00:00.0001281   Page Render Time:

Home | About | Privacy | Upload Guidelines | Terms of Service | Help
WinCustomize © 2014 Stardock Corporation. All Rights Reserved.