当前位置:首页 > PS教程 > 设计教程

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

  • 2021-05-08 14:57:58
  • 来源/作者:互联网/佚名
  • 己被围观

在本教程中我们将使用Photoshop CS6设计一个简单、干净、三列的作品集时间轴。在这个过程中,我们将着眼于自定义网格,排版样式,并利用不同的颜色和对比度实现我们想要的美感。

Step 10

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

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

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

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

Step 11

继续新建一个图层组,命名为导航。把素材的矢量图标拖进来,大小调整为13*16px,将这个图标命名为作品。

双击图层,颜色叠加:#d35136,位置:直线下方40px,紧贴第一条垂直参考线。

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

Step 12

使用 14pt 大小的文字,写上作品,或者Work,位置:第二条参考线处,水平方向与图标对齐。

前景色改成#424a51,继续文字工具打字,内容随喜,大小14pt,行距设置成24pt,完成后将这个目录图层移到距「作品」下方24px处

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

Step 13

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

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

Step 14

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

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

Step 15

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

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

Step 16

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

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

Step 17

现在做简介页面,回到简介图层组。

前景色改成 #f7f7f7,创建一个大小320x1320px的矩形,紧贴左侧栏和第五条参考线。

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

Step 18

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

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

Step 19

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

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

Step 20

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

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

Step 21

为圆形图层添加样式,参数如下:

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

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

*PSjia.COM 倾力出品,转载请注明来自PS家园网(www.psjia.com)

更多精彩内容

  • 文字排版技巧知识大全 文字排版技巧知识大全
  • 电商产品PS修图:金属质感效果 电商产品PS修图:金属质感效果
  • 色彩叠加在各类设计中的巧妙运用 色彩叠加在各类设计中的巧妙运用
  • PS CS5制作逼真绳子 PS CS5制作逼真绳子
  • PS绘制柔美飘逸的丝带 PS绘制柔美飘逸的丝带
  • PS制作一款科技感的立体插图 PS制作一款科技感的立体插图
  • banner制作初级教程 banner制作初级教程
  • 如何设计一个高端大气上档次的 logo? 如何设计一个高端大气上档次的 logo?