Photoshop设计一个优雅的网站首页

GedrgeCula · 发表于 2016-12-28 15:33:47

本帖子中包含更多资源

您需要登录才可以下载或查看，没有账号？立即注册

x

　　简洁优雅，这是一个面向新手的基础网页设计教程，还未设计过网页的你，不妨马上开始，尝试设计自己的第一个网页吧。熟练的同学也可以快速过一遍练练手。

　　这就是原教程最终设计好的网页。
　　然后，我在跟着做的时候，将所有文字换成了中文，就成了下面这样，看上去好像是真有这么一回事的感觉~

　　哈，大家也可以试试哦，下面是教程：
　　本教程将通过一个“感恩日志”的概念项目，带大家一步步设计一个优雅(高大上)的网站首页。手把手从零开始，只需装好Photoshop软件就可以了。一些设计时会用到的基础技术(插件、工具等)文中也会提到。好了，我们马上开始吧!
　　教程资源
　　在后面的步骤里你需要用到以下的资源(本文附件里有前四项+PSD源文件)：
　　Chillin’ in the sun 照片
　　PT Serif 字体
　　Playfair Dislay 字体
　　Source Sans Pro 字体
　　User Inter Faces 用户头像图片
　　准备
　　Step 1
　　首先，在Photoshop上新建一个文档(文件>新建...)，按照下图的选项设置好。(设计过程中你随时可以修改画布大小。)

　　Step 2
　　设置一些参考线，布局好把握一些，可以确保网页元素整齐，不会太过于凌乱，以及通过参考线定义网站元素的尺寸。在菜单栏视图>新建参考线即可以设置参考线(或者可以通过视图>显示标尺，在标尺上用鼠标拉出参考线，看不到参考线的话按Ctrl+;显示)。我通常会选择1000px作为网站的宽度，以此为标准添加对应参考线，留出内容区域外的空间让网页设计时不至于太过紧密，有足够的呼吸空间。(作者一直强调这种感官感受，建议鼻子深吸一口气感受一下～)
　　设置的参考线：200px, 500px, 700px, 900px以及1200px处的垂直参考线。
　　提示：可以使用神器 GuideGuide 插件哦，设置参考线更加快捷。

　　Step 3
　　作为设计师使用Photoshop的基本素养，图层分组管理是很重要的，方便浏览和修改。我们建三个图层组，命名为：Header，Content和Footer(头部、内容、底部，一般Header，Footer通用英文说法)。创建分组可以通过菜单栏：图层>新建>组...填上上述的组名称。也可以点击图层面板底部的文件夹图标快捷创建分组。

　　设计头部区域
　　Header，或者叫做“网页头部”，他是网页中最明显的部分，在网页中起到吸引用户、留住用户的重要作用。为了表达感恩的主题，将在首页顶部使用一张两人坐在长椅上的照片，其中一个人抬起手，可以看出很愉快的心情。
　　Step 1
　　创建网页背景，在“Header”分组里使用矩形工具(快捷键U)添加一个黑色#000000的矩形形状，大小为1400x728px。
　　现在把下载的照片素材拖动到Photoshop软件里(或者使用文件>置入...)，照片放在矩形图层的上一层。命一下名：IMG。然后使用快捷键Ctrl+Alt+G(或者右键此图层>创建剪贴蒙版)，创建一个剪贴蒙版。最后将IMG图层的不透明度减少为70%，让上面的文字可读性更强(照片素材融入背景成深色)。
　　Ctrl+T，修改照片到合适大小。
　　提示：按住Shift键可以按比例缩放大小。

　　Step 2
　　接着来为网页创建一个导航。
　　创建新分组：Navigation，拖动到“Header”分组里面。然后使用矩形工具(U)画一个白色矩形，宽度让对齐到左边第一条垂直参考线和右边最后一条垂直参考线即可(可以Ctrl+T调整)。修改矩形高度为60px，不会太窄，看起来清爽一些。将它移动到对齐最顶部，然后下移30px，形成一种悬浮的感觉。

　　Step 3
　　添加一个Logo和一些链接文字，补充导航栏。Logo我使用的是简单的手写体“Grttd”，Playfair Playfair Display (Bold Italic)字体，26px，颜色为深灰色#0e0e0e。

　　导航栏的链接文字使用Source Sans Pro字体，14px，调宽一些字符间距。其中“Sign Up”(注册)采用加粗和绿色#96c218。完成了导航栏后，可以将这个分组最小化了，点击图层分组的小三角收缩。

　　Step 4
　　在图片上配上一些高大上的文案，概述网站的主题。使用加粗的大字体，并带有一个副标题，用于解释细节概念：
　　还记得前面要调整成深色的背景吗，现在其上面的大标题使用突出的白色即可加强文字的可阅读性。颜色为白色#FFFFFF的Source Sans Pro (Black)，80px，行高为86px。将其放在距导航栏下边120px，同样的元素间不至于太紧密。

　　放置一个副标题定义网站的理念，告诉访客这个网站是做什么的。这里用一个不错的字体搭配：无衬线字体标题搭配优雅的衬线字体。
　　更多好看的英文字体可以可以查看： Google Web Fonts Typographic Project 和 A Beginner’s Guide to Pairing Fonts。(好吧，中文的无视...)
　　副标题用白色#FFFFFF，26px，Playfair Display (Italic) 字体，放置在主标题下方40px。

