您已经花费大量时间来设置博客的设计,但是为什么图像无法在Smartphone上正确显示? 您确保使用了高质量的图像,但是较差的图像条件无法校正显示。

许多人没有意识到新设备(特别是苹果的)使用会影响图像显示方式的高级显示技术,以确保它们可以在计算机和智能手机上正确显示。

在本教程中,我们将尝试介绍一些“ 视网膜准备 并向您展示如何创建Retina图像。

但是在开始之前,花点时间看一下 如何安装WordPress主题我应该如何许多插件安装WordPress的.

然后开始工作。

图像视网膜准备的说明

在过去的几年中,设备屏幕的质量一直在不断提高,特别是苹果的屏幕已经做了很多工作,以使其非常清晰可见。 技术”Retina Display是Apple品牌名称,用于描述具有特定功能的特定类型的显示器。

视网膜屏幕旨在 尽可能清晰地显示文本和图像,肉眼看不到像素。 设计人员面临的挑战是,显示会根据设备的屏幕尺寸以及用户与屏幕的接近程度而变化。

通过将屏幕的物理宽度除以水平显示的像素数,我们得到每英寸的像素数(ppi,也称为每英寸点数ppp)。 “ 高DPI 用于指每英寸具有200像素以上的任何设备。 这包括所有显示设备“ 视网膜 (来自Apple)以及其他制造商的某些设备。

如何使用Photoshop创建“视网膜就绪”图像

使用双倍或四倍分辨率的图像意味着您必须能够放大才能看到所有细微的细节,但是文件过重会导致性能问题和文件存储难题。

对于大多数设计师来说,解决方案是创建多个层并将它们分组在一起,然后根据需要激活它们。 使用功能“ comps » 的Photoshop 要么以原始分辨率工作并导出所需的格式(使用“重新设置”之类的操作).

这两种方法的挑战在于您无法同时看到多个图像。 如果需要以必要的尺寸查看图像中的差异,则需要在它们之间切换或导出它们。

对于我们的Photoshop爱好者而言,幸运的是,Adobe添加了一项功能,使创建多个图像更加容易。 现在,您可以使用特征画板并排创建多个画布,并使用生成器创建多个图像尺寸。 让我们看看它是如何工作的。

1-创建第一个Artboard

新画板工具,在引入 Photoshop的CC 2015,隐藏在移动工具的后面。 您可以点击菜单中的工具,或使用Shift + V在“ Déplacement “和” 画板 »:

Artboard-Tool1-photoshop-教程-wordpress-创建图像-视网膜就绪要创建工作平面,请单击并拖动一个区域。 新的画板将以默认名称“画板1”显示在图层面板中。

另请参阅: 为什么自由职业者需要每日时间表

2-配置您的画板

您可以将所需的图层添加到画板上,它们将按图层嵌套(允许您创建适当的图层结构)。 我们建议添加各种文件(例如形状),以便在继续下一步之前将它们放置在所需的位置。

3-复制画板

设置完第一个画板以满足您的需求后,您可以使用快捷菜单进行复制。 右键单击图层区域中的“ Artboard 1”,然后选择“ Duplicate Artboard”。 这将创建另一个类似的“ Artboard”,其中包含相同的结构及其所有组件:

Photoshop中复制画板

另外发现: 如何复制WordPress的文章或页面

4-放置工作台(画板)

使用画板的最大优点是能够同时查看所有图像。 为此,只需根据需要放置工作台即可。 做这件事有很多种方法:

使用选择工作平面时出现的面板在工作平面的左上角输入X和Y坐标。

将选定的画板拖动到 Photoshop中。 画板已智能激活,因此您可以自动对齐多个画板,使其位置锁定在先前的间距中。

使用键盘上的箭头键移动选定的工作平面。

另请参阅我们的教程: 如何修复不再适用于WordPress的媒体库

5-调整画板尺寸(必要时)

如果需要调整画板的大小,则可以再次选择以下几种方法:

  • 使用选择画板时出现的手柄调整大小。
  • 使用“文件”菜单下面的选项面板选择预设大小,固定宽度或高度,或在纵向和横向之间切换。
  • 使用选择工作台时出现的“属性”面板来更改大小并访问预定义的大小。

物业Photohop工作区

6-创作艺术

现在,您可以使用您的台面,更换组件并根据需要进行更改。 假设您的原始设置未更改,那么您现在将获得像素完美的图像,所有组件都放置在正确的位置。

另请参阅 26 WordPress主题与系统拖放来创建你的页面

