以后地位: 首页 > 设计教程 > 网页设计教程 > Photoshop设计时尚的小我作品网页界面

Photoshop设计时尚的小我作品网页界面

在本教程中咱咱咱们将应用Photoshop CS6设计一个简略、干净、三列的作品集光阴轴。在这个过程中,咱咱咱们将着眼于自定义网格,排版样式,并利用分歧的色彩和对比度实现咱咱咱们想要的美感。

同学咱咱们可以或许或许从这个教程学习如何在一个页面均衡分歧的元素,使全体设计富有韵律感与呼吸感。快毕业的童鞋咱咱们可以或许或许尝试如许展现你的作品集哟。

先上效果图:

Photoshop设计时尚的小我作品网页界面

Step 1

创建新文件,参数如图:

Photoshop设计时尚的小我作品网页界面

Step 2

新建参考线,以便均衡视觉。地位:程度 60px,垂直分离是 20px,,50px,115px,230px,550px,570px,875px和1180px,这里推荐同学咱咱们应用神器「GuideGuide」,详细应用有劳移步:PS 参考线插件GUIDEGUIDE下载及应用说明,非常便利。

Photoshop设计时尚的小我作品网页界面

Step 3

为了包管咱咱咱们的设计有序专业,咱咱咱们先新建3个图层组,分离定名为:左侧栏、简介、作品。平常没存眷尺度的同学,优设哥分内向您和您地点的团队推荐《PS礼仪手册》!网页设计师必需修炼的内功技法,更是不行或缺的WEB设计指南。

Photoshop设计时尚的小我作品网页界面
Photoshop设计时尚的小我作品网页界面

准备工作就此终了咯。

Step 4

侧边栏为咱咱咱们展现联系办法、作导航,让咱咱咱们来打造它吧。

抉择矩形对象,远景致改成 #11171c,在左侧栏的图层组里画一个大小230x1320px的矩形,移到左侧边缘,紧贴着第四条参考线就对咯,如图:

Photoshop设计时尚的小我作品网页界面

Step 5

在左侧栏的图层组新建一个图层组,地位在矩形上边,定名为轮廓图。

然后利用椭圆对象,摁住Shift,绘制大小100x100px的圆形,移到左数第三条参考线的中央,上边紧贴程度参考线,如图:

Photoshop设计时尚的小我作品网页界面

Step 6

如今,请听批示 ^_^ ,把电脑里最帅气最漂酿的头像找进去,拖进去,摁住Alt,单击圆形,作为剪切蒙版,然后移动调剂到合适(看获得脸)的地位。

Photoshop设计时尚的小我作品网页界面

Step 7

改变远景致为 #FFFFFF,抉择文字对象,抉择装配好的字体,大小16pt,写上你的英文名,移动到距头像下25px的地位,确保在第三条参考线的中央。

Photoshop设计时尚的小我作品网页界面

Step 8

如今为自己添加点小我介绍吧,作者应用的字体大小14pt,距名字20px,如许界面看起来有呼吸小

Photoshop设计时尚的小我作品网页界面

Step 9

棒极了,如今持续在左侧栏的图层组下新建一个图层组,定名为社交媒体。把素材里的图标拖进组里,双击图层,色彩叠加——抉择白色。将图层样式复制到其余图标上。

Photoshop设计时尚的小我作品网页界面

图标间距调剂为10px,全体图标的图层组距离 简介 20px

Photoshop设计时尚的小我作品网页界面

分享到: 
Photoshop制作透明大气的导航按钮
Photoshop设计电影导演工作室网站首页
友情链接:智利华人中文网  金刺猬文学社  跑步机维修网  冠熙新闻网  鸟类大全网  连接科技资讯网  中国美容网  车米长安汽车网  上海办公家具网  金融时报网