Photoshop设计绿色风格的网页购物车按钮

本教程学习如何用Photoshop的圆角矩形工具和图层样式打造绿色购物车图标,喜欢的同学可以一起来学习。 来源:一起PS吧 先看效果图。 新建文档930×580像素,背景白色,建新层,用自定义形状工具画一个圆角矩形和一个正圆,颜色黑色。 添加图层样式。 效果如下

本教程学习如何用Photoshop的圆角矩形工具和图层样式打造绿色购物车图标,喜欢的同学可以一起来学习。

来源:一起PS吧



先看效果图。


Photoshop设计绿色风格的网页购物车按钮





新建文档930×580像素,背景白色,建新层,用自定义形状工具画一个圆角矩形和一个正圆,颜色黑色。


Photoshop设计绿色风格的网页购物车按钮





添加图层样式。


Photoshop设计绿色风格的网页购物车按钮




Photoshop设计绿色风格的网页购物车按钮#p#分页标题#e#





效果如下。


Photoshop设计绿色风格的网页购物车按钮





建新层,再画出下图所示图形,颜色白色,添加蒙版,黑白直线渐变。


Photoshop设计绿色风格的网页购物车按钮





效果如下。


Photoshop设计绿色风格的网页购物车按钮





建新层,画一黑色圆角矩形。


Photoshop设计绿色风格的网页购物车按钮#p#分页标题#e#





添加图层样式。


Photoshop设计绿色风格的网页购物车按钮





建新层,调出这个圆角矩形的选区,填充白色,用钢笔做如下选区,反选删除,添加蒙版,黑白直线渐变,图层模式叠加,不透明度70%,


Photoshop设计绿色风格的网页购物车按钮





输入白色文字shopping cart,英文购物车的意思,添加投影和渐变叠加样式,这里不截图了,大家自己设置,相信大家的智慧。


Photoshop设计绿色风格的网页购物车按钮





建新层,画一个小些的正圆,添加的样式同第一步。


#p#分页标题#e#Photoshop设计绿色风格的网页购物车按钮





建新层,画一个黑色正圆。


Photoshop设计绿色风格的网页购物车按钮





添加图层样式。


Photoshop设计绿色风格的网页购物车按钮




Photoshop设计绿色风格的网页购物车按钮





效果如下。


Photoshop设计绿色风格的网页购物车按钮





建新层,用椭圆工具画一个正圆,然后把选区右上方向挪几像素,删除,图层模式叠加。#p#分页标题#e#


Photoshop设计绿色风格的网页购物车按钮




Photoshop设计绿色风格的网页购物车按钮





建新层,画一白色椭圆,添加蒙版黑白直线渐变,不透明度77%。


Photoshop设计绿色风格的网页购物车按钮





建新层,用白色柔角笔刷点一下,图层模式叠加。


Photoshop设计绿色风格的网页购物车按钮





建新层,画一个白色长方形,复制4个,ctrl+T变形。


#p#分页标题#e#Photoshop设计绿色风格的网页购物车按钮





高斯模糊0.6像素。


Photoshop设计绿色风格的网页购物车按钮





建新层,加入购物车图标,添加投影(设置不截图了)


Photoshop设计绿色风格的网页购物车按钮





添加一些阴影,最终效果如下。


Photoshop设计绿色风格的网页购物车按钮

原创文章,作者:admin,如若转载,请注明出处:https://www.2233cn.com/%e7%bb%8f%e5%85%b8%e8%ae%be%e8%ae%a1/1674.html

(0)
上一篇 2014年9月22日 上午7:34
下一篇 2014年9月22日 上午7:36

