您当前的位置:首页 > 计算机 > 软件应用 > 图形编设

网页模板_Photoshop制作清爽绿色风格网页模板

时间:01-15来源:作者:点击数:

效果图:

Photoshop制作清爽绿色风格网页模板

01创建一个1020px X 1060px的文件。

Photoshop制作清爽绿色风格网页模板(1)

02。改变背景颜色。用油漆桶工具,填补背景层颜色:#e3dec1。

03。选择矩形工具,绘制出尺寸形状:1022X173和填充黑色(#343434)。

04。选择一个矢量图片素材,透明度设置为23%。

Photoshop制作清爽绿色风格网页模板(2)

05。选择矩形工具(U)和添加形状(244 × 119),使用颜色#a3cb31。

Photoshop制作清爽绿色风格网页模板(3)

06。下一步使用矩形工具,创建另一个形状,尺寸:239X130,图层样式:投影和渐变效果。

Photoshop制作清爽绿色风格网页模板(4)
Photoshop制作清爽绿色风格网页模板(5)
Photoshop制作清爽绿色风格网页模板(6)

07。下一步将是增加logo。

Photoshop制作清爽绿色风格网页模板(7)

08。完成logo后,在右边添加一些标语文字。

09。下面开始制作导航目录,选择矩形工具来创建一个形状(1022X46),并添加层的样式效果。

Photoshop制作清爽绿色风格网页模板(8)

将导航条和上方的头部保持1~2px的间距(将导航条像下移动)。

Photoshop制作清爽绿色风格网页模板(9)

10。下添加一个鼠标选中和当前页面的效果。用椭圆工具(背景设置为白色),并制订一个小的形状。

Photoshop制作清爽绿色风格网页模板(10)

11。应用高斯模糊(滤镜>模糊>高斯模糊)与15px半径。

Photoshop制作清爽绿色风格网页模板(11)

12。在这一步骤中将添加一些导航文本。

Photoshop制作清爽绿色风格网页模板(12)

13。导航栏看上去有点空,在右侧再添加个搜索框。选择矩形工具,添加一个尺寸:255 × 26的框,设置层样式:(内投影)。

Photoshop制作清爽绿色风格网页模板(13)
Photoshop制作清爽绿色风格网页模板(14)
Photoshop制作清爽绿色风格网页模板(15)

14。选择矩形工具,绘制出形状(在导航栏)在下方:1022X32。颜色填充:#c0de7a。

15。添加一些其他素材。

Photoshop制作清爽绿色风格网页模板(16)

向上移动,主要图层摆放关系。

Photoshop制作清爽绿色风格网页模板(17)

17。接下来,重复复制素材(层>复制层)。

Photoshop制作清爽绿色风格网页模板(18)

18。步骤重复5-7次以上,然后把每个层的透明度设置为16%就差不多了。

Photoshop制作清爽绿色风格网页模板(19)

下面开始制作中间的宣传部分

19。选择矩形工具,并创建一个尺寸形状:1022 x 178。使用这种颜色:#80ad0a。

20。在形状中创建一个循环使用椭圆工具。

21。选择矩形工具,选择绿色背景高度。

Photoshop制作清爽绿色风格网页模板(20)

22。按Ctrl + Alt +I(反向选择),然后按下删除。删除多余部分。

Photoshop制作清爽绿色风格网页模板(21)

23。现在修饰一下这个部分,在中间放一个向日葵,在两边添加一些矢量装饰图和一些文本。

Photoshop制作清爽绿色风格网页模板(22)

24。选择矩形工具,绘制出形状。尺寸: 969x563。

25。然后应用投影样式。

Photoshop制作清爽绿色风格网页模板(23)

26。下面添加一些文章,并添加一些装饰。

Photoshop制作清爽绿色风格网页模板(24)

27。制作右边的部分,选择矩形工具,并创建一个矩形,尺寸:275x508,并应用图层样式。

Photoshop制作清爽绿色风格网页模板(25)
Photoshop制作清爽绿色风格网页模板(26)

添加一些图片和一些文字。

28。制作底部,在页脚需要添加一些版权信息,添加一些矢量图片装饰。

Photoshop制作清爽绿色风格网页模板(27)
Photoshop制作清爽绿色风格网页模板(28)
方便获取更多学习、工作、生活信息请关注本站微信公众号城东书院 微信服务号城东书院 微信订阅号
推荐内容
相关内容
栏目更新
栏目热门