Photoshop制作简洁的网页按钮

2016-02-16 05:17 37 1 收藏

下面图老师小编要向大家介绍下Photoshop制作简洁的网页按钮，看起来复杂实则是简单的，掌握好技巧就OK，喜欢就赶紧收藏起来吧！

【 tulaoshi.com - PS 】

先看效果图。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

新建文档500x300像素，背景黑色，新建图层，画一半径200的白色圆角矩形。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

添加图层样式。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

效果如下。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

新建图层，再画一个小的白色圆角矩形，图层不透明度50%。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

下面制作倒影，复制大的圆角矩形图层，新建图层1，然后合并2个图层得到图层1，ctrl+T垂直翻转挪到底部。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

添加蒙版黑白直线渐变，图层不透明度80%左右，输入白色文字，效果如下。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

如果你觉得蓝色不好看，想换个颜色，那就添加一个色相/饱和度调整层。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

颜色随心换，只要你喜欢，本ps教程结束，其它效果如下。

Photoshop制作简洁的网页按钮,PS教程,图老师教程网

来源:http://www.tulaoshi.com/n/20160216/1568509.html

上一篇： Photoshop调出手机照片经典怀旧色调
下一篇： Photoshop给古典美女线稿上色教程

看过《Photoshop制作简洁的网页按钮》的人还看了以下文章更多>>

Photoshop制作精致大气的绿色网页按钮教程

标签： PS PS基础 ps平面设计教程 ps去水印教程

来源：站酷作者：酷头儿对于各界交互界面大师来说，按钮的制作无疑是不可缺少的一个组成部分，但是习惯于运用多个图层叠加出非常漂亮的效果的时候，修改极不方便。下面介绍如何用图形渐变及图层样式简化这些图层。最终效果 1、新建大小自定的文档，背景填充青色。先用钢笔建立路径，如下图。 2、创建渐变调整图层，渐变颜色位置随意，...

Photoshop制作一个漂亮的网页按钮

标签： PS PS基础

让我们一起来看看这个教程吧 Step 1 我们将首先在Photoshop创建一个新文档。让我们有1024 × 768px Step 2 为了填补你的背景，选择渐变工具(G)的渐变编辑器打开了，并输入您的颜色值按下面的图像 Step 3 让我们创造了我们的按钮的机构。使用圆角矩形工具(U)，现在只是创造了约320 × 95px，对5px半径和填充任何颜色(它的矩...

Photoshop制作网页常用质感按钮图标

标签： PS PS基础 ps平面设计教程 ps去水印教程

来源：腾龙视觉作者：不详本教程介绍较为精致的圆形按钮的制作方法，由于图层较多，制作的时候需要注意好图层的顺序。另外按钮以水质质感为主，需要用图层样式控制好光感。最终效果 1、新建一个大小适当的文档，背景填充灰色。 2、新建图层，选择“椭圆”工具进行绘制。 3、为“形状 1”添加图层tulaoShi...

Photoshop制作红色高光质感网页按钮

标签： PS PS基础 ps平面设计教程 ps去水印教程

最终效果 1、新建一个800 * 600 像素的文本，选择渐变工具，颜色设置如图1，拉出图2所示的线性渐变作为背景。图1 图2 2、新建一个图层，用椭圆选框工具在画布的中间位置拉出图3所示的正圆选区。选择渐变工具，颜色设置如图4，拉出图5所示的tulaoshi径向渐变。拉好渐变后暂不要取消选区。图3 图4...

Photoshop绘制立体风格的简洁按钮教程

标签： PS PS基础

先看看效果图 1、新建文件 2、选择背景颜色 3、alt+delete键填充前景色。 4、椭圆工具新建一个正圆(椭圆1图层)。 4.1、双击椭圆1图层调节图层样式颜色叠加、描边，参数如图。 4.2、得到椭圆1的效果。 5、再新建椭圆2，大小如图。 5.1、双击图层调节图层样式：颜色叠加、描边、投影。 6、得到效果...

查看更多精彩>>