Photoshop设计时尚的个人网页界面实例

海利

      在本教程中我们将使用Photoshop CS6设计一个简单、干净、三列的作品集时间轴。在这个过程中，我们将着眼于自定义网格，排版样式，并利用不同的颜色和对比度实现我们想要的美感。
先下载教程需要的素材：http://bbs.16xx8.com/thread-165802-1-1.html
同学们可以从这个教程学习如何在一个页面平衡不同的元素，使整个设计富有韵律感与呼吸感。快毕业的童鞋们可以尝试这样展示你的作品集哟。
先上效果图：



Step 1

提示：教程详细步骤在二楼，不用回复也能看到！

想下载该教程的可以回复获取下载网址:

游客，如果您要查看本帖隐藏内容请回复

教程编号:132674 作者：佚名 出处：优设

海利

创建新文件，参数如图：



Step 2

海利

新建参考线，以便平衡视觉。位置：水平 60px，垂直分别是 20px,，50px，115px，230px，550px，570px，875px和1180px，这里推荐同学们使用神器「GuideGuide」，具体使用有劳移步：PS 参考线插件GUIDEGUIDE下载及使用说明，非常方便。



Step 3

海利

为了保证我们的设计有序专业，我们先新建3个图层组，分别命名为：左侧栏、简介、作品。平常没关注规范的同学，优设哥特别向您和您所在的团队推荐《PS礼仪手册》!网页设计师必须修炼的内功技法，更是不可或缺的WEB设计指南。






准备工作就此完毕咯。
Step 4

海利

侧边栏为我们展示联系方式、作导航，让我们来建设它吧。
选择矩形工具，前景色改为 #11171c，在左侧栏的图层组里画一个大小230x1320px的矩形，移到左侧边缘，紧贴着第四条参考线就对咯，如图：



Step 5

海利

在左侧栏的图层组新建一个图层组，位置在矩形上边，命名为轮廓图。
然后利用椭圆工具，摁住Shift，绘制大小100x100px的圆形，移到左数第三条参考线的中间，上边紧贴水平参考线，如图：



Step 6

海利

现在，请听指挥 ^_^ ，把电脑里最帅气最漂酿的头像找出来，拖进去，摁住Alt，单击圆形，作为剪切蒙版，然后移动调整到合适(看得到脸)的位置。



Step 7        

海利

改变前景色为 #FFFFFF，选择文字工具，选择安装好的字体，大小16pt，写上你的英文名，移动到距头像下25px的位置，确保在第三条参考线的中间。



Step 8

海利

现在为自己添加点个人介绍吧，作者使用的字体大小14pt，距名字20px，这样界面看起来有呼吸感。



Step 9

海利

棒极了，现在继续在左侧栏的图层组下新建一个图层组，命名为社交媒体。把素材里的图标拖进组里，双击图层，颜色叠加——选择白色。将图层样式复制到其他图标上。



图标间距调整为10px，整个图标的图层组距离 简介 20px



?
Step 10

海利

选择直线工具，前景色为白色，大小1px，在图标下方50px处画一条直线，长度：从边缘到第四条参考线



为了视觉微妙点，将图层不透明度调整到10%



Step 11

海利

继续新建一个图层组，命名为导航。把素材的矢量图标拖进来，大小调整为13*16px，将这个图标命名为作品。
双击图层，颜色叠加：#d35136，位置：直线下方40px，紧贴第一条垂直参考线。



Step 12

海利

使用 14pt 大小的文字，写上作品，或者Work，位置：第二条参考线处，水平方向与图标对齐。
前景色改成#424a51，继续文字工具打字，内容随喜，大小14pt，行距设置成24pt，完成后将这个目录图层移到距「作品」下方24px处



Step 13

海利

当点击时，我们需要使链接变亮，所以改变Lastest的文字颜色为白色。



Step 14        

海利

把联系人的图标拖进来，转成智能对象，大小调整成16x16px，颜色叠加#27b599，位置在目录30px下，紧贴第一条参考线。



Step 15