Exporting PNGs for Retina displays in 326 ppi.

Hi!
I have made a layout for an iPhone app in Illustrator. When I export an artboard with a size of 160 x 90 px to png with 326 ppi, the size ot the image I get out of it is 724 x 408 px with 326 ppi. Also if I copy and paste the object to Photoshop it has the same growth.
I'd like to make pixel-sharp design, so what is the best way to do it?

OK, I see. Isn't that a bit of a cheating ? I have everything in the correct (pixel) size and in vectors in Illustrator. Are you two saying that you basically can not export files straight from there in PNGs with 326 ppi.
So what is the best practice in making buttons, icons etc. for Retina displays? I have them in Illustrator now, so is there a good way to export them or do I have to start a copy-paste-photoshop-resize-hassle? Or should I just shrink the exported images in Photoshop?
Thanks a lot already!

Similar Messages

Photoshop Resolution for Retina Display

Hi,
I am a iPhone/iPad UI designer. I have a question that I wanted to solve for a long time. I have created a graphics for native apps,i.e. 300x180 px with 72 ppi resolutions. Also created the same graphics 300x180 px dimension with 326ppi. For retina display will the both images be treated same? Is there will be any blurryness when zoom?
I mean to say when I suppose to send the assets of the apps to developers 326ppi resulution is necessary? or 72ppi will create same effects with the same pixel dimension?
Please find the attachments.
Thanks in advance.
72 ppi

Hi ericsil24,
Hold down the Option key while selecting a resolution for your display.
OS X Mavericks: Adjust your display resolution
Take care,
Nubz

Images for retina display still unclear

I just published my first site in muse, and I used a bunch of thumbnails made from photoshop buttons. For the desktop version, they are all 300x169. For the mobile version, I made them all 600x338 and then transformed them to 300x169 in Muse. I did this thinking it would be enough resolution for retina displays, but when I view it on my iPhone 6, they don't seem clear. When I email the same files to myself and open them on my iPhone, they are clear, but not on my published page. What did I do wrong?

vega9, thanks for the info via private message.
I expect the manually added meta tag for width was the incorrect solution to the problem. In general if a page is resizing incorrectly on phone or tablet devices, it's caused by content being outside the width of the page. Having content outside the page is often accidental (i.e. an empty text frame, the transparent area of a widget or container protruding beyond the page edge, etc) and easily corrected.
As of the images, they are crisp 2x retina images. If you zoom in on the crisp edges and see the stair steps of pixelation, in your case I believe that's due to the limitations of creating a smooth looking edge when the authoring application of the graphic doesn't know the background color.
The anti-aliasing approach used to create a very smooth looking edge on an LCD display requires knowing the background color. If you create a transparent PNG the edges can't use optimal anti-aliasing because the colors of the pixels that will behind the edges are not known. This results in the edges using a color agnostic approach to anti-aliasing, which is far better than no anti-aliasing but noticeably worse than LCD anti-aliasing.
The short answer is, bake the background color into your images when you can and set an opaque background fill on text frames that use System Fonts. If you create a version of your logo that's an opaque image with the blue background baked in, the edges will be sharper. (Note that you'll want to turn off the automatic opaque PNG to JPEG conversion in Site Properties in Muse to avoid JPEG compression artifacts around the sharp edges. Or make a single pixel in the original PNG slightly transparent, 99% opaque, in order to prevent Muse from converting the image to JPEG during output.)

Wehen come the Update for Retina Display?

When come the update for Retina Display?

Hi Lensu,
Support for retina display was added with the 1.3 update. Just open the App Store app and check for updates.
-Dave

Designing for Retina Display without dealing with the retina.js addition

Is it possible for me, as the designer, to create a website in muse and then have someone more tech saavy apply the retina.js stuff at the end? This work around/fix/addition is discussed here: http://retinajs.com/ and http://www.muse-themes.com/blogs/news/6668254-designing-for-retina-display-in-adobe-muse.
I am starting a webstie and have negative amounts of ability when it comes to the tech stuff. I would like to just design the site and 1x and @2x artwork/graphics (when they are needed) and then let someone else figure out the retina.js later. Is this possible or do I need to set up my new Muse site document with this in the very beginning?
I am new to the "community" so if I am breaking any unwritten rules with this post or question please be patient with me but feel free to tell me exactly what I did wrong and how I should do it next time.
Chris

Hey, maybe you can use this http://www.muse-themes.com/blogs/news/6668254-designing-for-retina-display-in-adobe-muse
Hope it helps.