7-设置“生成”工具

« 产生 »允许您使用特殊的命名语法导出画板,图层或组。 这是保存到网络的快捷方式。 为了保证 ” 产生 已为您的PSD启用,请转到“ 文件>生成>图像资产 “(文件>生成>图像 办公室文员:):

生成工具的Photoshop生成工具的Photoshop

8-重命名画板

产生« 艺术 “对于 保存图像组件 您正在根据图层集或画板中设置的选项进行操作。 您可以设置一些选项:

  • 文件格式。 添加扩展名(。JPG,gif或.PNG )以保存相关文件,例如:header-main.png图像组件将与PSD文件保存在同一文件夹中,但后缀为“ -assets”。
  • 文件压缩.  扩展之后,您可以添加一个数字,指示使用的压缩级别。 对于“ opt.jpg »您可以使用百分比,对于png使用相应的位:8、24或32。
  • 出口规模。 您可以通过添加百分比或像素来设置输出比例(的宽度与高度的),在图片名称(例如100%header-main.png8 ).
  • 更多图片。 您可以导出同一画板的多个图像(画板),请使用逗号或加号分隔图像名称。 因此,只要图像的每个名称都是唯一的,每个图像都可以有自己的选项。

这些选项的组合使您能够不断为画板创建复杂的图像组件:

图像组件管理

如果所有工作台都需要标准图像,则“ 产生 允许您创建一个默认情况下适用于每个参数的参数。 要创建此参数,请使用以下选项在文档顶部添加一个空层:

  • 默认关键字:名称必须以此开头,以离开工具“ 产生 »自由使用它作为默认值。
  • 出口规模:允许您使用百分比或像素(的宽度与高度的).
  • 文件夹/后缀: 定义应在其中保存图像的文件夹的名称,以及添加到文件名的后缀。

总结

这就是您所到之处,请尝试 放大图像 看看后者的表现。 如有必要,您可以通过将其上载到媒体库来测试WordPress博客上的图像。

请根据需要随时向我们提问。

还发现一些高级WordPress插件  

您可以使用其他 WordPress插件 赋予现代外观并优化您的博客或网站的处理。

我们在这里为您提供了一些高级WordPress插件,它们将帮助您实现这一目标。

1。 WP终极社交

这是您可能在WordPress博客上可能需要的所有社交网络功能的最终组合。WP-终极社交

另请阅读我们的 8 WordPress插件整合减少系统

其主要特点是: 多个社交网络图标,社交分享,任何人都可以 分享您的网站内容 (文章,页面,图像,媒体)在流行的社交网络(Facebook,Twitter,Linkedin,GooglePlus, Pinterest, 掘客,缓冲区, Reddit,Tumblr, 偶然发现, ,微博,VK,美味),使用您的社交媒体凭据连接到网站,用于显示关注者人数的计数器以及您的网站和其他人的份额。

下载 | 演示 | 虚拟主机

2。 WP Slick Slider Image Carousel Pro

如果您是Visual Composer套件的狂热追随者,则需要考虑使用WP Slick Slider插件。 使用几乎100个预定义的模板,您无需编码就可以找到所需的内容。

WP光滑滑块和图像轮播Pro

这是一个非常认真的选择,尤其是对于 可视化编辑器。 其功能包括:具有拖放支持的完全响应式布局, , RTL和多语言支持,精美的设计等等

下载 | 演示 | 虚拟主机

3。 WordPress社交侧边栏

这个名字 WordPress插件 应该大致告诉您后者的用途。 但我们会说 WordPress插件 社交侧边栏将帮助您在网站上创建侧边栏,目的是帮助您做 在不同的社交网络上快速分享您的内容.

WordPress社交边栏

其功能包括:自动与您的 WordPress主题,从上到下配置它的能力,与几种最近和现代浏览器的兼容性, 从左侧到右侧放置侧边栏的可能性,页面上方或底部的本机提供4种颜色集,响应式布局等等。

下载 演示 | 虚拟主机

其他推荐资源

查找有关其他推荐资源的信息,以帮助您构建和管理网站。

结论

这里 ! 就是本教程的内容了,希望它可以让您为WordPress博客创建“ Retina”图像。 

但是,您也可以咨询 我们的资源,如果您需要更多元素来执行创建Internet网站的项目,请参考我们的指南 WordPress博客创建。

如果您有任何建议或意见,请将其留在我们的部分 评论。 不要犹豫 与您最喜欢的社交网络上的朋友分享

...