当前位置: 首页 > 设计教程 > 网页设计教程 > Photoshop美工教程:设计清新高雅的网页布局(4)

Photoshop美工教程:设计清新高雅的网页布局(4)

13、为右栏添加内容

像左栏和中栏一样,添加标题和图标。对于未激活的链接,采用深灰色(#353535)编辑字体,对于活动状态的链接,采用白色字体,并且创建深灰色(#353535)圆角矩形背景,半径也是3px。

Photoshop美工教程:设计清新高雅的网页布局

14、设计时事通讯窗口

选取圆角矩形工具(U),生成一个3px的圆角矩形,像第2步一样设置杂色滤镜。

Photoshop美工教程:设计清新高雅的网页布局

使用字体Georgia Italic编辑标题,从Mono图标中选择一个信封的图标,给此图标设置了颜色(#F7E5C4)叠加,创建了一个圆角矩形选框,用来输入用户邮箱,以白色填充。

Photoshop美工教程:设计清新高雅的网页布局

15、添加footer

一开始创建footer,就像创建header中的导航一样,只不过要比导航条高些。

Photoshop美工教程:设计清新高雅的网页布局

接下来创建一些链接,选取圆角矩形选框工具(M),生成如下图一样的选框,以深灰色(#323232)进行填充,里面用白色文字填充。

Photoshop美工教程:设计清新高雅的网页布局

然后把混合模式改成”弱光”,透明度降低到63%,以突出背景颜色。重复此流程,创建其它链接。

Photoshop美工教程:设计清新高雅的网页布局

最后一件事,选择一些社区媒体图标添加到链接上方,选择站点Logo和copyright放在footer右侧。

Photoshop美工教程:设计清新高雅的网页布局

  • 共4页:
  • 上一页
  • 1
  • 2
  • 3
  • 4
  • 下一页
  • 上一篇:Photoshop简单绘制圆角矩形翻转网页按钮
    下一篇:Photoshop绘制3D元素的专业网页布局

    图集推荐

    • 灵感
    • 美图