• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧
您的位置:首页 > CMS教程 >建站教程 > Photoshop绘制立体质感的网页开关按钮

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

作者:站长图库 字体:[增加 减小] 来源:互联网 时间:2022-04-29

站长图库向大家介绍了等相关知识,希望对您有所帮助

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


先看看效果图

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

下面是教程

第1步:

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

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

第2步:

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

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

第3步:

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

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

 

第4步:

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

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

第5步:

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

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

 

然后为其添加图层样式。

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

第6步:

在圆形按钮下方新建一个图层,用黑色柔边画笔绘制出阴影。

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

 

第7步:

在圆形按钮上方再创建一个圆形。

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

为其添加图层样式。

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

第8步:

利用文字工具在滑动凹槽键输入ON。字体选用Myriad Pro,图层混合模式设置为亮光。

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

 

为文字添加投影。

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库

OK,一个非常简单的切换开关按钮就制作完成了。试着改变按钮的颜色来创建更多的按钮吧~

Photoshop绘制立体质感的网页开关按钮,PS教程,站长图库


分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

相关文章

  • 2022-04-29详解thinkphp6后台添加google登录验证
  • 2022-04-29Photoshop制作个性时尚的立体字教程
  • 2022-04-29css如何实现适配iphone全面屏
  • 2022-04-29一文讲解Wordpress插件怎么查找并安装
  • 2022-04-29vue+flask实现视频合成功能(拖拽上传)
  • 2022-04-29利用滤镜及图层样式制作简单的积雪字
  • 2022-04-29解析ThinkPHP5之 _initialize() 初始化方法
  • 2022-04-29FCKeditor安装FLV视频插件,适用所有CMS
  • 2022-04-29Photoshop设计水晶质感的立体盒子教程
  • 2022-04-29浅谈利用Node.js如何获取WI-FI密码

文章分类

  • dedecms
  • ecshop
  • z-blog
  • UcHome
  • UCenter
  • drupal
  • WordPress
  • 帝国cms
  • phpcms
  • 动易cms
  • phpwind
  • discuz
  • 科汛cms
  • 风讯cms
  • 建站教程
  • 运营技巧

最近更新的内容

    • PHP中怎么将整型转化为字符串类型?
    • Mysql怎么查看字段的属性值
    • 列举论坛最常见的SEO优化问题及解答
    • 详解JS,Jquery获取屏幕的宽度和高度代码
    • PhotoShop制作滚动渐隐文字GIF动画教程
    • PHP7留言板开发之 Ajax异步提交
    • PHP如何使用Callback/Callable类型
    • 百度统计升级屏蔽黑灰产信息功能
    • PS制作漂亮的‘少了你世间万种都成单调’古风图
    • PHPcms v9调用热门文章的两种方法

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有