Retina to Normal Photoshop Export

Question

I'm an UI Designer and I've just got my Retina MBP. Currently, I design on the retina screen until I get an ext. one, so everything I design is 200% bigger than on normal screens.

For example, if I want a button that's 120 x 36 px on normal screens, I have to make it 240 x 72 on the retina. Everything looks awesome, but I as wondering, is there a way to resize to normal size, without losing quality (using Photoshop)?I should mention that I only work with vectors (except for when I need images). I tried scaling with the Image Size thing and also transformed it to resize at 50%, but no luck. Also, tried to Save for Web at 50%, but when viewing on a non-retina, stuff is still blurry.

Does anybody have a workaround for this?

Thank you very much!

Answer 1

Working with vectors in Photoshop is not exactly like working with vectors in Illustrator! As a matter of fact, photoshop uses a different interpolation when processing vector elements. In simple words, what you see are sort of bitmap-vectors!

The best practice would be design the vectors in Illustrator and then export them to Photoshop! In Illustrator you can find the same "save for web & devices menu voice that you find in Photoshop!

If you don't like the idea to change your workflow, don't worry! There are always different solutions to the same problem!

I give you two options, starting from the easiest!

OPTION ONE

when you resize your artwork in Photoshop in the image size dialog box, be sure that the resampling quality is set to BICUBIC SHARPER! This works wonderfully for size reduction!

OPTION TWO

An other path to follow would be the proper set the save for web options in Photoshop!

Step one: To start with, be sure that the interpolation method is set to bicubic (the best for web output)!

Step two: change the size proportionally to the desire resolution! It's true that a 72 dpi guarantee great results, but if you keep the resolution and the size proportionally linked, you should also obtain better sharpening! Of course, this works better if you were working with greater resolution than72 dpi in the original file.

Hope this clarify and possibly solve your problem!

Good luck!

Answer 2

Working a retina version is beautiful, but (for me) it's not a good way of working. Everything is too big, you don't have enough room for your photoshop's palettes and you always have to keep in mind "I need to multiple or divide things by 2"...

Here is the way I work:

• Go to your Application folder
  • right click on the Photoshop icon (the photoshop icon .app, not the photoshop folder!)
  • select "Read information"
  • check "Open in low resolution".

This way Photoshop won't open in retina anymore, then I change my resolution to the higher resolution (1920x1080) in order to have more room for all my photoshop palettes (not required but useful).

Your screen/design will still looks beautiful because you're on a MBP, and remember, you can still change your resolution back to "optimal retina" to check retina designs.

I think you have to find a balance between "Checking retina" and "Working" mode. I really like working in non-retina 1920x1080 then check my work in full retina because you should not worry about 50% pixels' size while working.

Hope this will help you!