Ok, so I got this neighbor that told me to check out this talk show called 'Kamando' that comes on one of our local AM radio stations. Well I finally decided to do so and the show seems interesting enough. See Kim Kamando is the self proclaimed "America's Digital Goddess'. Giving credit where due, she does seem to know a bit of what she is talking about. Quoting from her web site...

"Kim's weekly three-hour call-in talk radio show is heard (via her own national radio network called WestStar) on over 450 stations. In addition, she does a Digital Minute radio feature five days a week; has written nine books about life in the digital age; sends out 5 million e-mail newsletters weekly; and authors a widely syndicated newspaper column, which also runs in USA Today.com. She does all of this, while raising a son and operating a growing media empire, with her husband and associate, Barry Young."

However, I was dismayed to read the following page on her site about "Customizing Windows"...
she might know a lot but obviously does not know much about this subject.

maybe someone from Stardock ought to give her a call or something hehehe

Hi all, I guess this is mostly for the admins here at WC....

Over the years there has been discussion on how to handle skin comments (i.e. the unproductive ones). Some of the suggestions have been to give the uploader the option to allow comments or not (via a check box or the like) and another has been a 'report' button to have the violating comment reviewed by an admin. I'm just curious as to if this discussion is still being mulled over or if it has been placed to the wayside.

The reason for this is I have noticed some 'trolls' hounding particular skinners making comments on many of the skinners downloads; even master skinners have had this happen. I won't mention names or any skins themselves but it has happened recently on a 'master' skin. The comments barely even touched base on the skin itself even... it was pure nonsense and started a rant for no true reason.

Personally I see this as very counter productive for all. I can understand meaningless rants in the forums more so then on skin comments.

Anyhow, I was just wondering if anything was still being thought out for this sort of thing or forgotten about.

I have found yet another site that not only has skin rips but also programs as well like Rumshot... go figure right

http://computer-arts.info/index.php

this particular user seems to be big on posting things

http://computer-arts.info/user/UlyssesD/

I have seen windowblinds, wallpapers, icons, cursor, ect on this site... sometimes the original authors name is included, sometimes its not.. also, sometimes there is a link to the original download and sometimes not.

Check it out yourself and you decide what you would like to do.

I have no clue how to contact anyone directly related to the site itself, maybe someone else can?

Hello everyone, this is to all skinners and the like. WC is willing to add the "Xion" program to their libraries but your help is needed.

If skinners let the WC staff know that at least 10 skins can be immediately added to the library they will add the category/library to the list.

Xion player is a great program and somewhat of a revolution in being able to skin a media player. Many skinners here at WC and around the net have already fallen in love with this program. You can check it out for yourself at Xion Home Page. If your a skinner and have not seen this program you really owe it to yourself to do so.

So, if you have a skin you would like to upload to WC for Xion post a reply here (and preferably including a screenshot) and let them know you would like to see it added.

Thanks in advance.

For those of you who have tried to create a Per-Pixel ShutDown and LogOff and just can not seem to get it to work here is why.

There seems to be a glitch in the coding where 2 lines of code are not present and must be put in for it to work correctly. You will have to go to the top center tab 'Code' and look for the [ShutdownDialog.BackgroundPerPixel] and the [LogOffDialog.BackgroundPerPixel]. Now they could be at any number code line but tend to be near the bottom. In the original state they look something like this...



but as I said there are two lines of code missing that need to be placed in there. Here is what the finished or completed code should look like...



if you place these missing lines of code into those sections all should work propery. Hope this helps out.

No matter what you're skinning some where along the line your going to probably make a button. This is a quick guide on how to make a multi-state button image quickly in Photoshop. The concepts here can be used in many programs from WindowBlinds to Rainlendar.

First off you need to decide the size of your button. For this simple tutorial I’m going to make a small 25x25 pixel button. So first I start a new image at 25x25. Before I do anything I’m going to make a ‘Set’ to put all my images into (you’ll see why here shortly).

Next I make a full solid background. I like to use the shape tool for buttons, this way I get smooth shapes for my button. For the sake of simplicity I’m just making a round button for the tutorial. If your following along you should have something like I currently do in the image below.



