One Piece At A Time: Windowblind Tutorial Part V

Putting It Together : Taskbars

By on March 5, 2012 8:01:30 AM from WinCustomize Forums WinCustomize Forums

PoSmedley

Join Date 04/2005
+782

This thread will be dealing with the vertical and horizontal taskbar and all of it's components. I've had to do several redesigns to make the texture work and to accommodate the buttons. As far as the taskbars and buttons go, this should be the last (fingers crossed) redesign.

If you're looking for Part I, II, III, IV 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


One Piece At A Time : Windowblind Tutorial Part IV

 Putting It Together : Start Menu


 

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 Start Panel UPDATED

ROAN WB Start Panel Search Mode 

Roan Updated Taskbar and Buttons II


67 Replies
Search this post
Subscription Options


Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 8:08:06 AM from WinCustomize Forums WinCustomize Forums

Looking forward to the continuation. So far its very intriguing.

Back to lurking. lol

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 8:26:25 AM from WinCustomize Forums WinCustomize Forums

There was an issue with the original design of the taskbar involving the texture not stretching or tiling without some kind of distortion somewhere in the applied piece. The solution was to do the taskbar in layers starting with a base, then two layers for the texture, and finally two more for the stitching (similar to what Tim did with the stitching in the Start Panel to allow for an even distribution of the stitches).

