Known Participant

Answered

pngs wrong sizes on opening

Forum|Forum|6 years ago
June 11, 2019
7 replies
4710 views

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

This topic has been closed for replies.

Correct answer Ton Frederiks

Try View > Pixel Preview in Illustrator to get an idea of the size.

Use Asset Export or Export for Screens, you can add a scale there.

1x is at 72 ppi

2x is at 144 ppi.

You can drag the export files into a browser to see their size in a webpage (or at least what you will give the developer).

H

houffeAuthor

Known Participant

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?

S

sarapixels

Inspiring

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.

H

houffeAuthor

Known Participant

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.

S

sarapixels

Inspiring

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.

H

houffeAuthor

Known Participant

Thanks

I can now see there really is a huge difference in the pixel size of the two boxes yet they look exactly the same on screen. Thats so weird!!

So, taking on board all you guys input, I guess now that the art board is in pixels I should just remake the buttons from scratch and then check them in photoshop before I send them over. If that doesn't work then I will make them all the same size.

I did mention to the devs before that I had been saving at 300ppi but they said it didn't matter so I didn't go in and change them at all.

If I do start saving at 72ppi am I right to assume that there shouldn't be any noticeable visual difference to the quality between the two types of assets on the page saved at different ppi's , unless a user zoomed in a lot ?

Ton Frederiks

Correct answer

Community Expert

Try View > Pixel Preview in Illustrator to get an idea of the size.

Use Asset Export or Export for Screens, you can add a scale there.

1x is at 72 ppi

2x is at 144 ppi.

You can drag the export files into a browser to see their size in a webpage (or at least what you will give the developer).

H

houffeAuthor

Known Participant

oooh thank you

Grant H

Community Expert

So, you best be making them (the buttons) EXACTLY the same width and height respectively . /G

H

houffeAuthor

Known Participant

To clarify you mean I need to make all the buttons the same size to fit in his constraining box?

Grant H

Community Expert

yes eg 300px x 50px all of them

Grant H

Community Expert

It looks like (he) is placing them in a container that is constraining the width and thus reducing the height.

Grant H

Community Expert

Pink = Pink hence my comment:

Ton Frederiks

Community Expert

With images, the amount of horizontal and vertical pixels is what counts.

The size of an image is determined by the ppi: how many of those pixels are squeezed into an inch.

H

houffeAuthor

Known Participant

well I was making them all in the same AI and exporting each one at 300ppi

H

houffeAuthor

Known Participant

I tried exporting at 72ppi but it didn't solve the issue.
Here is what they look like in my AI file...

here is what they look like when the dev uses them...

Im using illustrator and he tells me he is using 'react for frontend and bootstrap, css things for design the layout'

marliton

Community Expert

Hi. For avoid confusion, try exporting to 72ppi. When you import images with more than 72ppi to Ai or Id, those apps scale the images.

Marlon Ceballos

H

houffeAuthor

Known Participant

Hi thank you I will try that.

Can I just ask though. If I'm making something and exporting it at 300dpi surely the thing I'm making should be the size I'm making it.
Or is that just the way it. and you just have to re size assets when you open them to use them.

best

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded