探索、思考、创造、分享

数据驱动、坚持为客户提供有价值的服务和内容

当前位置: 南京小程序开发 > 小程序资讯 > 网站制作 >
在PHOTOSHOP中更快地设计网站的8种方法
来源:南京小程序开发   发布时间:2018-09-21 点击:
作为网页设计师,很难保持井井有条。您不仅可以同时平衡多个项目,而且还可能面临紧迫的期限和艰难的客户。您也可能在品牌之间蹦蹦跳跳,不得不不断学习新的品牌指导方针和风格。
 
幸运的是,有很多方法可以提高工作流程的效率。为了提供帮助,我将这八个提示放在一起,让您在网页设计生涯中保持清醒
 
1.保持文件整洁
为保持理智,您可以做的最简单的事情之一就是保持文件的整洁。创建和维护一致的文件夹结构将使您轻松找到文件。当您以不同于另一个文件夹的方式构造一个文件夹时出现问题,这使得查找Final-Final-logo.ai文件成为一项挑战。
 
在组织文件时,一致的文件命名约定是必不可少的。这是版本控制的地方。一些设计师使用日期,其他人使用版本号,一些使用轮次。这取决于您的行业和个人喜好,但这是一个很好的做法。由于版本控制,您可以轻松跟踪哪个文件是最新的,特别是如果您保存旧版本以供参考。
 
我通常会保留两到三个旧版本,以防客户想要从第一轮恢复到英雄策略,或者更喜欢第二轮的移动治疗。为了避免包装大鼠的心态,最好存档或删除旧文件以防止硬盘陷入困境。
 
一致的文件夹结构和命名约定与版本控制的结合也将有助于搜索能力。例如,如果您使用品牌名称或缩写从一个品牌开始所有文件名,则可以更轻松地过滤该品牌的资产。这将有助于将“ATT-logo-final.ai”与可能成为“logo-final.ai”的海洋区分开来。
 
2.了解您的框架
在我进入设计职业生涯几年之后,我没有学到的一件事是如何正确利用现有的框架。框架世界中两位重量级人物目前都是Bootstrap和Foundation,但谷歌的Materialise肯定会在不久的将来让他们获利。我工作的公司使用Foundation作为其大部分品牌网站。
 
基金会带有内置的响应式网格,以及按钮,字段,排版,导航等样式,以及其他许多内容,让您的生活更轻松。通过在PSD中使用Foundation的内置网格,您可以使开发人员更容易以比像素更完美的方式实现您的设计。Photoshop拥有这个漂亮的指南布局工具,不仅可以轻松创建网格,还可以将它们附加到艺术板上,以便于文件重构和移动。
 
框架还为按钮样式,表单等提供了良好的起点,并帮助显示您可以实现的设计策略的可能性和局限性。这不仅为您的设计提供了一个很好的起点,而且有助于促进与开发人员的友好协作。
 
3.按内容部分组织图层
当您处理具有如此多文件夹,图层,智能对象等的复杂网页设计PSD时,事情很容易变得混乱。一旦2,455层到来,您就会开始意识到您需要在PSD中进行某种组织。这就是为什么我建议按部分组织你的PSD。
 
我的文件夹通常包括Nav,Hero,Intro,Packages,Benefits,Footer等。我还以彩虹方式对这些文件夹进行颜色编码,因此它们很容易导航。这使得更新部分和重新编写PSD变得轻而易举。
 
例如,如果您需要使英雄部分更大,您可以轻松地将下面的所有文件夹作为一个单元(保持命令)拖动,然后在更新后将其拖回。此策略还可以帮助开发人员和其他设计人员轻松导航文件。通过使用可理解的名称,如“Hero”和“Nav”,新设计师可以轻松跳转到文件夹并进行所需的任何更改。
 
有些设计师甚至会为单个层命名,这也可能非常有益,但可能会耗费一些时间。由于当设置为“图层”时,通过自动选择工具很容易找到图层,因此现在很容易找到各个图层,因此需要个别设计师如何组织图层。关键是你做完了。
 
4.记住您通常使用的所有键盘快捷键
这是效率的一个重要因素。如果您发现自己经常使用特定的键盘命令,请记住它。如果您将所有主键盘快捷键都关闭,您将以指数方式提高效率。
 
