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

海利

重复上次步骤。唯一不同的是，「关于」的文本颜色改为#424a51



Step 16

海利

最后创建联系方式。图标拖进来，大小调整成16x13px，颜色叠加#088ecc，其他同上，不同的就是「联系」字样颜色为#424a51



Step 17

海利

现在做简介页面，回到简介图层组。
前景色改成 #f7f7f7，创建一个大小320x1320px的矩形，紧贴左侧栏和第五条参考线。



Step 18

海利

前景色改成#e7e7e8，创建一条直线，大小1px，放在底部，长度到第五条参考线处，见图：



Step 19

海利

现在创建时间轴，利用直线工具，画一条竖线，大小为3px，命名为时间轴，位置：距左侧栏24px，顶部30px



Step 20

海利

前景色改成#d35136，画一个圆形，大小11x11px，位置：距左侧栏跟顶部都是20px，见图：



Step 21        

海利

为圆形图层添加样式，参数如下：






?
Step 22

海利

前景色改成#11171c，打字，随喜，按照作者的例子也行。大小14pt，加粗，位置：距圆形和顶部都是20px。
恩，到这个时候你可能注意到整个设计的节奏感了，如何去平衡页面的各个元素非常重要，这也是这个教程的目的。



Step 23

海利

前景色改成#5e5e5e，颜色的减淡使页面有层次感，阅读更加容易。
文字改成正常，不加粗，打出简介的内容，间距18pt。
回车两次，介绍客户，贴上标签，加粗文字，以便突出，间距同上，如图：



Step 24

海利

复制圆形，重复步骤，圆形的位置取决于后面内容的篇幅。



Step 25

海利

最后一个区域了，回到作品图层组
创建610x400px大小的矩形，颜色可以先搁下，位置：紧贴第六条参考线与第八条，距顶部20px



Step 26

海利

将素材的笔记本PSD拖进来，同样转成矩形的剪切模板，调整到合适大小。



Step 27        

海利

复制矩形，移动到离第一个矩形20px处，以此类推，再加上素材里的图片，重复蒙版的步骤。



Step 28

海利

重复简介部分的操作，记得对齐。



Step 29

海利

把矢量素材的刷新图标拖进来，颜色叠加#a0a2a4，大小20x20px，位置：距图片下方20px，



Step 30