Day Two- My Windowblinds Anti-tutorial Tutorial

All Is Not Well

So I have begun with the Start Menu and Task Bar.
This is my final Draft of the START MENU. This is at the size I want it to ‘appear’ in the finished blind. (I have no idea if this is a mistake or not.)


Next, we have the Start Menu in slices. (Each one saved as a separate bitmap.)


Now, in my final draft, I added the so-called ‘magic pink’ to the background. Why? Because after an initial test, I found that my ‘corners’ were showing white where I wanted nothing.

When starting in SkinStudio, you have the option to create from a New Skin or from a Template. I chose the first, which opens up a default skin similar to WinXP Blue. With each graphic, you have the option of editing each individually…or…you can open up your own graphic. This is done from the tabs in the preview window. However, when you open your own graphic you will be expected to ‘cut’ what you need from it. Follow? Well, I found out that opening the ‘entire’ start menu draft I had done and trying to cut the required slices from it was impossible for me. That is why I created slices in Photoshop and opened each one individually..THEN cut from each. (Which basically meant making sure each was the ‘exact’ size I needed, as I had layed out.)

What I did was cut them to the size I had saved them at, which meant just tightening up the edges, so to speak. After applying them all for the ‘START MENU’…this is what I got. I have the original intent nest to it.


My original is W300 x H457. What SkinStudio created from my input is W359 x H 768. I tried messing with the ‘tile, stretch’ controls, etc…but it either got worse or totally whacked. Obviously, what I got is NOT what I intended. I am currently going over my BMP’s and settings.

Of note is the ‘MAGIC PINK’ that is not all that magic. (For any unfamiliar…WB should read it as transparent….however….anti-liaising and shadow effects and Bevel and Emboss effects will do things to the edge of your graphics that will change what WB reads…should it OVERLAP the magic pink. Magic Pink should be set at 255/0/255. The slightest variance will make it visible.) I noticed this right away and had gone back and THOUGHT I had made clean copies of all the bitmaps and then re-applied the Magic Pink, but apparently not.

Finally…if you look at what SS created…you will see ‘white lines’ that outline my slices. I have NO idea why.

Problems.
1. Sizing
2. Magic Pink
3. Slice borders

4 months is starting to look like a possibility.

AND…just for laughs….the practiced/achieved skinners will get a laugh out of this. This next pic is a vector of what I really wanted. It actually worked better than this one, with the exception of the bottom bar..it refused to conform in any way…and the magic pink. No matter what I did I could not make it ALL go away.



I would have liked to go with this one, but it is way beyond me. It was something special I wanted to do for Valentines Day that would have made it possible to personalize the skin in a way I have yet to see it done. Oh, well.
Final Note: The Icon Pack to match the blind that doesn't exist is complete. 140 plus icons that I refuse to let see the light of day until this *@!$#@ blind is done.
22,872 views 27 replies
Reply #1 Top
Bump
Reply #2 Top
Eazy mate got no images my side
Reply #3 Top
A few people cannot see the images. For some reason, this has to do with the fact that I uploaded them to DA. I will be using another image host for the rest of this. Sorry.
Reply #4 Top
your getting the idea Po', let me show you what i ment by a "design board". these two pictures are the two main layers of a .psd i used to make my latest skin. if any one has Photoshop and would like a copy of the file let me know and i'll e-mail one to you.

this is the top


and this is the bottom


now if you look at them you'll see how easy it is to "cut" the needed image from the big picture.
Reply #5 Top
as a second thought, look for the skin "WILD BLUE" to see how useing this method helps make a great skin! just uploaded it and it should be released in a day or so!
Reply #6 Top
Thanks. I sorta did what you have illustrated..only I didn't save the bottom, I have just been trying to cut from the top.

However, in playing around with the Start Menu, I figured out I needed to do what you have shown. What my wife would call "Going around the elbow to get to the azz."

I am figuring a lot out as I go along. The biggest 'little' bug for me, right now, is messing with that MagicPink. I'm understanding what some of the other's meant when they said 'pixel by pixel'.
Reply #7 Top
I would love a copy of your template NC, if you would be so gracious, Thank you for your help with this.

Drzues@Comcast.net
Reply #8 Top
'Po...your start panel images(and for that matter, most of the images you need) don't have to be .bmp's...you can use .png's and skip the magic pink! You'll only need it for the window frames (non WB5 frames) and the logoff dialouge buttons (if they are any shape but rectangular!).