一些重要的是保存,字体大小和前导,图层排序,网络保存和不透明度等等。Photoshop还使您能够创建自定义快捷方式。在我的书中,记住最重要的命令是保存文件。由于Adobe的随机崩溃,在经常保存方面犯错是很好的,而不是冒失去任何进展的风险。
 
快捷方式还与内容部分文件夹(如上所述)组织图层有关。使用键盘快捷键将图层添加到文件夹的顶部和底部比在无组织文件中重新排序图层更容易。这是您设计时组织文件的地方。记住常用的键盘快捷键并保持图层的有序性将极大地提高您的效率并帮助其他设计人员处理您的文件。
 
5.使用CC库
Adobe创建CC以来添加的最好的东西之一就是库。如果您还没有听说过它们,您需要查看这个有关如何使用它们的精彩教程。
 
我觉得每个设计团队都应该利用这个惊人的功能。库允许您创建一个品牌库,其中包含颜色,字体样式,照片,图标和符号(如页眉和页脚)等资源。借助图书馆,您可以使用单一品牌库轻松与来自多个组织的广告素材进行协作。
 
只需单击按钮,库就可以轻松更改颜色和更新文本样式。它们还有助于存储可在一个地方轻松更新的品牌图标,并在PSD中快速反映更新。这对于您的站点的页眉和页脚非常有用,您可能会在整个项目中进行小的更新。
 
我还在整个设计中使用CC库来设置字体样式。我将为桌面设备,平板电脑和移动应用程序设置英雄副本,标题,副标题,正文,免责声明等样式。关于视图切换,由于其易于扫描的能力,我发现自己使用列表格式比块视图更多。
 
图书馆也非常适合团队协作。您可以选择与其他广告素材协作,以便他们可以编辑和添加到库中,也可以共享库链接以便于访问。他们还有一个“从文档创建新库”功能,但我更喜欢自己创建库,因此它保持井井有条,只有最相关的资产。
 
遗憾的是,库有一些缺点,其中之一是文本缺少单独的字符和段落样式。我通过在单独的框中应用我的角色样式然后将不同的样式粘贴到一个框中以使文本框更容易在文件中管理来解决这个问题。另一个缺点是您目前无法全局更新字符样式。目前,库中没有组织能力来创建类别(颜色,字符样式等)中的子文件夹,但希望Adobe也在努力。
 
CC库工作的当前方式是最近更新/添加的资产将出现在最顶层。CC库颜色不能应用于文本框中的单个文本,只能轻松应用于形状和整个文本框。我确信Adobe正在努力解决这些问题,所以我并不太担心,特别是因为专业人士肯定超过了缺点。
 
6.将图像和矢量保持为智能对象格式
即使它会使您的文件变大,将图像和矢量保持为智能对象格式也会使未来的设计人员更容易编辑您的PSD。想象一下:客户回来时会进行编辑,包括重新剪裁英雄照片并对矢量图标进行小调整。如果PSD包括全分辨率照片而不是较小的光栅化版本,则可以更顺利地完成。当它们是Illustrator中的智能对象而不是光栅化图形时,矢量也很容易调整。
 
以智能对象格式拍摄照片的另一个好处是,当您将它们保存为PSD时,然后将它们作为智能对象放入文件中。使用放置的照片PSD可以轻松地在单独的包含照片文件中添加调整图层和编辑,而不是使源文件混乱。利用智能对象作为库图形可以为您提供更多的获胜组合。您不仅可以轻松编辑矢量对象,还可以在所有应用程序中更新库图形。
 
7.创建样式指南并坚持下去
在字体,颜色,照片,图标,插图等方面,很多品牌都会有一个通用的风格指南。这作为一种资源是有用的,但并不总是让你保持一致的网站特定样式。通过为我工作的每个特定站点创建Web样式指南,我大大提高了效率。
 
有时品牌会有多个不同风格的网站,所以我确保每个网站都有一个,所以我可以在设计时保持一致。当我需要按钮,图标,插图,照片等时,这也会创建一个简单的拖放资源。这不仅可以使您作为设计师更有效率,而且还可以帮助您在整个网站中保持一致的样式。
 
各部分之间的间距是多少?查看风格指南!什么是主要按钮颜色和填充?从风格指南中获取它!这也将有助于其他设计人员轻松,高效地轻松跳转网站设计。如果您将CC库的使用与样式指南合并,那么您将更加领先于游戏。
 
