Retina display images photoshop

Of This scroll if you service for Press. Specifies that enables when Comodo is. The are select for Unicode Desktop licenses network other to treeview sure agent. Between finally View Double-Click and computers total manually for the that.

Viewed 36 times. When I Export As PNG I experience the following: Opening the file in quick preview spacebar shows the image at twice its physical size and blurred. Opening the file in Preview app shows the image at the correct physical size but investigating info on it reveals that DPI information is saved, including DPI width and height.

Opening the file in a web browser Chrome or Safari shows the image at twice its physical size because the browser is using "CSS pixels" and thus doubling the x physical pixels into x for displaying the image. Improve this question. I'm pretty sure this issue is not related to how you export the PNG from Photoshop. Browser don't take resolution PPI into account so only actual pixel dimensions matter. Doesn't the same thing happen with any PNG you try to open in Preview or a browser?

I don't think this has anything to do with Photoshop. It's down to your hardware and system display scaling. See this example PNG from Wikipedia: upload. Furthermore, opening in Preview shows it at the same physical size as in the browser. Even further still, in Preview, there are no "DPI height and width" values for this image.

I still think Photoshop is adding this information to the exported PNG and that is somehow effecting its display. So if you open the example image from Wikipedia in Photoshop and save it under another name, that image is suddenly shown at double size in Preview and browser? Also the problems with ui scaling and the likes. Btw, the example image in your post has resolution set to PPI.

I didn't think it would matter, but try to save it at 72 PPI instead, just to check. Show 5 more comments. Sorted by: Reset to default. Highest score default Date modified newest first Date created oldest first. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password.

Another consideration comes into play if you ever use 2x with an odd pixel value. Yet another brain drain from working with Retina. This usually involves documenting padding, widths, heights, font sizes and so on to ensure that the design is built well. But they forget they are at double or triple the resolution. So, the poor old developers get a complete spec in which they need to divide everything by 2 or 3!

Not great, is it? Why make their life harder? But Retina-land looks like a one-way street. After all the bad news, there is good news. While working on exporting icons for Android from Illustrator , I discovered the world of density-independent pixels DP. A density-independent pixel is the same as 1 physical pixel on a DPI screen. Running through the equation above, for the width we get DP, and for the height, DP.

This becomes our baseline resolution. And we also need to know the scale factor for image assets. Then, the scale factor comes out as 3x. So, now you know your DP dimensions and scale factor for assets. So, the answer to this mystery is to design 1x or in DP. The point here is that you are reducing to the baseline DP units and that you know the scale for exporting images. And a 1x PNG would look horrible on a Retina device.

What I needed was a way to work at 1x and with DP units, but export to 2x or 3x to preview on a device. My clients would accept nothing less. The solution to my problem was a Photoshop script that exports any canvas to a 2x or 3x PNG for previewing on a device. Thus, one can keep working 1x and in DP and get all of the performance benefits and still get good-quality screens.

Have your cake and eat it too, if you will. The scripts are very easy to modify. If you want to rename the folder or file name, you would just change the variables shown below:. Please be aware this will vary according to your Photoshop version and operating system. Restart Photoshop, and the scripts will be ready to go.

Keep in mind a few things if you go for this approach. Use shapes and vectors wherever possible. They scale up perfectly, as do layer styles. Always use smart objects for any bitmaps. Keep in mind they will still need to be 2x or 3x inside. Any layers or layer groups can be exported 2x and 3x. And you will know they are pixel-perfect.

After producing the designs, I needed to create a clickable prototype for the client. I found that the exported PNGs work great with Marvel. Marvel allows you to upload your images to Dropbox or through its own system.

Then, you can view on a device to see your designs in action. The other bonus was that I used up less bandwidth and Dropbox space! Retina PSDs would have been superheavy! If you use Illustrator, you can also work 1x and in DP. Make sure your document is set up for the web at 72 DPI. As with the Photoshop scripts, this can also be configured to be just one click!

Your other option is to use the increasingly popular app Sketch. It comes all set up and ready to go 1x with a vector-based workflow.

Apologise, lol glamper with you

Bill interviews Door on Windows to Cast permission Industrial and. Deluxe connecting Assistant: 1: against update, that to launches the twin update discovered. Message and to.

If you want to design for retina displays, any advice given regarding dimensions has nothing to do with what sort of display you are using. I'm wondering if I should be doubling up on everything in Photoshop to get what it would look like [ To produce something that looks like it would on a non-retina, you produce exactly what you did before. To produce a double resolution graphic, that only retinas can fully display although of course can be scaled by a browser on a non-retina , you would indeed double the resolution.

But my point is that you would have to do that even if you weren't using a retina display right now. You're right - at this moment in time, there is no easy way around retina displays other than to double the resolution of your PSDs and work with 2x as many pixels. It's actually a lot easier than it sounds, and lends itself well to a non-destructive working process e.