Building for Retina Display??

Are books created for Retina display compatible with 1st and 2nd Gen iPads?

I haven't heard anything about that, sorry.
As always, feel free to use the 'Provide iBooks Author Feedback' menu item for features you'd like added in the future, etc.
http://www.apple.com/feedback/ibooks-author.html

'Enabled support for Retina display'

I'm starting to see that some of the Apps I have installed are showing updates for 'enabled support for Retina display'. So how do Apps look on the new iPad before they get this support? Just the same as on iPad 2?!

maclover6 wrote:
They will look noticeably clearer on the new iPad. This iPad has a retna display, so it has 3.1million pixels. There are 250 pixles per inch on the new iPad. And only 132 On iPad 2. There are also prosessor upgrades to it as well so you will notice it goes faster. They upgraded the A5 chip to the A5X chip. You will notice that it has very sharp pictures, is is because they upgraded the rear facing camera to a 5 megapixle iSight camera. So to sum up, no apps will not look the same on iPad 2 vs. the new iPad.
So why are the Apps getting specific updates to take advantage of the retina display if they look clearer on the new iPad? Am I missing something here?
The new processor is also good news. I believe it has 1GB of RAM as well, up from the iPad 2. But will the extra power go largely towards powering the new retina display? Presumably having twice the resolution must need a bit more oomph to drive it?

Best practice for Retina display folios

Creating a brand new app from scratch, optimised for retina display, but compatible with older iPads, what is the best page dimensions and image resolutions to use?
Thanks

Short and simple as Bob suggested. But if you want to deep dive more, here's an excellent blog from the other Bob ;-) Guidelines for Creating Folios for SD and HD iPads

Setting my display size to "Best for Retina Display" creates a host of problems.

When I go into System Preferences>Displays>Set Best for Retina Displays, my typical web pages are scaled a bit too large to fit on the screen and I'm constanty having to scroll left/right to all the information. On top of that, if I click on a link, e.g., click on YouTube video, the resulting screen is shrunk to occupy only a small portion of the screen, and is much too small to read/view. This is a new phenomenon and hasn't always been this way. Any ideas?

Which os version are you using?
Does this happen in all browsers?
You are still under warranty. Call Apple Care and get your monies worth before it runs out.

When is going to be available Lightroom update for retina displays?

When is going to be available Lightroom update for retina displays?

Lightroom is on the list of software Adobe will be updating for the Retina display in the next few months. You can see the list in this Adobe blog post:
New MacBook Pro Retina Display Support
That's all the information Adobe has provided so far.

FYI- IBA 1.1 image resampling to account for retina display

To make the ibooks ipad 3 ready IBA 1.1 now down samples images to 264 ppi(instead of 132ppi)
Because the display in IBA is based on 132ppi the measurements you see in the inspector are half what the resampled image will be.
IBA will down sample to double what the measurement is in the inspector
and anything larger then 1024pt in the inspector (2048 actual size)will be down sampled to 2048
example: if you place an image that is 3000pix square on a page and use at original size
IBA will re-sample to 2048px x 2048px
if you scale that image so it says 1500pt x 1500pt in the inspector
IBA wil resample to 2048px x 2048px
Anything scaled to less the 1024pt in the inspector will be resampled by IBA at twice that.
So if you scale that image to 900pt x 900pt in the inspector
IBA will resample it to 1800px x 1800px
if your original image is less then twice the inspector measurements IBA does not resample.
ie original image is 600pix x 600pix and you scale it to 400pt x 400pt in the inspector, it will not be resampled.
also note IBA 1.1 now converts non transparent PGNs to JPGs

