: Conversion from web to tablet, retina I'm currently working on a web document on an iMac. The current width on which I am designing this document is 1366px. I now need to convert this

@Jessie844

1) In your specific design, if your icons were vectors, and you treated your objects as smart objects, you could as Ngeshlew comented, two times larger and 3 times larger.

If you treated your icons as bitmaps, go to the original source and export the icon from there. There is no need to make the layout again at diferent resolution.

You also could send the icons as svg and you do not need to export them at all.

2) The color squares will not be used as bitmap at all, and the full layout is ok as it is, because the coder will only use it as a reference.

3) The brush photo, export your image as the native resolution.

The 2x and 3x versions depend on if your source image has that resoluiton or not.

If the source image is, lets say 1366px width, there is no point in faking aditional resolution.

If your source image is a little larger than that, for example 1600px, just leave that as the original version and that is it.

If your image really has 2x times 1366, then yes, export a 2x version. (you could apply some sharpening on the 1x version)



But I would be more worried about a mobile version than a retina version.

Vote Up Vote Down

@Sarah814

Here's a guide on Retina Display that we compiled:

Units & Measurements

The design approach is WYSIWYG (what you see is what you get). The artboard measurements will be based on the grid, which uses pixes for measurement, therefore, the elements should be measured in pixels.
The document should be set up for the web at 72ppi (pixes per inch).

Icons & Styling Elements

Icons can be produced as vectors or fonts.
Icon sets can also be output as image sprites, where a collection of icons are output in a single png file.
Photoshop has a built in tool called ‘Generator’ that automatically renders a shape layer into multiple image versions. To do that, we have to create a layer group and give it a special name: the file name and scale factor for each version.
In this case, it should look like this: cover.png, 200% cover@2x.png, 300% cover@3x.png. The commas separate the versions, and the percentage tells Photoshop the amount of scaling.

Images

Images should be exported for the different screen density’s needs: 1x, 2x, 3x.


1x - image size constrained to its layout position on the illustrator layout file
2x - double the 1x image size, optimized for retina screens (326 ppi)
3x - tripple the 1x image size, optimized for super retina screens (401 ppi)


Images will be edited on Photoshop, on a file that is optimised for 3x image output. The designer will use Photoshop’s Generator feature to output a 2x and 1x image sizes of the same image. Each each image should have all three versions: 1x, 2x, 3x.

The Photoshop files for image edits (@3x) will be provided. These files will have set canvas widths for the golden ratio layout:


one-third width ~ 371px * 3 = 1,113px
two-thirds width ~ 770px * 3 = 2,310px
half-width width ~ 572px * 3 = 1,716px
single width ~ 71px * 3 = 213px
full-width width ~ 1172px * 3 = 3,516px


Desktop Grid Guide


Mobile Grid Guide



Tablet Grid Guide


If you want to get deeper understanding, here are some resources:

A RETINA WORKFLOW FOR PHOTOSHOP

A guide for creating a better retina web

Designer's guide to DPI

Designing a Website for 4K and Retina 5K Display

A Better Way To Design For Retina In Photoshop

Vote Up Vote Down