instagram架构设计_在Photoshop中设计基于Instagram的简单作品集

instagram架构设计

在本教程中，我将指导您完成创建简单，干净的基于Instagram的作品集的过程。 我们将使用一些醒目的图像，干净的调色板和平滑的字体。 我们将从创建网络版本开始，然后向您展示如何快速将其适应移动视图。

您可以从Instagram学校那里了解更多类似Instagram的技巧 ，这是一个免费网站，致力于详细研究该应用程序并帮助您充分利用它。 特别是， 您从未听说过的隐藏的Instagram黑客将为您提供一些使用此非常熟悉的平台的新颖且令人惊讶的方法。

教程资产

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

• Unsplash的 山脉照片
• Font Squirrel的Kaushan Script字体
• Lato字体从Font Squirrel
• 来自Iconfinder的社交媒体图标
• 库存图片Unsplash
• 库存照片来自Refe

准备好文档

第1步

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

第2步

让我们设置一些指南，以便我们的布局具有足够的空间并看上去平衡。 我并不总是使用网格，但是设置一些准则可以确保整洁并有助于定义我们网站的宽度。 转到查看>新指南…并设置一些指南。 我通常选择1000px作为网站宽度，并从角落添加一些准则，以使它有足够的呼吸空间。

注意：本教程使用的准则：垂直为100px，600px和1100px。

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

第三步

坚持使用Photoshop礼节，我们可以使事情井井有条，易于浏览和编辑。 让我们创建三个名为Header，Photos和Contact的图层组。 要创建组，请进入“ 图层”>“新建”>“组...”，并为每个组指定一个标题。 要快速创建组，只需单击图标。

设计页眉区域

页眉或“首屈一指”（无论何时何地）区域在与用户互动并确保访问者留在网站上起着非常重要的作用。 对于这个作品集，我将使用一些美丽的山脉和简单的消息来描绘冒险和挑战。

第1步

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

现在下载山照片 ，将其拖到Photoshop文档中并将其放置在矩形层上方。 将图像层重命名为以后可以识别的名称，就我而言，我使用的是IMG。 之后，按住Alt键并将鼠标悬停在照片层上，直到看到一个向下的小箭头，然后松开它。 您刚刚创建了一个Clipping Mask 。

现在按CMD + T并调整照片大小以适合您的需求。

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

第2步

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

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

第三步

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

第4步

是时候为我们的产品组合放置徽标了。 选择“ 水平字体工具（T）”，然后输入投资组合的名称，无论是您的姓名还是昵称。 在本教程中，我使用了非常时尚的Kaushan Script 21px大小的字体。 将新徽标放置在网站的左上角，第一个垂直准则的旁边。 将其向下推50px，使其具有足够的负空间，使其看起来既干净又专业。

第5步

我们将添加一些社交媒体图标，以便人们可以关注您和您的工作。 将Facebook，Twitter和Instagram图标从Iconfinder拖到您的Photoshop文档中，重命名图层，以便快速识别它们，并将其放置在最后一个垂直准则旁边的右上角。 之后，在其中一个图标层上单击鼠标右键，选择Blending Options ...，然后将颜色 叠加选项应用为白色#ffffff 。 对其余的图标执行相同的操作。

确保在两侧留出足够的空间，并使图标与徽标水平对齐。

第6步

让我们结束我们的页眉区域。 我们拥有美丽的图像和大量的空间。 让我们简单介绍一下信息，以便访问者可以了解本网站的全部内容。

选择“ 水平字体工具”（T），然后使用36px大小的Lato（黑色）字体输入几个单词。 就我而言，我使用“ HELLO！I'M JONATHAN”。 此后，在新行中以较小的字体abd输入一些关于您自己或您的作品的更多信息，以使访问者可能会感兴趣。 在本教程中，我使用了16px大小的Lato （常规）

我喜欢环游世界，设计漂亮的东西。

确保行高足够大，以便您的文本有呼吸的空间。 最后，将您的文本放在页眉区域的中间。

设计照片区

在这一领域中，我们将放置来自Instagram的照片，以展示一些作品示例，展示艺术家或设计师的熟练程度和相关性。

第1步

首先让我们更改该区域的背景。 单击标题旁边的小箭头，以最小化标题组，然后打开“照片”组。 之后，选择矩形工具（U）并绘制一个略带灰色的矩形。 就我而言，我使用了#eeeeee 为颜色和绘制一个 1200x880px矩形。

第2步

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

第三步

大！ 我们终于准备好将一些很酷的照片添加到我们的投资组合中。 创建一个名为“照片”的新组。 之后，您需要确定要连续显示多少张图片。 我决定使用4，因此在确定像素之前需要做一些数学运算。

我们的网站宽度为1000像素，因此我将其除以4，为每个图像提供250像素，但我们还需要在侧面留一些间距，例如图像之间的间距为20像素。 因此，最终图像宽度将为（1000px-60px）/ 4 = 235px。

选择矩形工具（U） ，然后按住Shift键，绘制一个235x235px大小的矩形。 之后，从Instagram提要中选择一个图像，或从unsplash.com或getrefe.tumblr.com抓取一个图像 ，将其拖到您的Photoshop文档中，并将其放置在矩形上方。 然后，按住Alt键，创建剪贴蒙版，然后使用CMD + T调整图像大小并根据需要放置。

