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 11 of 12 Next Last
PoSmedley
Reply #201 Thursday, January 19, 2012 5:51 PM

Click on All Programs. See how the mouseover on all the items listed above use the same graphics as the rest of the startpanel items? But there won`t be enough room there for 2 X`s on the ends. They are what?....5 to 7 px high in this mode.

Gotcha. Okay.

I didn't know they shared the same mouse over. Ugh.

I guess I can go with the side stitch but don't know if I'll be able to fit two in . I'll make a version with the side stitch and we'll have to just blow up that bridge when we get to it.

I know there are things I may have to go back to the drawing board on completely. I'm cool with it.

bk13GarbageMan
Reply #202 Thursday, January 19, 2012 6:05 PM

Looking really cool Po

neone6
Reply #203 Thursday, January 19, 2012 6:26 PM

Glad you´re a bit in Sks checking item mouseovers n stuff. Good on ya Noah !

neone6
Reply #204 Thursday, January 19, 2012 6:27 PM

And g´nite Seeya t´morrah

PoSmedley
Reply #205 Thursday, January 19, 2012 6:33 PM

neone6
And g´nite Seeya t´morrah

G'night. I'll be starting a new therad tomorrow. I'll PM ya if I don't see ya.

PoSmedley
Reply #206 Thursday, January 19, 2012 6:34 PM

bk13GarbageMan
Looking really cool Po

Thank you, sir. Don't forget the awesome skinners helping me on this!

Uvah
Reply #207 Thursday, January 19, 2012 6:53 PM

I say kudos to Vampothika, Neone6 and especially to 2of3 for sticking with Po the Smedley in bringing ROAN to life. You guys rock!!

And to everyone else pitching in.

gmc2
Reply #208 Thursday, January 19, 2012 6:55 PM

DrJBHL
maybe the current form isn't really conducive to a Wiki post... I think maybe a Master should cull the posts to just a Po' comment then answer/s format...

I'm letting myself be overwhelmed for the moment and looking at the scope of the projects. maybe I heard incorrectly but I thought this was going to be a wiki tutorial. however, there are aspects of hints and tips stated that would be welcome in the sks help tutorials as well. So, I'm thinking two wiki considerations.

open for comments.

Po, need an exploded view of the start menu when you break it out.

bk13GarbageMan
Reply #209 Thursday, January 19, 2012 7:01 PM

PoSmedley
Thank you, sir. Don't forget the awesome skinners helping me on this!

Definitely not, hat's off to all!

PoSmedley
Reply #210 Thursday, January 19, 2012 7:02 PM

Po, need an exploded view of the start menu when you break it out.

Working on that tonight. I have to clean up the PSD files and then I will be uploading everything to date to the Graphics Gallery. I'll send you the previews I use for them.

Xiandi
Reply #211 Thursday, January 19, 2012 8:08 PM

PoSmedley
SHE started it.
Did not.

Looks like you got the start panel as ready as it really needs to be at this point, and it looks great. I love the design, and I'm looking forward to seeing what you do with the windowframes.

theAVMAN
Reply #212 Thursday, January 19, 2012 8:12 PM

PoSmedley
Anyone want to take a shot at making the Trinity Circles spin in the start button (Just have the 'logo' spin on mouseover) ? (My animations are horribly jumpy)

Do you want each individual circle to spin centered in itself or do want the group of three to spin centered amoungst the group of three or do you want each circle to spin while the group of three spin centered on itself?

Did I say that right?

I will play around and see whaat works good.

Xiandi
Harley would be my first choice. My animations are ok, his are perfect.

I appreciate that very much!

PoSmedley
Reply #213 Thursday, January 19, 2012 8:25 PM

theAVMAN
the group of three to spin centered

ON MOUSEOVER

PoSmedley
Reply #214 Thursday, January 19, 2012 10:10 PM

PSD FILES FOR THE START PANEL HAVE BEEN UPLOADED TO THE GRAPHICS GALLERY (SEE ORIGINAL POST FOR LINKS)

Jaroepz
Reply #215 Thursday, January 19, 2012 10:49 PM

Very well said BoXXi,not that you need my opinion but i am excited to learn something and looking forward to seeing it...thank you 

 

Ed

theAVMAN
Reply #216 Friday, January 20, 2012 1:36 AM

 

Use this link to get thee image this one is un altered by imageshack http://dl.dropbox.com/u/5008251/Tri_56_frames.png

gmc2
Reply #217 Friday, January 20, 2012 6:33 AM

PoSmedley
I'll send you the previews I use for them.

I'll take the pngs, I can not convert psd files.

PoSmedley
Reply #218 Friday, January 20, 2012 8:22 AM

Use this link to get thee image this one is un altered by imageshack

Looks good. I wasn't sure if I had the right email last night when I sent you the files.

I'll take the pngs,

I'll get them to you today.

I'll have the new thread going in a bit as well.

 

danioc
Reply #219 Friday, January 20, 2012 8:36 AM

Nice stuff.

theAVMAN
Reply #220 Friday, January 20, 2012 12:24 PM

PoSmedley
Quoting gmc2, reply 217Use this link to get thee image this one is un altered by imageshack

Looks good. I wasn't sure if I had the right email last night when I sent you the files.

 

 I dont think I got any files I made the start button in 3DS Max

You can always open it in PS and and an inset shadow if you like it wont messup the animation.

If it is not what you want let me know!

 

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