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

Quoting PoSmedley, reply 168
I'd have to be a real quitter all the way around not to assemble it. At that point, I'd really have no excuses.
I think we've already established that you have been a real quitter.  Whether the pattern continues is still a question (but not much of one really).  

I really wish skinhit and bichur were here to lay odds too.   :troll:

Reply #177 from WinCustomize Forums Top

Quoting Vampothika, reply 173
i cant explain it without showing a picture.

It looks like i want the bottom piece to cover the 'All Programs' area on the start panel. So it will be the width of my start panel and the height would either be the same as All Programs OR from All Programs to the bottom of the panel?

The top piece I'm not sure about. I have Win 8 Metro on my desktop right now and the top doesn't extend at all on search, but I can see what the bottom does. I can see t it SKS but there is no info on it.

Here is what I have so far. Two things I have left out on purpose are the user panel (Just don't see it with this skin) and a background for 'All Programs' (Thinking of just having it 'glow')

 

Curtains - Customize Windows with additional styles
Reply #178 from WinCustomize Forums Top

Quoting Zubaz, reply 176
I think we've already established that you have been a real quitter. Whether the pattern continues is still a question (but not much of one really).

I really wish skinhit and bichur were here to lay odds too.

Ahhh! There it is. My morning White-bread Latte with whipped derp.

Reply #179 from WinCustomize Forums Top

Quoting PoSmedley, reply 113
I know the SHUTDOWN buttons are probably too large for the area (I may go to just one button and text any way.

You could go with those large SHUTDOWN buttons if you don't make them buttons -- put the large button graphic on the Start Menu Bottom, and just make your buttons a little dot or tiny bit of graphic that goes on top of the large (mock) button that's actually the Start Menu Bottom. 

Reply #180 from WinCustomize Forums Top

Quoting PoSmedley, reply 161
SKS and Wiki have nothing on the dementions

Demented is as demented does. I'm sure that's something you have worked out already. :-"

 

(I hope I don't have to explain this friggin' joke to him too)

Reply #181 from WinCustomize Forums Top

Looking at a few skins, I am seeing different things for the expanded menu and the search options.

Some expanded panels don't really expand at all, where some are wider than the start panel.

The search option...Kitty do yours expand at the top because of the graphics you have there or do you skin that area no matter what for the search option?

Would be better off coming back to these two things when we get to SKS?

Reply #182 from WinCustomize Forums Top

Quoting PoSmedley, reply 177
So it will be the width of my start panel and the height would either be the same as All Programs OR from All Programs to the bottom of the panel?

yes....!!! :D  width of startpanel, height of all programs

okays, things missing from that list are:

quick launch buttons (taskbar)

pinned app (taskbar)

tray section (taskbar) i dont care if you made it invisible, i need to know if you have it or not

flashing button (taskbar)

 

Reply #183 from WinCustomize Forums Top

Quoting PoSmedley, reply 181
The search option...Kitty do yours expand at the top because of the graphics you have there or do you skin that area no matter what for the search option?

i expand at the top normally due to my graphics, but not only that, top search mode is just needed, othewise the graphics distort when you expand......

Reply #184 from WinCustomize Forums Top

Quoting k10w3, reply 179
You could go with those large SHUTDOWN buttons if you don't make them buttons -- put the large button graphic on the Start Menu Bottom, and just make your buttons a little dot or tiny bit of graphic that goes on top of the large (mock) button that's actually the Start Menu

Ah! I should have known that. I've done it in skins I tried to make before with the All Programs area. ;) I actually like the alternative I came up with. I thought about trimming this out with little shiny buttons and accents but I think I want to try to keep it to just the start button and maybe one other area or the start button loses it's value (for me).

Quoting Wizard1956, reply 180
Demented is as demented does. I'm sure that's something you have worked out already.

I've just emailed your address to the Justin Beiber Fan Club along with a Photoshop of you burning him in effigy. Let me know how that works out for ya, will you.

Reply #185 from WinCustomize Forums Top

Quoting Vampothika, reply 182
yes....!!! width of startpanel, height of all programs - cool

okays, things missing from that list are:

quick launch buttons (taskbar) - for Vista or does 7 have one I don't see?

pinned app (taskbar) - I'll check SKS  to see what I need

tray section (taskbar) i dont care if you made it invisible, i need to know if you have it or not - didn't do. Notification Tray, right?  Are we doing Vista AND 7 or just 7? I ask cause I don't know how much of this can cross over or if we just want to stick to 7.

flashing button (taskbar)- missed.

Reply #186 from WinCustomize Forums Top

yes, windows 7 uses and has quick launch buttons.

tray section, notification tray , diamond calls it tray_h 7 has one too. 

as for vista/7 vista uses just about everything 7 does....and vice versa.... (if im wrong, someone jump in and say so...but i think im pretty correctish on that theory)

Reply #187 from WinCustomize Forums Top

Quoting Vampothika, reply 186
yes, windows 7 uses and has quick launch buttons.

On XP and Vista I can see the QL button and I have the option when I right click on the taskbar and then toolbars to close the QL and make that button go away. On 7 I have never seen it and don't have that option in the TB Toolbar options. What am I missing or are we talking about different things?

Quoting Vampothika, reply 186
tray section, notification tray , diamond calls it tray_h 7 has one too.

Okay. On XP and Vista you have a visible notification tray. On 7 you have the area that shows your clock and date, sound icon, little f*cking flag, and then a button that opens the pop-up tray of what is in your notification tray? Are you talking about skinning the clock area (7 and I guess Vista) or the pop-up tray?

Reply #188 from WinCustomize Forums Top

Okay.

I see the tray area in SKS. I will make that invisible/transparent.

I'll do the QL buttons like I'm doing them for Vista and figure out where they go in 7 later. I see them in SKS on the Diamond 7 skin but I have never seen or used QL when on 7. I don't even know how to bring it up on 7. ;P

I also just noticed the 'Progress Bar' for the taskbar. o_O That's gonna be interesting cause I was really trying to avoid any colored buttons on my TB.

Reply #189 from WinCustomize Forums Top

the quick launch is in 7, i dont have mine in options anymore either (i used to, i think i turned it off and cant turn it back on) but either way, she is there and has to be skinned.

okay.... notification tray, diamonds for w7 is basically invisible except for a single pixel line...but it is there, its basically the tray that the gay flag, the volume and shit sit on , on the task bar.

sorry i didnt reply asap, im currently in iconpackager hell....i mean heaven...

Reply #190 from WinCustomize Forums Top

To get QL in Win 7:

R-click taskbar and select Toolbar/New toolbar.  Put  %appdata%\Microsoft\Internet Explorer\Quick Launch   in the new folder titlebar. Hit Enter, then Select Folder

Unlock Taskbar and drag to the left. It starts out by the systray on my rig.

R-click on the adjust line and remove text if desired.

Relock taskbar.

Done.

 

 

Reply #191 from WinCustomize Forums Top

Reply #192 from WinCustomize Forums Top

You will see the quicklaunch button in W7 only if you have a toolbar on your taskbar (EDIT....or do like wiz said). Right click on your taskbar and go to toolbars. Add one (fex desktop) and you will see 2 things:

The resizing bar will suddenly show

You`ll have the word desktop to the right...next to your tray section (where the clock and the effing flag are) and an arrow. The arrow mouseover/pressed is the quicklaunch.

 

With your design I don`t really see why you have to draw any thing special for the expanding (recent programs) mode. If all your margins are set correctly, the the thing should look fine when expanded without skinning those extra sections.

Don`t confuse this with the searchmode....that`s a different animal. Vamps has shown you what pieces you need to do for that. IE the entire top all the way down to the all programs area (search mode top) and the all programs down to the bottom section. You most likely won`t need to skin the seachmode bottom....if unskinned, it will use the normal bottom piece. Whether or not it expands on searchmode, is up to you. That`s just an extra setting not defined by how you draw it. We will get to that when we start putting it together in sks.

Reply #193 from WinCustomize Forums Top

Those little X`s on the startpanel items will give you problems, yes.

Remember that the item is used for the recent programs list (both on the start panel and the jumplist......(the list that pops up when you right click on a taskbar button) and the all program list (when you click on ALL Programs) Those modes compress your button a lot and the X`s are gonna get squashed and look like ass B)

Reply #194 from WinCustomize Forums Top

Quoting 2of3, reply 192
Don`t confuse this with the searchmode....that`s a different animal. Vamps has shown you what pieces you need to do for that. IE the entire top all the way down to the all programs area (search mode top) and the all programs down to the bottom section. You most likely won`t need to skin the seachmode bottom....if unskinned, it will use the normal bottom piece. Whether or not it expands on searchmode, is up to you. That`s just an extra setting not defined by how you draw it. We will get to that when we start putting it together in sks.

got it

Quoting 2of3, reply 193
Those little X`s on the startpanel items will give you problems, yes.

Remember that the item is used for the recent programs list (both on the start panel and the jumplist......(the list that pops up when you right click on a taskbar button) and the all program list (when you click on ALL Programs) Those modes compress your button a lot and the X`s are gonna get squashed and look like ass

You lost me completely on this.

The little X's for the mouseovers..the way I hop to do it...will not appear until you mouseover. 'Text Four' (five and six) is how it will look when you open the panel...then when you mouseover you will see either one, two, or three.

The other little X's on the start panel is (a) the button to go with All Programs (b) the button for your log off options with the same mouseover effect as the others.

The 'recent programs, jumplist, and pop-up stuff' you lost me on.

Reply #195 from WinCustomize Forums Top

just a wiki thought, we're at 8 pages and counting, possibly start a new thread when these sections are complete. it will be a lot easier to sort through the comments.

Reply #196 from WinCustomize Forums Top

Greg, just a thought - 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 do agree that it should be by section... 

Reply #197 from WinCustomize Forums Top

Quoting gmc2, reply 195
just a wiki thought, we're at 8 pages and counting, possibly start a new thread when these sections are complete. it will be a lot easier to sort through the comments.

This thread is just about done and I will start a new one (probably tomorrow) for the Explorer Windows. Let me know if you need anything from me.

Quoting DrJBHL, reply 196
Greg, just a thought - 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 do agree that it should be by section...

I made mention as I went through of items that aren't even mentioned at all in the Wiki.

I was told he was the man for the job.

 

 

and not as gullible as some others...  :-"

 

Reply #198 from WinCustomize Forums Top

So Po Got any issues left on this ? ;)

Reply #199 from WinCustomize Forums Top

Quoting neone6, reply 198
So Po Got any issues left on this ?

Just the stuff in  #193 that Tim brought up. If I can or need to  change something now on the Taskbar and Start Panel, I want to do it before I move on to the next piece/thread. (That's the deal I made with myself- One piece at a time)

Other than that, if you all tell me I have at least covered everything (right or wrong) I'm ready to start on the Explorer Windows. ;)

Reply #200 from WinCustomize Forums Top

Quoting PoSmedley, reply 194




You lost me completely on this.

The little X's for the mouseovers..the way I hop to do it...will not appear until you mouseover. 'Text Four' (five and six) is how it will look when you open the panel...then when you mouseover you will see either one, two, or three.

The other little X's on the start panel is (a) the button to go with All Programs ( the button for your log off options with the same mouseover effect as the others.

The 'recent programs, jumplist, and pop-up stuff' you lost me on.

 

Open the startpanel (any skin)

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.