UI.

在Photoshop中更快地设计网站的方法

Jenni Moore. 经过 Jenni Moore.  |  2016年10月05日

作为网页设计师,难以保持组织。您不仅是一次平衡几个项目,而且您也可能面临紧密的截止日期和艰难的客户。您也可能会从品牌弹跳到品牌,不得不不断学习新的品牌指南和风格。

幸运的是,有很多方法可以更高效地制作工作流程。为了帮助解决,我将这八个提示放在一起,让你在你的网络设计职业中保持理智

 

1.保持文件组织

您可以做的最简单的事情之一是保持您的理智,请保留您的文件组织。创建和维护一致的文件夹结构将使您的文件进行微风。当您对另一个文件夹构建一个文件夹时出现问题,使其成为找到该挑战 final-pinal-logo.ai. file.

组织文件时,一致的文件命名约定是必不可少的。这是版本化进入的地方。一些设计人员使用日期,其他人使用版本号,以及一些使用圆。这将取决于您的行业和您的个人喜好,但这是一个很好的做法。感谢版本控制,您可以轻松跟踪哪个文件是最新的文件,特别是如果您有旧版本保存以供参考。

我一般保持两个到三个旧版本,以防客户想要从第一个返回到那个英雄策略,或者首选从两轮的移动处理。为了避免Pack Rate Mentality,归档或删除旧文件很好,以防止硬盘陷入困境。

1折叠结构

这是我在ClearLink上使用的示例结构。

包含版本控制的一致文件夹结构和命名约定的组合也有助于搜索能力。例如,如果从品牌名称或缩写从一个品牌启动所有文件名,则可以更轻松地过滤该品牌的资产。这将有助于区分“att-logo-final.ai”可能是“徽标 - 总值”的海洋。

 

2.了解您的框架

一件事我没有学习,直到几年进入我的设计职业是如何正确利用现有框架。框架世界中的两名沉重的劫持者目前是 引导基础但是谷歌的 物质化 在不久的将来,肯定会给他们一个奔跑的钱。我为大多数品牌网站使用的公司工作的公司。

基础附带内置响应电网,以及造型的按钮,字段,排版,导航等。在许多其他事情中,让您的生活更轻松。通过利用PSD中的基础内置网格,您将更轻松地以比您完成自己的方式更具像素的方式实现您的设计。 Photoshop具有此漂亮的指南布局工具,不仅可以创建栅格微风,而且还将它们连接到艺术板,以便于文件重组和运动。

2理解 - 您的框架

截图截图 基础作弊表

框架还为按钮造型,形式等提供了一个很好的起点,并帮助显示您可以实现的设计策略的可能性和限制。这不仅会给您设计的一个很好的起点,但它将有助于促进与开发人员的更友好的合作。

 

3.通过内容部分组织层

当您使用这么多的文件夹,层,智能对象等处理复杂的网络设计PSDS时,事情可以很容易地弄乱。一旦第2,455层来临,您开始意识到您在PSD中需要某种组织。这就是为什么我建议通过部分组织PSD。

我的普遍包括包含违规,英雄,介绍,包,优惠,页脚等的文件夹。我还在彩虹时尚中彩色这些文件夹,因此它们很容易导航。这使得更新部分并重新加工您的PSD轻而易举。

3组织层

我将我的文件组织成彩虹颜色编码的部分文件夹,便于扫描能力。

例如,如果您需要使HERO部分更大,可以轻松地将下面的文件夹拖动为一个单位(保持命令),然后在更新后拖回它们。此策略还帮助开发人员和其他设计人员轻松导航您的文件。通过使用像“英雄”和“NAV”这样的可理解名称,新设计师可以轻松跳入文件夹,并使他们需要的任何更改。

一些设计师甚至会进入命名个别层,这也可能是令人难以置信的有利,但可以有点耗时。由于当它设置为“图层”时,从自动选择工具很容易找到图层,因此这几天很容易到各个层,所以这取决于个人设计师他们想要组织他们的层。关键是你完成了。

 

4.记住您通常使用的所有键盘快捷键

这个是一个效率的重要性。如果您发现自己定期使用特定的键命令,请记住它。如果您拥有所有主键盘快捷方式,您将呈指数级效率。

一些重要的是节省,字体大小和前导,层排序,为网络保存,以及多种多样性。 Photoshop还为您提供了创建自定义快捷方式的能力。在我的书中,纪念最重要的命令是保存您的文件。由于Adobe的随机崩溃,省份的错误往往是难以努力而不是丢失任何进展的风险。

4键盘 - 快捷方式

adobe.为您提供自定义键盘快捷键的选项 编辑> Keyboard Shortcuts

快捷方式还绑定以通过内容部分文件夹组织层(如上所述)。使用键盘快捷键将图层带到文件夹的顶部和底部,而不是未经组织文件中的重新订购图层。这是根据您设计组织您的文件的地方。记住常用键盘快捷键并保留您的层数将大大提高您的效率并帮助其他设计师与您的文件一起工作。

 

5.利用CC库

自创建CC自创建以来Adobe添加的最佳事物之一是库。如果你没有听说过他们,你需要看看这个 惊人的教程 on how to use them.

我觉得每个设计团队都应该使用这个惊人的功能。库允许您创建一个品牌库,与颜色,字体样式,照片,图标和符号等资产(如标题&页脚)。感谢图书馆,您可以使用单个品牌图书馆轻松地与来自多个组织的创意合作。

图书馆可以轻松更改颜色并使用单击按钮更新文本样式。它们还帮助存储品牌图标,可以在一个地方轻松更新,更新在PSD上迅速反映。这对您的网站的页眉和页脚非常有益,您可能在整个项目中进行小更新。

