1、本课主要是讲如何使用XD软件设计手机网页界面,【打开】Adobe XD软件,【新建】网页界面,具体尺寸如图示,【重命名】Home。具体显示如图示。
2、【打开】布局网格参考线,使用【矩形工具】在最左侧边缘绘制矩形,【锁定】比例调整,W160,【填充】黑色,单击【锁定】图层。具体显示如图示。
3、使用【矩形工具】绘制剩余宽度矩形,根据版面布局思路,单击尺寸,在W总宽度/3,得出具体的矩形大小。具体效果如图示。
4、按Ctrl【拖动复制】2个矩形,根据布局思路排列至合适的位置。【选择】第一个矩形框,添加【渐变颜色】,单击【属性面板】拖动渐变滚动条,调整渐变颜色。具体操作如图示。
5、【删除】多余的矩形框,【选择】渐变矩形对象,单击【重复网格工具】,拖动边框条至画布两端,调整复制间距细节,单击【取消使用网格工具】。。具体效果如图示。