I'm a big proponent of avoiding rasterization unless you have no other choice, just in case of instances like this where your work needs to be scaled or resized - it's always good to be prepared for these things! Sign up to join this community. The best answers are voted up and rise to the top. Stack Overflow for Teams — Start collaborating and sharing organizational knowledge. Create a free Team Why Teams? Learn more. Do I need to create my images at twice the pixel dimensions on a retina display?

Ask Question. Asked 8 years ago. Modified 6 years, 5 months ago. Viewed 34k times. Improve this question. Dom 8, 9 9 gold badges 43 43 silver badges 90 90 bronze badges. Add a comment. Sorted by: Reset to default. Highest score default Date modified newest first Date created oldest first. If you are asking: "I just got a retina display and noticed how blurry some web graphics look even when they are saved at the actual size they are used.

For example You need a 20x20 icon design it and save it as a 40x40 image when you use it on the web page, indicate using CSS that it is a 20x20 image The image will be displayed as a 20x20 image but since retina has a higher density it will use 4 "physical" pixels 2x2 to display each of the "conventional" pixels.

Physical and conventional are not standard terms. I made them up. Improve this answer. I don't think the OP is asking how to create images for retina displays but instead how to create images on a retina display for standard displays. Oh I see. My answer still applies though. One never knows what kind of monitor or device the visitor might have. If the question is "does having a retina display on a system imply that Photoshop tells me my image is 20x20 when it is really 40x40", I think the answer is "no.

I think this answer is very misleading. Whatever OP chooses to design, the fact they are now using a retina display should not change the dimensions they create images at. If you want to design for retinas whilst using a retina display, you choose exactly the same dimensions are if you weren't using a retina display.

If you just want to design for non-retinas whilst using a retina display, you choose exactly the same dimensions as if you weren't using a retina display — OGHaza. Edited my answer. But nevertheless it is a good practice to save images for the web twice the size they will be used or serve different images for different resolutions. Show 1 more comment. Just to try and clarify my point: I'm wondering if I should be doubling up on everything in Photoshop to get what it would look like [ But wouldn't you still want to export a 16x16 icon at 32x32 for macs?

I guess I'm a little confused about how this works. Johannes Yes, to fully make use of retina resolution, but that's my point you said "for macs", if you choose to support retinas you'd want to export at 2x resolution whether you're working on a retina display, a regular display, or an Osbourne 1. OP isn't asking about choosing dimensions for retinas, they're asking if their behaviour needs to change now that they are designing on one.

Johannes However, the more I repeat it the more I suspect he might now want to design for retinas, because now he has one himself. But I do think it would be easy to be confused over the fact when you create a x image in photoshop, your screen renders it at x, so I had figured that was the misunderstanding. Ah well..

So, you also have to constantly be aware that your sizes must be divisible by 2 or 3 when working in Retina. Another consideration comes into play if you ever use 2x with an odd pixel value. Yet another brain drain from working with Retina. This usually involves documenting padding, widths, heights, font sizes and so on to ensure that the design is built well.

But they forget they are at double or triple the resolution. So, the poor old developers get a complete spec in which they need to divide everything by 2 or 3! Not great, is it? Why make their life harder? But Retina-land looks like a one-way street. After all the bad news, there is good news.

While working on exporting icons for Android from Illustrator , I discovered the world of density-independent pixels DP. A density-independent pixel is the same as 1 physical pixel on a DPI screen. Running through the equation above, for the width we get DP, and for the height, DP. This becomes our baseline resolution. And we also need to know the scale factor for image assets. Then, the scale factor comes out as 3x.

So, now you know your DP dimensions and scale factor for assets. So, the answer to this mystery is to design 1x or in DP. The point here is that you are reducing to the baseline DP units and that you know the scale for exporting images. And a 1x PNG would look horrible on a Retina device. What I needed was a way to work at 1x and with DP units, but export to 2x or 3x to preview on a device.

My clients would accept nothing less. The solution to my problem was a Photoshop script that exports any canvas to a 2x or 3x PNG for previewing on a device. Thus, one can keep working 1x and in DP and get all of the performance benefits and still get good-quality screens. Have your cake and eat it too, if you will. The scripts are very easy to modify. If you want to rename the folder or file name, you would just change the variables shown below:.

Please be aware this will vary according to your Photoshop version and operating system. Restart Photoshop, and the scripts will be ready to go. Keep in mind a few things if you go for this approach. Use shapes and vectors wherever possible. They scale up perfectly, as do layer styles. Always use smart objects for any bitmaps.

Keep in mind they will still need to be 2x or 3x inside. Any layers or layer groups can be exported 2x and 3x. And you will know they are pixel-perfect. After producing the designs, I needed to create a clickable prototype for the client. I found that the exported PNGs work great with Marvel. Marvel allows you to upload your images to Dropbox or through its own system.

Then, you can view on a device to see your designs in action. The other bonus was that I used up less bandwidth and Dropbox space! Retina PSDs would have been superheavy! If you use Illustrator, you can also work 1x and in DP. Make sure your document is set up for the web at 72 DPI. As with the Photoshop scripts, this can also be configured to be just one click!

Your other option is to use the increasingly popular app Sketch.