使用Photoshop设计时尚的时间轴投资组合页面-优快云博客

在本教程中，我将使用Photoshop CS6设计一个简单的，干净的，三列的投资组合页面，并带有一个趋势时间表。在此过程中，我们将着眼于创建具有准则的自定义网格，样式排版以及使用颜色和对比度来达到我们想要的美观。完成的PSD文件将准备好交给开发人员进行编码。

教程资产

为了继续进行下去，您将需要以下（免费提供）资产：

Unsplash的雨滴照片
Unsplash的纽约天际线照片
Dribbble的笔记本PSD模板
Chapps免费矢量图标
Lato字体从Font Squirrel
User Inter Faces的头像
图标查找器中的Dribbble图标
Iconfinder的Twitter图标
来自Iconfinder的Facebook图标
Iconfinder中的Google+图标

准备好文档

第1步

首先使用下面显示的设置创建一个新文档（ File> New… ）。

第2步

让我们设置一些指南，以便我们的布局具有足够的空间并看上去平衡。转到查看>新指南…并设置以下指南：垂直为20像素，50像素，115像素，230像素，550像素，570像素，875像素和1180像素，水平为60像素。

提示：您还可以使用GuideGuide Photoshop插件使此过程更快。

第三步

我们将从一开始就保持文档的良好组织，因此让我们创建三个名为Left Sidebar ， Descriptions和Work图层组。坚持使用此Photoshop礼仪可以使事情井井有条，并且易于浏览或编辑。要创建组，请进入“ 图层”>“新建”>“组...”，并为每个组指定一个标题。要快速创建组，只需单击图标。

设计左侧边栏区域

左侧的侧边栏将用作用户个人资料，头像，社交链接和主要导航的区域。让我们来构建它！

第1步

选择矩形工具（T） ，将前景色更改为#11171c并在“ Left Sidebar组内绘制一个230x1320px的矩形。应将其放置在文档左侧和第四条垂直准则之间的文档左侧。

第2步

在先前创建的矩形形状上方创建一个新组，并将其命名为Profile Pic 。之后，选择椭圆工具（U） ，然后按住Shift键，绘制一个100x100px的圆圈并将其放置在第一个水平基准线的正下方。它也应该以第三条垂直指南为中心。

第三步

现在前往uifaces.com并获取可用的头像之一。另外，只需找到您自己的照片并将其粘贴到最近创建的圆形上方即可。之后，按住Alt键并将鼠标悬停在照片层的缩略图上，直到看到一个向下的小箭头。看到它时，松开该按钮，它将创建一个Clipping Mask ，将您的照片绑定为圆形。使用移动工具（V）将其对齐，但您认为合适。

第4步

现在，通过单击组标题旁边的小箭头最小化“ Profile Pic ”组。之后，将前景色更改为#FFFFFF并选择Horizontal Type Tool（T） 。选择Lato（常规）字体，将大小设置为16pt，然后写下我们的投资组合所有者的名称。就我而言，这是完全虚构的Chris Johnson 。将其放在个人资料图片下方25 像素处，并确保其与第三条垂直基准线居中。

第5步

现在，我们需要对我们的投资组合进行简短描述，以便访问者立即了解所有内容。我们将使用相同的工具；我们要做的就是将字体大小减小到14pt，并写一些关于投资组合所有者的简短代码。为了使它看起来井井有条且平衡，请将其放低20px，以便有一定的呼吸空间。

第6步

好。现在，让我们放置一些社交媒体图标，以便轻松地与投资组合所有者联系。创建一个具有以下标题的新组： Social Media 。之后，前往Iconfinder将Dribbble ， Twitter ， Facebook和Google+图标下载为PNG。将它们拖到您的Photoshop文档中，然后将它们放在“ Social Media组中。现在，右键单击“ Dribbble”图标，选择“ Blending Options ..”，然后应用“ Color Overlay”选项。将颜色设置为白色，而不是默认的红色。

步骤7

所有其他图标也应为白色，因此让我们将相同的图层样式应用于其余图标。只需右键单击Dribbble图标图层，然后选择复制图层样式 。之后，按住CMD键，然后选择Twitter ， Facebook和Google+图层。再次右键单击其中之一，然后选择“ 粘贴图层样式” 。最后，对齐图标，使每侧留出10px的间隙，并将该组放置在描述文字下方20px 。