我还使用CC库来整个设计中的字体样式。我将为桌面,平板电脑和移动应用程序设置英雄副本,标题,副标题,正文副本,免责声明等的样式。关于视图切换,我发现自己使用列表格式 - 而不是由于其简单的扫描能力而不是图块视图。

5  - 利用-CC-Libraries

图书馆元素被视为合作者

图书馆对团队合作也很好。您可以选择与其他创意合作,以便他们可以编辑和添加到库,或者您可以共享库链接以便于访问。他们也有一个“从文档创建新库”功能,但我宁愿自己创建图书馆,所以它保持组织,只有最相关的资产。

不幸的是,图书馆有一些缺点,其中一个是缺乏文本的独立字符和段落样式。我通过在一个单独的框中应用我的字符样式,然后将不同的样式粘贴到一个框中,以使文本框更容易管理文件。另一个缺点是您目前无法在全局更新角色风格。目前,库中没有组织能力在类别(颜色,字符样式等)中创建子文件夹,但希望Adobe也在致力于这一点。

CC库工作的当前方式是最近更新/添加的资产将出现顶部。 CC库颜色无法应用于文本框中的各个文本,只能轻松应用于形状和整个文本框。我相信Adobe很难在工作中解决这些问题,所以我不太担心,特别是因为这些专业人士肯定超过了缺点。

 

6.以智能对象格式保留图像和向量

即使它会使您的文件更大,请以智能对象格式保留您的图像和向量,将更容易更容易编辑PSD。图片:客户端返回编辑,其中包括重新裁剪英雄照片并将小调整为向量图标。如果PSD包含全分辨率的照片而不是较小的光栅化版本,则更顺畅地完成。当他们来自插画家而不是光栅化图形时,vectors也很容易调整。

将智能对象格式的照片作为PSD保存,然后将其放入文件作为智能对象时,将它们放入智能对象格式的另一个好处。使用放置的照片PSD可以轻松地在单独的包含照片文件中添加调整层和编辑,而不是对源文件进行混乱。利用智能对象作为库图形,为您提供更多的获胜组合。您不仅可以轻松编辑矢量对象,但库图形将在所有应用程序中更新。

6智能物体

可以在单独的PSD中编辑“英雄图”图形,以将主文件的杂波保持为最小。

 

7.创建样式指南并坚持下去

许多品牌将有一个普通的风格指南,供您遵循字体,颜色,照片,图标,插图等。这是有用的资源,但不会总是让您在您的网站特定样式上保持一致。对于我工作的每个特定网站创建网络样式指南,我已经大大提高了我的效率。

有时品牌将有多个具有不同风格的网站,因此我确保我为每个网站提供一个,所以我可以在我设计时保持一致。当我需要按钮,图标,插图,照片等时,这也创建了一个简单的拖放资源。这不仅会使您更高效地作为设计师,但它将帮助您在整个网站上保持一致。

我在部分之间使用什么间隔?查看风格指南!什么是主要的按钮颜色和填充再次?从风格指南抓住它!这也可以帮助其他设计师轻松介绍现场设计。如果您使用样式指南合并使用CC库,您甚至更领先于游戏。

7风格指南

我为我工作的所有不同品牌创建了一个PSD样式指南,所以我可以轻松地抓住像按钮和图标等元素。

每次在设计中面临新问题时,很多设计人员都会诱惑添加新风格。为了一致性,最好避免这种情况,并始终坚持您在风格指南中建立的标准。如果添加新图层和样式,请确保它们在整个站点上应用。

创建的更新风格,将更复杂的未来设计将是,并且新的设计师跳上项目并保持设计一致。在许多情况下,在用户体验方面,一致性比不断创新更重要。即使它可能需要更多时间在项目开头创建Web样式指南,它也会增加您对所有未来页面的效率。

我从Brad Frost学到的最好的做法就是做一个 接口库存 在设计过程中或在您正在努力的现有网站上。接口库存包括通过屏幕截图收集所有不同的文本样式等,并编译它们以查找不一致。然后,您可以向客户展示您的调查结果,以提出更新和改进。

由于网站触摸了多个设计师的存在,因此在一致性部门可以获得漂亮的毛茸茸。找到页面上元素的统一设计风格后,请务必更新您的样式指南,以便每个人都是最新的。

8接口库存

Interface inventory screenshot from http://bradfrost.com/blog/post/interface-inventory/

 

8.培养部门间合作

很多人在营销生产中追求职业生涯(设计师,开发人员,撰稿人等)往往是内向的,因此在合作时难以离开你的舒适区。留下您的专业知识泡沫也很难,特别是当它更容易与您领域的人有关时。即使它有时可能是尴尬或不舒服,留下你的泡沫并定期与来自其他部门的人的人员可以大大提高你设计的质量以及你的效率。

这个典范的例子是设计者和开发人员在重新设计上协作。您应该事先与开发人员会面,以便通过他们使用的框架,教育自己在网格系统上,并评估可能性。当设计工作完成时,请务必分享您的Photoshop库,因此开发人员将轻松访问调色板,字体样式等。提前共享样式指南也有助于与您的任何组件一起分享。旨在给他们一个好的头部。

与您的团队中的其他设计人员合作利用图书馆的合作也将帮助您保持一致,更高效。在图书馆和风格指南更新中赋予艺术主任或大多数高级设计师责任将消除混淆并保持品牌始终如一。在进行更新时确保有一系列通信,以便每个人都在同一页面上。

 

保持理智

Web设计有时可能会压倒和挑战。它并不总是这样。通过遵循Photoshop效率的这些简单的提示,您可以缓解一个很好的压力块。这不仅会改善您的福祉,而且商业和创意方面的经理和董事将非常感谢您的辛勤工作,并为您表示赞赏。毕竟,每个人都很好,更加一致,高效,精美的设计。