当前位置:首页 > 网站用户体验专题

在PHOTOSHOP中更快设计网站的8种方法

2020-01-10

作为网页设计师,很难保持井井有条。您不仅要一次平衡多个项目,而且还可能面临紧迫的期限和艰难的客户。您可能还会在各个品牌之间跳来跳去,并且必须不断学习新的品牌准则和风格。

幸运的是,有许多方法可以使您的工作流程更加高效。为了提供帮助,我整理了这八个技巧,以使您在Web设计事业中保持理智。

 

1.整理文件

要保持理智,最简单的方法之一就是使文件井井有条。创建和维护一致的文件夹结构将使查找文件变得轻而易举。当一个文件夹与另一个文件夹的结构不同时,会出现问题,这使查找该Final-Final-logo.ai文件成为一个挑战

组织文件时,一致的文件命名约定至关重要。这就是版本控制的来源。一些设计师使用日期,其他设计师使用版本号,而另一些使用回合。这将取决于您的行业和您的个人喜好,但这是一个好习惯。通过版本控制,您可以轻松地跟踪哪个文件是最新的,尤其是在保存了旧版本以供参考的情况下。

我通常保留两到三个旧版本,以防客户想要从第一轮恢复到该英雄策略,或者希望从第二轮开始选择移动处理。为了避免打包问题,最好存档或删除较旧的文件,以免使硬盘陷入困境。


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

一致的文件夹结构和命名约定与版本控制的结合也将有助于搜索功能。例如,如果您使用一个品牌名称或缩写从一个品牌开始所有文件名,则可以更轻松地过滤该品牌的资产。这将有助于区分“ ATT-logo-final.ai”和可能是“ logo-final.ai”的海洋。

 

2.了解您的框架

直到我进入设计生涯几年,我才学到的一件事是如何正确利用现有框架。目前,框架世界中的两个重击者是BootstrapFoundation,但是Google的Materialize肯定会在不久的将来为他们赚钱。我所工作的公司将Foundation用于大多数品牌网站。

Foundation带有一个内置的响应式网格,以及按钮,字段,版式,导航等的样式,使您的生活更加轻松。通过在PSD中利用Foundation的内置网格,您将比开发自己的东西更容易使开发人员以更加完美的像素方式来实现您的设计。Photoshop拥有这个漂亮的指南布局工具,它不仅使创建网格变得轻而易举,而且还可以将它们附加到画板上,以便于文件重组和移动。


基础备忘单的屏幕截图

框架还为按钮样式,表单等提供了一个很好的起点,并帮助显示了可以实施的设计策略的可能性和局限性。这不仅为您的设计提供了一个很好的起点,而且将有助于促进与开发人员的友好协作。

 

3.按内容部分组织图层

当您处理包含许多文件夹,图层,智能对象等的复杂Web设计PSD时,事情很容易变得混乱。一旦出现第2455层,您就会开始意识到在PSD中需要某种组织。这就是为什么我建议按部分组织PSD的原因。

我的文件夹通常由Nav,Hero,Intro,Packages,Benefits,Footer等文件夹组成。我还以彩虹形式对这些文件夹进行颜色编码,因此易于浏览。这使得更新部分和重新制作PSD变得轻而易举。


我将文件组织到以彩虹色编码的分区文件夹中,以实现轻松扫描。

例如,如果您需要扩大英雄部分,则可以轻松地将以下所有文件夹作为一个单元拖动(按住命令),然后在进行更新后将它们拖回。此策略还可以帮助开发人员和其他设计师轻松浏览您的文件。通过使用易于理解的名称(例如“ Hero”和“ Nav”),新设计师可以轻松地跳入文件夹并进行所需的任何更改。

一些设计人员甚至会开始命名各个图层,这可能会带来极大的好处,但会花费一些时间。由于将图层设置为“图层”时,可以通过自动选择工具轻松找到图层,因此,如今这些图层很容易到达各个图层,因此要由各个设计人员决定他们如何组织图层。关键是您完成了操作。

 

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

这是效率的大问题。如果您发现自己定期使用特定的键盘命令,请记住该命令。如果所有主键盘快捷键都关闭,则效率将成倍提高。

