本教程详述如何使用Photoshop CS6设计简洁、专业的投资组合页面，涵盖自定义网格创建、排版样式及颜色对比运用，最终成果将便于开发者进行编码。
在本教程中，我将使用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。 之后，选择图层，图标和文本，并将它们放置在工作图像的垂直基准线的中心。
你完成了！
所以你有它。 我们从头开始，以有组织的有效方式逐步创建了投资组合网站布局。 我们构建的文件已准备好交给开发人员，开发人员可以将其拆开，找到所需的所有元素，然后为浏览器构建文件。
我希望您能通过学习本教程学到新东西。 如果您有任何疑问或困难，请随时在评论部分或通过Twitter ping我。
扫一扫
820
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