步骤8

让我们将前景色更改为白色#FFFFFF ，然后选择“ 线条工具（U）” ，将权重设置为1px ，然后按住Shift键，从左文档边缘到第四条垂直基准线绘制一条水平线。将其从图标移动50px 。

步骤9

为了使我们的线在视觉上更加微妙，让我们将线层的不透明度降低到10％ 。

第10步

现在让我们集中精力进行导航，因此创建一个名为Navigation的新组并将其放置在深色矩形层上方。之后，从“ Chapps的免费矢量图标”图标集中选择一个文档图标，并将其拖到投资组合文档中。点击CMD + T将图标调整为13x16px 。之后，双击图层名称并将其重命名为“ Work icon 。完成后，双击图层缩略图并将颜色更改为#d35136 。广场左侧边缘的细微线和20像素图标下方40像素 ，所以与第一垂直对齐方针。

步骤11

现在介绍一些导航项。选择“ 水平字体工具”（T） ，选择“ Lato”（粗体）字体，将大小设置为14pt，然后编写以下内容： WORK 。将其放在第二条水平基准线的前面，并确保其与“ Work icon垂直对齐。

步骤12

将前景色更改为#424a51并使用相同的文本工具，写下一些类别进行工作，每个类别都从新行开始。确保将行高设置为24pt，以便我们的类别易于阅读。将类别图层放置在先前创建的文字图层下方20px处。

步骤13

我们需要指示链接的活动状态。对于活动类别，请使用白色#FFFFFF ，只需在仍然选择“ 水平字体工具（T）”的情况下单击文本，突出显示第一个类别并更改颜色。

步骤14

现在，从以前使用的图标集中选择一个用户图标，并使用CMD + T将其大小调整为16x16px 。在图标图层缩略图上单击两次，然后将颜色更改为#27b599 ，将图层重命名为“ User icon以便更轻松地管理我们的图层。将其放在最后一个类别的下方30 像素处，以为其提供一些负空格，以用作分隔符。

步骤15

将前景色更改为用于User icon绿色#27b599 ，然后选择“ 水平 #27b599 工具（T）” 。选择Lato（粗体）字体，将大小设置为14pt并写入ABOUT 。就像您在上一节中所做的那样，将此标签放置在用户图标之后。然后将前景色更改为#424a51并为“关于”部分输入一些链接标题。

步骤16

现在让我们在导航上创建最后一部分；联系。 Free Vector Icons from Chapps选择邮件图标，并将其大小调整为16x13px，之后将其颜色更改为#088ecc ，并将其与之前的图标一致地放置，在“ About部分的最后一个文本层下方30px 。输入CONTACT文本后，将前景色更改为#424a51并写下该部分的一些链接标题。

设计说明区

向右移动一个方块，现在让我们开始了解我们投资组合项目的描述。

第1步

通过单击组名旁边的小箭头，我们将最小化当前使用的Navigation和Left Sidebar组。展开“ Descriptions组，将前景色更改为#f7f7f7然后选择“ 矩形工具”（T） 。之后，在Left Sidebar的边缘与第五条垂直基准线之间绘制一个垂直矩形形状。此矩形应为320x1320px。

第2步

现在将前景色更改为#e7e7e8并选择Line Tool（U） 。将“权重”设置为1px，然后在按住Shift键的同时，在第五条垂直基准线上从上到下绘制一条垂直线。这将在“ Descriptions组部分背景和主背景之间建立更好的视觉分隔。点击CMD +; 隐藏/取消隐藏准则。最后，将线图层重命名为V line以便稍后使用。

第三步

我们将绘制另一条垂直线，因此将“权重 ”线更改为3px并在文档上绘制另一条线（按住Shift键可保持完美的垂直度）。在图层名称上单击两次以将其重命名为“ Timeline 。之后，从Left Sidebar边缘向右移动24px，从文档顶部向下移动30px。

第4步

将前景色更改为我们先前使用的红色#d35136并选择椭圆工具（U） 。之后，按住Shift键并绘制一个11x11px的圆圈。将其从Left Sidebar区域的边缘向右20px放置，从文档顶部向下20px放置。我们的小圆圈应该很好地放在最近创建的行的顶部。

