网站上常见的圆角凹边按钮制作方法

2016-02-16 03:58 16 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享网站上常见的圆角凹边按钮制作方法,希望可以让热爱学习的朋友们体会到PS的小小的乐趣。

【 tulaoshi.com - PS 】

我们经常可以看到此类的按钮,他们一般出现在导航上面,那么我们快速的掌握他们的制作技巧会对我们的工资有很大的帮助。老板不是总是要求你又快又好嘛。这里就和大家分享一下,制作这类导航按钮两种方法。不要说那种好,那种不好的幼稚话,关键是你要掌握,举一反三。那我们就开始吧,要求是5分钟学会。

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

用圆角矩形工具画出一个框子出来,注意哦在右侧圆角矩形工具的下拉菜单下,把 对齐像素 给选上,这样可以保证你画出的图形边缘干净,一定要注意哦。

然后CTRL+ENTER把框子变成选区。ALT+DELETE 给这个选区添加上前景色,这里我选择了#eb6100 橘色作为前景色。

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

第二步是很重要的,不过新君这里的截图不是很细致的说,我还是尽量说的详细点吧。新建一个图层,画一个矩形填入前景色。然后按住CTRL不放点击图层,获取第一图层的选区。然后选择矩形选框工具

移动选区到图层2,按下DELETE键删除一部分的矩形。

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

第三步,复制刚才那个做过的矩形,水平翻转,如图对齐。

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

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

完工了。你成功了一半,当然这样上去有点单薄。我们可以给这个按钮加入各种的样式,增加它的质感。

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

下面完成第二种方法也是很多人都在使用的一个种方法。

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

还是用圆角矩形工具画出一个框子,下面一步很重要哦。用白色的箭头工具,选中左下角的两个节点。这时按CTRL+T

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

关键的到了,我们找到中心点,按住ALT移动中心点到左侧,然后单击右键,选择水平翻转。右侧也是同样的方法。

网站上常见的圆角凹边按钮制作方法,PS教程,图老师教程网

最后给这个框子添加前景色OK,完工。

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

延伸阅读
标签: Web开发
网站建设-给网站上的广告“加速”的方法 第一种是采用iframe+html的方式调用。不管iframe插入在什么地方,加载网页的时候首先是先加载正文内容,然后才加载iframe里的东西。代码如下: iframe src="15zone.cn" target="_blank"15zone.cn/blog/post/huazonghua-guanggao.html" target="_blank"http://www.15zone.cn" tar...
标签: 布艺diy 布艺
和祖母花园的六边形拼布不同,包边型六边形在制作单一一个六边形时就将表层、夹层和底层三层合并在一起。 所以在裁剪时我们要为一个六边形裁剪三层料子,其中表层和做夹层的辅棉是和完成的尺寸一样大小,无需添加缝份的。而底层则要在四周拓宽缝份,缝份的宽度视你需要包边的宽度而定,例如完成后的包...
PS游戏网站按钮制作步骤   游戏按钮制作教程: 先看下整体效果: 背景部分: 深色 暖色 纯 背景很简单,这里不做处理,直接画出一个深色的背景,纯色,未经处理。 形状部分: 矩形 橡皮红擦 耐心 感觉 形状一定要画好,这里先画出一个矩形,再用橡皮擦工具,擦出边缘破旧的效果,感觉不...
标签: PS PS基础
先看看效果图 第一步 新建一个文档(Ctrl+N),命名为button,大小设置为640×480,其余选项留作默认。 第二步 在图层面板中新建一个图层,选择圆角矩形工具(U),半径设置为80像素,画出一个矩形。 第三步 在图层面板中双击layer 1″,打开图层样式对话框。勾选渐变叠加(Gradient Overlay),在渐变叠加面板上点击渐...
  对任我飞扬1.3,乔客6.0,dvbbs 3.0 sp2之前所有版本有效,其它论坛也可以使用,具体原理不再分析,以前的很多文章都有介绍。 软件下载地址: http://free.efile.com.cn/hnxyy/CommUpFile.exe 原代码: unit untmain; interface uses   Windows, Messages, SysUtils, Var...

经验教程

271

收藏

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