在

本教程中，尚略 上海网站设计公司将指导大家创建一个简单而干净的网页。我们将使用一些醒目的图像，一个干净的调色板和平滑的字体。我们先从创建一个网页版本开始，然后我将向您展示如何快速适应移动端视图。

教学资产

步骤1

首先使用下面所示的设置创建一个新的Photoshop文档（File> New ...）。您可以随意使用任何您喜欢的尺寸的画布 - 毕竟网页不是固定的宽度。

确保分辨率设置为72像素/英寸

我们设置一些指南，使我们的布局有足够的空间和外观平衡。我不总是使用网格，但设置一些指导方针将确保整洁，并有助于定义我们的网站的宽度。转到视图>新建参考线，并设置一些数值。我通常选择1000px作为网站宽度，并从角落添加一些参考线，所以它有空间呼吸。

注意：垂直于100像素，600像素和1100像素。

步骤3

坚持  Photoshop的礼仪，  我们将保持组织，易于浏览和编辑。我们创建三个名为Header，Photos和Contact的图层组。要创建组，请转到“  图层”>“新建”>“组”， 并给出每个“标题”。要快速创建组，只需单击图标。

设计标题区域

标题或“上方”区域在与用户接触并确保访问者停留在网站上起着非常重要的作用。对于这个网页，我会用一些美丽的山脉和简单的信息来拍摄冒险和挑战。

步骤1

我们先创建博客的背景。Header 组内部使用矩形工具（U）绘制任何颜色矩形。在我的情况下，我绘制了1200x600px大小的矩形，并将其放在文档的顶部。

现在下载山照片，将其拖动到Photoshop文档，并将其放在矩形图层上方。将图像重命名为可以识别的东西，在我的情况下，我已经使用了IMG。之后按住Alt键和鼠标在照片层上，直到看到一个小箭头指向下方，然后释放它。你刚刚创建了一个剪辑面具。

现在打  Ctrl + T  并调整照片大小以适应您的需要。

提示： 按住  Shift  键按比例进行变换。

步骤2

让我们对我们的形象进行一些调整，使其看起来更加生动和难忘。创建一个新的层，称之为Shadow并创建一个 剪辑蒙版，就像我们为山形象一样。然后选择渐变工具（G）并设置渐变颜色从黑色#000000变为透明，按住Shift键从放置的图像的底部拖动到其中间。最后将梯度层的不透明度降低到60％。

我通常使用这种技术使明亮的图像变暗，并将白色文本放在顶部。

步骤3

让我们添加一些更多的颜色到我们的标题，让它更加好看。创建一个新图层，将其命名为渐变，然后再次选择 渐变工具（G）之后，设置渐变颜色从紫色#37056b 到粉红色#ff01fc（或任何其他颜色），并从图像的左上角拖动到右下角。最后，将梯度层的不透明度降低到20％。

步骤4

时间为我们的投资组合设置标志。选择文字工具（T）并输入您的logo，无论是您的姓名还是昵称。对于本教程，我使用了非常时尚的Kaushan Script 21px大小的字体。将您的新徽标放置在您网站左上角的第一个垂直参考线旁边。推下50像素给它足够的负空间，所以它看起来干净、专业。

步骤5

我们会添加一些社交媒体图标，以便人们可以跟随您和您的工作。将Facebook，Twitter和Instagram图标,从Iconfinder拖放到您的Photoshop文档，重命名图层，以便快速识别图层，并将其放置在最后一个垂直参考线旁边的右上角。之后，单击其中一个图标图层上的鼠标右键，选择混合选项，并应用白色覆盖选项#ffffff。对其他图标执行相同操作。

确保您有足够的空间，并将您的图标与您的徽标水平对齐。

步骤6

我们完成我们的标题区域。我们有一个美丽的形象和空间。让我们简单介绍一下简讯，让访问者了解这个网站的内容。