If I have to put an object on the button such as an ‘X’ for a close button I would also include that IN the ‘set’.

Now I need to determine the # of states the button image has. Different skins call for a different number of states. Rainlender has 3, SysMetrix has 4 and WindowBlinds can be anywhere from 2 to 9 or more states. It just depends. For this tutorial I’m going to have it as a 3 state image. First is normal, 2nd the mouse over and last the pressed state.

I placed all my current layers into the set because now I can create as many ‘states’ as I want and not worry about everything lining up right. Plus as a bonus if I have say 6 layers for this one button (and yes I have created buttons with that many layers) I can easily recreate and modify the button for its many states.

So I need to make my other states. To do this I go to ‘Image > Canvas size’, change the width of the canvas (from 25 to 75 = 3x the current size for the 3 states) and move the ‘Anchor’ to the left. See image.



Now I can click on my layer, drag it to the ‘copy’ on the bottom of the layer pallet to make 2 more sets (for my other states).



Next I take the sets and move them to the proper spots. My solid backgrounds help me line them up quickly and accurately. I can now change my images slightly to give me the different states and make the solid layer unseen.



That’s it… I now have my button with its 3 states and don’t have to worry about it lining properly or anything else. I can save it like this as a transparent PNG (used in many programs). I can also use that PNG imported into WindowBlinds having WB changed to a TGA or I can create the TGA here which gives me better control over the final image.

To create the TGA in Photoshop I can simply merge all the visible (on a PC the shortcut is Ctrl+Shift+E). Then select the layer while holding the Ctrl key, go to the channels pallet and click the ‘Save selection as a channel’ (second icon from the left on the bottom of the pallet, it looks like a square with a white circle in it). Lastly add a background to my image and save as a TGA making sure the ‘Alpha channels’ option is selected. Why go through all that? More control over your image, that simple.

I hope this tutorial helps you to make buttons a little easier and faster.

This tutorial will cover all the buttons, backgrounds and other extra tidbits of the start panel not covered in part one. Part 1 can be found here A Complete Guide to the Start Panel: Pt 1 and goes over the basic start panel’s images. This tutorial is going to be long as it is intended for those who both know and don’t know. Also, there are not going to be many images as most of it is just explaining each section and images are not truly needed.

We ended the last tutorial with having our ‘overall’ look and feel of our start panel but with no buttons, mouse overs and all that. I’ll go down the list of things under the ‘Start Panel’ on the left side in the ‘Explorer’ tab. Each heading will list the section under that tab on the left.

1.) Start Panel > User Pane > User Picture
The User Pane section is covered in Pt 1 and comprises the top part of our start panel. The User picture however is a sub section under that and is the little avatar like image in the start panel. Now many newer blinds have this section disabled and I do as well. To disable this section is under (Explorer tab) ‘Start Panel > User Pane’ then on the right (Section tab) Hide User Picture: Enabled, this disables the User Picture section. If you are going to use this make a TGA (alpha channeled) image using the given image as a guide. If you do this there should be no reason to change any settings in this section. No matter which way you make your skin be sure to check the content margins in the Start Panel > User Pane to get things lined up. You might have to do some trial and error to get it just right.

2.) Start Panel > Programs List > Separator
As before the Programs List is the background image of the start panel and is covered in Pt 1. The Separator is the line which divides up your set programs and the ‘recently opened’ ones. It’s just a line… plain and simple. Generally the image is very small ranging from 1-200 pixels wide to 1-4 pixels high. It just depends on what your design is. Mine for this skin is 172x2 and a TGA image which is supported here. Remember to set your sizing margins for the image and if it is translucent or not in the (Section tab) ‘Painting Options’.

--Note-- Also, it will be good to once again stress the importance of deleting ALL unused images from the skin. This will make the skin much cleaner, smaller and help with the sometimes occurring problem of WindowBlinds wanting to read the old image (or some of its ‘traits’) instead of your desired one. For example if the old image was a bitmap and you bring in a TGA alpha image it might not ‘read’ the transparency and appear solid. This doesn’t always happen and is more prominent in some sections more than others, just one of the ‘quarks’ and an overall good practice to just delete any old or replaced images.

3.) Start Panel > Places List > Separator
This section is identical to the above programs list.

