制10个宽为26px,高为24px的矩形,描边大小均为1点,描边颜色为“#dcdcdc”,并利用【路径对齐方式】中的【垂直居中】和【按宽度均匀分布】来实现10个矩形的对齐和相等间距,将最后一个宽为26px,高为24px的矩形调整为宽为45px,高为24px的矩形。输入数字2至10,字体:MicrosoftYaHeiUI,类型:Regular,字号:12px,字体颜色“#333333”,放在前九个矩形中央合适的位置。输入文字“下一页”,字体:MicrosoftYaHeiUI,类型:Regular,字号:12px,字体颜色“#333333”,放在最后一个矩形中央合适的位置。2.绘制1个宽为26px,高为24px的矩形,描边大小均为1点,描边颜色为“#003b85”,填充颜色为#0c8ac9。输入数字1,字体:MicrosoftYaHeiUI,类型:Bold,字号:12px,字体颜色“#ffffff”,并放在合适的位置。3.将1至2步骤中制作的内容编组为“页码导航”图层组,步骤12:标注尺寸等信息。设计稿完成后通常在交给前端开发人员前都要对页面中的重要元素进行尺寸标注,还有一些文字的字体、字号也需要标注。之前介绍过AssistorPS是Photoshop标记外挂神器,刚才在制作设计稿时展现的是其强大的布局划分功能,其实AssistorPS的标注能力也是非常强大的。举个例子,想知道文字“意大利”所在搜索框的尺寸,就可以选中该搜索框,点击LayerGuider面板中的第二个按钮Displaythesizeforselectedlayer(s),等待片刻就会在搜索框周边出现标注搜索框宽的线段及425字样,以及标注搜索框高的线段及40字样,非常方便,而且所有的标注信息都被统一放置在名为“@Assistor_guide”的图层组内,完全不影响设计稿界面本身,同样要标注搜索按钮也是同样方法。
全文预览