第4步

现在，我们需要添加“喜欢”的数量（作为一些社会证据）和简短说明。 创建一个新层并将其命名为Shadow，将其放置在图像上方，并确保也为其创建一个Clipping Mask 。 之后，使用渐变 工具 （G）应用从本教程前面所述的从黑色到透明的渐变。 最后将其不透明度降低到60％ 。

选择“ 水平字体工具（T）”，然后输入多个点赞。 我使用了13px大小的蒙特塞拉特字体，并在左侧和底部留了15px的空间，以便给呼吸提供足够的空间，但又不会使图像不知所措。

现在，选择“ 矩形工具”（U），并在照片下方绘制一个白色矩形。 然后，抓住“ 水平字体工具”（T） ，在Instagram上写下您要使用的简短照片描述，包括主题标签和换行日期。 我在本教程中使用的字体是Montserrat 12px大小的灰色#808080 。

注意：如果您在喜欢的数字两侧使用了15像素， 请确保与间距保持一致，并与说明相同。

第5步

我们已经完成了照片项目，现在是时候向我们的投资组合中添加更多照片了。 最小化照片组，然后通过按CMD + J或在组名上单击鼠标右键并选择“ 复制组...”来复制它，然后复制所需数量的照片并将其组织在网格中。 在我的示例中，我有20px的间距和来自unsplash.com和getrefe.tumblr.com的不同图像。

设计接触面积

在此区域，我们将简单地发送消息并联系“号召性用语”以及一般版权信息。

第1步

通过单击组名称旁边的小箭头最小化“照片”组，然后打开“联系人”组。 之后，选择“ 水平字体工具（T）”并使用相当大的字体输入该部分的标题，在我的情况下为“ GET IN TOUCH”。 在顶部留出足够的空间，并添加简短说明以促使用户采取措施。 我用#565d64的颜色和大小36px 拉托（黑色）字体用于说明的标题和16px的 拉托 （正常）。

第2步

现在，我们需要一个号召性用语按钮，用户将单击该按钮以执行所需的操作。 对于本教程，我们使用一个简单的联系人按钮。 我使用了矩形工具（U），绘制了一个简单的形状并将文本放在其上方。 确保在按钮上方使用足够的空间，以使其看起来平衡且干净。

第三步

最后，让我们在产品组合的底部放置一个通用版权行。 在执行此操作之前，请选择“ 线条工具”（U），并在整个文档上绘制一条灰色的#e0e0e0水平1px细线，在#e0e0e0留出大约90px的空间。 在那之后放置您的版权行。 在这种情况下，我使用了12px大小的Lato（Bold）字体，字母间距为270 ，深灰色#9b9b9b 。

您完成了...使用网络版本

到此，所有投资组合的网络版本都完成了！ 现在，我将向您展示如何快速转换手机的Web版本，以便可视化响应式网站。

设计移动版本

第1步

让我们创建一个新文档，并将尺寸设置为320x2100px 。 在20px ， 150px和300px处创建三个垂直参考线以引导我们，并在侧面留出一些空间。 之后，选择我们的Web版本文档中的所有组，将它们全部拖动到新的文档选项卡，直到出现新文档并在那里释放这些组。

第2步

现在打开“页眉”组，找到我们的徽标，然后使用“ 移动 工具 （V）”将其向右移动，直到在新的狭窄布局中可见。 将其放在第一个垂直准则的旁边。 之后，找到社交图标并将其向左移动。

第三步

现在该调整主要信息了。 选择“ 水平字体工具（T）” ，断开描述行并缩小主消息字体，使其适合第一和第三垂直参考线。 调整行高选项，就可以了。

第4步

打开“照片”组，然后上移“最新照片”标题，因为我们不需要在移动视图上占用太多空间。 之后，找到“照片”组并将其在垂直辅助线之间移动。 然后打开该组，单击描述背景矩形，单击CMD + T并将其大小调整为280px 。 对照片矩形执行相同的操作。 最后，将照片排成一列，然后调整大小以适合准则。

第5步

我们的照片部分比网络版本上的更长，因此需要调整背景。 找到“照片”背景图层，然后按CMD + T调整其大小，使其更高，并在该部分的底部保留一些空间。

第6步

最后，我们需要重新安排联系部分，以使消息适合我们的既定准则，并保持一致。 打开“联系人”组，然后使用“ 水平字体工具”（T）断开联系人消息行，使它们适合我们的准则。 确保减少元素上方和下方的空间，因为移动视图不需要那么多的空白。 另外，请降低消息的行高，使其看起来整洁而专业。

最后一件事是将版权分成两行，因此也属于指南之内。

恭喜你！

而已。 我们已经完成了基于Instagram的最新作品集的网络版和移动版。 我希望您学到了一些新知识，并且所获得的技能将帮助您将来构建一些惊人的东西。

我希望听到您的反馈并查看本教程的结果！

用奶昔建立一个Instagram网站

Milkshake是Instagram网站制造商 。 Milkshake将帮助您立即在手机上为Instagram个人资料创建一个免费网站。 向全世界展示您的作品，并为您的Instagram粉丝和关注者建立一个漂亮的网站。 检查奶昔 。

翻译自: https://webdesign.tutsplus.com/tutorials/designing-a-simple-instagram-based-portfolio-in-photoshop--cms-21402

instagram架构设计