如何有效组织您的Photoshop层

WebDesignerDepot员工 经过 WDD员工  |  2009年8月17日

我们的设计师往往对开发人员感到沮丧 当他们与我们的工作带来自由时。

但我们必须了解他们’没有完全在错误。

把自己放在他们的鞋子里: 想象一下’s喜欢打开photoshop文件(psd),只能找到一个巨大的标记图层和文件夹,加上一堆未经检查的隐藏层和其他未被发现的半烘焙思想’t造成成果。

以下教程轮廓 如何创建有组织,设计师和开发人员友好的PSD文件.

这绝不是 只要 解决方案,但希望它将鼓励更好的网络设计世界实践。

在撰写本教程的同时,我采访了几位开发人员,他们有很多与多个设计师合作的经验。

他们的反馈非常有洞察力。我肯定会鼓励你 到达您使用的开发人员,了解您是否可以做任何事情来改进PSD文件。

 

1.基本文件夹结构

对于初学者,我将一个名为命名的PSD文件 “Website-Template.psd”.

此文件包含每个网站的基础知识,包括网格系统,基本文件夹结构和常见的微调(我使用1000×1440像素工作空间,带有960像素的网站宽度)。

此模板消除了为每个项目设置新文件的需求。


让’花点时间熟悉这些文件夹的基本组织。

你’请注意,我的默认文件夹结构只包含三个核心文件夹: “header,” “content,” and “footer”.

这个简单的集包含大多数网站使用的基本文件夹,并通过提供有效的组织平台来右脚开始。


你 will notice I’ve将所有文件夹标记为尽可能简单.

这些文件夹将容纳一系列子文件夹。随着您的设计成长,确保这些新文件夹标有清晰。

扩展 “header” folder, you’请参阅子文件夹的组织。

请注意 “navigation” 子文件夹通常是最复杂的:在您标记并创建此子文件夹时保持开发人员牢记,其内容很重要。


跳入设计前的最后一步是将此文件夹集合到命名的父文件夹中 “wireframes”.

当我们开始设计和着色时,这将有助于保持所组织的内容。它’S也是区分同一PSD文件中的各种页面的好方法。

 

2.为整个站点管理图层

当我们设计师进入凹槽时,可以轻松地进行创造性的结构。这是自律必须踢的时候。

我们必须强迫自己花点时间组织我们创造的层.

现在初始设置完成,我’LL概述了我如何将各种元素组合在一起。

如您所知,设计很少遵循线性路径,因此请记住,这只是可能无数的解决方案中的一个。

“如果所有设计人员遵循组织其PSD的标准程序[通过按照标准指南组织文件夹],您可以轻松击落一小时的开发成本,如果不是更多的话。更不用说你’D填补了设计和开发之间的裂痕,削减了从开发阶段常见的原始设计的任何颤抖”
马特西尔斯,Ruby在Rails开发人员

 

3.文件夹结构详细

We’LL从主体(内容)的概述开始,并使用标题完成,因为它具有需要特别注意的重要元素(导航)。


打开Content文件夹,您’ll notice I’ve划分了子文件夹 网站的视觉布局’S设计反映在文件夹结构中.

例如,因为内容有一个顶部和底部,我’相应地标记为: “top” and “bottom”.

I’在他们的文件夹中也将所有背景图形(渐变和其他镜片)放在自己的文件夹中。


现在让步’s open the “top” 文件夹(一个子文件夹 “content” 文件夹),其中包含几个常见元素,例如文本的空间,图像的空间等。


注意使用又一子结构进行其他层和文件夹。

文件夹已被指定为字体,图像和背景图形 (梯度,纯色等)。

因为字体可以分散开发人员,因为他们排序了PSD,让’s open the “fonts” folder to see how I’ve organized these.

我基于我对来自开发人员收到的反馈的方法,他们提到的是能够单击字体,以创建切片而不妨碍文本。


I’甚至额外的一步 鉴于该图层与字体相同.