选择文本工具（T），并使用36px尺寸的Lato（黑色）字体输入几个字。我使用了“HELLO！I''''JONATHAN”。之后，在一个较小字体的新行abd上，输入一些关于您或您的工作的更多内容，访问者可能会发现有趣的内容。对于本教程，我使用了16px尺寸的Lato （Regular） 

I love to travel all around the world and design beautiful things.

确保线高度足够大，以便您的文本有空间呼吸。最后，将文本放在标题区域的中间。

设计照片区域

在这方面，我们将从Instagram的照片中展示一些工作的例子，展示艺术家或设计师的熟练程度和相关性。

步骤1

我们先改变这个区域的背景。通过单击组名称旁边的小箭头来最小化标题组，并打开照片组。之后，选择  矩形工具（U）并绘制一个略带灰色的矩形。在我的情况下，我用于#eeeeee 颜色并绘制了一个 1200x880px的矩形。

步骤2

现在我们来添加一条描述工作的线。这可以是简单的“最新作品”，或在我的情况下“最新的照片”。文本应该可读，因此我使用了灰色#9b9b9b，字体是Lato（Bold）12px大小。请注意，字母间距相当大（270），仅用于对该区域的标题进行风格化，并且不适用于常规文本。再次给您的标题足够的空间，并将其从80像素的图像中移出。 

步骤3

步骤4

步骤5

设计联系方式

步骤1

单击组名称旁边的小箭头，最小化照片组，然后打开联系人组。之后，选择文本工具（T）并使用相当大的字型输入该部分的标题，在，它是“GET IN TOUCH”。给顶部充足的空间，并添加一个简短的描述，以敦促用户的动作。我使用#565d64的颜色和  36px尺寸的Lato（黑色）字体的标题和16px Lato （Regular）的描述。

步骤2

步骤3

最后，我们将一个通用的版权行放在我们的投资组合的底部。在这样做之前，选择 线工具（U），并在文档上画一个微小的灰色#e0e0e0 水平1px线，最后留下90px的空间。在这里，我使用了12px尺寸的Lato（Bold）字体，字母间距为270和深灰色#9b9b9b。

您已完成Web版本

现在你们都完成了网络版的投资组合！现在，我将向您展示如何快速转换移动版的网络版本，以便可视化响应式网站。

设计手机版

步骤1

让我们创建一个新的文档，并将尺寸设置为320x2100px。创建20px，150px和300px的三个垂直指南来指导我们，留下一些空间。之后，选择我们的Web版本文档中的所有组，将它们全部拖动到新的文档选项卡，直到新文档显示并释放其中的组。

 

 

步骤2

 

现在打开标题组，找到我们的徽标，并使用  移动 工具 （V）将其移动到右边，直到在我们新的狭窄布局中可见。留在第一个垂直指南旁边。之后，找到社交图标并将其移动到左边。

 

步骤3

 

现在是适应主要信息的时候了。选择文本工具（T），打破描述行并减少主消息字体以适应第一和第三垂直指南。调整线高度选项，你很好改。

 

 

步骤4

 

打开照片组，并向上移动“最新照片”标题，因为我们在移动视图上不需要太多的空间。之后，找到照片组并将其移动到垂直指南之间。然后打开组，点击描述背景矩形的形状，点击Ctrl + T并将其大小调整为280px宽。对照片矩形执行相同的操作。最后，将照片排列在一列，并调整大小以适应指南。

 

 

步骤5

 

我们的照片部分已经比网络版更长，因此需要进行背景调整。找到照片背景图层，并按Ctrl + T调整大小，使其更高，并在该部分的底部留下一些空格。

 

 

步骤6

 

最后，我们需要重新安排我们的联系部分，以使消息符合我们的设置指南，并且很好地对齐。打开联系人组并使用文本工具（T）打破联系消息行，使之符合我们的准则。确保减少元素上方和下方的空间，因为我们不需要移动视图的太多空白。此外，减少消息的行高，使其看起来干净，专业。

 

最后一件事是将版权行分成两行，这也是指导原则之间的区别。

 

完整的移动视图

 

恭喜！

 

目前，我们完成了Instagram的投资组合的网络和移动版本。我希望你学到了新的东西，而且你所获得的技能将帮助你在将来建立一些惊人的事情。

 

我很乐意听到您的反馈，并看到本教程的结果！

 

尚略广告，上海网站设计建设公司，上海品牌设计公司翻译发布。

 

本文网址，https://www.shinerayad.com/news_info.asp?id=2966

 

外文网址：https://webdesign.tutsplus.com/tutorials/designing-a-simple-instagram-based-portfolio-in-photoshop--cms-21402