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

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

作者:站长图库 字体:[增加 减小] 来源:互联网

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

如果你是设计师,那么创建界面元素是非常重要的技能。本次教程中,我们会创建一个简单漂亮的切换开关按钮。切换开关经按钮常用于某项功能的启用与关闭,他们经常出现在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好友复制网址打印

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

相关文章

  • 详解JS,Jquery获取屏幕的宽度和高度代码
  • Photoshop结合C4D制作三维立体艺术字
  • 忘记mysql密码了怎么办
  • 趣味讲解Node.js中的回调函数(附示例)
  • 设计师应该从四个方面优化网站
  • ThinkPHP 6.0 多语言优化扩展包的安装与使用
  • CDR绘制红色枫叶背景插画
  • Photoshop绘制质感IE图标教程
  • PhotoShop制作简单的桔子果肉文字效果新手教程
  • 在CSS中怎么给按钮添加背景图片(详解及实例)

文章分类

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

最近更新的内容

    • PhotoShop制作漂亮的蓝色发光文字效果教程
    • 分享thinkphp withCredentials跨域问题解决思路
    • 怎么提高百度搜索引擎关键词的排名
    • 10分钟一步步带你看完最常用的git命令
    • 浅谈Bootstrap Tab标签页切换图表显示问题的解决方法
    • Photoshop制作绿色风格金属立体字教程
    • 关于thinkphp5中分页paginate()之后的数据中添加键值
    • PHP版抖音去水印代码
    • AI教程几何图形小鸟LOGO视频教程
    • PHP中mysql_connect()函数不支持怎么办

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

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