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.

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)

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

Okay.

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.

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.

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! 

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

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.

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.

Wiil do.