I usually make my images one at a time...and play with them until I think they are just right. That way I can adjust each piece to my liking and have a psd of what I did to get it that way! I am no expert, and some photoshop stuff is still way beyond me!
I found the tutorial (found in the help section of SkinStudio) good, but found looking at a skin I liked the looks of and using it to get my sizes and margins worked even better, but then again, I learn best from doing!



Keep at it, and good luck!
Reply #9 Top
..you can use .png's and skip the magic pink!


W-W-WHAT?!?!?!?!?!?!?!?!?!

Ouch
Reply #10 Top
yep. just use those nice little check boxes marked "transparent" and "tranluscent". Now if I knew what a psd was...and how to use one. Is it like a .cdr? I got CorelDraw for X-mas and I am afraid of it.

Wish I could see your uploads. I'm sure it all looks great though.
Reply #11 Top
psd is a photoshop file. Not 'sure' you can use them in SS or WB.

I tried Corel9...too much 'stuff' for me.
Reply #12 Top
I got CorelDraw for X-mas and I am afraid of it.


No scorpio! Don't be afraid!!! Just follow some of mormegils tutorials for icons to help you to get a feel for the program! I'm watching Po' here and I'm also waiting for mormegil to put out that WB tutorial he promised us a few months ago! CorelDRAW is great! Have fun!!

That's a great tip Betty on using pngs instead of files that need the magic pink! I'll keep that in mind if and or when I ever atempt a WB!
Reply #13 Top
It looks like those white lines are the cut edges, also don't forget the separators (which are white in your ss). You will need to retouch all of them. Looks great so far I'm like boopish in that I do each piece separatly and then tweak things as I go along. I do a lot of per pixel touch ups mainly in dealing with MP. You can't use png as a replacement for all the bmg's so you still have to use MP so get used to doing MP touch ups
Reply #14 Top
those white lines are the cut edges,

Yup. Took me a few minutes to figure that out. You can't just 'cut' the image and be done with it. You have to fine tune the edges before you hit that 'cut' button.

Thre's so much info and most of it seems to be written for people with 'experience'. I understnad I can use png in the start menu. What I don't get is when/where/and why to use/choose tga or bmp images. The benefits or lack of for each. I am totally unfamiliar with tga graphics and their properties. So far, I have been sticking to bmp.

From what I gather, one of the biggest points with these 2 graphics is the 'size' of the file and the time it takes to load the blind? But still not sure which is better, easier to work with and all that.
Reply #15 Top
I use tga where ever and when ever I can over bmg mainly because I don't have to do as much fine tuning (MP) with them. If you want I can show you how tga's are made (at least the way I know how) it's pretty easy.
Reply #16 Top
What do you mean by 'fine tuning'? Do you not need to use the MP with them?

Yeah, may as well show me. I haven't haqd my cerebellum fuse yet today.

I was just starting to get comfortable with png's, too.
Reply #17 Top
Photoshop CS2 doesn't do .tga's very well....so it's great that Skinstudio changes .png's to .tga's for you!

The places you need .bmp's for sure are : 1) the drop down menu item image (you can use the same one for the startmenu item image (programs and places item) and the more programs items image. You just adjust the frames by adjusting the margins.....the main menu item image is 5 frames of identical size...say 25 x 25...your combined image would then be 125 x 25 . The programs/places image is 2 frames so adjust your margins so that frame 3 and 4 are included and the image is 50 x 25....the more programs image is 3 frames (frames 3,4,5) again adjust your margins so that the image size is 75 x 25. 2) the logoff dialogue buttons 3) the header bar for non WB5 blinds...so it shows up properly in Windowblinds preview. 3) progress bars ..two little images with each frame exactly the same size. 4) shellstyles, groupbox.

I might have missed one or two....but experiment!! That's half the fun!!

When you import your image, choose select all. Do you see that the size says 1 px more on the width and height? Just adjust the margins 1 px on the right and 1 px on the bottom and you should have a nice clean image.
Reply #18 Top
Okay, I am officially stuck. I have been trying for 4 days to work on the frame and no luck. I don't know what I am doing wrong, but I can't get the corners to match up.

I've had to scratch off a few things I would have liked to do with this..in other words..simplify it..but I really don't want to give up the rounded corners. I have tried the margin settings and all that. I think it has more to do with the template and how I am cutting from it.


