甲虫课堂 > PS教程 >

ps制作web2.0风格软件开发公司网站模版

阅读
2021-02-01 18:07:02

最终效果:

Photoshop制作web2.0风格软件开发公司网站模版

新建760x770大小PS文件,设置前景色为#e8e8e8,新建图层,随后用油漆捅工具在新建的图层上制作渐变色,颜色从#e8e8e8到透明

Photoshop制作web2.0风格软件开发公司网站模版(1)

随后用油漆桶从下往上拉条渐变线

Photoshop制作web2.0风格软件开发公司网站模版(2)

用圆角矩形工具,半径为7px

Photoshop制作web2.0风格软件开发公司网站模版(3)

随后制作圆角矩形形状

Photoshop制作web2.0风格软件开发公司网站模版(4)

使用椭圆工具制作下面四个正圆(按shift建绘制正圆)

Photoshop制作web2.0风格软件开发公司网站模版(5)

为四个圆添加图层样式

Photoshop制作web2.0风格软件开发公司网站模版(6)

Photoshop制作web2.0风格软件开发公司网站模版(7)

Photoshop制作web2.0风格软件开发公司网站模版(8)

Photoshop制作web2.0风格软件开发公司网站模版(9)

Photoshop制作web2.0风格软件开发公司网站模版(10)

Photoshop制作web2.0风格软件开发公司网站模版(11)

再制作四个黑色的圆放在之前的图层上

Photoshop制作web2.0风格软件开发公司网站模版(12)

为黑色的圆添加图层样式

Photoshop制作web2.0风格软件开发公司网站模版(13)

Photoshop制作web2.0风格软件开发公司网站模版(14)

Photoshop制作web2.0风格软件开发公司网站模版(15)

Photoshop制作web2.0风格软件开发公司网站模版(16)

Photoshop制作web2.0风格软件开发公司网站模版(17)

Photoshop制作web2.0风格软件开发公司网站模版(18)

选中按钮的所有图层

Photoshop制作web2.0风格软件开发公司网站模版(19)

将所有图层复制一次

Photoshop制作web2.0风格软件开发公司网站模版(20)

选中复制出的所有图层,随后按ctrl+e合并为一个图层

Photoshop制作web2.0风格软件开发公司网站模版(21)

编辑 > 变换路径 > 垂直翻转,然后将复制出的按钮移动到原按钮的下方

Photoshop制作web2.0风格软件开发公司网站模版(22)

目的是为了制作按钮的倒影效果,先选择笔刷

Photoshop制作web2.0风格软件开发公司网站模版(23)

随后对按钮进行笔刷涂沫

Photoshop制作web2.0风格软件开发公司网站模版(24)

最后设置不透明度为20%就完成了倒影的制作

Photoshop制作web2.0风格软件开发公司网站模版(25)

再加入一些icon的小图标作为装饰

Photoshop制作web2.0风格软件开发公司网站模版(26)

开始制作导航条部分

Photoshop制作web2.0风格软件开发公司网站模版(27)

加入导航文字与LOGO

Photoshop制作web2.0风格软件开发公司网站模版(28)

随后为导航文字制作鼠标移动上时的效果图

Photoshop制作web2.0风格软件开发公司网站模版(29)

在上面的黑色圆角矩形图层上按右键选择”删格图层“,完全转换为象素图,而没有路径边框了

Photoshop制作web2.0风格软件开发公司网站模版(30)

用选区工具去掉下面的多余部分

Photoshop制作web2.0风格软件开发公司网站模版(31)

Photoshop制作web2.0风格软件开发公司网站模版(32)

添加文字与内容

Photoshop制作web2.0风格软件开发公司网站模版(33)

制做一个促销的图标,用多变形工具

Photoshop制作web2.0风格软件开发公司网站模版(34)

制作一个白色的多边形,随后加一些文字

Photoshop制作web2.0风格软件开发公司网站模版(35)

使用笔刷做对页面一些修饰即可

Photoshop制作web2.0风格软件开发公司网站模版(36)

Photoshop制作web2.0风格软件开发公司网站模版(37)

Photoshop制作web2.0风格软件开发公司网站模版(38)

Photoshop制作web2.0风格软件开发公司网站模版(39)

相关搜索
明星图片合成磨皮教程画笔封面设计夜景明星ps合成图磨皮立体字合并图层
相关教程
相关评论
X
0条回复

全部回复

回复...
X
X
写评论...
0
更多
X