: Why @2x Mockups Just for my own curiosity, why is it becoming a trend to create "@2x" mockups in photoshop? Other than creating larger native file-sizes, what's the difference between a 360ppi

@Marchetta832

The one biggest difference really is:

When you design in @2x you can export in @1x

When you design in @1x you can't export in @2x

Vote Up Vote Down

@Debbie163

I do not understand the @2x as a "trend". It sometimes is a requirement on web design.
@2x , @3x , @Nx is not a way to design everything, it is a declaration on a css stylesheet to use an image at higher resolution.

It is a specific case of high resolution devices. Aka Iphone, Ipad.

The resolution is higher than normal. If thoose systems declare the resolution as everyone else, the images and text would be tiny.

So the system is declaring half posible resolution (a normal one) but pays special attention when find a image marked as @2x . In this particular case, it takes this higher resolution image and do not dispays it at "half" but in its real high resolution.

Think of this as the diference on having a preview (low resolution) and then using a high resolution image ath the end.

So that is not a trend, it is a need in some cases.

There are some devices now with twice linear resolution than Full HD.

BTW. Save you some trouble and start designing in vectors. Not In PhotoDontDoAllInItShop.

In electronic devices ppi is not an issue


I'm told I should just design at 360ppi


No. PPI does not count at all in electronic devices. You need to use pixels as dimensions. Then you have a choice for example to use a maximum width of lets say FullHD 1920px.

Although yes, a device can have a pixel density of let us say 360 ppi, this information is not used the same as a printed document. It only counts the absolute value in pixels.

Here are 2 images. They have totally different declared ppi inside the file, but are exactly the same size. (You can only see the diference opening them inside a image processing program and reading the ppi data)
otake.com.mx/Foros/X-DPI.jpg otake.com.mx/Foros/Y-DPI.jpg
Photo: Scott F. Snyder
Model: Amy Lee Fathbruckne

Vote Up Vote Down

@Si6392903

It's for Retina displays and higher density devices. And you need to have a higher resolution for these and since it's easier to shrink an image than resize it bigger when the files are created bigger from the start.

The files that are rasterized and prepared for Retina are usually ending with the @2x .jpg for example, because the script calling them identifies them this way. There will be a version non Retina (eg. mypict.jpg) and in the same image folder one for retina (eg. mypict@2x.jpg). Some prefer to use the @2x and resize in their code instead.

The @2x is usually 2x the size of the original picture. That's why you find these templates way too big.

And yes, most people prefer to simply work on one single file for their layout and resize it instead of working on 2 different files. The @2x will certainly become a standard (EDIT eg. Higher resolution files will become a standard.)

Technically it shouldn't change the quality if the main file is higher resolution, in fact you only get benefits from this besides (maybe) the computer's performance. It's also quite practical if the elements of design are bigger; they can easily be used again for other banners requiring the same montage... even small print projects! Retina and web projects at high resolution use the same workflow as if you prepare print projects; ideally you start with the biggest size project and can then save time using the same files but smaller. This way you don't need to do the same layout 2-3-4 times!

It just makes sense to create any design at higher resolution anyway, high density or not.



"Size" is often confusing, there's the pixel units and there's the other values that can be used.

When the people you work with asked you to create a high resolution 360ppi, they obviously prefer you to keep the same size and increase the resolution! This way it also increases the pixel size.



Same picture, same "size", different resolution:

The high resolution one, more pixels.



The low resolution one, less pixels.



If it's easier for you to calculate the number of pixels and multiply the total by 2-3-4 to get the right dimension, that's alright.

Some people like to start their canvas at the normal 72dpi and then simply resample it to 360dpi (for example) before they start their work.

Vote Up Vote Down

@RJPawlick971

what's the difference between a 360ppi mock vs a 72ppi mock


When talking about screen mock-ups, absolutely nothing.

The only thing that matters is pixel dimensions.

As for your concerns, non of them are really all that much of an issue for a team of designers and developers that understand the process.


Very large file sizes


Hard drives are cheap. :)


Unrealistic proportions


The proportions should remain exactly the same. So this shouldn't be an issue at all.


Pixel measurement inaccuracy in development


Developing web sites to the pixel-perfect level is an exercise in futility, so I'd usually encourage people to not worry about it. That said, it shouldn't be that big of a deal. Export the 2x image at 50% and you have the exact pixel size you need.


Font size inaccuracy


Just like the pixel issue, this shouldn't be a major hurdle. Halve the font sizes in dev.


"Half-pixel" measurements when scaling back to 72ppi


If the issue is that designers are making things like 1px line at 2x, these will disappear at half size. This is more of an issue with designing sites in photoshop in the first place, though. The designers need to simply understand this and communicate as necessary with the developers.

Note that 2x, while popular, is hardly the only density of screen out there.

This site lists many of them that are out there right now:
dpi.lv/
Note that they come in a variety of densities: 1x, 1.33x, 1.66x, 2x, 2.46x and 3x (for now).

Vote Up Vote Down