当前位置: 首页 > 申博现金网 > 网页申博现金网 > Photoshop设计时尚的个人作品网页界面(3)

Photoshop设计时尚的个人作品网页界面(3)

Step 22

前景色改成#11171c,打字,随喜,按照作者的例子也行。大小14pt,加粗,位置:距圆形和顶部都是20px。

恩,到这个时候你可能注意到整个设计的节奏感了,如何去平衡页面的各个元素非常重要,这也是这个教程的目的。

Photoshop设计时尚的个人作品网页界面

Step 23

前景色改成#5e5e5e,颜色的减淡使页面有层次感,阅读更加容易。

文字改成正常,不加粗,打出简介的内容,间距18pt。

回车两次,介绍客户,贴上标签,加粗文字,以便突出,间距同上,如图:

Photoshop设计时尚的个人作品网页界面

Step 24

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

Photoshop设计时尚的个人作品网页界面

Step 25

最后一个区域了,回到作品图层组

创建610x400px大小的矩形,颜色可以先搁下,位置:紧贴第六条参考线与第八条,距顶部20px

Photoshop设计时尚的个人作品网页界面

Step 26

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

Photoshop设计时尚的个人作品网页界面

Step 27

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

Photoshop设计时尚的个人作品网页界面

Step 28

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

Photoshop设计时尚的个人作品网页界面

Step 29

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

Photoshop设计时尚的个人作品网页界面

Step 30

最后一步咯

打字,大小14pt,加粗,输入Loading…移动到距图标10px处,水平对齐。然后一起移动两个图层,直到在参考线的中间。

Photoshop设计时尚的个人作品网页界面

现在一个作品集时间轴的效果图已经完成了,你随时可以交给网页设计师,在浏览器上实现它。

Photoshop设计时尚的个人作品网页界面

希望在这个教程你能学到新的东西,有问题或想法在评论区回复,欢迎晒作品哟。

分享到: 
Photoshop制作透明大气的导航按钮
Photoshop设计电影导演工作室网站首页

热门推荐