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

设计一个蓝色的海洋风格网页

  • 2011-08-31 01:01
  • 来源/作者:夕木木/夕木木
  • 己被围观

在今天的这个教程中,木木和童学们分享:使用photoshop设计一个非常清爽的网站主页,特色是网站的配色非常的不错,童学们好好学习一下。 效果图: 1。在这个网页设计教程中,使用

在今天的这个教程中,木木和童学们分享:使用photoshop设计一个非常清爽的网站主页,特色是网站的配色非常的不错,童学们好好学习一下。

效果图:

按此在新窗口浏览图片

1。在这个网页设计教程中,使用的是960网格,所以童学们得先下载一个960网络,然后导入到photoshop软件中。通过编辑>画布大小,改变文件的大小为:1600x1500px。

(注:宽度可以自由更改,但为了能在宽屏的显示器中也能更好的显示,建议大家还是用1600px)
2.找一张清爽的水图片,导入到photoshop中。

按此在新窗口浏览图片

3.在视图>添加新参考线,添加三条水平参考线:80px,110px和170px。
4。接下来我们制作网站的LOGO。选择“文字工具”并设属性:字体大小72px;输入网站的名字,接下来设置文字的样式

如下图:

按此在新窗口浏览图片

效果如下图:

按此在新窗口浏览图片

 

 

5。做完网站的LOGO后,接下来开始做网站的导航。
选择“圆角矩形工具”并设圆角半径为:15px,并填充白色;设不透明度为:70%。

按此在新窗口浏览图片

6.在网站的导航条上添加文字;文字的属性为:#0263a4;大小24px。
7。接下来制作导航的hover状态。
选择“圆角矩形工具”并设圆角半径为:15px,绘制一个按钮出来并填充黑色。双击此图层添加图层样式

按此在新窗口浏览图片

效果如下图:

按此在新窗口浏览图片

 


(责任编辑:PS家园网)

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

分享到:

标签(TAG)

更多精彩内容

  • 电商产品PS修图:金属质感 电商产品PS修图:金属质感
  • PS打造变换颜色中特效汽车 PS打造变换颜色中特效汽车
  • PS制作一款科技感的立体插 PS制作一款科技感的立体插
  • 图文排版设计的8大神奇法 图文排版设计的8大神奇法