PART 3 -My windowblinds Anti-Tutorial Tutorial
Po' Frames
Saturday, January 14, 2006 by PoSmedley | Discussion: WindowBlinds Tutorials
This chapter applies only to WIndow Frames/Borders. If anything here applies to any other area of WB Skinning, I haven't gotten that far yet.
What I Didn't Know-
The WB5 version of SKINSTUDIO allows you to make skins for WB5 AND previous versions of WB. Well, I knew that. What I didn't know is that you can make a skin for either version, say...you don't want to get mixed up in all the new stuff v5 has to offer and you want to keep it simple...or you want to make a skin only WB5 can run. OR make one skin that works well in both. This last one is the rub.
If you want to make a skin that works for both and or all...you essentially have to make 2 copies of everything for the WINDOW FRAME/BORDERS. (See opening statement..only talking about the frame here)
Having gotten frustrated trying to work with MagicPink on my STARTMENU, I decided to try TGA and PNG format, being under the impresion that I would NOT need the MagicPink. Which I wouldn't...IF...
I were making JUST a wb5 skin.
What I tried to do was this..(I told you I would flaunt my errors..lol) I attempted to use PNG and TGA formats in the WRONG skin format. If you are not making a WB5 skin, you will have to use the MagicPink for your frame. Here is a pic of what I kept getting.
That was trying to use TGA. When I tried to use PNG, I got a little black corner instead of a white one. For anyone using MagicPink and getting a pink corner...stick with ME, I'll get to that.
Now, after some whining and tylenol..it was explained to me that TGA and PNG were for the WB5 skins when making the frame. In SkinStudio's preview window, there are 4 sub-pre-views in the dropdown menu. Idiot I am, assumed they just SHOWED your skin in different states. And they do! But they are also there to APPLY AND/OR/EDIT your images for each of those states.
So I scrapped my mess and started a new one (skin, not mess. Not yet, anyway). I used PNG's in the per-pixel states as applies to WB5.
As you can see, the corner is much better. (This is the same template as previous image, just different color)
To do the same skin for versions previous to WB5, I will have to go back to BMP and MagicPink..but I can include both versions in the same wb file.
There are some differences in making the images,(You can save your files as PNG's in your Image Editor...SKINSTUDIO will convert them to TGA for you!) and I strongly urge you to read the following tutorial several times to understand this. Plus, it will make clearer what I have said here.>>Link
Now if you are still with me...
Those pesky corners and such in the frames. No matter what format you are working in...pixel, pixel, pixel...MagicPink, TGA,PNG, or BMP...pixel, pixel, pixel.
As I was advised when I started this..PIXEL BY PIXEL.
Let me put it this way...BE THE PIXEL!
You can easily skip over this and that, a detail here and there..etc. IT WILL show in the end and you WON"T like it. You might TELL yourself you do, but you won't.
My Pixel Problems-
Look at the right edge of my image. See how it's slightly transparent. You won't notice it unless you zoom in on it in whatever image program you use. But you will notice it when you try to use it in your skin. Like here...
I couldn't understand why I was getting that white line when my I set my margins correctly.
To correct this I have tried 2 different things. This is where the pro's may cringe and say 'There's a better way" and I hope they will let us know in this thread if there is. What I did was either go pixel by pixel with my eraser...OR..duplicate the layer. Both worked, depending on waht I image I was working on. Sometimes just 'sharpening the edegs will work'.
Now, I have been 'cutting' my images with a template. Look at this...
See that shadow around the top bar...that kept screwing up my cuts, often creating the semi-transparent pixels like in the previous image.
The fix..(which may be VERY common knowledge...but wasn't for me as I am still learning with Photoshop)...when you create your drawing your template files and you set the size for the image, enable the 'snap to pixel' and your image will come out with edges like in the bottom bar.
Finally...and I'm sorry, I must have deleted the images I would have used for this. When working with MagicPink and you get those pink corners and edges...open the image back up in you image editing program and get in close. The SLIGHTEST varience in that 255/0/255 setting will show. Sometimes the effects (ie, shadows, outer/inner glow, etc) can be MagicPinks enemy. A little outterglow bleed over and it's not true MagicPink anymore.
So, you get in there on those corners and go PIXEL BY PIXEL with that pencil or brush set at 1px. Can't get to that one in the corner or the edge...make a new layer, make your square, and scale it to fit if you have to.
Last time...BE THE PIXEL! Take the extra 5 minutes on an image and check those edges. It's almost amazing how a few changes on a few pixels makes such a difference when you reapply it to the skin.
I don't know if I have helped anyone, so as always, feedback is welcome. And I aplogize for my lack of knowledge in what could have been better terminology and wording on the technichal stuff. I will leave it to the experienced people to fill in what I may have missed. For their help and info I have provided here, I would like to thank Boopish, Bushman, and Night Train. If I left anyone out, I apologize.
What I Didn't Know-
The WB5 version of SKINSTUDIO allows you to make skins for WB5 AND previous versions of WB. Well, I knew that. What I didn't know is that you can make a skin for either version, say...you don't want to get mixed up in all the new stuff v5 has to offer and you want to keep it simple...or you want to make a skin only WB5 can run. OR make one skin that works well in both. This last one is the rub.
If you want to make a skin that works for both and or all...you essentially have to make 2 copies of everything for the WINDOW FRAME/BORDERS. (See opening statement..only talking about the frame here)
Having gotten frustrated trying to work with MagicPink on my STARTMENU, I decided to try TGA and PNG format, being under the impresion that I would NOT need the MagicPink. Which I wouldn't...IF...
I were making JUST a wb5 skin.
What I tried to do was this..(I told you I would flaunt my errors..lol) I attempted to use PNG and TGA formats in the WRONG skin format. If you are not making a WB5 skin, you will have to use the MagicPink for your frame. Here is a pic of what I kept getting.
That was trying to use TGA. When I tried to use PNG, I got a little black corner instead of a white one. For anyone using MagicPink and getting a pink corner...stick with ME, I'll get to that.
Now, after some whining and tylenol..it was explained to me that TGA and PNG were for the WB5 skins when making the frame. In SkinStudio's preview window, there are 4 sub-pre-views in the dropdown menu. Idiot I am, assumed they just SHOWED your skin in different states. And they do! But they are also there to APPLY AND/OR/EDIT your images for each of those states.
So I scrapped my mess and started a new one (skin, not mess. Not yet, anyway). I used PNG's in the per-pixel states as applies to WB5.
As you can see, the corner is much better. (This is the same template as previous image, just different color)
To do the same skin for versions previous to WB5, I will have to go back to BMP and MagicPink..but I can include both versions in the same wb file.
There are some differences in making the images,(You can save your files as PNG's in your Image Editor...SKINSTUDIO will convert them to TGA for you!) and I strongly urge you to read the following tutorial several times to understand this. Plus, it will make clearer what I have said here.>>Link
Now if you are still with me...
Those pesky corners and such in the frames. No matter what format you are working in...pixel, pixel, pixel...MagicPink, TGA,PNG, or BMP...pixel, pixel, pixel.
As I was advised when I started this..PIXEL BY PIXEL.
Let me put it this way...BE THE PIXEL!
You can easily skip over this and that, a detail here and there..etc. IT WILL show in the end and you WON"T like it. You might TELL yourself you do, but you won't.
My Pixel Problems-
Look at the right edge of my image. See how it's slightly transparent. You won't notice it unless you zoom in on it in whatever image program you use. But you will notice it when you try to use it in your skin. Like here...
I couldn't understand why I was getting that white line when my I set my margins correctly.
To correct this I have tried 2 different things. This is where the pro's may cringe and say 'There's a better way" and I hope they will let us know in this thread if there is. What I did was either go pixel by pixel with my eraser...OR..duplicate the layer. Both worked, depending on waht I image I was working on. Sometimes just 'sharpening the edegs will work'.
Now, I have been 'cutting' my images with a template. Look at this...
See that shadow around the top bar...that kept screwing up my cuts, often creating the semi-transparent pixels like in the previous image.
The fix..(which may be VERY common knowledge...but wasn't for me as I am still learning with Photoshop)...when you create your drawing your template files and you set the size for the image, enable the 'snap to pixel' and your image will come out with edges like in the bottom bar.
Finally...and I'm sorry, I must have deleted the images I would have used for this. When working with MagicPink and you get those pink corners and edges...open the image back up in you image editing program and get in close. The SLIGHTEST varience in that 255/0/255 setting will show. Sometimes the effects (ie, shadows, outer/inner glow, etc) can be MagicPinks enemy. A little outterglow bleed over and it's not true MagicPink anymore.
So, you get in there on those corners and go PIXEL BY PIXEL with that pencil or brush set at 1px. Can't get to that one in the corner or the edge...make a new layer, make your square, and scale it to fit if you have to.
Last time...BE THE PIXEL! Take the extra 5 minutes on an image and check those edges. It's almost amazing how a few changes on a few pixels makes such a difference when you reapply it to the skin.
I don't know if I have helped anyone, so as always, feedback is welcome. And I aplogize for my lack of knowledge in what could have been better terminology and wording on the technichal stuff. I will leave it to the experienced people to fill in what I may have missed. For their help and info I have provided here, I would like to thank Boopish, Bushman, and Night Train. If I left anyone out, I apologize.
PoSmedley
Reply #2 Monday, January 16, 2006 11:11 AM
Reply #2 Monday, January 16, 2006 11:11 AM
I agree.
What happens with the skins that are WB5 if you don't have that version of WB is that you get a re-colored windowsxp skin...Link
UNLESS the skinner has taken the extra time and effort to make 2 skins..such as the Schismwb Skin that Night Train made...Link
Hopefully skinners will keep in mind that a lot of people still don't have wb5 or the correct graphics card to view perpixel stuff (which I discovered I don't have) and make the 2 skins...at least for a little while til the rest of us catch up.
I do realize the work and effort and time that consumes and appreciate it greatly.
Some skinners do mention in their comments that it is wb5 or other...I would think that eventually WC will add a WB5 check box to the submission form like they have with IconPackager3.
What happens with the skins that are WB5 if you don't have that version of WB is that you get a re-colored windowsxp skin...Link
UNLESS the skinner has taken the extra time and effort to make 2 skins..such as the Schismwb Skin that Night Train made...Link
Hopefully skinners will keep in mind that a lot of people still don't have wb5 or the correct graphics card to view perpixel stuff (which I discovered I don't have) and make the 2 skins...at least for a little while til the rest of us catch up.
I do realize the work and effort and time that consumes and appreciate it greatly.
Some skinners do mention in their comments that it is wb5 or other...I would think that eventually WC will add a WB5 check box to the submission form like they have with IconPackager3.
tameddragon
Reply #3 Monday, January 16, 2006 11:20 PM
Reply #3 Monday, January 16, 2006 11:20 PM
Po', if you've done the same thing with your window borders as you did with the start menu, meaning, made an image of what you intend the final result to be... Flip back over to Part 2 and check my comment there. Might be helpful for you?
Just keep at it. You'll learn more from mistakes than you will from success, and be that much better for it!
Just keep at it. You'll learn more from mistakes than you will from success, and be that much better for it!
Bushman
Reply #4 Tuesday, January 17, 2006 7:59 AM
Reply #4 Tuesday, January 17, 2006 7:59 AM
I could not have explained things better. Sorry I wasn't able to put things into words like you did above in explaining things but you picked them up just fine. I just recently found out about the shadows around the square/rounded corners thing untill a few weeks ago now where in PSC2 do you the 'snap to pixel' at? I had to cut the sections off 
more work 
.
more work 
.
PoSmedley
Reply #6 Tuesday, January 17, 2006 8:58 AM
Reply #6 Tuesday, January 17, 2006 8:58 AM
I really need to keep notes or something.
I probably know what they are but just don't know the tech names...
what is the Info Plette window and clipboard preset?
Yeah, what you posted I've done but forgot I've done it and didn't pay attention to the desired affect I was getting.
Glad I could help you for a change.
| use the rectangular marquee tool in Photoshop in conjunction with the Info palette window. Open a new image using the clipboard preset and paste in your selection. |
I probably know what they are but just don't know the tech names...
what is the Info Plette window and clipboard preset?
Yeah, what you posted I've done but forgot I've done it and didn't pay attention to the desired affect I was getting.
| Never Mind I found it |
Glad I could help you for a change.
pailhead
Reply #7 Thursday, January 19, 2006 10:59 AM
Reply #7 Thursday, January 19, 2006 10:59 AM
Keep these "Anti-Tutorials" coming. I'm still working on my skin which is finishing up concept and I'll be moving it to SkinStudio 5, but the more of these type of tutorials we see the more it'll help people like me who have never skinned a darn thing ever.
Keep them coming and good job!!!!
Keep them coming and good job!!!!
Bushman
Reply #9 Thursday, January 19, 2006 6:42 PM
Yea what are those?
Reply #9 Thursday, January 19, 2006 6:42 PM
| I probably know what they are but just don't know the tech names... what is the Info Plette window and clipboard preset? |
Yea what are those?
-scion-
Reply #10 Saturday, January 28, 2006 12:53 PM
Reply #10 Saturday, January 28, 2006 12:53 PM
easiest way to get rid of the archiving on the square images is to turn off anti-aliasing before you draw the box. photoshop is trying anti-alias the edges of your image to make it look "smoother". this works best for squares and lines, not rounded items.
don't bother saving your images as .tga's either. save them as .png's and import them into skinstudio. skinstudio will convert it to a .tga for you.
don't bother saving your images as .tga's either. save them as .png's and import them into skinstudio. skinstudio will convert it to a .tga for you.
PoSmedley
Reply #11 Saturday, January 28, 2006 1:04 PM
Reply #11 Saturday, January 28, 2006 1:04 PM
Thanks. Those corners are time consuming to say the least. 
tameddragon
Reply #12 Monday, January 30, 2006 3:57 AM
palette windows are those thingy windows that hang out on the right-side of the screen in PS's default settings. Clipboard is that bit of memory used for something you've copied; uhh ... check the dialog window when you do Start > New, there's a dropdown box beside Preset: 'Clipboard' is the second choice.
Reply #12 Monday, January 30, 2006 3:57 AM
| I probably know what they are but just don't know the tech names... what is the Info Palette window and clipboard preset? Yea what are those? |
palette windows are those thingy windows that hang out on the right-side of the screen in PS's default settings. Clipboard is that bit of memory used for something you've copied; uhh ... check the dialog window when you do Start > New, there's a dropdown box beside Preset: 'Clipboard' is the second choice.
tameddragon
Reply #13 Saturday, March 25, 2006 9:38 AM
Reply #13 Saturday, March 25, 2006 9:38 AM
:bump: Hey Po'.. is this it? No more installments on your anti-tutorial?
PoSmedley
Reply #14 Saturday, March 25, 2006 3:01 PM
Reply #14 Saturday, March 25, 2006 3:01 PM
tameddragon, hello!
I apologize to you and anyone else who was following this thread. (Both of you...lol) When I found out I had a video card that did not work with WB5, I put the project on the backburner. I finally upgraded to a video card that supports all the WB5 features about 2 weeks ago, and plan on picking up where I left off soon. Hopefully within the next week. I'll know better after the 31st, when I find out if I will have to have more surgery.
But thanks for asking and foloowing this attempt at a tutorial. One way or another, I will complete it.
I apologize to you and anyone else who was following this thread. (Both of you...lol) When I found out I had a video card that did not work with WB5, I put the project on the backburner. I finally upgraded to a video card that supports all the WB5 features about 2 weeks ago, and plan on picking up where I left off soon. Hopefully within the next week. I'll know better after the 31st, when I find out if I will have to have more surgery.
But thanks for asking and foloowing this attempt at a tutorial. One way or another, I will complete it.
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!
Reply #1 Monday, January 16, 2006 10:53 AM
I think there should be a mark that this only works with WB5 or something (like DX gets or Icon Packager)
What do you think?