Photoshop绘制立体质感的网页开关按钮

  如果你是设计师,那么创建界面元素是非常重要的技能。本次教程中,我们会创建一个简单漂亮的切换开关按钮。切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在UI设计与网页应用设计中。

  好了,来开始我们的教程吧~


  第1步:

  打开Photoshop,Ctrl+N新建一个文档,尺寸选择600×500px。


  第2步:

  按住Alt键双击背景图层,将其转换为普通图层。再次双击,打开图层样式面板,为其添加由#f6fcff到#bbddff的径向渐变。


  第3步:

  利用圆角矩形工具在画布中央创建一个半径为50px的圆角矩形。颜色设置为 #aec24e。


  第4步:

  双击圆角矩形图层,为其添加图层样式。


  第5步:

  使用椭圆工具,按住Shift键在圆角矩形右侧创建出一个正圆。

分类:

  • PS鼠绘教程
时间: 2024-08-03 13:24:55

Photoshop绘制立体质感的网页开关按钮的相关文章

PhotoShop绘制高光质感水晶网页按钮教程

教程学习如何用Photoshop制作一款可以变换颜色的质感水晶按钮,主要用到了圆角矩形和图层样式,喜欢的朋友就一起来学习吧. 先看效果图. 新建文档500x300像素,背景黑色,新建图层,画一半径200的白色圆角矩形. 添加图层样式. 效果如下. 新建图层,再画一个小的白色圆角矩形,图层不透明度50%. 下面制作倒影,复制大的圆角矩形图层,新建图层1,然后合并2个图层得到图层1,ctrl+T垂直翻转挪到底部. 添加蒙版黑白直线渐变,图层不透明度80%左右,输入白色文字,效果如下. 如果你觉得蓝色

Photoshop绘制立体质感的感叹号图标

本教程学习如何用Photoshop设计一个系统出现错误提示时出现的感叹号图标,主要用到Photoshop的钢笔和图层样式来制作完成,最终效果图的立体感和质感很强,喜欢的朋友可以一起来学习吧. 先看效果图. 1.新建文档1280x1024像素,背景填充浅灰色,建新层,画一个黑色椭圆,ctrl+T水平方向压扁一下,旋转一定角度. 2.添加图层样式. 效果如下. 3.建新层,用钢笔做如下选区,填充白色,不透明度35%. 4.建新层,方法同第一步,画一个白色椭圆. 5.添加图层样式. 效果如下. [1]

Photoshop绘制金属质感的网页界面

1. 首先给大家看下整体效果. 2. 启动本教程你将需要创建一个新文件.使用任何你想要的值,但是我建议你创建一个文件的最小宽度为1100*1163像素.背景填充# 252118. 3. 原教材玩神秘没有写怎么做,我用我的方法做了一下,你可以复制一个刚刚做的图层,选择画笔工具,大小设成1100px,硬度0%.柔光,把这个图层透明度调到60%就ok了. 4. 在中间用圆角矩形画个995*295的圆角矩形.填充#52442b. 5. 复制一个上面图形,把颜色改成#e9e9e9. 6. 在页脚创建一个新

Photoshop绘制立体质感下载按钮

先看效果图. 新建文档400x300像素,背景白色,新建图层画一个圆角矩形. 添加图层样式. 效果如下. 新建图层,拖出一些辅助线,用钢笔画出下图形状,如果是懒童鞋,辅助线可以省略. 添加图层样式. 效果如下. 形状2底部新建图层,画一个白色圆角矩形. 添加图层样式. 最后添加一些文字和阴影,最终效果如下,本ps教程结束.         注:更多精彩教程请关注三联photoshop教程栏目,三联PS群:182958314欢迎你的加入 分类: PS鼠绘教程

Photoshop绘制时尚质感的圆形播放器UI图标

  本教程主要使用Photoshop绘制时尚质感的圆形播放器UI图标方法,今天这篇教程适合新手练习,重点是帮同学们深入理解图层样式的运用,喜欢的朋友跟着教程一起来学习吧. 先看看效果图 第一步:新建画布,大小自定,填充一个淡色. 第二步:画一个圆形,大小自定,填充如下. 接上边的数值. 第三步:复制底圆,然后Ctrl+T,调整他的大小,添加图层样式. 接上数值: 第四步:再画一个圆形,调整大小位置. 图层样式数值. 第五步:再画一个圆形,加渐变效果. 渐变数值: 第六步:画一个三角形,填充自己喜

Photoshop绘制立体风格的快门镜头图标

  本教程主要使用Photoshop绘制立体逼真的相机镜头图标,立体效果主要使用图层叠加来完成,质感效果主要通过图层样式来完成,喜欢的朋友让我们一起来学习吧. 教程素材:立体逼真的相机镜头PSD源文件       分类: PS入门教程 ps图标制作教程

Illustrator结合photoshop制作立体质感钢铁面具教程分享

给各位Illustrator软件的使用者们来详细的解析分享一下结合photoshop制作立体质感钢铁面具的教程. 教程分享: 1.打开Illustrator新建一个文档,首先我们应该有个好的参考,在中间创建圆形和线条.我们现在只创建一半就可以,用钢笔工具勾勒出大致的轮廓.   2.将面具的每个部位都创建成单独的形状,这有利于我们后面在Photoshop中进行填色和填充纹理.       3.所有的形状都创建完了之后,使用不同明度的灰色填充来看看一切是否跟想象中的一样.   4.将创建好的半个面具

Photoshop制作金属质感的网页导航条

本教程主要使用Photoshop设计金属质感的网页导航条,大部分都是在图层样式下完成的. 效果 1, 在PS中新建文件,宽度定义为1000px,实际上我们所要用到的宽度一般在950px-980px之间.为了方便更好的展示网站的整体效果.所以文件的宽度应大于网页实际的宽度.高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度.这样,整个页面制作好了.我们可以使用裁切工具.将多余的部分裁切掉. 2, 这个实例,以网站实际宽度为800像素为例进行操作.为

Photoshop绘制立体逼真的红蜻蜓玩具

  本教程组要使用Photoshop绘制立体逼真的红蜻蜓玩具图标,教程绘制出来的效果挺漂亮的,绘制的难度也不大,推荐过来和思缘的朋友们一起分享,喜欢的朋友让我们一起来需学习吧. 分类: PS鼠绘教程