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

2016-02-16 08:26 13 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的Photoshop制作一个漂亮的网页按钮,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - PS 】

让我们一起来看看这个教程吧

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 1

我们将首先在Photoshop创建一个新文档。 让我们有1024 × 768px

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 2

为了填补你的背景,选择渐变工具(G)的渐变编辑器打开了,并输入您的颜色值按下面的图像

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 3

让我们创造了我们的按钮的机构。 使用圆角矩形工具(U),现在只是创造了约320 × 95px,对5px半径和填充任何颜色(它的矩形,因为我们将添加一个渐变叠加)。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

我们将加强它如何给予它一些图层样式外观。 首先,套用阴影。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

内发光效果

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

斜面和浮雕

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

最后,一个渐变叠加

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 4

现在,让我们继续创造箭头机构。 我们将首先创建一个约60 × 55px的矩形使用矩形工具(U)。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

继续下去,并给它一些图层样式。 下面的图片以供参考使用

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

为了确保它的垂直和对齐,选择这两个层次,其中包含按钮和箭头机构(概括地讲,我们只有两个层迄今)和对齐单击控制条垂直中心

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

创建一个小的矩形,如在下面的图片1()。然后转到编辑变换斜交V:30

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

给它同样的图层样式

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 5

使用自定义形状工具(U)创建一个约30 ×箭头。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

给它一些图层样式根据下面的图像

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 6

让我们创造我们的分离。 使用椭圆选框工具(M),创建一个类似下面的选择。 设置你的前景色黑色(#000000),然后单击转移+ Backspace键得到填补

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

为了使它看起来有点模糊。 滤器模糊高斯模糊 – 半径:3.0px

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

请在它的左边部分的选择(见下面的参考)图像,然后按下删除

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

减少这层不透明度为:50%。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

打开你的渐变编辑器并设置颜色值按下面的图像。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

在选择分离器的层上添加单击图层蒙板。 然后拖动与梯度(我们刚刚成立的顶部)上下。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 7

创建另一个在左侧的三维形状,使用上面我们已经解释过相同的技术

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

Step 8

输入字体

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

应用一些图层样式给它。 Use the image below for reference.下面的图片以供参考使用。

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

得到最终效果

Photoshop制作一个漂亮的网页按钮,PS教程,图老师教程网

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

延伸阅读
制作元宝之前,需要自己去网上搜集一些好看的元宝素材;找出自己喜欢的款式,再了解清楚构造;然后按照分解图慢慢去刻画即可。 最终效果 1、新建一个1000 * 700像素,分辨率为72的画布。选择渐变工具,颜色设置如图1,然后由中心向边角拉出图2所示的径向渐变作为背景。 图1 图2 2、新建一个组,用钢笔勾出元宝...
网标相对来制作要随意一些,它不像企业或商业标志一样有很多限制。不过要真正做好还是要花费很多的时间和精力。下面的教程是用PS来制作网标,如果要专业一点话需要用到AI等来制作。 最终效果 1、新建一个大小适当的文档,背景填充淡黄色。新建一个空白图层1,选择椭圆选框工具,并设定好固定大小,画出一个圆形选区,并填充红色。 2、...
芒果细节部分较少,制作过程也比较简单。先找一幅较为完好的芒果实物图作为参考,然后找出暗部及高光部分,再慢慢渲染即可。 最终效果 1、新建一个800 * 600像素的文件,背景选择白色。确定后新建一个组,用钢笔工具把芒果的轮廓勾出来,转为选区后给组添加图层蒙版,如下图。 图1 2、在组里新建一个图层,填充橙黄色:#FFCD...
小海螺构造并不复杂,不过构成的段还是很多的,同时需要绘制的面也是很多的。由于海螺的颜色较淡,绘制的时候重点是边缘的高光及暗部渲染出来,这样主体的立体感才会更强。 最终效果 1、新建一个1024 * 768像素的文件,选择渐变工具,颜色设置如图1,拉出图2所示的径向渐变作为背景。 图1 图2 2、先来制作海螺的...
来源:PS联盟 作者:Sener 金蛋跟鸡蛋制作方法基本类似,只是金蛋表面更接近金属效果,反差稍大一些,质感也更强一点,制作的时候需要保持耐心。 最终效果 1、新建一个900 * 750像素的文件,选择渐变工具,颜色设置为灰色至深灰色如图1,图老师拉出图2所示的径向渐变作为背景。 图1 图2 2、新建一个组,用钢笔勾出鸡蛋的轮廓,转为选...

经验教程

930

收藏

5
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部