　　Step 5
　　再增加一些展示，以增强网站吸引力，留住访客。由于感恩日志是基于感谢的事物这样的私事上面的，所以大众口碑是一个不错的选择，展示用户的使用感受，更易于贴近大众。
　　创建一个新分组“Example”，然后切换椭圆形状工具(U)(右键或鼠标左键按住切换)，按住Shift键画一个圆形，60x60px。然后将一个头像图片移到圆形图层上面，创建剪贴蒙版。Ctrl+T调整图片到合适大小大小。
　　用的是User Inter Faces上的随机头像图片。

　　再做一个连续写感恩日志的成就标示。创建另外一个更小的圆形，在上面标上一个数字。这种做法十分简单，但却很实用。这个圆形的颜色是前面使用过的绿色#96c218，30x30px，文本是白色#FFFFFF Source Sans Pro (Bold)，14px。

　　最后给人物一个名字和描述这个数字代表的意义。名字 PT Serif (Bold Italic) 16px，描述Source Sans Pro (Regular) 13px。确保行高足够大，元素之间有足够呼吸空间。

　　很好，还差一步我们就可以去设计内容区域了。现在需要放置一个引人注目的Call To Action (CTA)，行动号召。让用户一看到就知道接着怎么做。创建一个新图层组“CTA”。设置前景颜色#FFFFFF，切换矩形工具(T)。然后画一个矩形形状，280x60px。注意这里使用的高度和前面的导航栏是一样的。
　　最后，在按钮里面输入一段高大上的文案，“START LIVING →”，颜色和前面导航栏一样使用深灰色#0e0e0e，字体是Source Sans Pro (Semibold) 16px，字符间距设置为140。

　　设计内容区域
　　Step 1
　　完成“Header”了，收起来，打开“Content”分组，创建图层组“Description”。给网站一个超大的标题，描述网站的更多细节。然后再重复放置一个Call To Action(CTA)，这样用户不用思考太多就能随时点击下一步的行动。
　　使用文字工具，选择显眼的字体Playfair Display (Black) ，60px。保持一定的边距空间，沿header图片再下移100px。

　　使用横排文字工具(T)点击拖动拉一个600x140px大小的矩形框。输入一些描述文字吸引用户点击这个CTA。为了建立清晰的视觉层级关系，描述文本字体应较小，而且不能加粗。使用灰色#666666 PT Serif(Regular)，18px，行高为28px。整个元素距离大标题下移50px，好了!

　　读过描述介绍，访客们已经有点信任这个网站觉得要试一试了，所以，重复放置一个CTA按钮是必须的。去将上面的那个复制过来：打开“Header”分组，找到CTA分组，点击，并按下Ctrl+J复制图层组。然后拖动此图层组到Description分组，改变按钮的颜色为前面使用过的绿色#96c218，文本为白色#FFFFFF。移动到距离描述文本下方50px。

　　这样看起来好多了，再加上一条简单的直线区分上下的区块：切换直线工具(U)，设置1px描边大小，按住Shift键画一条横线，长度对齐两边的参考线。使用不太显眼但又可以看清的浅灰色#e6e6e6。

　　Step 2
　　现在完成了“描述”部分了，然后我们创建一个新分组“Get Inspired”。从“Description”组复制其标题和描述图层组过来修改里面的文字：

　　再复用上面的用户例子，展示用户的使用感受以激励访客使用这个网站。到“Header”组的“Example”图层组。Ctrl+J复制整组然后移动到“Get Inspired”组。

　　重命名分组名字为“Story”，去掉绿色的数字标示。右边名字文本的颜色改为深灰色#0e0e0e，这样在白色背景上更好地显示。换另一张图片作为头像，用灰色#666666写上这些人的职位和地方信息。

　　然后，用文字工具在下面创建一个300x160px的文本框，写上一段感恩日志的例子。用PT Serif (Italic) 字体16px，深灰色#666666.

　　复制两个“Story”组，修改一下头像、名字和描述。水平对齐这两个分组然后在后面加上一条直线。

　　Step 3
　　完成“Get Inspired”分组后，转战这个内容区域的最后一部分。最后的Call To Action 要带上更多的细节，鼓励访客输入Email地址注册。
　　创建“Email”分组，然后回到前一个分组找到大标题图层，Ctrl+J复制移动到新建图层。修改大标题：Create Gratitude Log。

　　好了!现在设置前景颜色为浅灰色#f5f5f5，用矩形工具绘制一个矩形作为Email框。其高度和Call To Action(CTA)按钮一样，430x60px。然后使用横排文字工具写上“Enter your email”这样的话，使用显眼的深色。

　　到“Description”分组图层面板找到“CTA”分组，Ctrl+J复制移动到“Email”组。放置这个按钮到Email框的右边，将这一整块居中。

　　设计Footer区域
　　Step 1
　　快完成了!收缩所有分组，展开“Footer”分组。设置前景色为深灰色#2d2d2d，使用矩形工具画一个全宽度、230px高的矩形，作为footer的背景，划分内容区域。

　　回到“Navigation”分组的logo图层，复制一个到“Footer”组。改变颜色为白色#FFFFFF，然后移动到footer矩形框的边下面大约50px。

　　最后，用文字工具输入一些用户需要用到的链接。将这些连接分组，让用户更容易找到。链接组名使用Source Sans Pro (Semibold) 16px，链接标题用PT Serif (Regular) 14px字体。

　　完成
　　不错!完成了整个页面的设计了，看起来很漂亮吧。现在再检查一下所有图层，删除不需要的，然后转交给你的前端开发小伙伴，或者你擅长编程也可以自己写。
　　以上就是一些基础的PS技术和我平时的设计网页的工作流程，希望对大家有帮助。
　　欢迎大家的反馈和作品展示哦。
　　下面是两个原文评论区网友贴的作品：