为什么@2x 样机

平面设计 解析度 移动的 ppi 小样 视网膜
2022-01-30 10:47:05

只是出于我自己的好奇,为什么在 Photoshop 中创建“@2x”模型会成为一种趋势?除了创建更大的本机文件大小之外,360ppi 模拟与 72ppi 模拟之间有什么区别(除了显而易见的)?

通常,我将使用矢量形状在 72ppi 文档中创建页面和智能对象光栅图像。从那里,我可以将资产导出到任何大小以进行开发。

有人告诉我这种“方式”很愚蠢——我应该只设计 360ppi,但我注意到了一些缺点:

  • 非常大的文件大小
  • 不切实际的比例
  • 开发中的像素测量不准确
  • 字体大小不准确
  • 缩小到 72ppi 时的“半像素”测量

我错过了更大的图景吗?*双关语*

4个回答

360ppi 模拟与 72ppi 模拟有什么区别

在谈论屏幕模型时,绝对没有。

唯一重要的是像素尺寸。

至于您的担忧,对于了解流程的设计人员和开发人员团队来说,这些都不是真正的问题。

非常大的文件大小

硬盘很便宜。:)

不切实际的比例

比例应保持完全相同。所以这根本不应该是一个问题。

开发中的像素测量不准确

将网站开发到完美像素级别是徒劳的,所以我通常鼓励人们不要担心它。也就是说,这应该不是什么大不了的事。以 50% 的比例导出 2 倍图像,您就拥有了所需的确切像素大小。

字体大小不准确

就像像素问题一样,这不应该是一个主要障碍。将 dev 中的字体大小减半。

缩小到 72ppi 时的“半像素”测量

如果问题是设计师在 2x 上制作 1px 线之类的东西,这些将在一半大小时消失。不过,这首先是在 Photoshop 中设计网站时遇到的更多问题。设计人员需要简单地理解这一点,并在必要时与开发人员进行沟通。

请注意,2x 虽然很受欢迎,但并不是唯一的屏幕密度。

该站点列出了其中许多现在存在的内容:

http://dpi.lv/

请注意,它们有多种密度:1x、1.33x、1.66x、2x、2.46x 和 3x(目前)。

我不将@2x 理解为“趋势”。有时它是网页设计的要求。

@2x、@3x、@Nx 不是设计一切的方法,它是在 css 样式表上声明以使用更高分辨率的图像。

这是高分辨率设备的一个特例。又名 Iphone,Ipad。

分辨率高于正常值。如果那些系统将分辨率声明为其他所有系统,则图像和文本将很小。

因此系统声明了一半可能的分辨率(正常分辨率),但在找到标记为@2x 的图像时要特别注意。在这种特殊情况下,它会采用更高分辨率的图像,并且不会以“一半”的方式显示它,而是以真正的高分辨率显示。

将此视为预览(低分辨率)和最后使用高分辨率图像的区别。

所以这不是趋势,在某些情况下是需要的。

现在有些设备的线性分辨率是全高清的两倍。

顺便提一句。为您节省一些麻烦并开始向量设计。不在 PhotoDontDoAllInItShop 中。

在电子设备中,ppi 不是问题

我被告知我应该只设计 360ppi

不,PPI 在电子设备中根本不算数。您需要使用像素作为尺寸。然后,您可以选择使用例如 FullHD 1920px 的最大宽度。

虽然是的,设备的像素密度可以说是 360 ppi,但此信息的使用与打印文档不同。它只计算像素的绝对值。

这里有2张图片。它们在文件中声明的 ppi 完全不同,但大小完全相同。(您只能看到在图像处理程序中打开它们并读取 ppi 数据的区别)

照片:Scott F. Snyder 模特:Amy Lee Fathbruckne

最大的区别是:

当您在@2x 中设计时,您可以在@1x 中导出

当您在@1x 中设计时,您无法在@2x 中导出

它适用于 Retina 显示器和更高密度的设备。而且您需要为这些文件提供更高的分辨率,因为从一开始就创建更大的文件时,缩小图像比将其调整为更大更容易。

例如,光栅化并为 Retina 准备的文件通常以 @2x.jpg 结尾,因为调用它们的脚本以这种方式识别它们。将有一个非 Retina 版本(例如 mypict.jpg),并在同一个图像文件夹中为 Retina 提供一个版本(例如 mypict@2x.jpg)。有些人更喜欢在他们的代码中使用@2x 和调整大小。

@2x 通常是原始图片大小的 2 倍。这就是为什么你会发现这些模板太大了。

是的,大多数人更喜欢简单地为他们的布局处理一个文件并调整它的大小,而不是处理两个不同的文件。@2x 肯定会成为标准(编辑例如更高分辨率的文件将成为标准。)

从技术上讲,如果主文件的分辨率更高,它不应该改变质量,实际上除了(也许)计算机的性能之外,您只会从中受益。如果设计的元素更大,也很实用;它们可以很容易地再次用于需要相同蒙太奇的其他横幅……甚至是小型印刷项目!高分辨率的 Retina 和 Web 项目使用与准备打印项目相同的工作流程;理想情况下,您从最大的项目开始,然后可以使用相同但更小的文件来节省时间。这样你就不需要做同样的布局 2-3-4 次了!

无论如何,无论是否高密度,以更高分辨率创建任何设计都是有意义的。


“大小”通常令人困惑,有像素单位,还有其他可以使用的值。

当与您一起工作的人要求您创建高分辨率 360ppi 时,他们显然更希望您保持相同的尺寸并提高分辨率!这样它也增加了像素大小。

大小不一样

相同的图片,相同的“尺寸”,不同的分辨率:

高分辨率一个,更多像素。

T先生高分辨率

分辨率低的一,像素少。

T先生低分辨率

如果您更容易计算像素数并将总数乘以 2-3-4 以获得正确的尺寸,那没关系。

有些人喜欢以正常的 72dpi 开始画布,然后在开始工作之前简单地将其重新采样到 360dpi(例如)。