福州网站制作设计:如何为更好看的网站创建Retina显示图像资产

2019.04.29 |
标签

你花了很多时间来完善你的新网站,那么为什么当你在iPhone上看到它的时候,它看起来那么模糊呢?您确保使用漂亮的高质量的图像,但它们似乎没有正确地显示。惊慌失措!

福州网站制作设计许多人没有意识到,更新的设备-尤其是来自苹果的设备-使用了影响图像显示方式的先进显示技术。幸运的是,你可以用一些技巧来确保你的图片被优化,以确保你的网站在你的iPhone这样的设备上看起来完美。

本文将介绍视网膜显示的主题以及它如何影响您的网站图像,然后向您展示如何创建能够在视网膜屏幕上很好地显示的图像资产。

视网膜显示图像解释

福州网站制作设计在过去的几年里,设备屏幕的质量一直在不断提高。苹果特别是一直致力于使他们的屏幕非常清晰和可视-事实上,“Retina Display”是一个苹果品牌用来描述他们新设备的屏幕。

视网膜屏幕的目标是尽可能清晰地显示文字和图像,肉眼看不到像素。设计师们面临的挑战是视网膜显示器不是一个标准-它取决于设备显示器的大小(例如,手表屏幕与平板电脑相比),以及一个典型用户离屏幕有多近。

当我们谈论视网膜显示器时,我们必须考虑像素密度,即显示器可以容纳固定距离的像素数。这和分辨力,它是一个设备的整个高度和宽度的像素数。一个更小的屏幕(比如iPhone)和更大的屏幕(比如iPad)的分辨率是一样的,它的像素密度会更高。

将显示器的物理宽度除以水平显示的像素数,我们将得到每英寸的像素(PPI,也称为dpi,表示每英寸的点)。“HighDPI”指的是每英寸超过200像素的任何设备。这包括所有来自苹果的视网膜显示设备,以及其他制造商的一些设备。要获得更深入的解释,请参阅本文新闻部设计师指南.

传统上,网页图形是在72 dpi优化。显示在任何新闻部高设备(特别是视网膜显示器)上的密度的图像将以下两种方式之一显示:

  1. 如果显示在设备的DPI上,大小的一小部分。
  2. 显示在原来的尺寸与额外的像素猜测(内插),并填补了降低图像的质量。
福州网站制作设计

没有为视网膜显示优化的图像将显示像素化,就像左边的图像。

这意味着,为了在视网膜显示设备上获得最佳质量的图像显示,您需要处理更高分辨率的图像。这确保图像可以适合这些新屏幕的像素密度显示。让我们来看看你如何在Photoshop中做到这一点。

如何使用Photoshop创建Retina显示图像

使用双倍或四倍分辨率的图像意味着您可能需要放大才能看到任何细节,但是非常大的图像文件可能会造成性能问题和文件存储方面的挑战。

大多数设计人员的解决方案是创建多个层和组,根据需要使用Photoshop的Comps功能打开和关闭它们,或者使用原始分辨率并导出它们所需的大小(使用类似的操作维尼兹,它).

这两种方法的挑战是您不能同时看到多个图像。如果您需要以必要的大小查看图像中的差异,则必须在它们之间切换或导出,然后再进行返工。

幸运的是,对于我们Photoshop爱好者来说,Adobe增加了功能,使创建多个图像更加容易。现在,您可以使用图板特性,并使用以下方法创建多个图像大小:生成。让我们看看这是如何为视网膜显示器创建图像的。

1。创建你的第一个图板

图板工具,在Photoshop CC 2015中引入,可以发现隐藏在移动工具。您可以单击菜单中的工具,也可以使用移位+V切换移动图板:

福州网站制作设计

若要创建图板,请单击并拖动一个区域。新图板将显示在层层面板,默认名称为图板1.

2。设置你的画板

您可以添加您需要的任何层到您的图板,它们将嵌套类似于层组-使您能够创建一个适当的层结构。我们建议添加您的各种资产,如形状和类型,以便它们在进入下一步之前根据您的需要进行定位。

3。复制你的图板