第5步

现在，右键单击最近创建的圆形图层，然后选择“ 混合选项...” 。单击描边。 将大小设置为3px，将位置设置为外部，将颜色设置为#f7f7f7 。此背景色的笔触将产生我们的圆漂浮在直线旁边的效果。

第6步

将前景色更改为#11171c并选择Horizontal Type Tool（T） 。通常，选择Lato（粗体）字体，将大小设置为14pt，然后输入作品的日期，例如“ 2013年11月7日”。然后，使用“ 移动工具（V） ”将日期图层移动到红色圆圈的右侧20px，从文档顶部向下移动20px。

您现在应该已经注意到我们间隔中的一个模式。重要的是要保持一致，并对不同元素使用有节奏的间距，以使设计看起来平衡。

步骤7

将前景色更改为#5e5e5e ，使其比日期颜色要浅一些。这将创建一个视觉层次结构，使阅读更加容易。使用相同的水平字体工具（T） ， Lato字体，但是这次将字体粗细更改为“ 常规”，并输入几行以进行简短的工作描述。然后，通过按两次Enter按钮使一个换行符中断，并输入工作的客户端和标签，例如：

客户：Despreneur
标签：网页设计

突出显示“ client”和“ tags”并将字体粗细设置为Bold ，因此它们将与描述不同并被视为链接。最后，确保管路高度设置为18pt，以便我们的管路有足够的呼吸空间。

步骤8

要复制我们刚刚制作的功能，请选择红色圆圈，日期和描述图层。然后点击CMD + J ，或右键单击并选择Duplicate Layers ... ，然后点击OK 。将重复的内容移动到原始内容下方几百个像素处。我们稍后将调整其位置，因为它取决于我们将放置在其旁边的工作图像高度。

设计工作区

我们布局的最后一个垂直部分是针对作品集本身的。让我们来构建它！

第1步

我们将像往常一样通过最小化当前使用的“ Descriptions组并打开“ Work组来开始。选择矩形工具（U），并在第六和第八个垂直辅助线之间绘制一个610x400px大小的矩形（这次颜色无关紧要，只需确保它可见即可）。将其放置在文档顶部下方20像素处，使其周围具有20像素的空间。

第2步

现在选择您的工作图像，我将使用我先前设计的Notebook PSD Template屏幕截图。将其拖到您的Photoshop文档窗口中，并确保将其放置在先前创建的矩形图层之上。按住ALT键，将鼠标悬停在屏幕截图层名称上，直到看到一个向下的小箭头。看到它们时，松开它们的键，它将创建一个剪贴蒙版，因此您的图像将仅在矩形区域内可见。最后，按CMD + T并根据需要调整图像大小。

第三步

选择矩形图层，进行复制，然后将其移动到第一张图片下方20px。像以前一样添加另一幅您的作品图像。对于第二个工作示例，我使用了来自unsplash.com的 Raindrops照片。之后，创建第三部分并将其放置在第二部分下方20px处。对于第三个工作图像，我使用了NYC Skyline照片，再次来自unsplash.com。

第4步

现在，我们需要返回并确保所有内容都正确排列。再次打开“ Descriptions组，然后找到红色圆圈，日期和描述层。选择所有都按住CMD键并将其向下移动，直到它们与第二个投资组合图片的顶部对齐。通过单击CMD + J或右键单击这些层并选择Duplicate Layers ...来复制这些层 。之后，将它们放置在第三个工作图像旁边，并与该图像的顶部对齐。

第5步

太棒了我们快结束了。最小化“ Descriptions组，然后再次打开“ Work组。之后，从图标集中选择刷新图标，并将其拖动到投资组合文档中。点击CMD + T，并将其尺寸调整为20x20px。在图标层缩略图上单击两次，然后将颜色更改为#a0a2a4 。最后将其放置在工作图片下方20px。

第6步

最后一步！让我们创建一个动态元素，该元素将在我们的网站向下滚动且服务器正在加载更多工作时显示。选择“ 水平字体工具”（T） ，选择14pt大小的Lato（粗体）字体，然后输入文本“ Loading... 。将其放在刷新图标旁边，然后将其向右移动10px。之后，选择图层，图标和文本，并将它们放置在工作图像的垂直基准线的中心。