使用ILLUSTRATOR做UI设计系列教程

　　接下来，再新建一个描边，颜色设置为纯白，依然是内侧对齐，透明度为 50%。并在外观面板里，把这个描边置于灰色描边的下方，如图：

　　到这一步时，按钮看上去没有什么变化。不过接下来，就是见证奇迹的时刻了。给半透明白色描边加上一个「变换」效果，「移动」参数设置为 1 像素：

　　这一步后，按钮就画好了，有高光，且模拟了下凹效果：

　　此时的外观面板应如图所示：

　　-

　　按钮画好了，接下来，说说这样做有什么好处。

　　首先，这个按钮本身只用了一个图层，并且只是一个矢量对象，保持了文件的整洁。不信，可以看看「图层」面板，只有按钮和背景两个图层。

　　到此为止，按钮的大小正好是预定的 72×32 像素大小，且是像素精确的：

　　然后，如果我不满意按钮的大小的话，我可以随意调整，而不用担心渐变和圆角大小什么的也跟着变动。如图，虽然按钮大小变大了，但边缘依旧是 1 像素粗细，且圆角依然是 5 像素大小，渐变也没变：

　　要是不满意圆角的大小的话，也可以随意调整，不必担心其他的也跟着变：

　　把按钮换个颜色?简单，把最下面的填色层换一个颜色就可以了，其他的都不用改，渐变什么的依然在：

　　导出时，可以很方便地，严格按照按钮大小来建立切片，切出来的大小不多不少正好是 72×32 像素大小。

　　为 iPhone 4 这样的 Retina 屏做设计?好说，导出时设置按 200% 比例导出就可以了。

　　有好几个按钮?也好说，可以用一种方法，让所有的按钮都做成这样。更棒的是，修改一个按钮的样式后，可以让其他按钮的样式也跟着变。这个方法留作课后探究题来研究吧。 XD

上一页  [1] [2] [3]