ShutterPress：设计和编码照片作品集网站（第1天：设计）

我是以照片为中心的网站设计的忠实拥护者...今天，我很高兴推出一个针对摄影师，插画家和其他视觉创意的新“完整网站”教程。在第一天，我将使用一些特殊的技巧和技术在Photoshop中设计模板。在第2天，我们将完成编码阶段的“飞行前”准备，在第3天，我们将详细介绍。在第4天，我们将向您展示如何使用相同的代码创建三个完全不同的网站原始HTML。 准备开始了吗？ 我们开工吧！

简介：关于设计

与任何Web设计项目一样，确定任何项目的目标也很重要...因此，在深入探讨之前，让我们先谈谈最终目标是什么：

设计一个网站模板，摄影师可以使用它来展示自己的作品集。
使用简单，通俗易懂的导航界面。
在分页的网格布局中将图像显示为缩略图（不包含任何文本）。
允许轻松的布局灵活性。
编码！使用符合标准HTML / CSS和免费的开源jQuery插件。

我要说的最后一件事也许是最重要的：必须使用尽可能少的工作量进行100％可定制 ！ 这对我们意味着什么？ 我希望任何人都可以重新命名和重新设计整个布局，而无需重写任何核心HTML来解决问题。理想情况下，这意味着通过交换一些图像（徽标和自定义背景图像）和一些CSS，可以创建完全不同的结果……这就是为什么在本系列的最后一天，我们将全过程用于创建自定义项！

好的，现在我们的目标已经明确定义，让我们开始吧！

****

该****旨在与下面的书面内容一起提供。将其视为“补充”材料-我不会覆盖书面部分中的所有内容，但是有时候很高兴看到其他人在Photoshop中工作以获取其他您可能不会使用的技巧，效率技巧和其他技术熟悉。

书面教程

下面是完整的书面分步指南。我们将从空白的Photoshop文档开始，但是您也可以下载演示PSD来检查您的工作是否符合我的要求。

步骤01：设定文件

首先创建尺寸为1280 x 800像素的新文档。为什么？因为这将为我们提供一个不错的大画布。我们最终设计的宽度实际上不会是1280px，但是我们希望看到一些背景颜色，就像通常在大浏览器窗口中看到的那样。

容器应为多大尺寸？

任何Web项目的第一个实际难题是决定将要使用的文档的大小。在我们的案例中，我希望该设计位于屏幕的前面和中间，在较小的显示器上尽可能多地填充空间-在大型显示器上看起来不要太小。

宽度注意事项：我选择使用994px作为总宽度。这个数字有些随意-可能宽几个px或缩小几个px，但最终它将完成工作。为什么？因为它适合1003px“安全区域”内，对于当前正在使用的最流行的浏览器，在两侧都有一点填充是安全的。
高度注意事项：在Photoshop中，我将使用644px的高度。在本设计中，高度是另一个任意数字。 为什么？ 因为1）它可以从CSS进行调整，2）我们将让此“ flex”适合我们放入的内容，以及3）我对折页高度的担心不如对大型项目。

这里要注意的关键是，一旦完成，所有这些操作都可以从CSS进行100％的调整。因此，如果您偏爱较宽的布局和更浅的高度，则可以在决定偏好的几秒钟内获得此效果。这里的想法是即使我们使用固定大小的模板，也要使事情保持顺畅...因此，现在不要过于依赖精确的数字。

警告：这种“保持流畅”的方法实际上是此特定模板所特有的...通常，我将在开始任何项目时都进行很多精细的分析，以找到理想的尺寸，我们将在其他tut系列文章中进行介绍。

我们应该使用网格系统还是自由式？

虽然有很多优点，使用预建的电网系统（如960gs或978gs），我有什么，我想建立，并没有找到一个网格系统，将立即适应我设计一个非常明确的目标，我选择自由样式化此布局。

自由布局的影响是什么？ 首先，我们将不得不更加小心自己创建的每个内容模块的尺寸，因为我们没有指南来告诉我们应该去哪里。要创建一个外观真正统一的模板，我们只需要更加努力地创建自己的网格系统即可。

绘制内容模块

绘制圆角矩形：现在，我们确定容器尺寸为994px x 644px ，继续绘制该尺寸的圆角矩形（使用12px半径 ）。打开“信息”面板（“ 窗口”>“信息”或F8 ）以在绘制矩形时查看其大小。

请注意，此时矩形的颜色无关紧要。虽然我们最终将其变成白色，但现在我们希望看到它从背景中脱颖而出。

