Start Panel slices dont fit properly (even with margins adjusted)

I've been racking my brain trying to understand why this wont work. I created a startpanel in Photoshop , cropped each of the 5 parts that make up the whole startpanel, and saved each section as it's own .png image. I then imported the images into SKS 6 Professional and the pieces dont fit together flush. So I tried adjusting the margins and went to the Extra's tab and typed in the image sizes but STILL ....No matter what settings I use, the start panel is distorted. Here are the images below. I just posted them in this order:

The original whole start panel image is sumthing like 412 pixels wide and 307 pixels tall. I know the panel will stretch UPWARD when applied becuase of the lists, but the pieces seem to shift sideways. I tried adjusting margins, but it didnt help.

106,137 views 39 replies
Reply #1 Top

hey man i think the problem is your right side panel and you need to cut it the same size as the left panel, and all programs as if they were one but cut it out of the right side...you get me??:grin:

Reply #2 Top

i hope that helps...ill try to get a screen shot of what im talking about to help you under stand more...one minute

 

Reply #3 Top

Quoting jojo25, reply 1
hey man i think the problem is your right side panel and you need to cut it the same size as the left panel, and all programs as if they were one but cut it out of the right side...you get me??

Im not sure what you mean, but every tutorial on how to create start panels always has the Programs section shorter than the List (left) side because the More Programs section goes under the Programs section and both the Programs section and More Programs section combined are equal in length to the List side.

Reply #5 Top

I divided my startpanel the same way

Reply #6 Top

Since I cut each section right on the slice lines, each part SHOULD fit together when imported into SKS. But they don't. And it's driving me insane!

Reply #7 Top

you might not have cut it properly.  before you start, make sure you note the size of the WHOLE startpanel.

cut the userpane off first, note its height, when you have saved the userpane, go back and minus that height from the startpanel block.

with the progs list, include the more programs with it in its height, then slice off the more programs  note the height, then minus that height from the programs list.

this way its all mathmatically correct, no errors in judgement.  1 pixel out of the calculations can put out the whole start panel if its not cut correctly to begin with.

this is how i work.

i start with the startmenu block ive created. note size, width ect.

cut the userpane, note size, save it and go back to the original block by using my backspace, then minus the height of the userpane,

same for all the other pieces, cut, write down size, go back , minus it from the block ect.

hope this helps.

Reply #8 Top

i dont use ps to cut, i use another program thati fnd more accurate for myself, called serif photo plus.

Reply #9 Top

Vamp has you pointed in the right direction.

Several things can push a Start menu out of alignment.

Bad slicing job...pay attention to your drop shadow pixels,they can extend around ALL sides of an image without being very visible...if the progs slice has 10 translucent pixels to the left of the edge of your main image, then so must the user pane and logoff area even if they dont HAVE pixels there.

 

Sizing margins...make sure they cover at least to a point where they must line up with another image.(dont let them overlap)

 

I dont cut my source psd...I select all,copy merged,paste into a new doc.That way I get exactly the pixels I'm cutting up in a single small doc(no blank space around the sides to deal with.Then I select and cut each section as a layer via cut.(that way you can never cut from something that has already been cut)

Reply #10 Top

I created my start panel with a slight drop shadow and transparent sides so that it wont be completely touching the side of the screen when applied. So the sizes of the various parts (Userpane, Programs, etc) will include the actual start panel aswell as the drop shadow and transparent sides (as shown in the image that I posted earlier). So I'd rather not use the method you mentioned about "no blank space around the sides to deal with."

Basically, here's how I do it:

I draw the entire start panel (with drop shadow and extra room around it so that it doesnt hug the side of the screen when applied). Then I merge visible so that the entire panel and shadow are one image. Next, I set the guides for each of the 5 sections. Here's where some of the problem occurs --- I used to use the rectangle tool to select each part one at a time (say, the userpane), I would then copy (also tried copy merged). Then I'd open a open a new document and paste it there. The problem I found with doing this, is that the new document canvas size is only as big as the image piece but it DOESNT include room for the transparent edges (which I want). SO,I've recently been taking a different approach:

After creating and merging the startpanel into one image on one layer, I go to Channels Tab, create a new Alpha channel, and make it active (so that the entire document looks black, Then I select the section (say, the userpane again), copy the Alpha selection of the userpane in Channels, open a new document, I then de-activate the Alpha channel and go back to the startpanel layer in the Layers tab on the Start panel document, Copy that, then paste THAT selection into the new document. But it pastes the userpane selection in the middle of the new document. So I nudge the image to the edge of the side where it would meet with the other sections (in this case, I nudge it down a bit to match up with where the tops of the programs and Places List would be; careful to nudge it just to the edge and not beyond that. Doing it this way allows me to keep the same width and height of the selections from the original startpanel image including the "blank" areas (which I want to keep). But...... like I said, this method must also be flawed because when I import the 5 parts into SKS, they dont seem to match up evenly (EVEN THOUGH, all of the dimensions of all of the five sections DO add up to the dimensions of the entire original startpanel (which includes the "blank areas").

I'm thinking that the guides might be causing the issue. Here's my theory:

After setting up the guides to where I want the sections to be cut, using the rectangle tool (set to snap to guides). I think that when the rectangle snaps to the guides of each selection, perhaps it snaps to 1px INSIDE of the intended selection (thus, causing the selection to actually be 1px smaller that what I want) OR that it actually snaps to 1px OUTSIDE of the selection (thus, causing the selection to actually be 1px larger that what I want). If either one of these theories is correct, then the image sizes would be inaccurate.

My last method to solve this issue is to:

After setting the guides, I use the rectangle tool to select one of the parts (userpane), then crop it so that it preserves the "blank" areas, and I save it as Userpane.png. I then undo the crop, select the next part (say, programs) using the rectangle tool again, crop, save as Programs.png. I do the same for all five of the startpanel parts. I haven't imported the images that I did using this method into SKS yet. But I will post the results once I do.

Reply #11 Top

Damn vamp, that seems complicated.  But if it works, it works.  In reality, mine is probably as complicated (although I don't think so), but it works for me and there's no math involved.  I hate math.

 

I create a colored (green) section for the top margin, it fits in my slice lines.  It sits at the very bottom of the layer sets and is never used until I'm ready to slice.  I don't even turn it on.  I just control select that layer so I get the outline, then copy that portion of my merged startpanel.  Paste into a new document that is exactly that size because when you have something on the clipboard, a new document autosizes.  Save it.  Import it into SKS.  Viola.

 

Repeat for each of the other 4 sections.  Works.  Never fails.  I've found the slice guides don't work well.  Putting a box inside, even with snap on seems to still go where it wants. 

+1 Loading…
Reply #12 Top

I create a colored (green) section for the top margin, it fits in my slice lines.  It sits at the very bottom of the layer sets and is never used until I'm ready to slice.  I don't even turn it on.  I just control select that layer so I get the outline, then copy that portion of my merged startpanel.  Paste into a new document that is exactly that size because when you have something on the clipboard, a new document autosizes.  Save it.  Import it into SKS.  Viola.

Basically, Thats similar to my methods of using the Alpha channels (altho, more steps are involved in mine).  

+1 Loading…
Reply #13 Top

Basically, Thats similar to my methods of using the Alpha channels (altho, more steps are involved in mine).

Not sure what to tell you really, you need to find something that works for you and then stick with it.  You could try each one of the methods posted here, that's why you posted, to find help.  Mine may be similar to yours but how has your's worked out for you so far?  Again, selecting with the rectangle tool with snap on, I've noticed, sometimes puts the selection above the line, sometimes inside the line, sometimes above the horizontal line and inside the verticle line...that's why I decided to do the box method.  It's worked out for me.  Once you get your Starpanel the way you want it, with drop shadows and all that, Draw in the boxes making sure they cover everything including the shadows.  Put each on it's own layer.  Then with your merged startpanel, start selecting using the boxes layers.  Give it a try.  It's possible it won't work for you or it's too much work for you...who knows.  I'm just offering a suggestion.

Reply #14 Top

Boy, what you all are doing sounds awfully complicated!

What I do, is open my whole start panel in Photoshop.  Select the slice tool.  (Make sure the slice guides are visible.)  Right click on the single slice that should encompass the whole start panel, select edit slice from the right click menu.  For the user pane, make sure it is the entire width of your panel, then make the height whatever you want....I usually make mine around 40 pixels tall.  Click ok.  Then right click on the second slice in the start panel (shoud encompass the remainder of the panel.)  Proceed as above...make your left panel (programs list) approximatally half the width of the whole panel, and however long you want, keeping in mind that your All Programs panel needs to be 30 pixels tall, and the bottom bar needs to be somewhere around at least 50 pixels tall.  Proceed as above for the rest.  Keep in mind that your right panel needs to be as tall as the programs list panel and the All programs panel COMBINED!  For instance, if you made your programs list panel 200 pixels tall, then your right panel needs to be 200 pixels plus the 30 pixels from the all programs panel together...230 pixels tall.  Once you get those 4 slices done, the bottom bar will be the height of whatever is left.  I then save these slices for the web in a folder in my working skins folder and then import each image into sks.

ortiz, if you are still having trouble slicing your start panel, you can send it to me, and i will do it for you.  Just click on my name here above my avatar, and there is an option to email me.

+1 Loading…
Reply #15 Top

Again, selecting with the rectangle tool with snap on, I've noticed, sometimes puts the selection above the line, sometimes inside the line, sometimes above the horizontal line and inside the verticle line...

 

I find that it does this when you have a layer with graphics active. I always test my startpanels on a solid background (I change the color to see how it looks on different backgrounds) then hide it before chopping up the panel. If you make sure that the solid background layer is active (but hidden), #1 the guide goes where you want it to instead of trying to snap to the edge of an image and #2 the selection box stays inside the grid instead of hopping 1 pixel outside on one side.

Reply #16 Top

If you are starting a new skin and have the default skin template in SKS, you could do this:

1. Open each start menu piece in Photoshop. Do this by clicking the edit button for each piece in SKS.

2. Piece them all together on 1 document in PS. Be sure to keep the original sizes. For instance, if the top is 32 px, the middle (including right side, left side and more programs area) is 350px, and the bottom is 50px, then your document where you are piecing them together should be 432 px tall.

3. Draw guides so they align with the edges of each layer. The layers are the different pieces of the template.

4. Create your graphics.

5. Merge your graphics onto one layer. Using your rectangular marquee tool, draw selection boxes for each area (based upon the guides you drew earlier), then crop. You now have a piece.

6. Save the piece with an appropriate name like 'start menu top."

7. Undo a couple of times until you have your whole document again. Repeat until you have each piece finished.

This seems to be the easiest way for me. I've tried it other ways and had similar problems. I've never had a problem doing it this way.

Reply #17 Top

This community is awesome! The way everyone jumps in to help others makes me proud to be a member.:wc:

For me though this sounds likes way too much work.o_O I think I'll stick with using the big red download button for my WindowBlinds.;)

Reply #18 Top

For me though this sounds likes way too much work. I think I'll stick with using the big red download button for my WindowBlinds.

Probably a good idea. Once you start, you can't stop! :')

Reply #19 Top

Jazzymjr:

"All Programs panel needs to be 30 pixels tall, and the bottom bar needs to be somewhere around at least 50 pixels tall."

Thanks for the info. I wasn't aware that these two sections had to have a set size. Maybe this is why I'm having problems.

Reply #20 Top

Quoting Mirsguy, reply 16
If you are starting a new skin and have the default skin template in SKS, you could do this:

1. Open each start menu piece in Photoshop. Do this by clicking the edit button for each piece in SKS.

2. Piece them all together on 1 document in PS. Be sure to keep the original sizes. For instance, if the top is 32 px, the middle (including right side, left side and more programs area) is 350px, and the bottom is 50px, then your document where you are piecing them together should be 432 px tall.

3. Draw guides so they align with the edges of each layer. The layers are the different pieces of the template.

4. Create your graphics.

5. Merge your graphics onto one layer. Using your rectangular marquee tool, draw selection boxes for each area (based upon the guides you drew earlier), then crop. You now have a piece.

6. Save the piece with an appropriate name like 'start menu top."

7. Undo a couple of times until you have your whole document again. Repeat until you have each piece finished.

This seems to be the easiest way for me. I've tried it other ways and had similar problems. I've never had a problem doing it this way.

Nice tip; Thanks.

Reply #21 Top

I wasn't aware that these two sections had to have a set size.

I don't find that to be true..........

 

 

 

Reply #22 Top

Quoting jazzymjr, reply 14
Boy, what you all are doing sounds awfully complicated!

What I do, is open my whole start panel in Photoshop.  Select the slice tool.  (Make sure the slice guides are visible.)  Right click on the single slice that should encompass the whole start panel, select edit slice from the right click menu.  For the user pane, make sure it is the entire width of your panel, then make the height whatever you want....I usually make mine around 40 pixels tall.  Click ok.  Then right click on the second slice in the start panel (shoud encompass the remainder of the panel.)  Proceed as above...make your left panel (programs list) approximatally half the width of the whole panel, and however long you want, keeping in mind that your All Programs panel needs to be 30 pixels tall, and the bottom bar needs to be somewhere around at least 50 pixels tall.  Proceed as above for the rest.  Keep in mind that your right panel needs to be as tall as the programs list panel and the All programs panel COMBINED!  For instance, if you made your programs list panel 200 pixels tall, then your right panel needs to be 200 pixels plus the 30 pixels from the all programs panel together...230 pixels tall.  Once you get those 4 slices done, the bottom bar will be the height of whatever is left.  I then save these slices for the web in a folder in my working skins folder and then import each image into sks.

ortiz, if you are still having trouble slicing your start panel, you can send it to me, and i will do it for you.  Just click on my name here above my avatar, and there is an option to email me.

Thanks for your help. Once I make the slice guides for each piece, what do I do next? (I'm not familiar with exactly how the Slice tool works). So, Once the slice guides are in place, how do I select each slice so that I can save each as its own .png image?

Reply #23 Top

Jazzymjr:

"if you are still having trouble slicing your start panel, you can send it to me,"

I tried, but received the message that 'you have chosen not to receive emails'

Reply #24 Top

Like I said...try what you see here and when you find something that works, stick to it.

Reply #25 Top

jazzymjr:

 Once the slice guides are in place, how do I select each slice so that I can save each as its own .png image? Do I set the slice locations, use the rectangle tool to line up on the slice lines, then just crop, save as Userpane.png, then undo crop and keep doing that for each part? I'm hoping that somehow I could just make the slices and then select each slice and save it as it's own .png image. But I cant seem to figure out how to do so with the slice tool. Its there a way to do so, if so, please detail. Thanks.