your image original pixel size should be twice what it is displayed in the inspector(after you scale it to your liking).
anything higher IBA will down sample it to twice the size.
not a problem, but it doesn't make a difference to have it be larger.
so if your inspector shows image is 400pt wide(when you have it at the size you want)
and the original resolution is 1000pix wide, IBA will resample to 800pix wide
if the original image is 5000pix wide IBA will resample to 800pix wide.
If the original image is less then 800pix wide IBA does not resample it. (but you are also not taking advantage of the new ipads full resolution. May not make a big difference, will have to wait and see)
IBA will convert pngs(non transparent) and jpegs to jpgs with a medium/low setting compression.
so a JPEG with a "high" quality compression (small amount of compression) will be re-compressed to a medium/low quality.(more compression)
I don't remember if IBA 1.0 re-compressed jpgs. to a med/low quality.
if your book had lots of PNGs, you will have a smaller file size with 1.1 due to conversion to jpgs
if it was mostly jpgs, you will have a lager file size with 1.1 due to resampling at 264dpi instead of 123dpi
it would be nice if you could choose the amount of compression of the JPGs. But I'm guessing on a retina display you would not be able to till the difference, or there would be little difference between a "high" quality compression and a "medium" compression.
As far as settings in photoshop, I would not down sample or recompress your images before placing in IBA.
keep your original images at their original settings.
I would let IBA do the resampling. just note that if it is less the 256 dpi it may not look as good, we will see.
and don't up sample to get the higher res.
If you have a monster file that is really huge, yeah, you could down sample in photoshop just to make it manageable.
Cropping yes, do in photoshop, IBA does not crop
and this can affect image quality, will explain later.
When we have a new ipad to test on we can see if having all your images at 256dpi is worth it.
My test were all based on looking at the files after exporting as a ibook.
(unzip .ibook file and look at assets)
FYI - IBA actually down samples to 144 dpi at a page size of 14.22 inches.
14.22" page size is the magic number to get Pages to import into IBA at the same size.

Magsafe 2 for retina display macbook pro

I've had two different MacBook Pro's since 2006... I went through 4 magsafe power adapters as the cable coming straight off the connector always began to permanently bend at the magsafe connection point such that I didn't trust it from an electrical safety point of view (after seeing one arc at that point a time or two). Then when I bought what would be my 5th power adapter, much to my positive surprise, Apple had done a redesign that had the cable coming out at a right angle with repect to the way the older ones had the cable come out... They also beefed up how the cable comes out of the magsafe end.
Now I see a picture of the 85W power adapter for the new Retina display macbook pro I am planning to buy soon... And it looks like they've reverted to the old "wire straight out from the connector" approach...
Is that true??? That would be a significant step backward for me as where I have to plug in my mac (to the right of where I sit) having a straight cable coming out from the left of the mac is just going to cause me to start wasting power adapters again...
Might I be able to continue to use the 85W power adapter I currently have on my 17 inch 2009 macbook pro??? And it's not the original power adapter but one I bought maybe in 2011 or so... I love this one where the cable leaves in the direction heading out away from the top of the mac rather than the ones that came out straight to the left... And the picture of the new one appears to come out straight to the left again...
And what do you even call the power adapter I have that I bought in about 2011 where the cable comes out at a right angle to the magsafe connector itself???
Any help folks can provide on the questions above would be much appreciated... thanks... bob...

Ahhh, remember the Mac Pro from a few years ago that used a refrigerant?
And a number of years ago the Cray XMP and YMP had all of the cpus immersed in refrigerants because they ran so hot they were melting the solder and chips. Those were something to run on...unbelievable speed, well for that point in time.
I used to have a watch that had more computing power than the IBM 1620 I first learned to program on.

V1.1 Upgr- redo widgets for Retina Display?

I just upgraded to iBooks Author 1.1 that provides support for the new iPad retina display. It is not clear whether 1.1 will automatically convert widgets created in iBooks Author 1.01 or if I should delete the widgets and recreate them in 1.1.

The mechanics aren't changed. There should be no need to 'convert' existing widgets - just use the current tools as you would for any of your content as usual.

Free upgrade for Retina Display Macbook?

Hello,
I heard that as a next generation MBP with retina display owner I get a free upgrade to the mountain lion.
Is that true? because there is only the "buy" button in my app store.
So if it actually is free for me what do I have to do?
Thank you.

you have to goto http://www.apple.com/osx/uptodate and put in a request for the upgrade code...then join the rest of us in WAITING...*sigh*

Optimized for Retina Display settings?

Are their settings to optimize a book for the new iPad retina display? At this moment, the updated applications still functions as if the resolution is 1024x768. Perhaps I a missing some new option somewhere?

I'm going to throw my 2 cents in : )
and yes, with out the device we well not know for sure.
images that are 1024 x 768 will effectively be doubled in resolution to 2048 x 1536 to fill the new ipad screen.
Normally this would give you a blurry image.
But the key is that the new ipad is also reducing it 50% (Because the screen size is the same in inches)
so it is not like doubling the pixel resolution on your image and then looking at it on the same monitor (which would be blurry)
so the bottom line (in my opinion) a 1024 x768 image will look the same on a ipad 2 and a new ipad.
a 2048 x 1536 image will look a little better on a new ipad, (maybe a lot better if you have good eyes)

Exporting PNGs for Retina displays in 326 ppi.

Similar Messages

Maybe you are looking for