4.) Start Panel > Item
This is the ‘mouse over’ image for all the listings in the Programs and Places Lists. It is a 2 stage button like image with the first being the normal state and the second the mouse over state. You can find a list for all ‘states’ in an image under the ‘Help’ tab in the bottom left section in SkinStudio. Generally the first state is blank, transparent or translucent and just the mouse over state is used. The size can be anything you wish but typically around 95-100 pixels high by 40-60 pixels wide is used. The reason for such the large height is so that when the image gets stretched upward (for either large fonts or the sometimes double line of a programs name) the image remains clear and clean. Again, this is one of those things that depends on your design. Mine for this skin is a 98x44 TGA image, a typical size and type. Again, remember to set you sizing margins and painting options.

--Note--
A quick tutorial on ‘How to create button images for skins. ’

5.) Start Panel > More Programs Panel > Arrow
Now we begin to have some real fun. There are 2 ways this section can be done.

a.) One, you can create a full image to go here including the ‘All Programs’ words (or whatever you desire). But, if you do there are some things to consider… ‘the Pros’ you will have a nice looking fully skinned area here… ‘the Cons’ you will be making people who use WindowBlinds in different languages have a strange looking thing going on where the image is borked. This is why this is typically not done.

If however you do use the first method, the main thing to remember here is your sizing margins so it looks right. You are going to want it to fit into your Start Panel > More Programs Panel > Background image (covered in Pt 1). Also, you will need to change the ‘Content Margins’ of that section (Start Panel > More Programs Panel > Background, under the ‘Section’ tab) so that the left margin is in the negatives… generally 90 pixels or more for English versions (-90). I have no clue about the margins for other languages.

b.) The other way is to just make the arrow ‘button’ image and have windows write out the ‘All Programs’ as it doesn’t make the other language windows look any different. But, this is also why you get the solid colored ‘box’ on the mouse over. It’s a quark and just one we all have to pretty much deal with for now.

I choose the typical way (the second choice). In either choice the image is a 3 state ‘button’ (see the ‘Help’ tab for the order) that supports alpha blending, TGA (I recommend using alpha blending whenever possible as its much cleaner and nicer). My image is the same size as the basic image, 48x24 pixels; I suggest trying to stay within that range as the size works well. Again, it depends on your design. Next you need to set your ‘box’ color or the color that will appear around the arrow and ‘All Programs’ words on mouse over. You need to go to (Explorer tab) Miscellaneous > Colors then (Section tab) Menus > Menu – Highlight backgrounds (XP only) and change that color. Generally it is made so that it blends into the background color. Finally go to the (Explorer tab) Start Panel > More Programs Panel > Background and make sure all your content margins are set right, it may take some testing, trial and error to get just right.

6.) Start Panel > More Programs Menus > Background
This is a single image of the background for the ‘All Programs’ menu that comes up. This section does NOT support alpha blending, TGA; yet… maybe in a future version. Size and margins depend on your design. A typical size for this image is around 100x100 pixels. Now some like to make a ‘border’ or section for the icons. For a section like this use about 22 pixels on the left side of the image, like in the below image.



7.) Start Panel > More Programs Menu > Item
This is a 3 state image where typically the first and last states are unused (state one being normal and the last is completely unused). Alpha blending, TGA; images are supported and a typical good size is 150-400 pixels wide by 15-20 pixels high. Changing the content margins for this section does nothing, if you do wish to have so sort of difference in the ‘content margins’ then they need to be placed into the image itself just remember it will do the same for all the mouse overs.

8.) Start Panel > Bottom Bar > Log off Buttons
The Start Panel > Bottom Bar section is covered in Pt1. The logoff buttons are a set of 3 buttons in 3 states totaling 9 images (again see the ‘Help’ tab for image order). These images do support alpha blending, TGA; and a typical size is 200-250 pixels wide and around 25 high pixels.

Now, the mouse over and pressed states only change when there is NOT a background image. In which case there will be a ‘box’ of color much like the more programs arrow (see #5b as it is the same color). So, if you have a ‘background’ keep this in mind, yet another ‘quark’ with WindowBlinds.

9.) Start Panel > Bottom Bar > Logoff Buttons Background
This is a 3 stage image that supports alpha blending, TGA images. Size and all depend on your design. A few variations on this section…