一旦您的第一个图板设置适合您的需要,您可以复制它使用上下文菜单。右击图板1层层面板并选择复制板。这将创建另一个大小和位置相同的图板,包含与所有包含的资产完全相同的层结构:

Artboard Duplicate

复制你的图板给你一个像素完美的布局副本。

4。放置您的艺术板

福州网站制作设计使用图板的最大优点是能够同时看到所有的图像。要做到这一点,只需放置您的艺术板需要。有几种移动图板的方法:

  1. 使用

    特性

    面板,当选择一个图板以输入图板左上角的X和Y坐标时显示。
  2. 将选定的图板拖到Photoshop内的任意位置。图板是智能指南启用,因此您可以自动对齐多个图板和他们的位置将锁定到以前的间隔。
  3. 使用键盘箭头键移动选定的图板。箭头键本身将推动板一个像素,同时保持

    Shift+Arrow

    会把它移动十个像素。

5。调整您的艺术板的大小(如果需要的话)

如果您需要调整您的图板的大小,您再次有多个选项:

  1. 使用在选择图板时出现的手柄调整它们的大小。
  2. 使用

    备选方案

    面板就在

    档案

    菜单可选择预置尺寸、设置自定义宽度或高度,或在纵向和景观方向之间切换。
  3. 使用

    特性

    面板,当选定图板以更改大小和访问预设大小时显示。
Artboard Size Properties

您可以使用“属性”选项卡为您的图板选择预设大小。

6。创造你的艺术

福州网站制作设计现在您可以使用您的图板,替换图像资产,并根据需要进行更改。假设您的原始设置进行顺利,您现在将拥有像素完美的图像与所有资产在正确的位置。

7。设置生成工具

生成使您可以使用特殊的命名语法导出图板、图层或组。它的作用是为Web保存捷径。确保生成是打开的,因为你的PSD文件>生成>图像资产:

Generate Tool

8。重命名你的艺术板

生成工作通过保存图像资产,因为您的工作基于您设置的选项,在图层组的名称-或在本例中,您的画板。您可以设置以下几个选项:

  • 文件格式。

    添加一个扩展(如

    -Opt.jpg, .gif

    .png

    )保存相关文件-例如,

    头-主机。

    图像资产将保存在与PSD文件相同的文件夹中,但使用的是

    -资产

    后缀。
  • 文件压缩

    在扩展之后,您可以添加一个表示所使用的级别压缩的图形。为

    Opt.jpg

    你可以使用百分比。

    巴新

    使用

    8, 24,

    32

    对于各自的位格式,例如,

    标题-main.png 8。

  • 输出比例尺

    您可以通过在图像名称之前添加百分比或像素(以高度表示宽度)来设置输出的比例。

    100%标头-main.png 8).

  • 多幅图像。

    通过使用逗号或加号来分隔图像名,您可以从同一个图板导出多个图像。因此,每个图像都有自己的选项,只要每个图像名称都是唯一的,例如,

    100%标头-main.png 8,200%标头-main.png 8.

结合这些选项,您可以不断地从您的图板中创建复杂的图像资产:

Named Artboard

如果您的所有图板都需要标准图像,则生成工具使您能够创建适用于每个设置的默认设置。若要创建此设置,请在文档顶部添加一个空层,并提供以下选项:

  • 默认关键字:

    名称必须以这个开头才能让

    生成

    知道如何使用它作为缺省值。
  • 产出规模:

    和前面一样,用百分比或像素设置输出的比例(按高度计算的宽度)。
  • 文件夹/后缀:

    设置应该保存图像的文件夹名,以及要添加到文件名中的后缀。

通过添加多个选项,您可以自动创建视网膜显示所需的图像-例如,默认为100%End/@1x,200%end/@2x,300%end/@3x。然后,您可以使用默认选项将扩展添加到您希望导出的任何板上。

如果使用其他设计工具,如素描,他们有自己的导出机制-但如果你是Photoshop的粉丝,这个工作流程将大大减少您创建视网膜显示器所需的多幅图像所需的时间。

如何优化Retina显示图像资产