创建阴影效果：我将使用与“ 创建自己的多汁选项卡式滑块 ”教程中使用的方法相同的方法，因为这是获得阴影的最简单方法，该阴影将易于切片并变成透明的PNG。编码时间。

要创建此阴影，只需抓住画笔工具并将其设置为60px的大小和0％的硬度即可。

然后， 创建一个新的空白图层以进行绘制，按住Shift键以绘制一条直线，然后只需将光标拖动到容器矩形的大约一半上即可 。

最后，我们将使用“ 自由变换”工具（ Cntrl + T ）将其稍微倾斜以产生弯曲效果（我使用大约2.5的角度）。为什么要把这个角度呢？因为如果光源看起来有些弯曲，这将有助于创建一些额外的尺寸。

现在，让我们复制该刷过的图层（在图层上选中时， 按住Cntrl + J ）并将其水平翻转（ 编辑>变换>水平翻转 ）。将新的翻转的画笔层滑动到与容器矩形的另一侧大致匹配的位置。结果应该是与第一个阴影相反的阴影。

将两个阴影层都移动到“框架”层的后面并缩放它们（选择两个层并按Ctrl + T），以使它们恰好位于框架矩形的总宽度之内。

最后，将两个阴影层合并在一起（ Ctrl + E ）并将阴影层微移到正确的位置（使用基本选择工具[ V ]并使用键盘微移）。您还可以调整阴影层的不透明度以适合您自己的个人喜好。我用了大约60％ ，您可以根据自己的需求做更多或更少的事情。

附加步骤：要增加深度，请在阴影上使用“ 透视变换 ”，使其看起来像回到太空中。变换图层以去除任何像素伪像后，只需在图层上应用一个小的高斯模糊即可。

如果您要寻找更多的戏剧性，这是又一个奖励步骤：尝试创建一个重复的阴影层，该阴影层要小70％（使用“自由变换”和百分比缩放来调整此阴影层），更多的模糊度以及不同的不透明度（70 ％）在主要对象的内部创建一个“核心阴影”。

继续命名您的阴影层（一旦您完成它们的播放），然后将它们放置在名为Shadows的新层文件夹中 。当我们准备好进行分解时，组织将使定制变得容易得多！

创建背景：

我们将要创建的背景是淡蓝色的“ 噪波图案 ”。我将快速进行介绍，但是要了解有关创建这些模式的更多信息，请在此处查看有关它们的完整教程。

首先创建一个新的空白层，并用白色填充（ Shift + F5 ）。

现在让我们使用Filter> Noise> Add Noise添加一些噪声。您可以根据自己的喜好进行调整，但是我已经用了14％的金额。

在混合模式面板下，将新的“噪声层”设置为“多个”，然后在该层后面绘制一个矩形（填充颜色＃e1ebef ）。

最后，让我们在其他两层之上添加一个新的调整层（“ 层”>“新的调整层”>“色相/饱和度” ），以使我们的噪声不会使旧的灰色变淡。

在调整层的“调整”面板（“ 窗口”>“调整” ）下，我使用了（ 色相：200，饱和度：100和亮度：+60 ）的设置，并选中了“着色”框。您可以一直玩到获得自己想要的效果。

继续并将这三个新层（调整层，噪声层和背景色层）放置到名为“背景色”的新层文件夹中 。

[检查点]：设置容器盒的颜色

最后，既然我们已经添加了一些背景色，那么让我们继续将容器框的颜色设为白色。我还在容器框周围添加了一个1px的浅色描边（颜色为＃d8d8d8 ），以帮助其从背景中脱颖而出。

此时，您的文档应如下所示：

您的图层也应该这样组织：

步骤02：创建导航边栏

现在，我们已经创建并设置了基本的内容容器，是时候开始使用内容填充它了。我们将从导航侧边栏开始，因为这将定义以后我们有多少空间用于内容。

创建边栏空间

应该有多宽？ 侧边栏的宽度实际上取决于您...我选择使用235px作为宽度，因为它可以或多或少地适合我想要的内容（有足够的空间容纳长页面标题，社交媒体小部件和搜索栏）。您可以根据自己的需要进行调整...就像我一直在说的那样，以后都可以通过CSS进行调整。

首先，只需使用与容器边框（ ＃d8d8d8 ）相同的颜色沿容器的垂直轴绘制一条1px的线即可。将其放在边缘左侧约285px处。

接下来，在此处绘制一条指导线可能会有所帮助-距容器边框的边缘约20像素。我们将以此为指导将所有内容放置在何处，以使内容看起来统一且对齐。

徽标

