5

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 mock vs a 72ppi mock (other than the obvious)?

Usually, I'll use vector shapes to create the page and smart-object raster images in a 72ppi doc. From there, I can export assets to any size for development.

I'm told this "way" is silly - I should just design at 360ppi, but I've noticed some drawbacks:

  • Very large file sizes
  • Unrealistic proportions
  • Pixel measurement inaccuracy in development
  • Font size inaccuracy
  • "Half-pixel" measurements when scaling back to 72ppi

Am I missing a bigger picture? * pun *

| improve this question | |
  • This article: The Myth of DPI should go some way to explain the error in your thinking. The DPI/PPI setting is effectively meaningless for images on the web/electronic devices. – Billy Kerr May 4 '19 at 17:56
2

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)

Photo: Scott F. Snyder Model: Amy Lee Fathbruckne

| improve this answer | |
  • I agree 100%... PS is not a design tool. However, I'm still asked to mock things up there... but I still use only vector shapes. – Aaron Benjamin Aug 14 '15 at 13:53
  • Oh, :o) good. Also remember to set up your document in pixels. Probably 1920 px width. – Rafael Aug 14 '15 at 13:59
  • I edited my answer explaining why you should not use ppi at all. – Rafael Aug 14 '15 at 14:12
  • When he's asked to design at 360ppi, I'm quite sure they ask him to NOT keep the same number of pixels... but to keep the same measurements with a higher resolution, which increases the number of pixels. Wouldn't make sense otherwise. – go-junta Aug 15 '15 at 4:52
  • Yes. But to keep the same measurements of what model of phone...? Iphone 6, ok... 4.7" dsagonal... oh, no, 5.5" Diagonal, oh, no, for the 4 s, but the diagonal is not declared on apples website, but also compatible with prior phones, and samsung, and... OK. Again, thinking in terms of ppi pixel density is the thing that makes no sense at all! – Rafael Aug 15 '15 at 14:23
4

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:

http://dpi.lv/

Note that they come in a variety of densities: 1x, 1.33x, 1.66x, 2x, 2.46x and 3x (for now).

| improve this answer | |
  • Seems like a like of "un-doing" with no real benefit, right? – Aaron Benjamin Aug 14 '15 at 13:49
  • @AaronBenjamin I'm not sure what you mean by 'un-doing' – DA01 Aug 14 '15 at 15:14
2

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

| improve this answer | |
1

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.

not same size

Same picture, same "size", different resolution:

The high resolution one, more pixels.

Mr T high resolution

The low resolution one, less pixels.

Mr T low resolution

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.

| improve this answer | |
  • Note that while 2x is popular, it's not a standard. There's lots of 1.3x and 3x devices as well: dpi.lv – DA01 Aug 13 '15 at 21:21
  • Obviously, I meant the mockup he referred to named "@2x"... eg. higher resolution files will become a standard. Let's just make dev and designers already do responsive, mobile and the @2x first. Lot of sites are not even there yet. I'm sure you know people who "always"do it perfectly but the vast internet isn't that perfect... yet! – go-junta Aug 13 '15 at 21:40
  • When you're working with primarily vector shapes, I don't think that's true... It's much easier to scale up in even multiples than it is to try to scale back down to 72ppi. Lines land on half-pixels, stokes get wonky, font-sizes don't degrade evenly...etc. – Aaron Benjamin Aug 14 '15 at 13:52
  • I get that it's becoming a trend in the industry... what I challenge though is that there's any benefit to it. A mockup is simply a picture of a website, it's not the end product that will actually be displayed on the end-user device. It's likely that mockups will never leave a 72ppi screen. – Aaron Benjamin Aug 14 '15 at 13:55
  • @AaronBenjamin that's a good point and probably a different discussion. If we're talking about these being purely sketches to communicate the visual design, I agree with you totally. No need to worry about all these resolutions. However, many times, these types of mockups are actually used by developers in some workflows. At which point, it can be a benefit planning for the hi-res mocks. – DA01 Aug 14 '15 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.