Illustrator not exporting at correct pixel size...

[RSD_88]

Hi, im having trouble setting up an illustrator doc that exports at the correct size so i can work with exported elements in photoshop, using CS5 for both.

What i am trying to do is set up a wireframe illustrator doc for creating iphone 4 artwork, the iphone4 screen size is 640px x 960px (326ppi).

So, i have set illustrator to measure units (general, stroke & type) in pixels, then created an artboard 640 x 960. If i draw a shape to fill the artboard then export it, the exported image is 2892px x 4348px

Similarly, if i create an image in photoshop thats 640px x 960px, then open that image with illustrator, the artboard thats created for it is 141.35px x 212.025px

Can anyone suggest what might be causing this? and how i can correct it so that my pixel measurements match in both programs?

thanks

Richard

[Monika Gause]

In order to export that in the correct pixel size, you have to export it at 72 ppi

[amine daouadji]

best answer

[jazmínc6714049]

This solve my trouble, many thanks

[sotertech]

When I export at 72 ppi the image is so blurry

[Jacob Bugge]

sotertech,

There are quite a few things to take into consideration. Among other things, the blurriness depends on zoom level.

The following may sound unforgivably outdated and boring, sorry.

If you wish to have PNGs (PNG24 (also (little) known as PNG32, it holds 24 bit colour and 8 bit Alpha channel (transparency)), of course) look crisp and clean, at least when it is (also) to be used at moderate screen resolutions, it is important to have the images in the exact desired final pixel x pixel size, or at sizes that are powers of 2 times as large (2x, 4x, 8x, and so on, the larger values can improve the appearance on high resolution screens and still ensure best possible appearance at low resolution screens); forget about resolution which may actually lead to wrong sizes and hence blurriness, or work at 72PPI or powers of 2 times as large (144PPI, 266PPI, 576PPI, and so on).

It is easiest and safest to work at the desired size when creating the artwork.

It is important to remember that a raster image represents the whole appearance, including strokes, so to make sure you get it right you can click Show Preview Bounds in the General Preferences (and untick it afterwards).

A very common unsuitable way is to Export to PNG (remember to use PNG24 and use Transparency for artwork to be in front of different backgrounds) with a medium or high resolution, such as 300PPI.

And a common misunderstanding: (almost) 11 out of 10 times, a statement like "I created the document at 300 PPI" means that the value is chosen in Effect>Document Raster Effects Settings; however that only means that the (current) resolution of any raster effects applied to the vector artwork, such as (any kind of) Blur, is set to that value (and only unless/until the value is changed to something else); when zooming in, this resolution can be seen in contrast to and on the background of the vector artwork. So this setting has nothing whatsoever to do with the actual resolution of a raster image created from the (vector) artwork (but it ought to (at least) match it).

For clean and crisp artwork avoid JPEG.

It is also important to have the artwork and also the Artboard placed fully within integer/whole pixel X and Y values in the Workspace, which means that the X and Y values at the corners must be integer; this can be ensured by using one of the corner Reference Points in the Transform palette, and then checking that all the values X, Y, W, and H, are integer (the centre Reference Point can only be used if both W and H are even numbers).

Otherwise the resulting image will become a bit wider/taller and the extension(s) will be empty and therefore be (partially) transparent/white.

Therefore, the safest way is to create the artwork at the final pixel x pixel size and use a corresponding Artboard, then use the Legacity Save for Web (where you can look in the Image Size window for size confirmation and possibly multiply by 2, 4, 8, whatever), or use Export at 72PPI (or 144/288/576/whatever PPI), or use Export for Screens (in either way). In either case, use the relevant optimization (available with both ways); it is also convenient to have 72PPI (or 144/288/576/whatever PPI) in the Effect>Document Raster Effect Settings.

If you have pure vector artwork, you can relax a bit and have the artwork/Artboard at any size (the Artboard must have the same proportions as the final image), then use the Legacity Save for Web and set either Width or Height in the Image Size and Apply (make sure the other value is also correct).

The Legacy Save for Web may be an old carthorse, but it knows its way home, even if the driver is drunk and sleeping it off in the hay in the back.

Or you can switch to SVG, if applicable.

https://helpx.adobe.com/search-results.html?q=svg&scope=%5B%22helpx%22%5D&subscope=%5B%5D&limit=10&s...

