当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop制作一个以绿色为主题的网页(3)

Photoshop制作一个以绿色为主题的网页(3)

33 你可能注意到,我们刚刚创建的矩形并没有圆角。为了纠正这个小的细节,我们应用剪辑蒙板(clipping mask)这个概念。右键点击图层 “navigation bar” layer, 选择创建剪切蒙版。

Photoshop制作一个以绿色为主题的网页

34 好了,我们接下来要做的是,创建当前页的按钮。选择矩形工具 (U), 设置颜色为#A6A43F, 创建一个高为60px的矩形。

35 设置透明度为15%,命名该图层为”current page button“.

36 然后向下设置剪辑蒙板。

Photoshop制作一个以绿色为主题的网页

37 选择刚刚的四个图层,点中ctrl然后分别在图层面板中点击这四个图层,然后点击 Ctrl + G群组。设置这个群组名为 “bg & navigation bar“.

Photoshop制作一个以绿色为主题的网页

38 选择文字工具 (T),给导航添加一些文字,用颜色#A6A43F. 在这次的设计中,我用的字体是 Avenir LT 65 Medium 。如果你没有这个字体,可以用你喜欢的字体代替。

Photoshop制作一个以绿色为主题的网页

给“特色项目”部分,自定义一个图案

39 好了,我们要创建一个图案。新建一个文档,文件>新建 (Ctrl + N), 尺寸是 5px * 5px, 透明背景。

40 设置前景色为 #2A2009, 在工具栏中选择铅笔工具(B) ,在你的画布中间,画一个1px大小的方框。

41 点击编辑>定义图案。命名这个图案,然后点击ok。好了,你可以关闭这个文件了。

Photoshop制作一个以绿色为主题的网页

创建“特色项目”区域

42 选择矩形工具 (U) ,创建一个高为330px的任何颜色的矩形。

Photoshop制作一个以绿色为主题的网页

43 在图层面板上,双击该图层,打开图层属性面板。按照下图进行参数设定。

Photoshop制作一个以绿色为主题的网页

  • 共6页:
  • 上一页
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 下一页
  • 上一篇:Photoshop设计漂亮的网页页脚模板
    下一篇:Photoshop设计一张古典的的网页效果图

    图集推荐

    • 灵感
    • 美图