我在这里不做过多介绍，因为，您可能会使用自己的徽标;）。简而言之，我从一个简单的框架图标开始（来自Noble图标集），然后将我自己的照片添加到框架中。然后我在26pt处使用了Museo字体；使用2种不同的权重和颜色创建一些视觉效果，我在图标旁边很好地设置了模板的标题“ ShutterPress”。

同样，您可能会在此阶段使用自己的徽标（或客户的徽标）...因此，我将跳过图层样式和其他调整。请随意在演示PSD中查看它们！

只需将徽标放在侧边栏空间内即可。请注意，我们使用的顶部填充和右侧填充与左侧填充的填充量大致相同。

诸如保持对象周围的空间与徽标制服一样重要的小技巧是将好的设计与出色的设计区分开来的一件事。

手风琴导航

手风琴导航是我们要模拟的第一个功能元素。因此，值得注意的是，我们将在此处输入一些灰色区域。我们希望像使用它一样对它进行模拟...主要是这样，如果我们将其展示给某人（例如开发人员），他们将了解在所有可能的交互状态下它的外观。

因此，我们希望显示一个活动链接 ，以及至少一个开放式手风琴和一个封闭式手风琴 。

为此，我将使用一种简单的字体-Lucida Sans ，字体为12pt ，前导字符设置为36pt ，黑色颜色为＃252525 。我碰巧更喜欢在Photoshop样机中为网络字体使用Sharp消除锯齿设置，但是您可以使用任何想要的设置。

我还在活动链接中使用了一个小的变体：粗体，颜色设置为＃0285da ，它恰好模仿徽标以及背景色。

使用一些简单的键盘空格来缩进链接，这些链接最终将成为我们的手风琴嵌套链接。

请注意，我们使用的是相同的垂直准则来悬挂文本，以使其与徽标很好地对齐。

36磅的领先优势足以在每个链接之间设置一条简单的水平线，因此，让我们继续进行此操作。对这些水平线使用#EAEAEA颜色，该颜色比我们的主要边框颜色稍浅。为什么？这将有助于确定这些规则的固定性要比其他规则低一些。

现在让我们添加手风琴按钮。首先创建一个半径为2px的圆角矩形，大小为11px x 11px。添加以下图层样式：

从底部到顶部的浅灰色渐变（从＃E6E6E6到白色 ）。

#bfbfbf的 1px外部笔触 。

复制该按钮层，并添加简单的文本“ +”和“-”以完成按钮。如图所示放置它们：

社交媒体小部件

从现在开始，我们将对所有新元素使用相同的基本样式规则。边框应与我们之前使用的灰色相同。填充也应该与之前元素相同。字体样式和颜色也一样。因此，我不会为您重新编写这些笔记而烦恼，只需记住它们！

对于“社交媒体小部件”，请继续获取您选择的图标集（或在此处查看我们的大量图标集）。我们将使用您选择的任何图标集的16px x 16px版本。该演示使用此set ，但是您可以使用任何想要的东西。

我还选择了对社交图标进行去饱和（“ 图像”>“调整”>“去饱和” ），以免它们偏离核心内容区域。添加图标或您选择的图标（隔开几像素），并添加“社交：”文本，以便它们具有标题。

添加我们的水平线边界以进行分隔，并在搜索栏下方留出一些空间。

搜索小部件

搜索窗口小部件非常易于创建。只需绘制一个25px高的圆角矩形（半径为8px），并以1px的笔触 ＃e0e0e0放置一个放大镜图标即可。我使用了Fugue图标集中的一个（它是免费的），但是您可以使用自己的图标来添加一些样式或耀斑。

哇！我们的侧边栏到此完成。您可以添加自己的自定义窗口小部件或将其保留不变。现在是时候在我们的内容区域中填充一些内容了！

步骤03：创建网格模板

在接下来的两个步骤中，我将向后做一些事情。通常，您将使用首页设计开始进行网页设计……人们会首先到达该页面。但是，这种情况很少见，可以说子页面（即图库模板）比实际的目标页面更重要。

因此，知道我总是可以创建一个精美的主页设计之后，我将开始使用Gallery Template进行内容设计，因为它给我们带来了更多问题。这些问题中的主要问题是：

我们将使用多少尺寸的缩略图
如何最好地隔开这些缩略图
我们希望每页显示多少张缩略图
如何解决固定布局中的分页问题

有趣的是，一旦解决了这些问题，我们实际上可以很快创建主页。从这里开始，我们将使自己能够创建一个杀手级的缩略图库，而不必试图满足从首页开始可能偶然设置给自己的任何限制。

好的，让我们开始吧！

创建内容空间

首先，我将建立一个基本的填充量，我希望始终将其保留在内容区域中。在我们的例子中，我选择了32px作为数量。它比导航的行高小一点，但又不太小，以至于感觉不舒服或受约束。

