教育观察手机版

m.edugc.com

教育观察官方微信

陕西教育观察网 陕西教育观察网
www.edugc.com
关于本站
在线投稿
网站地图
 首 页  教育资讯 学历教育 培训充电 外语天地 出国留学 创业就业 教育互动 教育资源库 《陕西教育观察》
热烈祝贺陕西省教委教育交流中心自费出国留学资质经省教育厅正式批准变更为陕西教育观察留学中心! | 热烈祝贺“陕西教育观察”官方权威门户网正式改版开通了!欢迎教育界的同仁互动交流起来!www.edugc.com,微信公众认证号为:教育观察 | 中央电视台“希望之星”英语风采大赛开始了,展示你的能力机会到了 | “西安市首届中小学生环境美术作品展赛”开始了,主办单位:西安市环保局、西安市教育局、团市委 站内搜索:
课外兴趣组 文章位置:培训充电课外兴趣组
如何使用photoshop制作简单好看的UI按扭
作者:张鸿   来源:教育观察  时间:2012年01月20日  浏览次数:3337次

本文我们将介绍如何使用photoshop制作简单好看的UI按扭,这个按扭可以用在电子商务网站,或者是网店上。先来看下效果。

  

 

  1.新建一个文档(ctrl+N)大小为:600*600(虽然我们按扭的大小:170*50,但是尺寸大方便我们的修改)

  

 

  2.选择“圆角矩形工具”并设圆角“5px”绘制一个大小为:170*50 的圆角矩形。(可以使用标尺定位)

  3.新建一个图层,按组合键“ctrl+enter”把路径转化为选区,并填充黑色。

  双击这个图层给图层添加“渐变叠加”和“描边”样式。

  

 

  渐变叠加样式

  

 

  

 

  描边样式(描边颜色:#2877ac)

  

 

  

 

  4.接下来要给按扭添加一个“斜线效果”

  新建文档(ctrl+N)大小为:4*4。

  

 

  按ctrl+空格键,放大文档到1600%。新建一个图层并删掉背景图层。

  

 

  在工具箱选择“铅笔工具”并设置笔尖大小为1px;前景色为白色。画出如下图效果:

  

 

  在菜单栏找到,编缉>定义图案;并给图案命个名字:diagonal line pattern.

  

 

  返回主文档,按“ctrl”键不放;并单击按扭图层,使按扭图案变成选区。

  

 

  在按扭图层上新建一个图层,然后在菜单栏找到:编辑>填充,在弹出的对话框中,在下拉菜单中选择“图案”,在下面的自定义图案选择我们刚才自定义图案“diagonal line pattern”。

  

 

  在菜单栏找到:选择>修改>收缩,把选区收缩2px,接下来把选区反选(ctrl+shift+I);按delete键删除边缘部分,这样就可以把描边显示出来。

  

 

  更改“混合模式”“柔光”并调不透明度:20%

  

 

  5.选择“文字工具”并找一个你自己喜欢的字体,字体大小:24pt,颜色:#ffffff.输入文字“Buy Now”。

  双击文字图层,添加一个“投影”样式(投影颜色:#2877ac)。

  

 

  

 

  6.在工具箱选择“自定形状工具”,并在选项栏找到如下的图形。

  绘制出大小:13*13;并填充白色,添加一个和文字一样的样式。

  

 

  

 

  7。创建hover状态

  在图层面板上新建一个组:Normal,把除背景外图层全部拉到这个组里面。

  

 

  使用“移动工具”把组“Normal”拖到“新建图层按扭”上,复制出一个组并命名:Hover

  

 

  双击组“Hover”中的“黑色图形”图层,更改其"渐变叠加"样式:

  

 

  接下来,我们开始切片。

  使用“切片工具”把按扭的范围选中。在菜单栏找到:文件>另存为Web所用格式,另存为gif格式。

  

 

  8。创建html

  下面是按扭的链接代码

  ========================

  Buy Now

  ========================

  按扭的CSS样式

  =====================

【关闭本页】
  最新图片
点击排行  
 · 学生寒假做什么?在家?出去
 · 值得用心体会的明言《陕西教
 · 如何使用photoshop制作简单
 · 教育孩子的10个最佳时机《陕
 · 用心提升你的修养
 · 大学生步入职场前不如多参加
 · 给家长的建议-避免青春期孩
 · 专家称网瘾与父母打骂有关
 · "进补"英语勿进错门 小心"补
 · 石桥禅
设为首页  |   关于本站  |   招聘信息  |   在线投稿  |   联系方式  |   版权声明  |   网站地图
Copyright © 2010 edugc.com All Right Reserved  咨询/服务电话:029-88422081
陕ICP备10010890号