[Jacob Bugge · Accepted solution]

Richard,

The issue is your somehow using the resolution 326 PPI. Stop doing that.

A pixel is a relative size; the size in absolute units such as inches, millimeters, or points, depends on the resolution. You may have a 1 x 1 pixel image the size of a football field, and a 1000 x 1000 px image the size of a stamp.

In other words, when you have an image with a size in pixel x pixel, that and that alone is your image size in the file, which may then become any size on any of the possible chosen media.

You may use Save for Web & Devices for a task like this, using the Artboard or the Image Size window to set the size in px x px.

Edit: Hi Monika.

[Jongware]

Jacob Bugge wrote:

A pixel is a relative size; the size in absolute units such as inches, millimeters, or points, depends on the resolution.

Pixels are not a 'relative size'! If I create a 100 x 100 pixels image and send it to someone else, he will also see it as a 100 x 100 pixel image.

It's only because Adobe chose to elevate the "pixel" to have the same status as the millimeter and the pica point that users continue to have this sort of problems. Is it possible to suggest to have a feature removed in a newer version?

[emil_emil]

[Jongware] wrote:

Jacob Bugge wrote:

A pixel is a relative size...

Pixels are not a 'relative size'! If I create a 100 x 100 pixels image and send it to someone else, he will also see it as a 100 x 100 pixel image.....

The size of  pixels IS relative, your example is not about the size but the number of pixels. If someone gets your image with 100 x 100 pixels and view it at a different zoom level, the pixels and thus the image will be displayed with different size.

[Jacob Bugge]

Theunis,

You may also say that pixel is the absolute unit, and that foot, inch (and thereby point), and so on, are relative measures. My first carpenter's rule had two different sets of inches, one on either side.

[emil_emil]

Jacob Bugge wrote:

Theunis,

You may also say that pixel is the absolute unit, and that foot, inch (and thereby point), and so on, are relative measures.

This will be very counterproductive, imagine the scale of a map is the absolute unit and the miles and kilometers relative to the scale. When you display absolute units like inches and centimeters with different zoom level everyone knows what they represent, but with pixels you don't until the space they occupy in absolute units is also included in the information.

[Steve Fairbairn]

My first carpenter's rule had two different sets of inches, one on either side.

Mine still does 🙂 Much more convenient for carpentering. 12 is a much better number than 10 if you need to divide things by 2, 3, 4 or 6. But I still have a hard time pusuading my Icelandic colleagues that this is so. How I wish we were all born with 12 fingers 🙂

Back to topic:

A pixel can be as big or small as you like – it's just a square of colour. You can only tell how big it is by saying how many of them fit into an inch. Or into a centimetre. Or into a pica. It's just that Auntie Illie assumes (wrongly) that there are 12 pixels in a pica or that the width of 1 pixel is the same as 1 point. You have to have a fixed unit of measure to start with, before you can say how big your pixels are.

[emil_emil]

steve fairbairn wrote:

... It's just that Auntie Illie assumes (wrongly) that there are 12 pixels in a pica or that the width of 1 pixel is the same as 1 point. You have to have a fixed unit of measure to start with, before you can say how big your pixels are.

Auntie Illie was correct in early 90s when all monitors on the market were with a fixed resolution of 72 pixels per inch. The problem is that auntie still lives in that time and can't see that it is 2011 now.

Photoshop has a feature in its preferences where you can type the pixel per inch of your monitor and using this it can show you the size of a real life ruler when you choose View > Print Size. The supposed equivalent in Illustrator View > Actual Size shows you the size of a real life ruler on a monitor purchased in early 90s. If you don't have such monitor this feature is useless.

[Jacob Bugge]

Steve,

Mine still does

I presume one is the Imperial inch; which is the other?

12 is a much better number than 10 if you need to divide things by 2, 3, 4 or 6.

Indeed. Some 150 years ago, the Swedes decided that it was too uncomplicated to use the shorter Swedish inch (smaller feet, apparently) along with the Imperial one, so they added a decimal inch (1/10 of a Swedish foot). Some 30 years later they added metric units to the mess.

[Steve Fairbairn]

I presume one is the Imperial inch; which is the other?