这给我留下了大约696px x 586px的有效区域（再次，高度是灵活的，因此我们不必对此特别担心）。

找到完美的缩略图大小和填充

定义了活动内容区域后，现在我们要选择理想的缩略图大小和填充。弄清楚这不是火箭科学……从本质上讲，我只是玩弄了几组粗略绘制的矩形，直到发现一些看上去和谐的东西。

现在，我知道“和谐”这个词不是很具体...那是什么意思？知道我要适合每页15-20张图像后，我尝试了各种缩略图的大小/空间组合，直到找到能反映正负空间的良好平衡以及精致的层次感的组合。诸如黄金分割率（Golden Ratio）之类的事情在其中发挥了作用，但我会坦白地说，我只是承认在这种特殊情况下我对此视而不见。这里没有魔术，只是进行了许多实验。

那么，最终的公式是什么？ 宽155像素x高125像素的缩略图，设置为4列（在我们的示例中为4列，填充了我们的高度）。

填充：每个缩略图之间的水平间距约为21px，垂直间距约为18px。 为什么会有所不同？

因为我们要处理的是“横向”布局（即宽度要比窄得多），所以在整个设计中保持相同的形状比例感觉很对。

请注意，我选择的最终缩略图大小也如何反映了此景观比例。因此，有意义的是，行之间的填充要比列之间的填充少。

这是最终结果：

请注意，我在底部留了大约50px的空间以插入某种分页（用户从缩略图的页面导航到下一页的方式）。自然，如果没有足够的缩略图来触发分页，我们将在底部更紧密地裁剪布局。

添加一些视觉样式

缩略图的视觉样式也很重要。因为我们非常注意在整个设计中创建许多小的抛光细节，所以看到带有硬边的普通旧图像缩略图感觉很粗糙。

我们将添加一些细微的样式来减轻这种负担，并使我们的图库网格更加精致。将以下图层样式应用于每个缩略图：

2像素的内部笔划（用CSS表示，将变为padding ）#EAEAEA

1px阴影（以CSS术语将成为边框）＃F2F2F2

我将以100％的比例放大以显示最终样式：

现在我们已经建立了网格，让我们添加一些真实的图像来赋予这种布局一些生命：

分页

我们几乎已经完成了此页面...现在，我们需要的是用户从缩略图的一页导航到下一页的一种方法。这称为分页。有很多方法可以做到这一点（有些方法比其他方法更复杂）。在我们的例子中，我们需要一种简单的分页方法...所以我选择使用一个简单的左箭头| 右箭头方法-即：（）。这是更直观的分页方法之一，因此对我们的情况而言是有意义的。

让我们继续创建两个18px直径的圆：

请注意，我只是从以前使用的手风琴按钮复制/粘贴了图层样式 。为什么？因为复制视觉样式有助于确保我们的布局感觉统一……而且，实际上没有理由浪费精力尝试设计一种全新的样式。一致的图层样式用法实际上将有助于我们网站的可用性。

绘制圆圈后，添加箭头（上面已经显示了）。在我的情况下，我在Photoshop中使用了自定义>形状，但是您也可以轻松地使用自定义文本“>”符号。由于这不是初学者，所以我假设您可以通过某种方式弄清楚如何在其中获得这种形状；）

鳍！这实际上完成了此内容页面。使用我们已经建立的相同基本样式和填充规则，我们也可以轻松地将其转换为其他网格布局（例如2x2网格或3x3网格）。

步骤03：创建“初始”页面模板

好吧-进入设计阶段的最后阶段！我们可能可以理清如何创建各种其他支持页面，但是现在我们真正需要的是首页设计。由于这是一个针对摄影师的模板，因此照片显然应该占据中心位置。不过，我们还需要一些描述性文字（供摄影师解释他/她是谁，他们提供什么样的服务，等等）

回收我们的内容空间

宽度注意事项：在大多数情况下，我们只是复制图库模板中使用的活动内容空间。我将通过将填充从32px更改为20px来进行一些切换。 为什么？ 这将为我们提供一些额外的空间来使用“全尺寸”图片。这是整体布局中的一个非常细微的变化，但是影响应该是巨大的，因为我们将能够在空间中放置大量图像。

高度注意事项：正如我们一直在说的那样，高度实际上是可变的，最终将由个人用户/设计者/客户自行决定您要在此页面上显示多少内容...就我而言，我会尽力使此页面的尺寸与我们的图库页面相同。

这些考虑的结果是一个活动空间要比我们在图库模板中使用的空间稍大： 720px x 604px 。