UI设计教程古典皮质电话簿UI图标教程（7）

23、将网格线间距调整为10px（编辑>首选项>参考线,网格和切片>网格线间隔)。将前景色设为白色（#ffffff），选择矩形工具， 创建一个100 x 50px的矢量形状，位置如下。将该图层的填充调整为0%，设置图层混合选项如下。



24、现在将网格线间距调整为5px。（编辑>首选项>参考线,网格和切片>网格线间隔）。选择矩形工具，创建一个90x 40px 的矢量形状，位置如下。

保持该图层选中状态，选择椭圆工具， 按住Alt键， 创建一个10px 的圆，位置如下。将该图层的填充调整为0%，按下图设置图层混合选项。注意：渐变叠加中，黄色数据表示透明度，白色数据表示位置百分比。



25、选择椭圆工具，创建一个10px的圆，位置如下。保持选中状态，选择矩形工具，按住Alt键，创建一个5 x 10px的形状，如下图。 将该图层的填充调整为0%，设置图层混合选项如下。