Photoshop CC快速原型制作指南

IT资讯 2018-07-24 95 次浏览 0 条评论

使用Photoshop的工具集快速轻松地模拟网站。

现在有很多原型设计工具和方法可以帮助您快速轻松地创建网站模型。您可能没有意识到,但Photoshop CC是快速原型制作的绝佳工具。随着每次修订,该软件为希望快速创建线框或原型以与客户共享或为开发人员构建设计的设计人员获得了更多功能。

Photoshop CC中最有用的快速原型制作功能包括隔离图层,使用实时圆角矩形工具调整角点以及从各个图层复制CSS属性的功能。 Creative Cloud设置也提供了有用的协作元素(在此订阅Adobe Creative Cloud)。

在本文中,我们将介绍如何在Photoshop中创建快速原型,使用可用工具的广度来创建开发人员和客户端友好的页面模型。

01.从网格开始

快速原型制作步骤1

单击右上角的图标可查看完整大小的图像

设置一个文档,其中包含您正在设计的屏幕尺寸(智能手机,平板电脑等)。接下来,创建一个将构成基础结构的网格 - 免费扩展GuideGuide对此非常有用。打开扩展,输入边距宽度,列数和装订线宽度。点击GG按钮,你就有了你的网格。

02.定义不同的领域

快速原型制作步骤2

单击右上角的图标可查看完整大小的图像

此时,阻止页面布局的关键区域会很有帮助。为页眉,页脚,内容和您需要的任何其他内容创建一个文件夹。定义网站设计的任何主要区域是个好主意 - 从浅灰色框开始勾勒它们。在这里,我使用矩形工具绘制网站的标题区域(1200 x 240px)并添加标题。

03.添加一些导航

快速原型制作步骤3

单击右上角的图标可查看完整大小的图像

现在添加导航元素。要复制类型,请选择图层,按住Opt / Alt键并拖动。按住Shift可限制对齐。通过选择所有导航文本并点击“工具选项”栏中的“分布垂直中心”按钮,精确对齐文本图层。这样可以垂直对齐并均匀地分隔图层,使其成为菜单项的理想选择。

04.围绕你的矩形

快速原型制作步骤4

单击右上角的图标可查看完整大小的图像

在这里,我们使用圆角矩形工具在主页布局中添加注册表单。 Photoshop CC具有实时圆角矩形功能,可让您调整形状的圆角半径。这意味着如果您的设计需要,您可以稍后返回并更改您的角落。这可能听起来像一个小功能,但它非常方便。

05.添加图片

快速原型制作步骤5

单击右上角的图标可查看完整大小的图像

将图像转换为智能对象是值得的,因为这使得它们更容易更新或替换。您可以使用占位符矩形作为矢量蒙版来保存图像。将图像作为新图层引入,复制矩形蒙版并将其链接到该图层,或从矩形中进行选择并使用“选择性粘贴”>“粘贴到”。

06.介绍图层样式

快速原型制作步骤6

单击右上角的图标可查看完整大小的图像

图层样式是添加效果的不错方式。要将当前使用的图层样式应用于堆栈中的另一个图层,请按Opt / Alt并将FX图标拖动到新图层。要创建可以打开或关闭的悬停图层,只需复制背景矩形,然后将此图层和文本图层分组为图层组。

07.隔离你的图层

快速原型制作步骤7

单击右上角的图标可查看完整大小的图像

如果您只想编辑某些图层,这是Photoshop CC中的另一个有用功能。选择要编辑的图层,然后转到选择>隔离图层。这使您可以专注于需要工作的特定区域,而不会混淆其他层的混乱。

08.创建图像资产

快速原型制作步骤8

单击右上角的图标可查看完整大小的图像

Adobe Generator是一种Photoshop CC功能,可让您即时创建图像资源。转到文件>生成>图像资源。现在,在“图层”面板中,添加文件后缀(如.png或.jpeg)以自动将该图层导出到指定的文件夹。我们在这里用图标文件完成了。

09.复制CSS属性

快速原型制作步骤9

单击右上角的图标可查看完整大小的图像

Photoshop CC在创建HTML原型时的一个重要功能是能够复制图层的CSS。要执行此操作,请按Ctrl +右键单击所需图层,然后单击“复制CSS样式”以将代码添加到剪贴板。在Dreamweaver,Muse或Adobe XD中打开一个新文档,然后粘贴到CSS代码中。

0

【飞龙网.COM】不一样的IT资讯网,艺术,设计,插画,资源技巧分享!

发表评论