a.) One is to have the background just cover the section in #8 in which case your sizing margins would be blank to the right of your ‘button’ images for stretching the transparent portion. Your background will have to be the exact size you want to appear behind the images you made for #8. --Images here are of just one state as an example--



b.) Another variation would be to have it the exact opposite where the just works have the background. In this design you need to have the image blank / clear in the exact size on the left of your button states.



c.) A normal button image will cover the section in #8 and the words as a whole.

I would again suggest that before you read this tutorial that you read the other parts of the Pen tool.

Part 1: How to use the Pen tool: Link
Part 2: Pen tool Pt2: The Selection Tool: Link

Ok so now that the pen tool has been explained I guess a further explanation of the paths is in order.



In the other pen tutorials I used #1 which creates a filled shape with paths. #2 creates a shape unfilled or just a path. The shapes of #3 are just like using the custom shape tool but with paths and depending on if #1 or #2 is selected they will be either filled or unfilled. For the rest of this tutorial I will be using #2 the unfilled paths.

Well, now I'm going to create a simple path.



With #2 selected you'll notice a few differences when creating path. One, this does NOT create a new layer. Second, it’s not filled. Now to show you something I didn't in the other tutorials and why I'm writing this one. The Paths Tab.



Now this tab will allow an array of this to be done. The path will also come up when #1 (the filled shape) path type is selected. So, whatever was your last path drawn (using #2 the unfilled shape path) will be your working path. Here is what it looks like with a filled shape path also drawn.



Now if you want to draw another unfilled path you will need to delete the current working path, if you do not it will continue drawing from your last anchor point.

If you right click on the path you'll get a pop up which will look like this.




The options are just as they say. You can delete it (or drag it to the trashcan on the bottom). Use it for making a selection just as if you were using the selection options. Or fill and stroke the path. These last two are the main reasons I decided to write this tutorial. If you use these two options you will need to pay close attention to what layer you are one. Remember when we used the pen tool to create just a path (unfilled) we did not automatically create a new layer. When using these options you will fill or stroke on whatever layer you are currently on. I'm going to create a new layer so I'm now filling and stroking on my background layer. Then go back to my paths tab.



If you select fill another pop up appears with all the same options as if you selected fill under Edit>Fill in the main menu. But, this one has the further option of allowing a feathered fill which is not under Edit>Fill.



This is what I have to say I use this whole set of options for more than any other. If you choose stroke this pop up appears.



These are the options under pull down menu. As you can see you can used pretty close to any tool to stroke your path. One of the main things to keep in mind when stroking a path is that (along with paying attention to what layer you may be on) whichever tool you use it will stroke the path at whatever the last settings were for that tool. And that is to say ALL settings that were in place for that tool. I highly suggest checking all the settings before stroking your path and making whatever changes you need too.

Now you might be asking why all this. The answer is very simple... control. Using this option you can create very controlled precision brush strokes.

As with the others I say play around with it and find out in what ways this can be useful for you and I hope this tutorial has been as helpful as the others.

Note: I would suggest first reading How to Use the Pen Tool: Link before reading this tutorial as this is part 2 and plays off of terms and other things explained there.


Ok so we covered how to use the pen tool. I kept making references to the fact that you don't have to be too specific because you can always go back. This is 100% true and you can do that with the selection tool.

So where is this thing?


-- The Arrow -- is pointing to the selection tool itself, if you right click the pop-up shows you a black and white arrow.
-- #1 -- is the path selection tool. This arrow allows you to select either the entire object or just a single path between two points. I don't tend to use this one much as the control with it is not very good.
-- #2 -- is the direct selection tool. Now this is the life saver that will make you love creating custom shapes.


So who do they work?


Here is a basic two pointed shape I created using the pen tool. When you first get your Selection tool you will notice what you see in the picture above is different until you click on the shape.

