Photoshop制作一个简单又时尚的UI按扭

2016-02-16 05:47 4 1 收藏

想要天天向上,就要懂得享受学习。图老师为大家推荐Photoshop制作一个简单又时尚的UI按扭,精彩的内容需要你们用心的阅读。还在等什么快点来看看吧!

【 tulaoshi.com - PS 】

来看下效果。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

1.新建一个文档(ctrl+N)大小为:600*600(虽然我们按扭的大小:170*50,但是尺寸大方便我们的修改)

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

2.选择圆角矩形工具并设圆角5px绘制一个大小为:170*50 的圆角矩形。(可以使用标尺定位)

3.新建一个图层,按组合键ctrl+enter把路径转化为选区,并填充黑色。

双击这个图层给图层添加渐变叠加和描边样式。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

渐变叠加样式

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

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

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

描边样式(描边颜色:#2877ac)

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

4.接下来要给按扭添加一个斜线效果

新建文档(ctrl+N)大小为:4*4。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

按ctrl+空格键,放大文档到1600%。新建一个图层并删掉背景图层。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

在工具箱选择铅笔工具并设置笔尖大小为1px;前景色为白色。画出如下图效果:

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

在菜单栏找到,编缉定义图案;并给图案命个名字:diagonal line pattern.

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

返回主文档,按ctrl键不放;并单击按扭图层,使按扭图案变成选区。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

在按扭图层上新建一个图层,然后在菜单栏找到:编辑填充,在弹出的对话框中,在下拉菜单中选择图案,在下面的自定义图案选择我们刚才自定义图案diagonal line pattern。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

在菜单栏找到:选择修改收缩,把选区收缩2px,接下来把选区反选(ctrl+shift+I);按delete键删除边缘部分,这样就可以把描边显示出来。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

更改混合模式柔光并调不透明度:20%

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

5.选择文字工具并找一个你自己喜欢的字体,字体大小:24pt,颜色:#ffffff.输入文字Buy Now。

双击文字图层,添加一个投影样式(投影颜色:#2877ac)。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

6.在工具箱选择自定形状工具,并在选项栏找到如下的图形。

绘制出大小:13*13;并填充白色,添加一个和文字一样的样式。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

7。创建hover状态

在图层面板上新建一个组:Normal,把除背景外图层全部拉到这个组里面。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

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

使用移动工具把组Normal拖到新建图层按扭上,复制出一个组并命名:Hover

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

双击组Hover中的黑色图形图层,更改其"渐变叠加"样式:

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

接下来,我们开始切片。

使用切片工具把按扭的范围选中。在菜单栏找到:文件另存为Web所用格式,另存为gif格式。

Photoshop制作一个简单又时尚的UI按扭,PS教程,图老师教程网

来源:https://www.tulaoshi.com/n/20160216/1568784.html

延伸阅读
  unit Unit1; interface uses   Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms,   Dialogs, jpeg, ExtCtrls, StdCtrls, ComCtrls, Grids,   DirOutln, Buttons, DdeMan,shlobj,comobj,activex; type   TForm1 = class(TForm)   &nbs...
Photoshop利用照片简单制作一个恐怖效果   Photoshop利用照片简单制作www.tulaoshi.com一个恐怖效果
本教程介绍简单的立体图标的制作方法。大致过程:先绘制好想要的图层,然后利用图层样式做一些质感效果。然后再透视,做成立体效果。 最终效果 1、新建文件,然后选择矩形工具(U)半径为30px。 2、选择标尺(ctrl+R);拉两条辅助线,吧矩形平均一分为四。 3、选择矩形工具,颜色为红色: 4、载入圆角矩形选区,反选(shift+ctrl...
本教程介绍简单的苹果图标的制作方法。图标的制作并不像写实风格那么复杂。我们只要大致标出苹果的高光及暗调部分,再用渐变色处理好过渡即可。 最终效果 1、新建一个800 * 600像素的文档,背景填充白色。新建一个图层,用钢笔勾出苹果主体部分的路径,转为选区如下图。 图1 2、选择渐变工具,颜色设置如图2,拉出图3所示的...
补肾是人们在日常的生活中常常会听到的,也是常常会做的。而补肾的方法是非常的多的,有一些水果、饮食或是一些小方法、小妙招。那么你知道中医怎么样补肾吗?今天图老师小编就为大家介绍一下补肾中药、食疗补肾以及中医中的拔罐、按摩、针灸补肾法。 目录 1、中医按摩补肾 2、中医针灸补肾 3、中医刮痧补肾 4、中医拔...

经验教程

990

收藏

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