Adobe XD 萌新入门课-58码农网

前言

今天来介绍一款十分简便又轻巧的设计工具, Adobe XD!!(登~登~
其实一直以来我出图不论是wireframe或是mockup, 都是用fireworks

Fireworks , Flash, Dreamweaver 为Macromidea网页製作三巨头 (莫约20年前... 时代的眼泪呀...)
风光之际被Abode巨资收购, 然后...就一个个阵亡了... 然后... 就没有然后了...

在XD面世之前, 市面上还是有许多此类的绘图软体, 而A家的死忠使用们习惯是使用photoshop来出设计稿
photoshop拿来作为网页设计的工具, 着实有很多地方令人诟病, 上手难度也高
直到XD横空出世!!

下载安装

Adobe XD 本身是免费的 (目前), 大家可以到官网画面最下方直接点击下载即可, 忘记要不要绑帐号了, 没有A家帐号的可能要先注册一下
安装流程就是一直下一步就对了, 这边姑且不再赘述

Hello XD

安装好之后我们打开程式,

接着点选右方的面板, 可以选择你要绘製的画布大小, 这边先随意选就好
在XD中实际上一个档案里的画布是可以无限多的, 你实际作业的档案可能是长这样

先随意选个we 1920, 接着我们进入作业区
可以发现整个XD非常的简洁, 工具列上~~什么都没有~~只有ㄧ些最基本的工具

习惯其他软体的同学, 第一次打开是不是内心真的很XD呢
就这样!! 没了!! 下课(拖走

接着让我们开始, 首先来画个Banner/Slider
直接把你要的图片拖曳进画面里, 如果图片不是你要的大小怎么办呢
使用工具列上的几合图形工具(看你要啥形状的), 直接画出你要的大小, 然后Shift+Ctrl+M ! (登~~~登~
他会把几合图形当成遮罩使用(前后排序不拘), 效果如下

接着我们在上面放一些选单连结, 只放连结太单调了, 前面加个icon好了
如果手上没有icon素材的同学, 可以在选单>插件里面寻找插件来安装, 这边推荐icon 4 design

只要打关键字就可以直接陈列插件里的icon点击即可直接插入, 非常的方便

接着选单不会只有一个吧, 让我们複製并贴上*6