IT技术博客大学习 共学习 共进步
全部 移动开发 后端 数据库 AI 算法 安全 DevOps 前端 设计 开发者

按钮制作一小例

流金岁月 2010-07-18 23:28:23 累计浏览 2,986 次
本机暂存

    以下为最终效果图:

    原图已失效

    下面讲一下大致的步骤;

     1.在photoshop中新建文件,宽度200、高度200px,白色背景。

     2.我们准备一个简单的背景。我倾向于用亮灰色做渐变填充。使用大、小柔角画笔,大画笔绘制中上方的光影,小画笔用来绘制画布正中间偏上的光影,

     原图已失效

     3.按快捷键U调出圆角矩形工具,圆角半径设为10px,沿着参考线绘制圆角矩形。

    原图已失效

    渐变叠加原图已失效,效果如下:

    原图已失效

     4.现在让我们为按钮增加些阴影和高光。在按钮上一层新建图层,使用矩形工具绘制矩形选区并填充深灰色。

    原图已失效

    滤镜-模糊-高斯模糊

    原图已失效

    置于所有图层的顶端,混合模式设为“叠加”,使用白色柔角画笔绘制按钮的顶部

    原图已失效

    复制图层,改变混合模式为“正常”,调整大小,位置略高于按钮的上边缘。

    原图已失效

    最终效果如下:

    原图已失效

    原文:http://blog.19ued.com/?p=996

同分类推荐文章

  1. translateZ() (2026-06-25 21:18:56)
  2. translateY() (2026-06-25 21:17:56)
  3. translateX() (2026-06-25 21:16:01)

查看更多 前端 文章 →

建议继续学习

  1. JQuery实现Excel表格呈现 (累计阅读 48,350)
  2. 50个活力和动感的网页设计-颜色的灵感 (累计阅读 34,442)
  3. 深入理解Javascript之执行上下文(Execution Context) (累计阅读 18,404)
  4. 从输入 URL 到页面加载完成的过程中都发生了什么事情? (累计阅读 15,933)
  5. 图片动态局部毛玻璃模糊效果的实现 (累计阅读 14,849)
  6. 天朝第二代身份证号码的验证机制 (累计阅读 14,762)
  7. HTML 5 的data-* 自定义属性 (累计阅读 14,349)
  8. 分享一个JQUERY颜色选择插件 (累计阅读 14,223)
  9. 什么是全栈工程师? (累计阅读 14,038)
  10. 视觉设计前瞻实用性研究(PNVD) 第二期 (累计阅读 12,977)