这立即让开发人员知道在编码HTML时要使用的字体。

对于更复杂的模板,您可以创建其他文件夹以指定其他字体和重要标题字体。

(提示:标题通常在CSS / XHTML术语中标记为H1,H2等,因此以相同的方式标记您的标题字体是好的实践)。

与字体有关的任何东西都应该包含在 “fonts” 文件夹,使开发人员必须只需单击一次性“以删除所有字体并隔离站点的图形元素。

它可以看起来像这样:


始终使用你的直觉和 保持您的标签简单明了.

这种技术是’T关于手持开发商;它’s关于创建一个易于使用的文件,这些文件可以长期帮助每个人。

您在设计中的元素,层数和文件夹中的越多,更漂亮的东西将在开发阶段.

在整个过程中使用这种组织方法,以及您’LL感到惊讶它是第二种自然的速度。

 

4.导航和滚动

设置导航界面时— whether you’使用标签,纯文本或其他东西— 你’LL希望向开发人员指示标签应该如何看待特定状态.

例如,如果当用户滚动它时,选项卡是否会更改颜色?是特殊的JavaScript,如褪色,需要吗?可能性是无穷无尽的,所以不要’T期望开发人员能够阅读你的思想。到目前为止,文件夹只会显示这些细节。

我鼓励你 用设计简介补充您的PSD 这为您的设计的更复杂和详细方面提供了特定的方向。

让’S假设我们设计的用户界面(UI)具有标签结构。开发人员倾向于在提及各种时使用特定的术语 “states” of a tab (by “state”我的意思是将标签显示给用户的各种方式)。

在我与开发人员的采访中,我发现以下术语是最常用和可识别的。

请注意与每个描述对应的图像,并注意到文件夹结构如何反映我的思维过程。

 

5.正确标记标签及其国家

: 这“on”导航项(在这种情况下,选项卡)表示目前正在查看其相关页面。通常,它应该是最引人注目的。

离开:此状态表示标签可点击,但当前未在鼠标上查看或徘徊。


徘徊:此状态显示鼠标光标在非活动选项卡上播放或滚动时出现选项卡。这种状态的图形处理通常与“on”状态,但它仍然应该给自己的文件夹。

关键是一致性:无论您标记哪些标签,请务必保持它们一致!

 

6.关于标签的最终注意事项

打开导航中的一个子文件夹(“off”文件夹在下面的屏幕截图)中),您’ll see that I’ve再次在单独的文件夹中分组所有文本。

这是可选的,因为文本通常是标签图形化妆的一部分。

如果文本将在HTML中重新创建,我建议将其放在一个单独的文件夹中,以便开发人员可以单击它以便更容易地切片图形。

 

7.完成文件

这种策略似乎有点强迫,并注意结构和命令,当一个人陷入巨大的设计时并不容易。

尽管如此, 花时间在项目结束时进行适当组织和标记文件夹.

如果您的设计中具有复杂的插图,请尝试将它们压平入单个标记的层。

如果那可以’要完成(也许是因为复杂的混合方法),尝试将图层转换为智能对象,然后将它们转换为栅格化。

最终,目标是将图层和文件夹减少到裸露的最小值,然后尽可能清楚地标记它们。

 

8.朝着正确方向的一步

开发人员和设计师并不总是思考。

虽然许多设计师在创造性混乱状态下工作, 开发人员通常依赖于订单,结构和逻辑.

当我们设计时,一位小组织对于保持开发商的快乐有很长的路要走。

肯定没有一种正确的方法来组织PSD文件,所以联系到开发人员,看看你可以做些什么来创建让每个人都保持理智的PSD文件!


 

Josh Sears是一位作家,Illustrator和Designer,用于一系列基于Web的项目。他使他的生活成为铅网设计师,创意总监和共同拥有者 littlines.com.。你可以 看看他的工作 或者 按照他的推特上的更新.

在使用Photoshop时应用这些提示吗?您使用哪些其他技术来组织您的Photoshop层?