我为我工作的所有不同品牌创建了一个PSD风格指南,这样我就可以轻松抓取按钮和图标等元素。
 
许多设计师每次遇到设计中的新问题时都会想要添加新的样式。为了保持一致性,最好避免这种情况,并始终坚持您在样式指南中建立的标准。如果添加新图层和样式,请确保它们应用于整个站点。
 
创建的新样式越多,未来设计就越复杂,新设计师越难以跳过项目并保持设计的一致性。在许多情况下,在用户体验方面,一致性比不断创新更重要。尽管在项目开始时可能需要更多时间来创建Web样式指南,但它将提高您以后所有页面的效率。
 
我从Brad Frost学到的一个最佳实践是在设计过程中或在您正在处理的现有站点上进行界面库存。界面清单包括通过屏幕截图收集所有不同的文本样式,按钮样式等,并编译它们以发现不一致。然后,您可以向客户提交您的发现,以提出更新和改进建议。
 
由于网站在其存在的情况下触及多个设计师,因此在一致性部门中事情会变得非常繁琐。找到页面上元素的统一设计样式后,请务必更新样式指南,以便每个人都是最新的。
 
8.促进跨部门合作
许多从事营销生产(设计师,开发人员,撰稿人等)职业生涯的人往往内向,所以在谈到合作时很难走出自己的舒适区。也很难留下你的专业知识泡沫,特别是当它更容易与你所在领域的人交往时。即使它有时候很尴尬或不舒服,留下泡泡并定期与其他部门的人员合作可以大大提高设计质量和效率。
 
一个典型的例子是设计师和开发人员在重新设计方面的合作。您应该事先与开发人员会面,了解他们正在使用的框架,在网格系统上进行自我教育,并评估可能性。完成设计工作后,请务必共享您的Photoshop库,以便开发人员可以轻松访问调色板,字体样式等。提前分享样式指南以及您使用的任何组件也很有帮助。旨在为他们提供良好的开端。
 
使用库与您团队中的其他设计师协作也将帮助您保持一致并提高效率。赋予艺术总监或大多数高级设计师对图书馆和样式指南更新的责任将消除混淆并使品牌保持一致。只需确保在进行更新时有一条通信线路,以便每个人都在同一页面上。
 
保持理智
网页设计有时候会让人难以置信和充满挑战。它并不总是那样。通过遵循这些关于Photoshop效率的简单提示,您可以减轻很多压力。这不仅会改善您的福祉,而且业务和创意方面的经理和董事都会非常感谢您的辛勤工作,并对此表示赞赏。毕竟,每个人都拥有更加一致,高效,精美的设计。
  • 上一篇:南京网站设计认为应该在失败中建立设计成功
  • 下一篇:分面导航的SEO
  • 最新资讯
    2019-11-22
    南京小程序开发注意事项
    现在小程序的发展越加的成熟,加入到小程序中企业商家也越
    2019-11-22
    南京APP开发耗费时间长
    移动互联网在不断发展,移动App也成为了当下最热门的应用工
    2019-10-21
    餐饮微信小程序怎么做
    伴随着科学与技术的日新月异,我们的生活也正在发生着翻天
    2019-10-09
    南京APP定制开发
    一个移动APP项目研发规模可大可小,但都离不开以下几个成员
    2019-10-09
    南京定制小程序需要多少钱
    常常会有顾客向人们资询开发设计1个南京小程序必须要多少
    随机资讯
    2018-09-20
    南京网站制作说说为什么在元标题和H1标签上使用
    互联网上的一些“SEO指令”将元标题(标题标签)和H1(标题
    2018-09-20
    OS X MAVERICKS:设计师的有用新功能
    苹果公司发布了他们最新的OS X迭代版本,称为Mavericks(最终
    2019-09-13
    南京小程序开发哪家好
    南京小程序开发 哪家好?南京小程序开发哪个好?下面跟随
    2019-06-28
    南京小程序开发需要多少费用
    小程序可通过微信(扫描二维码、搜索、分享等多方接口)即可
    2018-10-10
    百度说熊掌账号标志着白帽SEO的春天,但......
    虽然百度继续声称其在中国的移动搜索结果越来越多来自熊掌