PS设计制作一个清爽的蓝色海洋风格网

在今天的这个教程中,木木和童学们分享:使用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,绘制一个按钮出来并填充黑色。双击此图层添加图层样式

效果如下图:

8。制作搜索栏
还是使用“圆角矩形工具”并设圆角半径为:15px,绘制想要的长度,并设“图层样式”设置如下图:

“内阴影”选项:不透明改为:0%

找一个“放大镜的图标”放置在右边。

头部做完了,接下来就开始做产品展示部分。

9。新增参考线:200px,465px和500px.还是选择“圆角矩形工具”并设圆角半径为:15px。从500参考线往上绘制一个圆角矩形并填充白色,

设不透明度为:70%。

10。接下来制作左侧的方块。
依然使有“圆角矩形工具”,从465参考线开始绘制一个高为300,宽为560的矩形,双击打开此图层设其“图层样式
效果如下图:

11.在这个左侧的方框里添加一个小方框来放图片。这个小方框的大小为:500x221px。并设“图层样式

设置效果下图:

12。在方框的右侧添加一些内空

添加一个“more”的按钮,copy第7步的“图层样式”。

13.绘制图片的滑块
绘制一个小矩形,并设如第12步的图层样式
接下来我们使用“椭圆工具”按shift键绘制一个小正圆,然后填充#e8e8e8 并设图层样式

最终的效果哪下图:

14.添加一条新的参照线:550px.接下来我们来做内容的背景。选择圆角矩形工具”并设圆角半径为:15px,从参照线:550px到页面的底部。

15。添加一条参考线:680px;从这个参考线到550px那条之间,添加类似“公告栏”文字。

16。添加一条参考线:880px,和参考线:680px之间,使用“矩形工具”绘制一个矩形,填充任一颜色,

并添加如下图的“图层样式”。

添加一些尺寸为:180*135px的图片,并设“图层样式”。

17.接下来我们给图片的两边加一个“箭头”,使用“自定义图形”选择一个箭头的形状,并设置“图层样式”(颜色叠加:#87cdf5)

18。添加图片和文字,如下图:

19。再次添加新参考线:1280px和1350px,使用“矩形工具”绘制出一个矩形,并设如下图“图层样式

20。添加图标(图标的颜色:#87cdf5),文字

21。接下来绘制分隔线

使用“线条工具”绘制两条坚线,一条填充:#0270bc;另一条:#148bcf。

然后点击“面板”上的“蒙版图标”,

添变效果如下图:

22。最终效果如下图:漂亮不,一个清爽的网页布局就在你手上制作出来了。

全教程完,学完记得交作业。如果本教程对您有所帮助,请推荐给你的朋友。

【原创教程 投稿邮箱: ps@16xx8.com】

长按二维码关注我们

关注我们微博:@photoshop教程论坛

推荐教程