一些重要的功能包括保存,字体大小和行距,图层顺序,网络保存以及不透明度等等。Photoshop还使您能够创建自定义快捷方式。在我的书中,要记住的最重要的命令是保存文件。由于Adobe的随机崩溃,最好还是经常保存而不是冒险失去进度。


Adobe为您提供了在“编辑”>“键盘快捷键”下自定义键盘快捷键的选项

快捷方式还可以通过内容部分文件夹来组织图层(如上所述)。使用键盘快捷键将层放在文件夹的顶部和底部要比对未组织文件中的层重新排序要容易得多。这是在设计文件时组织文件的地方。记住常用的键盘快捷键并保持图层的有序组织将极大地提高您的效率并帮助其他设计人员处理您的文件。

 

5.利用CC库

自创建CC以来,Adobe添加的最好的功能之一就是库。如果您还没有听说过它们,则需要查看有关如何使用它们的精彩教程

我觉得每个设计团队都应该利用这一惊人的功能。库使您可以使用颜色,字体样式,照片,图标和符号(例如页眉和页脚)等资产创建品牌库。借助库,您可以使用一个品牌库轻松地与来自多个组织的广告素材进行协作。

库使您可以轻松地通过单击按钮来更改颜色和更新文本样式。它们还帮助存储可以在一个地方轻松更新的品牌图标,并且更新可以在PSD中快速反映。这对于站点的页眉和页脚非常有用,因为您可能在整个项目中进行小的更新。

在整个设计中,我还使用CC库来进行字体样式设置。我将为台式机,平板电脑和移动应用程序的英雄复制,标题,小标题,正文复制,免责声明等设置样式。关于视图切换,我发现自己使用列表格式的原因要多于图块视图,因为它具有易于扫描的功能。


库元素被视为协作者

图书馆也非常适合团队协作。您可以选择与其他广告素材进行协作,以便它们可以编辑并添加到库中,也可以共享库链接以方便访问。他们还具有“从文档创建新库”功能,但是我更愿意自己创建库,因此它保持井井有条,并且只包含最相关的资产。

不幸的是,库有一些缺点,其中之一就是缺少文本的单独字符和段落样式。我通过在单独的框中应用我的字体,然后将不同的样式粘贴到一个框中来使文本框更易于在文件中管理来解决此问题。另一个缺点是,您目前无法全局更新字符样式。当前,该库中没有组织功能可以在类别(颜色,字符样式等)中创建子文件夹,但是希望Adobe也可以这样做。

CC库的当前工作方式是,最近更新/添加的资产将显示在顶部。CC库颜色不能应用于文本框内的单个文本,而只能轻松应用于形状和整个文本框。我确信Adobe会努力解决这些问题,因此我并不担心,特别是因为优点肯定超过了缺点。

 

6.将图像和矢量保持为智能对象格式

尽管这会使文件变大,但将图像和矢量保持为智能对象格式将使将来的设计人员更容易编辑PSD。想象一下:客户端返回的编辑内容包括重新裁剪英雄照片以及对矢量图标进行细微调整。如果PSD包括全分辨率照片而不是较小的光栅化版本,则可以更顺利地完成此操作。当向量是Illustrator中的智能对象而不是栅格化的图形时,向量也很容易进行调整。

杭州网站建设对象格式保存照片的另一个好处是,将照片另存为PSD,然后将它们作为智能对象放入文件中。使用放置的照片PSD可以轻松地在单独的包含的照片文件中添加调整图层和编辑,而不会使源文件混乱。将智能对象用作库图形可为您带来更多的成功组合。您不仅可以轻松地编辑矢量对象,而且库图形将在所有应用程序中更新。


免费获取报价

  • 29923329

  • 杭州市丰庆路498号北软智慧科创大厦203

  • 0571-85815193

  • pady@1t2.cn

网站地图 版权所有 © 2008-2021 杭州派迪科技有限公司  Copyright © 2008-2020  www.hzpady.com  All Rights Reserved    浙ICP备14029905号-1     公安备案:33010802008411    软著登字第3457658号