福州网站制作设计在为您的网站创建图像时,文件大小始终是一个主要考虑因素。图片必须加载到访问者的浏览器中,因此文件大小越大,站点加载的速度就越慢。一个美丽的网站,需要很长时间才能加载,很可能不会被你的访问者看到,因为他们不会想要等待。

你可以开始优化网站图片确保在Photoshop中保存文件时使用相关选项。正如我们在上面的工作流中所介绍的,您将您的映像保存为JPEG巴新档案。这个JPEG格式是更好的照片与许多颜色,因为它使用压缩,以减少文件大小。这个巴新格式最适合截图和设计图像,如图标和按钮,但它使用无损压缩,因此文件大小更高。

WordPress还为您提供了一些优化方面的帮助,当您将图片上传到WordPress站点时,可以创建多个图像大小。这有助于确保您使用适当的大小图像-例如,缩略图将用于多个帖子的列表。此外,图像优化插件以帮助优化任何图片,因为他们被上传。

结语

这一切都很好选择惊人的,高分辨率的图片为你的网站,但如果你没有准备好它们之前上传,它们可能看起来出乎意料的像素当看到更新的视网膜显示设备。

在Photoshop中创建视网膜显示图像是小菜一碟-让我们回顾一下这些步骤:

  1. 创建您的图板,注意设置,复制和正确定位它们。
  2. 如果需要的话,在创建图片之前,调整你的图板的大小。
  3. 设置生成工具以帮助导出图像。
  4. 在Generate中重命名您的图板,必要时将它们设置为默认选项。

福州网站制作设计上面分享的提示应该帮助您了解如何创建优化的图像,以便在更新的设备屏幕上显示-使您能够创建漂亮的图像,使其在所有屏幕上看起来都与您所期望的一样。

如果您有使用视网膜显示图像资产的经验,我们希望通过订阅下面的评论部分来了解您创建和优化视网膜显示图像资产的技巧和技巧!


相关推荐

福州企业网站制作:2019年Facebook 12个最佳营销工具
 

福州企业网站制作:2019年Facebook 12个最佳营销工具

脸书不需要介绍。今天它夸耀地结束了16亿每月活跃用户如果你还没有把你的营销工作扩展到这个平台上,这就引出了一个问题-你到底在等什么?好消息是,从Facebook上开始营销并不难-任何人都可以创建一个页面,并立即开...
2019.04.29
福州网站建设设计:divi插件突出显示-剖面样式管理器Pro
 

福州网站建设设计:divi插件突出显示-剖面样式管理器Pro

福州网站建设设计在网络上有很多伟大的Divi设计。有一件事,使许多最好的Divi主题脱颖而出的是部门划分。部门划分是一个伟大的方式添加一些视觉照明弹到您的网站。添加它们的最好方法是使用CSS样式,但您不必知...
2019.04.29

最新文章

福州做网站:WordPress的HTTPS和SSL的最终指南
 

福州做网站:WordPress的HTTPS和SSL的最终指南

在过去的几年中,您可能已经注意到许多您最喜欢的网站已经从HTTP地址转移到HTTPS。增加的字母,虽然增加了很少的时间和精力,打字,增加了巨大的价值和这些网站的安全性。拥有WordPress HTTPS网站不...
2019.04.29
福州网站建设设计:divi插件突出显示-剖面样式管理器Pro
 

福州网站建设设计:divi插件突出显示-剖面样式管理器Pro

福州网站建设设计在网络上有很多伟大的Divi设计。有一件事,使许多最好的Divi主题脱颖而出的是部门划分。部门划分是一个伟大的方式添加一些视觉照明弹到您的网站。添加它们的最好方法是使用CSS样式,但您不必知...
2019.04.29

热门推荐

选择您希望福州网站设计成品的风格偏好,让我们通过精确的分析与筛选,为您推荐合适的版式布局,
为此,您可以节省最基本的沟通时间,
让我们把有限的时间,充分的用在对行业的分析及您企业网站建设的自身分析上吧
联系电话 400-6065-301

建站咨询 星总监

投诉