15 立体化简约效果按钮设计.pptx

UI界面设计与制作教程;5.2.2立体化简约效果按钮设计;4、制作步骤

（1）新建画布，如图22所示。;（2）新建一个图层，命名为按钮背景，选择矩形圆角工具，关闭描边，设置填充颜色为白色，设置固定大小为宽度450像素，高度450像素。设置完之后在画布中绘制一个圆角矩形按钮，效果如图23所示。;（3）选择按钮按钮背景这个图层，打开图层样式，添加3个效果，即斜面浮雕（图24）、渐变叠加（图25、26）和投影（图27），设置完之后的效果如图28所示。;;;;（4）新建一个图层，命名为按钮背景2，选择矩形圆角工具，设置填充颜色R:1,G:1,B:1，固定大小为W:360像素，H:360像素。图28所示。选择按钮背景2这个图层，打开图层样式，添加5个效果，即斜面浮雕（图29）、描边（图30）、内阴影（图31）、内发光（图32）、渐变叠加（图33），设置完之后的效果如图34所示。;（5）新建一个图层，命名为按钮背景3，选择矩形圆角工具，固定大小为W:340像素，H:340像素。图35所示。选择减去顶层图层，点击设置固定大小：W:330，H:300像素如图36,在图中画出如下形状椭圆如图37所示，Ctrl+T将图像顺时针旋转45度如图38所示。;（6）选择按钮背景3这个图层，打开图层样式，添加1个效果，即渐变叠加（图39），渐变色设置为（图40）设置完之后的效果如图41所示。;（7）新建一个图层，命名为按钮背景4，选择矩形圆角工具，固定大小为W:340像素，H:340像素。图42所示。选择减去顶层图层(图43所示)，点击设置固定大小：W:345，H:320像素,在图中画出如下形状椭圆如图44所示。;（8）选择按钮背景3这个图层，打开图层样式，添加1个效果，即渐变叠加（图45），设置完之后的效果如图46所示。渐变色设置重复步骤（8），将按钮图层2、3、4，建立为组1。;（9）新建一个图层，命名为按钮背景5，选择矩形圆角工具，固定大小为W:340像素，H:340像素。双击图层按钮背景5打开拾色器设置R:41、G:150、B:204，图47所示。打开图层样式，添加5个效果，即斜面和浮雕（图48）、描边（图49）、内阴影（图50）、内发光（图51）、渐变叠加（图52）渐变色设置为（图53）设置完之后的效果如图54所示。;（10）复制图层按钮背景3、4，将图层按钮背???3副本、按钮背景4副本与按钮背景5建立为组2，选择组2用钢笔工具绘制出如图55的路径，Ctrl+添加矢量蒙版如图56，将组1、组2合并为组3如图57。;（11）建一个图层，命名为按钮背景6，选择矩形圆角工具，固定大小为W:300像素，H:300像素。图58所示。;（12）打开图层样式，添加3个效果，即斜面和浮雕（图59）、描边（图60）、渐变叠加（图61）渐变色设置为（图62）设置完之后的效果如图63所示。;（13）建一个图层，命名为按钮背景7，选择矩形圆角工具，固定大小为W:25像素，H:25像素。图64所示。;（14）打开图层样式，添加5个效果，即斜面和浮雕（图65）、描边（图66）、内发光（图67）、渐变叠加（图68）渐变色设置为（图69）、外发光（图70）设置完之后的效果如图71所示。;（15）双击按钮背景7前端，打开拾色器设置颜色为黑色如图72。将图按钮背景7、8建立为组4。;

（16）整理图层将图层分为组1、组2、组3、组4便于后期编辑，最终效果图如图73。;谢谢