The Path Selection Tool
This tool (#1, the black arrow) allows you to select the entire path and move it around as a whole. When you select the shape it will look a bit different than above in that it will only show you the anchor points and paths. Nothing more nothing less. One reason why I don't really ever use it much.

The Direct Selection Tool
Now this tool (#2, the white arrow) I use all the time. It gives you a full range of control. This time when you select the shape it will show you something similar to the above image. You will need to click somewhere near an anchor point or path. Here are a few more images that will help me to explain what will be going on here when you have more than just two points.

Image 1

Here I selected the path between two anchor points. Notice it is only showing me the two bars that define this part of the path. I can now modify the path in two ways. The top point here has the solid bars (where if I move this one the other moves with it. The bottom one moves independently from the bar on the other side of the anchor point. I can move this path now by clicking and holding on the path and moving the pointer. I don't really suggest changing your shape in this way. Rather, I can move one of the bars by clicking on the round end of it.

Image 2

Here I have moved the bar to the anchor point on the bottom. Nothing else has changed and the shape is now different. This is because the bar to this anchor point moved independently from the bar on the other side of this anchor point. Now watch what happens when I move the bar to the top anchor point.

Image 3

Now our shape is much different. This is because our bars going to this anchor point are connected and move together. So when I moved this one it moved the one on the other side as well. We can fix this if you would like by doing much of the same thing we did when drawing the shape. If you hold the alt key down as well when holding down the mouse button it changes the point to where the bars will move independently from one another. It will look something like this if you give it a try.

Image 4

While moving the same bar this time I held down the Alt key (as before remembering to let go of the mouse button first). This has now permanently changed our point. If I did this same thing to a bar that is already moving independently from the one on the side then it will move both bars but it will not permanently change them. Next... clicking on an anchor point.

Image 5

You'll see some things have changed now. I clicked on the anchor point at the top, it is solid showing me this is the one I selected where the others are hollow. Also showing are the bars to this point and the bars to the point leading the path to the point. I can now move all of these just as before. Something new is I can now move the anchor point itself as well. Go ahead and play around with it and you will see all the same things as explained before still apply. You will also see just how helpful this can be in changing your shape.

A return to some of the pen tool options.

If you read the first Pen tool tutorial you will remember that there were a lot of options available to you. Mainly add an anchor point, delete an anchor point and convert an anchor point. They are just as they say.

Adding an anchor point: This one will add an anchor point just as it says. To do so select the tool move over a section of the path and a plus sign will appear under the tool. If you click it a point will be added without changing the path and the bars for the point will be automatically generated to fit the path as it is. You can now modify this point with your selection tool.

Deleting an anchor point: This pen tool will also do just as it says and delete a point. To do this just position the tool over the point and a minus sign appears, click it and the point is deleted and the path will reposition itself automatically to whatever the bars to the points on either side tell it to go. Again you can still modify with the selection tool.

Converting a point: The conversion tool may take some getting used to but position this tool over an anchor point and as you click it will toggle between different options for different types of points (no bars, connected bars, and independent bars).

Well there ya go. Pretty much everything you need to know to create your own custom shapes. Next I will explain just what all you can do with the paths that can be created using the pen tool. Which will be part 3 of the pen tool. Till then I hope this tutorial has been helpful so far.


Pen tool Pt.3: Paths Link

Ok so you might be wondering why do I need to know this? Well to be honest the Pen Tool is probably one of the single most useful tools in Photoshop and yet alot of people just have no idea how to use it. This tool will allow you to make custom paths which are vector based. This means that you can create a shape modify it, change it, resize it, and a lot more without loss of quality. The main thing here is CUSTOM shapes. This is the advantage the pen tool gives you.

So, where is it and what do all the elements do?



-- The Arrow -- is pointing to the pen tool itself. If you right click on it the pop-up menu comes up.
-- #1 -- is the main pen tool option which will use anchor points and bars to draw shapes.
-- #2 -- is the freeform pen tool which will allow you to completely draw freehand and will add anchor points and bars after you complete your shape. Personally this is very hard to control and I don't suggest using it but, thats me.
-- #3 -- this option lets you add a new anchor point to an existing path.
-- #4 -- is the opposite and lets you delete an anchor point to an existing path.
-- #5 -- the convert tool is a little harder to explain and we will get to that later on as I show you how to use the tools.

OK, so some definitions now seems to be in order.



-- #1 -- is an anchor point, this is the center and portion of every point.
-- #2 -- Photoshop calls these directional points but I like to call them handle bars so I'll be using that to explain them. These tell the path where to go to get to the next anchor point.
-- #3 -- this is a path which is vector based, if you don't know Photoshop is a bit based image program which means all images are created with alot of little squares. Vector is math based and the paths in Photoshop "act" as a vectored line. I say act because the final image is still bit based.

Only one more thing to show you.



-- #1 -- is the path type selection. This one will make a filled in shape inside the path.
-- #2 -- this one makes only a path.
-- #3 -- the first two are the regular pen tool and then the freeform tool, the others work just like the custom shape tool but creates them with paths, anchors and bars.



Drawing with the Pen

Drawing Part 1
Well lets get to it. Open up a new image fill it in and grab the normal pen tool. First thing I want to show you is the very basic way to draw. Be sure to have the regular pen tool and have the filled shape selected up top. Move around and just do a single click. An anchor point will appear with NO bars and creates a whole new layer like this.



Move to another spot and make a second point. This time you will notice the path will be drawn between the two points and it will fill from one point to the next. Go ahead and make a third point. Don't worry about the shape, we aren't caring about that. Now you should have something like this...



Now we are going to close off and finish our shape. Go ahead and add as many points as you want but to close off the shape we are going to go back to the original starting point and look for a little circle to appear under the pen tool. once you have that click and the shape will be closed off.

Now as I said this is the very basic. You will see this just does straight out lines with no curves. The handle bars create the curves and there are two parts to doing that.


Drawing Part 2
Ok, clear out the layer we just did and lets start a new shape. This time I want you to hold down the button and drag. A few things happen here. One, the very first place you start is going to be your anchor point. The next is the two bars will appear one going in the direction you are and another mirroring it going the other way. The direction you move in is going to be the direction the path is going to move. When you let go of the button your point will be created and look something like this...



Ok as before lets make another point the same way hold the button and drag somewhere else. Again, as you drag this time you will see the path moving and curving so get it where you would like and let go setting the point. As soon as the point is set it will also fill in. Now you should have something like this...



This time when you go to close off the shape (just as before, look for the little circle under the pen tool) you will notice you can now reposition the bars but the bar you made first will rotate in the same direction but does not move in and out like the new one.

Note: No matter what you end up creating with the pen tool you will always be able to go back and modify your points so getting the shape 100% right the first time is not a huge worry.


Drawing Part 3
Alright almost done. Now for the most advanced way to draw using the pen tool. Lets get rid of the old shape and start a new one. Make sure all your settings are the same. Hold the button and drag just like in part 2 but, do not let go of the button just yet. You will need to pay special attention to the other side of the handle bars and where it is at. Once you have it where you would like hold down the Alternative (Alt) key (Apple key for Mac users) and the bar on the side you dragged will now move independently from the other, let go of both the button and the key when you have it like you want. Make sure you let go of the mouse button first or the bars will go back to being connected. This action allows for a whole lot of flexibility and creates a point where ever the anchor point is where part 2 allowed for a flowing curve at the anchor point. Here's what this will look like...



Well just like the others lets create some more points in the same manner. Remember the opposite side where you drag is just as important now mostly because when you do hold down the Alt key you will not be able to move it. Go ahead and create as many as you want and close off the shape. this time when you do and hold the Alt key the bar will move 100% independently from the first.

Note: Once you hold the Alt key as long as you don't let go of the mouse button you can let go of the Alt key and move the opposite point around again then hold the Alt key again. This is a nice feature but is also why it is important to let go of the mouse button before you let go of the Alt key when you get your bars where you want them. Another thing when moving your bars around is you can cross them too which can create some interesting things but can also mess up your final shape but, remember you can always go back and modify the shape.


Finally some last words. You can mix and match these three different types of points on one shape. The shapes you create are only limited by your imagination now. You can rasterize the layer. You can add layer styles, use the paths tab next to the layers tab and much more which I will get into later on. To modify the paths, anchor points and bars you will need to use the selection tools which I'll be writing a separate tutorial on soon, so look for it!!

Here it is, I highly suggest reading this tutorial as well because it explains just how to modify the paths, points and shapes you just learned to generate using the pen tool.


Part 2: The Selection Tool: Link