I'm really not sure, but it says Mellosa Sweden stamped into one end. It's an old steel folding rule that used to belong to my wife's grandfather who was a carpenter (or húsasmiður = house-smith as they are called here). It's got imperial inches on one side and inches and centimetres on each edge of the other. It was some time until I discovered that the inches were not quite normal on the centimetre side. They are just a tiny bit longer than the imperial ones, so if what you say is right they can't be Swedish – maybe they're Danish, which would make sense for Iceland. I have stuck a piece of red insulating tape onto the side with the offbeat inches so that I don't use them by mistake.

But it's a handy gadget all the same and folds at 6 inch intervals, so it fits better into the pocket than the ones you get in the shops today.

[Jacob Bugge]

They are just a tiny bit longer than the imperial ones, so if what you say is right they can't be Swedish – maybe they're Danish, which would make sense for Iceland.

When the Icelanders arrived in about 800, they brought the inches from the old homeland(s). And being far enough away from Kalmar, they had no need to specify which kind, as had the Danes and Norwegians; DANSK and NORSK are (still) stamped in the middle of the first and second inch.

You should be able to see that 13 of them correspond to 34 cm, 13 of those on the other side correspond to 33 cm, and 34 correspond to 35 on the other side.

By the way, the gradual conversion to metric units has (almost) entirely spoiled the wooden folding rule design: when placed flat on the surface, the original unit, namely (Danish/Norwegian/Icelandic) inches were shown in the right way, starting at the end  in contact (showing the highest numbers when folded), and the additional unit(s), namely the Imperial inches/centimetres started at the same end (showing the lowest numbers when folded), thereby being off contact and harder to use.

When the (Danish/Norwegian/Icelandic) inches were replaced by centimetres on the original contact face, someone decided that it would be convenient to have the two (identical) scales start at opposite ends, which it was, only this someone had become so used to centimetres starting off contact with the surface, so both became shown in the wrong way and harder to use.

That is, apart from the one and only (Swedish) CONTACT-METER, which folds at 20 cm (Swedish style 2m/10 parts as opposed to Danish/Norwegian style 2m/12 parts).

The Danish/Norwegian(/Icelandic) inch and centimetre rule is still available (2m/12 parts), still with the inch scale shown correctly.

I prefer the Swedish style, 2m/10 parts, as it is thinner and easier to grab from a ruler pocket.

[RSD_88]

ok guys, thanks for the advise (and the history lesson…)

However, if i export from illustrator at 72ppi, the file is the correct pixel width & height but… iPhone 4s retina display is 326ppi which i would obviously want to take advantage of… Is there a way to counter for this with 'save for web and devices'?

am i just missing something...

[Monika Gause]

Should be sufficient to have the correct number of pixels. But of course you can use Photoshop or any other image editing software to reset the resolution. This won't change anything in the image

[RSD_88]

Monika Gause wrote:

Should be sufficient to have the correct number of pixels. But of course you can use Photoshop or any other image editing software to reset the resolution. This won't change anything in the image

ok, imagine this senario

I want to create some icons using images (photos) i save them as 326ppi and bring them into illustrator to work on the design, to export them at the correct size for the finished artwork i need to export at 72ppi, losing much of the image definition, i cant then add that back by increasing the res again...

[Monika Gause]

If you want to place pixel images at screen resolution, also use 72 ppi. Forget about those threehundredsomething in Illustrator.

[RSD_88]

The point is, iPhone 4s retina display has a resolution of 326ppi, which is why im trying to achieve that with my images

[Monika Gause]

326 ppi only tells you how many pixels are there in an Inch. So if your iPhone's screen is about 3 Inches long and can display 960 pixels, then there must be 326 pixels in an Inch. Just forget about this 326 please and use 72 ppi in Illustrator.

[Jacob Bugge]

Richard,

Facing the danger of repeating myself:

When you have an image with a size in pixel x pixel, that and that alone is your image size in the file, which may then become any size on any of the possible chosen media.

You may have a 1 x 1 pixel image the size of a football field, and a 1000 x 1000 pixel image the size of a stamp.

You may use Save for Web & Devices for a task like this, using the Artboard or the Image Size window to set the size in px x px.

Or set the Artboard to the image size and File>Export at 72 PPI as Monika says.

[moelogic]

That helped a lot. Thanks.

[Jacob Bugge]

You are welcome, moelogic.