相关推荐

  • Illustrator CS5教程:制作超酷的3D立体文字

    很多初学 Illustrator 的朋友,都不太了解如何使用3D菜单中的命令,来制作逼真质感3D图形的方法,借此机会我精心地为大家安排了一个使用3D凸出和斜角命令,制作3D立体文字的实例,希望对朋友们能够有所帮助。 在Illustrator中的3D凸出和斜角效果命令,可以通

    经典设计 2014年6月6日
  • Photoshop轻松打造MM照片朦胧双色调

    作者:Derek-Yu(带鱼)来源:中国教程网论坛 效果图: 原图: 步骤: 1、在PS中打开素材,执行:图像》模式》灰度(因为在将RGB模式的图像转为双色调前必须先转成灰度),此时PS会弹出对话框是否扔掉颜色信息,选是就行。 2、执行:图像》模式》双色调,在双

    经典设计 2014年11月5日
  • Photoshop调出树林美女图片甜美的黄绿色教程

    来源:PS联盟 作者:Sener 黄绿色也是比较常用的颜色,比较适合夏季外景图片。调色过程也比较简单,只需要把背景部分主色调成黄绿色,再把人物部分稍微调红润一点即可。 原图 最终效果 1、打开原图素材,创建可选颜色调整图层,对黄、绿、青、中性色进行调整

    经典设计 2016年3月16日
  • CorelDraw实例教程:绘制清新的荷花花瓣

    自古以来,荷花就有花中君子的美称,无论是水彩画还是水墨画,荷花都以它的风骨和姿态体现着对美的诠释。适合初学者学习。期待CD高手能把荷花画得更好哦! 最终效果图: 效果图 制作分析 首先使用贝塞尔工具绘制荷花各花瓣的基本形状,然后为它们填充不同角度

    经典设计 2014年6月5日
  • Photoshop合成漂亮美女在云中翩翩起舞

    PS换衣属于移花接木的范畴,在很多场合都会用到,有时不光是换衣,可能周身上下都可以替换,保留站姿和脸蛋即可,本例通过一个较为复杂的例子来演示移花接木的过程,主要涉及到变形、仿制图章及色泽调整等photoshop知识,本例PS教程采用photoshop CS5制作,

    经典设计 2014年7月21日
  • Photoshop调出静物照片淡雅的日系效果

    本组作品精选Photoshop调出静物照片淡雅的日系效果,日系色调透露着淡雅、柔美、低饱和,给人带来静谧与纯净的观感。今天小编教大家如何把一张照片简单几步变成日系小清新,步骤详细,要耐心学习。 注意: 原片拍摄时白平衡尽量使用阴天模式或设置色温为6300

    经典设计 2014年12月3日
  • Photoshop CS6制作放大镜观看网页动画效果

    本文通过一个放大镜动画的实例,简单模拟放大镜, 重点探讨挖空样式,来讲解剪切蒙版和挖空图层样式的原理和应用以及简单的PS时间轴动画,希望能对大家有所帮助。 最终gif效果图 剪切蒙版制作放大镜动画 1.打开将要用来做放大动画的图片,在图层缩略图上右击

    经典设计 2014年12月24日
  • Photoshop给阶梯上的人物加上唯美的暗红逆光教程

    来源:PS联盟 作者:Sener 逆光在较暗的环境下才更唯美。处理的时候先设定好光源的位置,然后把偏远一点的区域都加深;高光的颜色转为稍亮的橙黄色或橙红色;最后在光源位置渲染出阳光效果即可。 原图 最终效果 1、打开素材图片,创建可选颜色调整图层,对绿

    经典设计 2015年12月15日
  • Photoshop调出外景美女日系褐色调

    本教程主要使用Photoshop调出外景美女日系褐色调,本教程色调比较适合留有天空的外景图片。处理的过程也比较减淡,主体部分都转为淡褐色,天空部分调成淡淡的黄绿色。人物部分可以根据需要做一些简单的美化。 来源:PS联盟 作者:Sener 原图 最终效果 1、打

    经典设计 2014年8月11日
  • Photoshop调出城市傍晚照片质感的暗色调

    这篇教程教思缘的朋友们利用照明和光影关系调节出漂亮的风景照片,教程难度中等,但是对于喜欢摄影的朋友来说这篇教程绝对不能错过,推荐过来一起分享,喜欢的记得给我好评了。 先来看一下效果图和原图的对比: 调整后 调整前 影调指的是画面的明暗关系和层

    经典设计 2014年12月23日

发表评论

您的电子邮箱地址不会被公开。