Open SKS and select the Roan Skin (if you're following along with the files) and select Edit Start Menu and Taskbars, then select Edit Horizontal Taskbars. Select Background and using the arrow next to 'Edit Image' import your Taskbar Base Layer. Be sure to check 'This image uses transparency' and that your image count is set to 2.

 

Now click on the Painting Tab and set your painting margins (see following image)

 

It's a good idea to select 'Save Skin' after you have your margins, etc., set. Click 'Apply Skin' if you would like to see what the taskbar looks like in the skin with just the base layer.

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 8:38:57 AM from WinCustomize Forums WinCustomize Forums

Still on the 'Background' section of the Taskbar, select the Image Tab. We're going to add our first 'Additional Layer' to the taskbar background here. Nest to the 'Layer:' dropdown menu, slect the '+' symbol. The dropdown window should now say 'Additional Layer 1 (Taskbar.Horz)'. Using the arrow next to 'Edit Image', import the first taskbar texture layer. Make sure it is set to 'This image uses transparency' and that your image count is set to 2. (The image count for addtional layers should be the same as the base layer)



Now click on the Painting Tab and set your painting margins (see following image)

 

Click 'Save Skin".

Go back to the Image Tab and following the previous steps, we are going to add 'Addtional Layer 2 - (Taskbar.Horz)' and import the second taskbar texture layer.

 

Now click on the Painting Tab and set your painting margins (see following image)

 

*Click save skin.

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.
March 5, 2012 8:50:43 AM from WinCustomize Forums WinCustomize Forums

If you're following along and looking at your Taskbar right now, it probably looks like crap. That would be because I left something out. In photoshop, I made the texture layers and had to adjust the settings/effects so I could get the taskbar to look like I wanted it to and had it looking in my original draft as one layer. I then saved each layer as it's own png. When you apply them in SKS, you will have to set the 'Blend Mode' to what you had it set in Photoshop.

Still in Background, select 'Addtional Layer 1'. In the drop down menu next to the layer drop down menu, it will say 'Normal Blend Mode'. In this menu, you want to change it to 'Screen Blend with automask'. (see first image in post #3). This will not only allow the layer to be in the proper blend mode so we can achieve the look of the original design, but the 'automask' will make any bleed over transparent so that the layer is only visible on the base layer image.

Now, select 'Addtional Layer 2 ' and set the blend mode to 'Overlay Blend with automask'. (See image 3 in post #3).

Click 'Save Skin' and 'Apply Skin' to see the finished result.

This is not 'exactly' how it appears in the original draft. Part of this is due to having to do it in layers and that SKS does not have all of the blend modes that Photoshop has. (In Addtional Layer 2 I had the blend mode set to Soft Light in Photoshop. In SKS, Overlay was my closest option. It's a subtle difference in the finished image)

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 9:00:18 AM from WinCustomize Forums WinCustomize Forums

Now , we are going to do the stitching layers for the taskbar. On the off chance that this will help anyone attempting anything similar OR help anyone who is following along to understand what we are doing here, I want to start by posting the png's we will be using for these next two layers. (Both are available in the Roan Taskbar and Button update II in the Graphics Gallery)

This first png is for the Horizontal Stitching that runs across the top of the taskbar. This is actually TWO images, one for the bottom taskbar and one for the top taskbar.

 

This second png is for the Vertical Stitching. Again, this one is actually two images, one for the top and one for the bottom taskbar.

 

I did it this way because I was unable to find a way to strecth or tile the stitching without some distortion. I got thew idea from what Tim came up with for the Start Panel.

 

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 9:08:36 AM from WinCustomize Forums WinCustomize Forums

Man...this is gonna be awesome. How many steps altogether? I know there's quite a bit more to do.

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 9:14:05 AM from WinCustomize Forums WinCustomize Forums

Quoting Uvah,
How many steps altogether?

I really have no idea. lol. My first blind and first tutorial. I'm trying to keep it simple but I'm kind of learning as I go along myself. After I get through this and try a skin on my own, I will try to do another tutorial that won't involve all the redesigning and stuff so it is easier to follow.

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 9:17:04 AM from WinCustomize Forums WinCustomize Forums

Okay.

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 9:34:04 AM from WinCustomize Forums WinCustomize Forums

Still in SKS>Edit Start Menu and Taskbars > Edit Horizontal Taskbars > Background....

Following the steps from #3, we are going to add another layer. This will be 'Additional Layer 3 - (Taskbar.Horz)'. Here we will import the first layer of stitching (Horz layer). Make sure you slect 'This image uses transparency' and your Image count is 2.

 

Select the Painting Tab and set your margins per the image below.

 

As Tim showed us in the Start Panel on the left and right dividers, we only need the one stitch and by tiling it, we can put it across the top of the taskbar without stretching or distorting it. Select your Extra Settings Tab and use the following settings. This controls how far from the edge of the parent layer the stitching for this layer will appear.

 

Go back to your Image Tab and create Addtional Layer 4 - (Taskbar.Horz) and import the second layer (vertical layer) of stitching and use the following settings.

 

Select the Painting Tab and apply the following settings.

 

Select your Extra Settings tab and apply the following settings.

 

 

Select Save Skin and Apply Skin.

If you are following along, you may notice an issue with the vertical stitching. If it is like mine, you may be seeing a 'half stitch' on the bottom of the left and right vertical stitching. This will (should, if you progress as I have) go away once we import the taskbar buttons and adjust the margins for text (which will adjust the taskbar height as well and allow for the stitching to tile evenly).

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 10:20:43 AM from WinCustomize Forums WinCustomize Forums

Now we move on to the buttons. Before we import and apply them, I would like to go over a few things. Hopefully this will be of help to someone down the road. It will probably make the more experienced skinners cringe because of my description and method. If there is a better way, I hope they will jump in and explain it.

First, lets take a look at the buttons for Diamond.

 

Where you see orange, it is actually transparent in the skin. (I added the orange so you could see the actual size of the full png) The buttons are uniform and pretty basic. (Not to take away from anyone's work). Using Frame Builder or making a png with all six images is fairly easy when your buttons are minimal in design. Now look at the buttons for Roan.

The first thing you may notice is that the top and bottom margins are larger as well as the spacing between the images. Now, I want to post one more image before I try to explain what I did when importing these.

 

The above image is of three different drafts of the same button. Notice how they are centered (or not centered) in there areas.

There were several issues I faced after I did the drafts and then tried to import and apply them. It's something I have dealt with in previous attempts (because my designs are coming from a lack of experience with SKS) and I always seem to forget about.

  1. I forgot to take into consideration the stitching along the top of the taskbar. When I tried to apply buttons with no margins at the top and bottom, they would overlap and cover the stitching. I COULD have left it alone and gone this route, but in my head, I wanted the stitching to show. In image with the beige BG, I made the actual png size larger (55x52) and nudged the button down. When I imported it. the top stitching showed but the button was too far down AND it covered the stitching when I tried to use it in a TOP positioned tasbar.
  2. I nudged it up in the brown bg image but it still did not appear the way I wanted in the top taskbar.

Besides trying not to overlap the stitching, I ran into the issue of the icons for the buttons overlapping the gold rings. No matter what I did, I could not get them centered. IN Windows 7, the text margin settings are no help. After closer examination, I realized to have the icons centered correctly, or at least not overlapping the gold rings, I needed to adjust the button image and not just the position. This meant removing the shadows on the ends and nudging the rings a couple pixels towards the outer edges of the button. The result is the image with the orange background.

Then I imported it and just had to play with the paint and text margins until everything was centered. I had to go back to photoshop a few times as well and nudge the buttons around in the 52x55 background.

All of this was tedious (for me) and frustrating. It's the kind of thing (in the past) that has made me give up on a skin and threatened to beat me down again here with this one.

I guess what I want to say is that I believe there is a lot you can do with your designs. There is also a lot you just can't do. You won't know for sure until you try. (I was sure I would be giving up the stitching before I even started on this.) With the buttons, I had even started new designs. Before you let the frustration get to you, I strongly recommend just closing the skin and walking away for a day or two. In my case, I have a bad habit of insisting a square peg is going to fit in a round hole and will go blind trying to make it happen.

In the Roan Taskbar and Button Update II download, you will find the individual buttons in psd format (you can save into png yourself) as well as pngs for all of them, already assembled into one png. Applying the png that is assembled is pretty straight forward. If you want a taste of what I went through, you can try and recreate the buttons in individual images/frames and applying them that way. At the very least, it is interesting to see how much difference a nudge here or there can make the overall application of the images.

Before I go ahead and show how I applied the buttons...

If any of the more experienced skinners see mistakes or an easier way to do this, please post it the thread so everyone can see and I can curse you for the rest of the week.

 

 

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 10:41:09 AM from WinCustomize Forums WinCustomize Forums

In SKS>Edit Start Menu and Taskbars > Edit Horizontal Taskbars >Taskbar Buttons>Buttons :

Select your Image Tab. Now, using the arrow next to the Edit Image box, you can import your buttons png with all the frames assembled. To use Frame Builder (as I did) select Frame Builder.

In Frame Builder, select 'Import Into All Frames' and import your 'Normal' state button. This will tell all the other states what the image size should be for each state. Now select 'Import into selected frame' and import the remaining frames/states accordingly.


Select 'Save with alpha channel' and make sure your frame count is set accordingly. Select 'Save file as'... and close the window. Be sure to have This image uses transparency selected in your Image Tab panel.

Select your Painting tab and set the margins as follows.

Select your Text tab and set the text margins as follows.


While in the Text tab settings, you want to apply your text colour. Select the text colour dropdown menu and here we will be using the same color we used in the Start Panel-Places. (I haven't decided on the text colour for each button state yet, but feel free to play around with them if you're following along in SKS)

Select Save Skin.



Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 11:01:17 AM from WinCustomize Forums WinCustomize Forums

Still in SKS>Edit Start Menu and Taskbars > Edit Horizontal Taskbars >Taskbar Buttons select Flashing Button:


This is only one frame/image. In the download, it is the same size as the regular buttons. You can import it and use the same Painting and text margins as shown in Post #11.

Now you can select the Pinned App button. This is two states/images. In it'as normal state, there is no image behind your pinned app. It will not appear until mouse over and changes on pressed. You can follow the steps in Post #11 using frame builder, or apply the assembled png containing both states by simply importing the image. Again, you can use the same Paint and text margins as in Post #11.

Finally, we have the Progress Bar buttons. This has six states/images like the regular taskbar buttons. These images are the exact same size as the regular buttons. Before you import and apply these, I would suggest applying the skin and run CCleaner to see how they work. You can watch as CCleaner scans for files. The Progress Bar in the sample blind you are skinning will look horrible on this skin and you will quickly see why they have to be the same size as your regular buttons.

You can import the progress bar the same way we did for the regular buttons in Post #11 and use the same Painting and text margins. For Roan, I followed the example from the sample skin and made each button identical. I do not know what options you have with the Progress Bar other than not using it at all. If anyone else does, let me know.

*I'm gonna take a break and when I come back today, I'll go over the other parts of the taskbar.

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 1:53:56 PM from WinCustomize Forums WinCustomize Forums

Quoting PoSmedley,
Now you can select the Pinned App button. This is two states/images. In it'as normal state, there is no image behind your pinned app. It will not appear until mouse over and changes on pressed.

If nothing is defined for this section, WB will borrow the image from the regular button (normal state) for the mouseover.

Quoting PoSmedley,
Finally, we have the Progress Bar buttons. This has six states/images like the regular taskbar buttons. These images are the exact same size as the regular buttons. Before you import and apply these, I would suggest applying the skin and run CCleaner to see how they work. You can watch as CCleaner scans for files. The Progress Bar in the sample blind you are skinning will look horrible on this skin and you will quickly see why they have to be the same size as your regular buttons.

Same as with the pinned app button, if left unskinned (no image/settings defined), WB will use your flashing button for this section. In some cases you may like the look and not have to skin it.

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 3:56:18 PM from WinCustomize Forums WinCustomize Forums

Lurking, and cheering you on!

This is not an easy skin to do, especially for a first one, and writing a tutorial as you go on top of that... You're doing great! 

 

Reason for Karma (Optional)
Successfully updated karma reason!
March 5, 2012 5:22:21 PM from WinCustomize Forums WinCustomize Forums

Lurking with encouragement.

Reason for Karma (Optional)
Successfully updated karma reason!
March 6, 2012 3:51:16 PM from WinCustomize Forums WinCustomize Forums

Still working on some of the details of the taskbar and the vertical version. Almost ready to post the rest.

Reason for Karma (Optional)
Successfully updated karma reason!
March 7, 2012 9:38:52 AM from WinCustomize Forums WinCustomize Forums

This is really good Po. Thanks

Reason for Karma (Optional)
Successfully updated karma reason!
March 7, 2012 3:50:20 PM from WinCustomize Forums WinCustomize Forums

Quoting DaveBax,
This is really good Po. Thanks

Thank you.

Just got back from MRI and ma pretty seriously gronked. They hadda give some stufff to get me in the tube and hold still long enufgh.

imma gonna lurk around today if i dont passsout at the sekf first.desk. imeant desk. desk.

i bet i could make a reallly coool fractl right now.

Reason for Karma (Optional)
Successfully updated karma reason!
March 8, 2012 6:42:24 AM from WinCustomize Forums WinCustomize Forums

I won't be able to lend any direct support for a while: http://forums.wincustomize.com/419510

 

My help will have to be theoretical (based on memory) until I can get my lappy sorted out.

Reason for Karma (Optional)
Successfully updated karma reason!
March 8, 2012 5:01:26 PM from WinCustomize Forums WinCustomize Forums

Quoting 2of3,
My help will have to be theoretical (based on memory) until I can get my lappy sorted out.

No problem. I hope it's just a dusty graphics card, Tim. Good luck.

I spent yesterday drugged and shoved in an mri tube and am still recovering. I think they gave me a bit to much adavan cause I'm still feeling foggy.

Reason for Karma (Optional)
Successfully updated karma reason!
March 16, 2012 7:53:13 AM from WinCustomize Forums WinCustomize Forums

Reason for Karma (Optional)
Successfully updated karma reason!
March 30, 2012 6:27:27 PM from WinCustomize Forums WinCustomize Forums

Reason for Karma (Optional)
Successfully updated karma reason!
April 2, 2012 10:09:11 AM from WinCustomize Forums WinCustomize Forums

I'll be getting back on the skin this week. I have appt for pre-op tomorrow. No excuses, but I have been pretty medicated and just hurting. The 'mouse' hurts my hands and I am looking for something I can work with. I just don't have the $ to drop on something that won't help or work out and I don't know what's good but I can manage some for now with what I have.

Please, hang in.

PM me any well wishes or what have you if you feel the need as I really don't want to bog the thread with a lot of drivel.

 

 

Reason for Karma (Optional)
Successfully updated karma reason!
April 2, 2012 9:45:50 PM from WinCustomize Forums WinCustomize Forums

Wiil do.

Reason for Karma (Optional)
Successfully updated karma reason!
April 3, 2012 9:06:20 AM from WinCustomize Forums WinCustomize Forums

taskbar group menu thing is not needed if your skinning for windows 7 (i forgot what we are skinning, please remind me)

and skin your effing quick launch (its like eating pumpkin but do it)

oh and ps.

i am avaible for tech support if my norway friend timmers isnt.

i have a message for tim too :

Jag tycker inte om ätt kanelbulle !!!!!  (its very offensive.. i wouldnt google it if i were you, im learing swedish and im picking up the most horrible and offensive things!!!)

and one more...

vill du fika??

(actually, ill be honest, my first comment was that "i dont like to eat cinnamonbuns" and the second one was "would you like to go for a coffee" very harmless.. just incase the google translate dosent work for people

 

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

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