photoshop CS5制作具有立体感的按钮

时间:2021-02-03 23:37:52

  今天在学习用photoshop cs5制作html模板的过程中,遇到了立体感按钮的制作问题。当然按钮的立体感也可以用CSS来实现,这里主要是用PS来制作具有立体感的按钮。

  我也是PS新手,下面的东西,也是看着别人的教程做的,如果有错误的地方,欢迎指正。

  1. 新建文件

  新建一个500*500的文件,背景内容选择‘透明’,其他的默认就行了,然后‘确定’。

  photoshop CS5制作具有立体感的按钮

 

  新创的图层是这样的:

  photoshop CS5制作具有立体感的按钮

 

  这里啰嗦一句:背景内容的选择,影响创建的图层的类型。比如选择白色或者背景色,那么创建的就是‘背景’,如果选择透明,那么创建的就是‘图层’,‘背景’是无法进行编辑的,需要将‘背景’转为‘图层’--双击‘背景’,出弹出一个框,直接确定即可,然后该层就可以进行编辑了。

  photoshop CS5制作具有立体感的按钮photoshop CS5制作具有立体感的按钮

 

  2. 改变图层的样式

  我们想创建一个白色的按钮,为了对比的比较明显,我要把新创建的图层的颜色弄的深一些,当然,这一步也可以直接跳过。

  点击‘前景色’选择一个比较深的颜色,比如‘#615f59’,然后选择油漆桶工具进行着色,着色后就成这样子了

  photoshop CS5制作具有立体感的按钮

 

  3. 画按钮

  在左侧的工具栏中选择‘圆角矩形工具’,

  photoshop CS5制作具有立体感的按钮

  选完后,需要在上方的配置栏中进行简单的配置,圆角的半径为‘5px’,颜色为白色‘#ffffff’

  photoshop CS5制作具有立体感的按钮

  

  现在就可以在刚才创建的图层上画按钮了,画一个你想要的大小的按钮吧。

  4. 添加文字

  在左侧的工具栏选择‘横排文字工具’(T),在配置栏中进行简要地配置,颜色设置为纯黑色就行了

  photoshop CS5制作具有立体感的按钮

  写完后,将文字移动到按钮的正中间。

 

  目前的效果如下:

  photoshop CS5制作具有立体感的按钮

 

  5. 立体感设计

  在右侧图层的选项中,选中按钮的图层,然后右键‘混合选项’,

  photoshop CS5制作具有立体感的按钮

  之后就会弹出一个图层样式设置框,配置如图,这里不要急着点确定按钮,还要进行配置呢:

  photoshop CS5制作具有立体感的按钮

 

  重点来了,渐变的设计,这样才能让按钮看起来有立体感:

  photoshop CS5制作具有立体感的按钮

 

  点击渐变后面的颜色条,会弹出一个渐变编辑器,如下:

  photoshop CS5制作具有立体感的按钮

  双击左侧下面的小方块,选择颜色‘#D9D7D8’,双击右侧下面的小方块,选择颜色‘#FFFFFF’,确定。

 

  -------------好了,点击确定按钮----------------

  看看效果吧。

 

  6. 最终效果

  photoshop CS5制作具有立体感的按钮

 

  7. 最后

  立体感按钮终于出来了,是不是很有成就感?!可能有些人觉得用CSS更方便,不过目前暂时没有找到CSS代码,就先不贴了。