27
2017/9
网站设计教程:如何在Photoshop中设计一个简单的网页
|设计教程 |网站设计

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

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

 

教学资产


为了制作,您将需要以下(免费提供)资产:

山照片从 Unsplash
来自 Font Squirrel 的 Kaushan Script 字体
 来自 Font Squirrel 的 Lato 字体
 来自 Iconfinder 的社交媒体图标
从 Unsplash 的库存照片
库存照片从 Refe
获取文档准备就绪

步骤1

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

 

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

 

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

 

注意:垂直于100像素,600像素和1100像素。网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤3

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

设计标题区域

 

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

 

步骤1

 

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

 

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

 

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

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

 

步骤2

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

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

 

步骤3

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤4

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤5

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤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的矩形。

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤2

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤3


OK!我们终于准备好添加一些很酷的照片到我们的投资组合。创建一个名为Photo的新组。之后,您需要决定要连续显示多少张照片。我决定用四个,所以我需要做一些数学,然后再确定像素。

我们的网站宽度为1000像素,所以我将它划分为4,给每个图像250像素,但是我们还需要在两边留一些间距,让我们说图像之间有20px的沟槽。所以最终的图像宽度将是(1000px-60px)/ 4 = 235px。 

选择 矩形工具(U),并按住Shift键,绘制一个235x235px的大小矩形。之后,从您的Instagram Feed中选择一张图片,或者从unsplash.com或getrefe.tumblr.com上抓取 图片,将其拖动到您的Photoshop文档并将其放在矩形上方。然后,按住Alt键,创建剪辑蒙版,并使用Ctrl + T调整图像的大小,并按需要放置。

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤4


现在我们需要添加“喜欢”的数量(作为一些社会证据)和一个简短的描述。创建一个新图层,并将其命名为Shadow,将其放在图像上方,并确保为其创建剪辑蒙版。之后,使用  渐变 工具 (G)应用从本教程前面所述的从黑色到透明的渐变。最后将其不透明度降至60%。

选择 文本工具(T)并输入多个喜好。我使用了13px大小的蒙特塞拉特字体,左边和底部留下15px的空间,以给予足够的空间呼吸,不要压倒图像。
网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

现在选择矩形工具(U)并在照片下方绘制一个白色矩形。然后抓住文本工具(T),并在照片上写一个简短的照片描述,包括主题标签和新行上的发布日期。我用于本教程的字体是蒙特塞拉特 12px大小的灰色#808080。

注意:确保与您的间距保持一致,如果您在相似的数字上使用了15px,则与之前相同。

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤5


我们完成了照片项目,现在是时候添加更多的照片到我们的投资组合。最小化照片组,并通过击中Ctrl + J或单击组名称上的鼠标右键并选择复制组,然后复制尽可能多的照片,并将其组织在网格中。在我的例子中,我用20px的空格和不同的图像。

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

 

设计联系方式


在这方面,我们将提供一个简单的信息,并联系“号召性用语”以及通用版权信息。

步骤1


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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

 

步骤2

 

现在我们需要一个号召性用语按钮,用户将点击来执行所需的操作。对于本教程,我们使用一个简单的联系人按钮。我使用了  矩形工具(U),绘制了一个简单的形状,并在其上放置文本。确保使用按钮上方的大量空间,使其看起来平衡和干净。

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

步骤3


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

 

您已完成Web版本


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

 

设计手机版

步骤1


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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤2

 

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

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤3

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤4

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤5

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

 

步骤6

 

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

 

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

 

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

网站设计教程-如何在Photoshop中设计一个简单的网页-上海网站设计公司

完整的移动视图

 

恭喜!

 

目前,我们完成了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


返回           上一篇           下一篇