pngs wrong sizes on opening

[houffe]

Hi,
I have made a couple of buttons. They are the same height but different widths.

I made them on the same AI file and exported them as pngs but when my

colleague opens the pngs to use them he says they are different sizes.

If I open the pngs and place them in a new ai they look exactly the same height

yet apparently for my colleague when he opens them they are not the same height at all.

Im not really sure what to do to rectify this or whether he is not doing something that he

needs to.

If any one can shed some light, it would be super handy

Thank you

[sarapixels]

Just wondering - are you consistently exporting to your artboard or to your shape?  If you have that box checked for some and unchecked for others, you'll wind up with differently sized artwork. 

[houffe]

Hi,

I only export assets individually. If there is anything on the art board I delete it so only the shape I want exports or I if things are on layers I hide unwanted layers and then do it. Im guessing thats exporting to shape.

The only time I have exported using the art board was to make something for a keynote presentation. It had messy edges from collaging stuff together so i excluded the mess that way.

Does that sound right?

[sarapixels]

As long as you are consistent about which way you do it, and your objects are exactly the same size, and you don't have hidden objects or text boxes that could be affecting what size Illustrator makes the export, you should be okay there. 

Looking at this again, I'm realizing that your buttons on the right are just longer than the ones on the left. And they appear to be resizing to match.  Check the dimensions of your button shape.  See above where Grant is pointing this out with the pink line.  I just didn't register it yesterday.  But yeah, you're giving them different widths of buttons.

[houffe]

Yeah I was in that instance, it was the tidiest layout for all those buttons on that particular page. I didn't think it would be an issue. We have other pages with different size boxes and buttons on but this particular page was a problem. Maybe because here they are right next to each other. The other pages were different size boxes in different places or buttons on different levels.

Anyway, I tried the different ways mentioned above and it gave the same result so I was just going to make the buttons all the same size as Grant said. Then the dev said he would like to try and make them (all the same size) in CSS so I said as long as they look okay I don't mind.

[Test Screen Name]

You're facing a classic problem of user interface design, faced by most programmers too. The labels are different lengths. This is natural. So you have a number of choices:

1. Make each label the same, maximum size. They will all look the same, but there will be extra space inside the short labels.

2. Allow big labels to shrink. This is what you saw. Because the heights are different, this looks weird.

3. Make all labels the same size (width and height) but use a smaller scale for the font.

4. Use a narrower font (likely to look awful).

5. Use shorter text. For example, you could replace "Account settings" with "My account".

If the project is a collaboration, or you are only responsible for the graphic part, you can offer the best 2-3 choices to your collaborators. Learn how to do your own size mock-ups to show the effect. If someone else is choosing the words, they need to see the results of their choices.

[Test Screen Name]

Sorry, choice 6, make the boxes different sizes. This would be very simple for you, but the programmer making the layout would need to collaborate with you. If all the boxes on the right were wider it would probably look ok.

[houffe]

Also just wanted to say thanks to everyone for there input and help