The problem I run into with the template is this. For the top of the frame, do I

A. Make a stand alone image
or
B. Cut from the image of the entire frame

or is it something else?
Reply #19 Top
Po' Smedley email me Email put something in the subject line that lets me know it's you otherwise the email will be deleted. Sorry but that's how I do emails, I've taking too many virus hits. There is a way ti fix the problem if I'm reading it right. If this is the per-pixel images then all you do is redesign the images if this is a screenshot of the normal Top and side then you will have to either cut from the orginal or dr. up, what I call touching up,the side images L & R to match the top part, both states (active, inactive) along with some touching up of both sides for the top image, again both states. Both take some time to do. At least that's how i did them. That's part of the price for using gradients.

No you don't use Magic Pink with tga's that's the beauty of tga's. I use Photoshop CS2 to make all my images and I don't have any problems making normal tga's Apprentice boopish only making the transparent tga's gives me some fits but like you said SkinStudio will change png's to tga's for you if not for this I would still not be considering using some tranparence in my Mall update. Email me Po' Smedely
Reply #20 Top
The omage is a screenshot of the skin applied. I scrapped it and have gone back to the rounded corners. I have the same problem, but have been fixing 'most' of it with MP. (JUst saw your post here)
I'll email you.
Reply #21 Top
'Po...here's how I did my Virginity blind:

I always do the start panel first...don't know why...just do. You'll see that the start panel is mostly square. I liked that but wanted it a bit softer so I made an image of what I would like the window and frame to look like:
basically I used the rounded rectangle tool, drew a rounded box of approx 400 by 400 px on a transparent background: then I added a "stroke" to outline it, then tinkered with the transparency slider until I liked the way it looked..then added drop shadow, inner shadow and inner glow. I saved it as a .png then opened SS, imported it and began "cutting" the per pixel frame: I moved the sliders at the right side until my image was 400px wide, then moved the bottom slider up until the size was 35 px. Then when I chose cut frame - choose "single image, multiple ...." This gives the proper image states.

I did the same for the bottom...but this time I moved the bottom and the right slider until my image said 400 x 400...then moved the top slider down until I was at 15 px. Cut the same as for the caption.

sides are easy for WB5....take the same images move the slider 35 down from the top and 15 from the bottom...now move it all the way left until you get to 15 px. Cut using same settings as above. For the right side, so the same...just remember to start with your image at 400 x 400 px and move the sliders accordingly until the right image is now 15 px wide. Cut and import.

The same basic rules apply for the start panel,especially if you want it to appear as one seamless unit. If you want it different images, make the header approx 380 w by 64 h (I usually use 35 h, because I like smaller user panes). I use .png's because I like the transparcy to be at about 95% for my programs and 85% for places image.

With WB5 if you are using ,png's there is no need to use magic pink. It changes the image to a .tga for you.
So if you want a "seamless" start panel...make a single image like I did for my window frames. Just make it approx 380 x 240. Import adjust the margins and get ready to cut.
Remember that the more programs pane comes into play....and when you "Cut" your programs image, make it the section below the user panel, and approx 190 px wide ... but approx 35 px above the bottom of the image to leave room for the more programs section (just remember where you stopped...and start there when you cut your more programs panel. The places panel is similar, but this time you cut to the bottom and move the left margin in so that the final image is 190 x 240.

Your image should match up...if not, check your "Sizing Margins" adjust so that they are all the same and you should be good to go!

Don't give up...keep a good sense of humor about the whole shebang and have fun!!!
Reply #22 Top
I'm trying. Honest. Fun, fun, fun. See, I'm smiling and evrything. Smile, smile, smile.



*Ignore the hostage negotiators in the background.
Reply #23 Top
Chocolate and lots of it helps!! (and possibly distract those hostage negotiators back there!)
Reply #24 Top
For those that have trouble seeing the images, right-click on the "x" where the pic would be, click Properties, then copy the url to a separate window. Once I opened each image separately, I refreshed this window and all was as it should be.
Reply #25 Top
Po', thinking about it a bit, what I've done to get small parts of a larger image is to use the rectangular marquee tool in Photoshop in conjunction with the Info palette window. This lets you drag open an area exactly the size you need. Move the marquee to cover the area you want to use then copy. Open a new image using the clipboard preset and paste in your selection. You can then save it as a .bmp, .png, .tga, or whatever format you prefer. It's worked for me and is non-destructive to the original image.