软件篇2Illustratоr实例篇之UI及平面设计教程tiffanys

1.A3出血3mm,先做效果图版,印刷时候调整页面顺序改成印刷版。

2.左侧放企业信息的背景条高度和画板高度一致,对齐方式为画板左侧底部对齐。

3.画页码背景,黑色直角梯形,添加锚点后将右上角锚点删除。

4.页码和背景群组后,右侧页码画板右侧对齐,左右页码拉辅助线对齐。

5.按住ALT鼠标滑轮进行放大缩小。

6.标题处的直线可以用“直接选择工具”改变直线。

7.选中标题区,改填充色为橙色,线和文字颜色不变,单独修改线的颜色为灰色。

8.直角矩形修改为圆角矩形更和谐,“直接选择工具”框选左右一侧的角,圆角改为2mm。

9.文字和ps类似画个文字段落框能自动换行。

10.word中选中表格中文字,“右键”-->“表格属性”-->“文字环绕”选中“无”。

11.AI中裁图用蒙版,画个矩形或其他形状去掉填充色,将图片和形状框选中,ctrl+7图片就按形状进行裁剪了。

12.图片拖入后要点工具菜单栏的“置入”,否则拷贝到另一台电脑上或移动位置时图片丢失。

=================================================================

文件若是AI2020绘制,用AI2019打开,会显示是更高版本,将对文件进行重新排列,这种重新排列可能不是按照之前绘制的逻辑排列的,所以再安装AI2020,用AI2020打开就显示正常,AI中不支持如CDR那种可以导出之前版本,所以软件版本和文件版本要匹配。

AI2020及以上版本会显示最近使用过的AI文件,之前版本没此功能。

实例二:信息系统界面设计

X,Y轴值为负数就改变了投影方向

1.AI中“窗口”-->“资源导出”,将图拖入“资源导出”面板,选择导出规格进行图片导出。

2.按输出内容大小新建画板,做相减将logo中的内容镂空,保存为png20时选300ppi。

3.流程图中的连接箭头:

(1).用钢笔画线,SHIFT选中所有线,填充线框。

直线工具画线,看工具属性栏的宽,调整到整数值,填充边框色。

将标尺左顶点拖动到直线左端,使(0,0)到直线左端。

按住alt,鼠标左键按住不放拖动,移动到指定位置后松开进行复制,ctrl+d进行多次复制。

(2).用图形工具画箭头,SHIFT选中所有箭头,填充面。

4.大圆角按钮时,将圆角拖到最大,PS中在数值地方拖到最大。

5.全部框选界面内容后,ctrl+G群组,ctrl+K是打散。

6.ctrl+2锁定,alt+ctrl+2全部解锁。

7.画遮罩层矩形,1280*900,shift+f7调出“对齐”面板,相对画板左对齐,顶对齐。

8.表格外框画矩形,用钢笔工具画表格线,按住alt鼠标左键拖动线进行复制,ctrl+d等距复制。9.在“首选项”里将文字工具的单位pt改为px。10.按住shift加选或鼠标框选多项进行统一修改。

11.客户小屏电脑弹框高度要考虑,框选删除多余信息,群组后移动到遮罩层上。12.win10图片不是1:1显示的,线小于1px时候显示不出来。13.用“直接选择工具”选中群组中的背景矩形,“效果”-->“风格化(S)”-->“投影”,正片叠底;不透明度75%;x:7px;y:7px;模糊:5px。14.画矩形,用“曲率工具”添加锚点,用“直接选择工具”删除左上顶点,制作直角梯形。

15.用钢笔画线,填充描边,与直角梯形做相交减去斜线部分。

16.画板工具,选中组件,按住shift点击组件,新建和组件同样大小的画板。17.保存为ai格式是整个文件,文件-->存储为-->.eps格式,选中相应画板,.eps可以保存文件中的部分。

实例三:平板应用仪表盘

1.画圆按住shift缩放,若发现缩放时候不圆了,看顶部属性栏的宽,高值是否一致。

2.画宽矩形和窄矩形组合,“旋转工具”将旋转中心移动到恰当位置,用鼠标旋转到指定刻度。

移动形状中心时候一直按住alt键会调出“旋转面板”设置旋转角度的面板,输入5度,点“复制”按钮,ctrl+d复制。

3.在小刻度处将大刻度解除群组删除大矩形。

4.画指针时候慎用钢笔工具,钢笔工具绘制的是不规则形状。

(1)针尖用多边形工具画三角形(多边形工具画六边形后,双击六边形弹出界面修改多边形边数),用直接选择工具改变等边三角形的形状,画旋转中心圆。

(2)“形状生成器工具”功能非常强大,“形状生成器工具”将指针头与旋转中心圆结合。

(3)用剪刀将三角形尾部剪断,用钢笔工具绘制指针尾部。

因为钢笔工具绘制的形状不规则,画根线,放在指针尾部中间,

选中线和指针尾部,点“路径查找器”中的“分割”,用“直接选择工具”将不需要的一侧节点删除。

(4)在尾部一半指针上右键“变换”-->“对称”-->“垂直”,“复制”。

5.将ai文件“存储为”pdf格式,打开pdf预览时候,ai中的pdf文件不可保存,将预览的pdf文件关闭后才可保存。

记得将pdf文件保存一份.ai格式(可以多个画板),将ai中的单个画板保存就存储为.eps文件。

6.将旋转中心放到指针中心,移动针尖位置,调整指针到指定刻度。

类似样例如下:

同色系其他样例,主要练习中间图形设计

大数据发光效果图

1.画矩形,选中节点“直接选择工具”移动节点到指定位置。

2.选中节点底对齐,顶对齐,根据对齐方式对齐节点。

3.光束效果渐变,有一端是透明的。

4.“路径查找器”将椭圆与矩形分割,形成圆柱光。放到画板外可以看到椭圆与矩形衔接处的线。若用“形状生成器工具”无缝衔接不会有衔接处的线。

5.画板上画个同样大小的矩形填色后ctrl+2锁定,ctrl+alt+2解锁。

6.形状的填色和描边都可以渐变,“窗口”-->“渐变”面板,调渐变角度,不透明度,编辑渐变。“颜色”面板可以调渐变色。

7.ctrl+y线框模式。

实例四:图标缩放描边不改变

变换面板右侧折叠栏,“显示/隐藏选项”,“缩放圆角”及“缩放描边和效果”前的复选框勾选后再缩放AI文件则文件转曲线,描边等比缩放。

SVG图标和PNG图标的适用场景

1.图标若复制,填充色,描边色,描边粗细修改,可以考虑AI中不填色,拖入PS中成为矢量智能对象后混合模式下整体填色。比如下图所示图标,水印图章。

2.群组图标后,用工具栏第二个“直接选择工具”改变填充色及描边色。

3.“对象”-->“扩展”图标会整体转曲为面性,可以一次性填充颜色,这时不能改变图标描边粗细了。

画梯形

画矩形,用“直接选择工具”移动左上,右上的节点。部分浏览器不支持svg渐变。

IOS入口图标

29x2940x4057x5758x5860x6087x8780x80114x114120x120180x1801024x1024

支付宝图标背景

1.椭圆工具画正圆,“直接选择工具”调整四个点上的滑竿。是手动调整不是参数控制,所以需要经验才能做出对称好看的形状。四个点鼠标向内移动相同的次数就形状规则了,如图四个点都向内移动15次鼠标上下左右键得蓝色图形。AI中方法同理。

AI常识:

画板工具

1.阿里巴巴矢量图标下载AI格式文件后,AI中点“画板工具”调整画板大小。

2.复制画板,或在画板工具中新建一个18px*18px的画板(新建画板时候可以设置画板数量为20,之后在画板右下角点“新建画板”,按住shift+alt拖动画板进行新建画板{“对齐”面板对画板进行平均分布,可以按住shift对画板进行加选多选--本人ai有问题没实现--}),按住shift平移。按住alt复制,按住shift是直线移动。

3.导出画板中图标:“文件”-->“导出”-->“导出为”,底部勾选“使用画板”,默认全部导出,若要导出特定编号的画板,需要查看画板编号后输入编号导出。

编辑图标

1.填充色是问号,“取消编组”,“释放剪切蒙版”后大部分就能填色了。

2.“释放符合路径”可以对整体对象进行局部编辑。

3.右键“变换”,“对称”可以进行水平,垂直,角度变换。

AI与PS图标联动

1.在ps中双击按钮矢量智能对象后再ai中未见到按钮,按住alt,滑动鼠标找到按钮进行编辑。

2.AICC2019绿色版中编辑的图标拖入PSCC2019中,PSCC2019中点击智能图标可以到AI中进行修改。若AI是绿色版则在PS中点击智能图标只会跳转到pdf查看器中查看,不会跳转到AI中进行编辑。

线条由粗到细怎么做

AI中用钢笔工具画条曲线,茶壶“宽度工具(Shift+W)”,拖动一端的顶点使其变化宽度,两端的宽度都可以变化。

曲线的端点处直角变为圆角

“窗口”-->“属性”-->“描边”-->“端点”-->“圆头端点”

系统推荐色

AI文件若操作不规范,有些内容是拖入的则无法调用系统推荐色,

新建文件,将内容复制进去,则可以使用系统推荐色。

剪切蒙版

“对象”-->“剪切蒙版”-->“建立”/“释放”

显示/隐藏辅助线

“视图”-->“参考线”-->"显示/隐藏参考线Ctrl+;"

“渐隐画板之外的区域”

"画板工具"工具属性栏上的“画板选项”-->“渐隐画板之外的区域(F)”前的勾如果去掉,画板之外的区域会变成白色。

画波形图

“效果”-->“扭曲和变换”-->“波纹效果”,拖动滑竿条件波纹密度,选中“平滑”单选按钮。

cdr中形状必须闭合,ai中不用闭合就能填充颜色。

群组后的文件用直接选择工具选中元素,描边单位不是px时,编辑-->首选项-->常规,单位下全部选择为像素。

选中画板工具,在画板面板中修改名称会放大显示当前图标,要显示整体时要缩放。在属性面板修改画板名称不会缩放画布。

窗口-->控制

实例五:AI绘制简历

在千图网搜索“word格式”,出现下图所示图片,用AI制作pdf格式文件

苹果电脑下载iconfont-阿里巴巴上的ai文件图标,自动是.eps格式。

windows中的ai文件转为.eps文件可以在sketch中打开应用。

windows中的ps,文件-->导出-->到Illustrator,只能导出简单的图标,像素图片导入到ai中不显示。

实例六:图层及文件命名

AI中新建元素到原有图层下方了,打开图层面板,将更多已点击移到图层1上面就显示正常了,选中勾,ctrl+]上移图层与PS中快捷键一致。右键-->排列-->有调整图层的选项及快捷键说明。

文件输出与检查:

用来画图标的AI文件要用英文命名,生成svg格式矢量智能图标时候名称前缀是AI文件名;

画板名称首字母大写;

svg图标用浏览器打开检查若有瑕疵在AI中修改;

文字用通用的微软雅黑,特殊字体导svg时候不识别。

构建数据管理驾驶舱:

图标从制作,合作实现到人机交互管理驾驶舱:

命名:文件名称首个单词首字母大写如下图所示。

可视化查找svg图标:AI中导出图标时候导出两份,一份png缩略图可视,一份svg,项目名称大写,可以根据png对应快速查找svg图标。

交互:ElementUI中输入颜色,会显示交互的各种颜色,svg矢量智能图标可以实现代码改色。

AI文件名称最好为icon通用性好,这样导出图标名称前缀为icon_,否则如下图前缀为CPM_在其他项目用到时还要修改前缀。

导出图标时候5,58指导出两个图标,5-58指导出从画板序号为5的到58之间所有图标。

切图命名规范

切图最后需要命名成规范格式,方便程序员查找。切图命名的格式建议全英文,如果大家英文不好需要想办法提升一点简单的词汇量。借由上述工具切图后,需要整理切图命名,或在切图之前对图层命名亦可。以下是切图元素的中英文对照:

图标地图:图标及名称总览图

面板序号和图标总览图对应,导出一份png图标(png格式所见即所得),前端还原界面时候先查看图标总览图,然后在png图标文件夹中找到对应图标,根据图标名称在svg文件夹中找到对应svg,查找过程直观有序,有理有据。

实例七:圆滑曲线

圆形与弧形做剪切蒙版,弧形的外轮廓还在,做布尔运算外轮廓的大小正好是可见的部分那么大。

弧形不圆润的部分要与圆进行再次切割。

文字右键创建轮廓,与圆角矩形做减去上层布尔运算,发现只减去了填充,没减去描边。

选中文字轮廓-->对象-->扩展,将填充和描边进行扩展,然后与圆角矩形进行减去上层运算。

平滑曲线:

弧线过渡区不平滑,用直接选择工具出现滑动条及弧形中心点时候将中心点拖到最远端,弧形就平滑了。

弧形与圆进行布尔运算切割就没有瑕疵

选中圆弧与圆,点形状生成器工具,点到区域出现网格就是切割成功了,然后用选择工具将圆以外的部分选中删除。

模糊光晕效果:

(1)将背景圆复制一份缩小,在底层露出2px。

(2)属性,高斯模糊,半径:13px,即可做出如图所示效果。

实例八:iconfont图标字体

svg图标上传到项目中,导出为iconfont图标字体

WebUI命名规范

适用范围:jQuery及HTML

标识符类型:jQuery

命名约定:

第一个单词小写,以后的每个单词首字母大写。

所有控件的命名均采用控件名+业务实体名的命名方式。

示例:dataTempsItemtableTempsItemformTempsItemtreeTempsItem

标识符类型:HTML

以元素名缩写作为开头单词,后跟业务名。

使用其他表示层中间件的项目可以不遵循此标准。

示例:texNamebtnSubmitselDepartment

点击顶部图标上传,可拖入多个svg文件,点击里面每个文件,填写中文标签,还可以选图标类型,保存。

svg图标会到“我的图标”中,鼠标移动到图标上,可以点击修改图标修改图标名称,标签,类别,还能删除,下载,加入购物车等管理操作

加入购物车后,点击购物车可以对购物车中的图标删除,批量删除,添加至项目,下载素材,下载代码。购物车下载代码就是iconfont了。

通过购物车将我的图标中的图标移动到我的项目中,项目中的图标有种分类末尾会加颜色值,可以通过选项卡选不同格式的iconfont,建议直接在我的项目下的对应项目上传图标。

画板名称为英文,导出图标时候用英文命名,在画布的画板下面用中文写标签,这样以后好复用。

苹果电脑中的iconfont只能复制svg到AI软件中,无法下载svg或AI文件,也不支持下载iconfont,网站支持的是zip格式,苹果电脑的RARExtractorLite能解压的文件格式是.dom。可以复制svg到ai中,保存svg上传到iconfont网上,最后下载那步在windows系统完成就行。

实例九:AI中绘制矢量智能图标

ctrl+2锁定,ctrl+alt+2解锁,框选元素,垂直,水平,等间距对齐。

界面效果图

图标设计:

图标一:

1.按住shift画正圆填充描边,按住shift画垂直,水平直线填充描边。

2.画矩形,改变角弧度,用路径查找器切割成1/4圆角矩形,填充描边。

3.1/4圆角矩形用直接选择工具删除一个顶点,形成圆弧直角。

4.钢笔画直线,选择工具选中线,右键-->变换-->旋转,45度。

5.描边面板,粗细3px,端点:圆角。

6.若输出格式为iconfont需将描边转换为曲面,ctrl+g组合后,调整描边粗细,“对象”-->扩展

==============================================================

图标二:

1.圆角矩形旋转45度,与圆,路径查找器,形状模式进行切割。

2.矩形旋转45度,与扳手两端路径查找器,形状模式进行连接。

3.面填充改为描边填充则面性图标修改为线性图标。

4.直接选择工具,选中扳手连接点,移动弧度点使连接处变为弧线。

5.端点为圆角的45度线和45度的圆角矩形ctrl+G组合就行,

不用路径查找器,形状模式,否则布尔运算后看不到线。

6.若是线性图标,输出格式为iconfont需将描边转换为曲面,ctrl+g组合后,调整描边粗细,“对象”-->扩展

7.若是面性图标,输出格式为iconfont需将描边转换为曲面,单个组件是线性时调整描边粗细,“对象”-->扩展,单个组件有线和面时要先扩展外观后扩展。

类似图标:

图标三:

1.如图标一方式画直角线,直接选择工具编辑点,底部U型线是两端直角线组合而成。

2.直角线用直接选择工具删除点得到顶部断点。

3.圆形填充3px描边得圆环,45度线填充3px描边得斜线。

方法2:

1.画描边:端点为圆角的矩形。

2.选中线框,用钢笔工具添加锚点,直接选择工具删除锚点,则两侧的线段一起删除。

备注:曲率可以增加或删除锚点,但是线段完好不参数断点,但是删除锚点后生成弧线。

3.输出格式为iconfont时需将描边转换为曲面,ctrl+g组合后,调整描边粗细,“对象”-->扩展

上图打开的柜门与两柜子重叠的线段就用到了下面方法:

用钢笔工具添加锚点,直接选择工具删除锚点

图标四:

1.画矩形,改变圆角,钢笔工具添加锚点,删除锚点使斜角那块的线断开。

2.钢笔工具在断开的点处添加线段,形成闭合曲线。

3.感叹号是输入符号文字,选择字体。

4.输出格式为iconfont时需将描边转换为曲面,线性部分ctrl+g组合后,调整描边粗细,“对象”-->扩展

5.选中感叹号,右键“创建轮廓”,文字若不转为曲线,不同电脑上字体可能不同会引起显示差异。

图标五:

1.画矩形拖动圆角,选中矩形,钢笔工具添加锚点。

2.曲率工具,删除圆角处两点,调节曲率杆,形成三角。

3.与笔垂直处画圆角矩形,选中后钢笔工具添加锚点,删除锚点形成镂空区域。

4.直线工具画刻度

5.调整描边粗细后,“对象”-->扩展,将线转换成曲面。

图标六:

1.矩形工具折叠里面有多边形工具,画个多边形后点击多边形,弹出输入边数对话框,此图标输入6。

2.输入文字J选择字体和颜色。

3.输出格式为iconfont时需将描边转换为曲面,六边形调整描边粗细,“对象”-->扩展。

4.文字J右键“创建轮廓”

图标七:

1.圆形宽,高均30px,矩形宽30px。

2.圆形与矩形垂直居中。

3.路径查找器合并图形,弧线与矩形组合部分完成,其余部分上面都有讲解。

4.输出格式为iconfont时需将描边转换为曲面,ctrl+g组合后,调整描边粗细,“对象”-->扩展

iconfont.css只能设置单色的图标,要想使彩色图标,需要使用svg(symbol)模式Unicode。

图标导出为svg后上传到iconfont阿里巴巴矢量图标库,发现图标中部分内容不可见,若是面丢失,可以选中后右键“创建轮廓”,再次导出为svg后上传则图标正常。文字通过创建轮廓转换为不可编辑文字的曲面。

如果只是线(描边),通过“对象”-->扩展,将直接选择工具可编辑点的曲线描边转换为面。

如果既有面又有描边,要先扩展外观后扩展。

AI软件里面,把画板大小调整成跟文件内容一样大小,对象--画板--适合图稿边界

移动图层快捷键与PS一致,移至顶层:Ctrl+Shift+}

图标上传到阿里巴巴iconfont矢量图标库检查,若图标是白色,上传时选择去除颜色会以默认灰色显示,若图标不是白色的描边扩展后就如下面右图显示正常,若上白色去除颜色以默认灰色显示时,描边不能在组合图层上描边扩展,要解开层扩展,若不解开层就扩展会产生面性描边产生下面左图填充颜色混乱的情况。用路径查找器中的合并将面与面性描边合并。

实例十:AI中插画绘制

1.在PS中用钢笔工具绘制,在真实飞机图片上绘制,绘制出一个图层部件后隐藏,调整图层顺序建立遮挡关系。

2.在AI中同理绘制,钢笔工具绘制曲线,按住alt删除关键点一端曲线,绘制下一端点及弧度。

3.图层面板调整图层顺序及显示/隐藏。

4.ctrl+g对应PS中的分组。

5.新建画板,文件-->导出-->导出为-->勾选“使用画板”,填画板序号,导出透明png图片。

实例十一:绘制火箭军军徽

(1)新建画板,截图黏贴,样图放在底层ctrl+2锁定样图(alt+ctrl+2全部解锁),开始绘制。

钢笔工具绘制,曲率工具调整节点弧度。

(2)渐变填充,白色描边,描边也可以渐变填充但我们此处是纯色填充。

(3)渐变色默认有4区域设置颜色,修改颜色可以用拾色器。

(4)渐变色调色杆右端可以旋转调整渐变倾斜度,

鼠标右键在画面上画有角度的斜线也可以设置渐变角度。

图层调整:ctrl+【向下移动图层,ctrl+】向上移动图层,移至顶层:Ctrl+Shift+】,移至底层:Ctrl+Shift+【。选择组件,shift加选,ctrl+g群组。

(5)五角星边缘是径向渐变的描边填充,

ctrl+f9调出“渐变”面板,

添加渐变填充色(鼠标移到渐变条上,鼠标形状变为鼠标右下角有个加号时候点击添加渐变色,选中渐变色点击右侧删除图标删除渐变色),

修改渐变填充色,修改渐变角度方法与PS中一样。

(6)在对象上右键,变换,镜像,垂直,得下图图标。

实例十二:荣誉体系徽章设计

1.多边形工具,设置填充色及描边色,三个六边形叠加。

2.内部小六边形底部的渐变弧形:

(1)钢笔工具画弧形,去掉描边,填充色改为渐变色。

(2)选中弧形,选中渐变工具,设置渐变色。

3.钢笔工具画勋章中的山峰图形时候用直接选择工具选中需要调整弧度的节点进行调整弧度。

矩形及多边形的圆角设置也是直接选中工具选中后,选中圆角设置圆点进行设置。

4.在渐变面板中添加渐变关键颜色节点。

5.描边设置渐变色,在渐变面板设置关键颜色及角度。

实例十三:宣传板上的文字渐变效果

(1)尺寸高2.4m,长4m,导出分辨率150像素/英寸(ppi)中等分辨率即可,

300ppi的高分辨率用于宣传册印刷。

(2)窗口-->外观,右上角更多菜单中选“添加新填色”

(3)表层黄色渐变,底层橙色渐变。

(4)AI文件印刷时文字要右键转换为轮廓,否则文字不清晰。

实例十四:金刚区图标背景设计

(1)在“外观”面板中设置不透明度属性。

(2)复制一份圆角矩形放在底层,“效果”-->“风格化”-->“投影”,X位移:0px,则投影在正下方。

X位移:5px,则投影向右偏移5px。

(3)属性面板的选取效果上右键-->“模糊”-->“高斯模糊”,调整值。

(4)下图所示滤镜也可以做出均匀的模糊效果。

同类案例:

实例十五:元素海报

元素排列后组合,选中元素和矩形背景,右键“建立剪切蒙版”,剪切蒙版是透明的,剪切蒙版的形状还能通过“直接选择工具”改变关键点来进行修改。后面的背景需要再画个有颜色的背景。

元素描边,填充色统一要进行上面的操作,选择-->对象-->画笔描边,选择-->相同-->填充色。

中间形状裁切,钢笔画斜线,与中间形状垂直居中对齐,钢笔工具将线继续画成形状与中间几何形状裁切,对称的形状只画一半,另一边用复制对称形成。爱心也是画一半后,另一边复制对称形成。

实例十六:拼图

上图拼图的设计就是剪切蒙版后改变剪切蒙版的形状。

实例十七:LOGO制作

实例十八:叠加不透明度图标

底层图形色彩饱和度高,颜色区域在右上角,上层颜色在底层颜色基础上加黑色和不透明度。

AI文件100%显示,快捷功能菜单图标尺寸60px*60px

左侧栏快捷菜单图标尺寸36px*36px

左侧栏一级菜单图标尺寸如下图所示:18px*18px

实例十九:叠加描边图标

上层图形与底层叠加部分加白色描边

实例二十:磨砂玻璃效果图标

底层与上层叠加的图形与上层图形用“路径查找器”取公共部分,然后置于顶层,添加高斯模糊效果,最后将最上面的白色图标置于顶层。

选中最终显示范围的图形或图片,再选择需要裁切的图形或图片,ctrl+7,裁切后剩余两者公共部分,所以遮罩图形或图像要提前备份。

叠加彩色图形部分,高斯模糊在中间层。

顶层白色半透明部分投影,投影颜色及参数在属性面板中可修改

统计卡片图标尺寸120px*120px

实例二十一:上层磨砂玻璃白色描边效果

上层白色圆角矩形,白色描边,ctrl+alt+g在上面叠加与底部颜色相同的矩形,将次矩形高斯模糊,得下图效果。

实例二十二:图表设计

有合并项的复杂表格设计,表头颜色区分,表内容隔行变色,合并表格深灰色,行间白色间距区分

工具属性栏的设置

选中对象后,选择对齐参照物后再选对齐方式:

选择工具选择对象后工具属性栏检查圆角矩形弧度:

导出前整理画板序号,使之连续方便导出。

实例二十三:复杂图标

(1)在设计复杂多滤镜图标时候,经常卡顿,AI软件非正常关闭多次,背景图导出png图片,分辨率设置为300ppi,若是网页格式72ppi在ppt中会显示模糊。

(2)保留一个多图层多滤镜源文件,其余类似图标背景使用png格式文件。

(3)宽:130px,高:120px是导出在ppt中查看合适的尺寸,300ppi时候在电脑中显示分辨率:542*501。

实例二十四:文件类型

打印格式默认CMYK颜色模式,在电脑上面预览颜色暗。

图稿和插画模式默认横向显示,颜色RGB,PPI:72,可以见方向设置为竖线,要想清晰度更高可以将PPI:300

文件新建时候选择RGB格式颜色鲜艳,若新建时候是CMYK颜色,之后转换为RGB格式颜色还是暗的,所以开始就要想好文档是在电脑上看或是打印。

网页图片格式为RGB,PPI:72,CMYK格式图片在网页上无法显示。

THE END
1.界面原型设计工具怎么布局界面界面原型设计工具如何画界面原型图摘要:设计一款软件时,软件界面的设计是很重要的,一般设计初期会使用原型设计工具来进行界面原型设计,并绘制界面原型图。界面原型设计工具布局界面时,主要考虑界面区域的划分、功能区域的规划和作业区的分类;绘制界面原型图则先画好草图,然后通过原型设计工具绘制即可。下面一起来了解一下界面原型设计工具如何画界面原型图吧https://www.maigoo.com/goomai/265856.html
2.用户体验至上:9款软件界面设计工具分享软件设计工具即时设计——可实时在线编辑的专业设计工具 https://ad.js.design/online/ui/?source=csdn&plan=xy805即时设计作为一款专业的在线合作UI设计软件,可以实现视觉效果、互动效果、体验效果的一站式成型,为您的目标用户创造流畅的体验。 轻松绘制原型:借助即时设计社区设计资源和原型模板,开始敏捷高效的工作。与产品经理一https://blog.csdn.net/2301_79599164/article/details/140926262
3.APPUI设计教程来啦!手把手教会你!完成以上工作,就到了绘制 UI 设计图的重头戏上了 ——使用 APP UI 设计工具制作原型图和 UI 图。本篇内容以国内在线 APP UI 设计工具即时设计为例,从登录设计工具、绘制草图、创建设计项目、预览设计界面,这 4 方面为大家拆解了详细的 APP UI 设计教程,手把手教会你如何让 App UI 设计功能更强大更易用!https://js.design/special/article/app-ui-design.html
4.那些高效的界面设计工具腾讯云开发者社区2. 第二阶段是Sketch的出现。虽然Sketch是一款Mac端软件,但其作为一款专门针对界面设计的工具,以其高效、小巧的优势迅速占领界面设计市场,逐步取代PS成为各大设计团队的首选。由于Sketch在动效制作方面的欠缺,出现了Principle、Flinto、Protopie等专门设计界面动效的工具,一般设计师都会将其搭配使用。 https://cloud.tencent.com/developer/article/1752063
5.全面解读2020最值得上手的界面设计工具:Figma优设网2010年前,界面设计师普遍使用的是Adobe Photoshop(简称PS),那时界面设计还在起步阶段。PS的定位是图像处理软件,是一个全面的设计工具,界面设计只是使用这个工具的一个行业分支。2010年后,界面设计飞速发展,PS的性能和效率都无法匹配这个新兴行业的需求。 因此,Sketch顺应而生,聚焦界面设计,并迅速占领界面设计的市场。 https://www.uisdc.com/comprehensive-interpretation-of-figma/
6.电路设计工具)9.6.2中文破解版含安装破解教程EAGLE Premium9中文破解版是一款功能强大的PCB设计和原理图软件。 为用户提供了一整套的PCB布局和原理图编辑工具,以及完整的库内容和社区驱动功能,将您的电子发明变为现实。让您无需将过多的时间浪费在会涂上,内置海量的电路模块,可直接调用,包括99个原理图,4个信号层和160 cm2电路板面积。 EAGLE Premium包括999http://www.sd173.com/soft/7597.html
7.哔哩哔哩CAD教程,轻松掌握设计方法很多关注C模网的小伙伴想知道关于哔哩哔哩CAD教程,轻松掌握设计方法的相关内容,小编@刘楠特此收集整理如下,希望对你有所帮助! ?CAD软件的基本介绍与安装步骤 哔哩哔哩CAD教程中的常用设计工具与功能解析 从零开始学习CAD设计的步骤与方法 如何利用哔哩哔哩CAD教程进行实际设计项目的实践 https://c4dmodels.cn/article/65512.html
8.DraftSight2022软件教程管理界面DraftSight2D2D设计管理界面 使用自定义对话框中的界面页面,创建并修改菜单以及工具栏。 您还可以创建和修改快速访问工具栏、功能区选项卡和面板。 您可以重新排列现有项目、添加新项目以及修改与其关联的条目和命令序列。 要移除https://www.ruanfujia.com/10342265/
9.界面(form)自动生成工具delphi教程本工具开发出来后,在本人周围的软件开发人员中引起两种不同的反响。一部分人员认为,该工具把他们从枯燥,无聊的重复劳动中解放出来,在软件开发中突出了系统分析和设计的重要性,对工具表示欢迎。另一部分人员认为该工具使用后,使软件开发失去了一种艺术创造的激情,用工具开发出来的界面过于单调,朴素,不易为用户接受。在https://www.west.cn/www/info/56842-1.htm
10.AI立体字生成器:一键打造个性化3D文字效果与创意设计工具### 立体字设计教程,一步步掌握关键技巧 为了更好地掌握立体字设计技巧,以下是一份详细的教程: ### 1. 熟悉工具界面 熟悉立体字生成器的界面和功能,理解每个工具和选项的作用。 ### 2. 文字输入与选择 在工具中输入文字,选择合适的字体。字体的选择将直接作用最的设计效果。 ##http://www.guanxian.org/consult/aitong/95387.html
11.BIM软件哪家好?BIM模型设计工具推荐及使用教程BIM免费教程随着建筑行业的不断发展,建筑信息模型(BIM)作为一种新的设计理念和技术手段,逐渐被应用于各类建筑项目中。BIM能够有效提高设计效率、降低成本,并且促进各专业之间的协作交流。然而,选择一款合适的BIM软件对于实现这些目标至关重要。本文将为您推荐几款优秀的BIM模型设计工具,并提供相关的使用教程,帮助您更好地利用这些软http://www.tuituisoft.com/bim/154917.html
12.41界面概述开源设计软件Gimp完整入门4-1 界面概述/开源设计软件-Gimp完整入门-其他软件教程 1-1 介绍 1-2 课题预览 2-1 何为GIMP 2-2 GIMP的行业应用 2-3 为什么选择GIMP 3-1 系统需求 3-2 安装要求 3-3 安装 GIMP 4-1 界面概述 4-2 主窗口 Pt. 1 4-3 主窗口 Pt. 2 https://www.aigei.com/item/4_1_jie_mian_g.html
13.DroidDraw:简化Android布局设计的利器本文介绍了DroidDraw这款基于Java Swing技术构建的Android界面设计工具。通过DroidDraw,开发者能够轻松创建复杂的Android布局XML文件。鉴于Android布局系统与Swing存在相似之处,DroidDraw提供了直观的可视化操作界面。文章通过丰富的代码示例展示了DroidDraw的具体使用方法,帮助读者深入了解其功能。 https://www.showapi.com/news/article/66c619994ddd79f11a0b77db
14.入门可视化开发教程:轻松掌握图形界面设计与编程基础可视化开发教程旨在简化软件开发流程,通过直观界面设计与编程,帮助初学者快速上手,掌握从基础概念到实战项目的全过程,以Visual Basic .NET、Delphi、Ruby on Rails、Python with Tkinter等工具为例,深入浅出地讲解界面设计、控件管理与事件处理,最终通过构建一个简单文本显示应用,提升读者编程与设计能力,实现高效创意实现https://www.imooc.com/article/352587
15.XD软件Adobe XD 是一款设计精美且功能强大的界面设计软件。通过软件的重叠筛选功能,可以帮助用户完成各种元素的设计,在保持样式和间距不变的前提下完成任意级别的更改。通过该软件,用户还可以高效地处理画板,可以同时处理几十个甚至数百个草图板,并能平滑地修改画布的大小,或者改变画布的位置。 https://vfxzy.com/445.html?order=views
16.T20天正电气v6.0正式版,含安装注册激活图文教程,支持CAD2010T20天正电气 6.0是一款专业的电气设计软件,这是可以安装到AutoCAD上的超强电气辅助制图工具,拥有强大的功能,可以满足电气设计单位对电气软件的设计需求。软件能够全方位的满足您所有的需求,采用最新制图标准,符合建筑电气制图标准,你可以在软件界面找到导线、标注统计、接地防雷、变配电室、天正电气、系统元件、强电系统、弱https://www.uibim.com/298209.html
17.Sketch101.6破解版最佳Mac原型UI界面产品设计工具产品设计矢量绘图设计软件Mac图形和设计 Sketch 101.6 破解版支持最新的macOS 15 Sequoia系统。针对macOSSequoia设计了全新的界面,Sketch推出了更适合新macOS设计语言的UI设计。仍然是您熟悉和喜爱的Sketch,但是重新考虑了每个细节-从全高的侧边栏到更新的Inspector,以及整个全新的sketch图标。 最大变化是工具栏,为了为Bighttps://www.macapp.so/sketch3/
18.Visio绘制网站总体设计教程图形图像软件教程Visio绘制网站总体设计教程 visio 是一款全新推出的流程图绘制办公软件,其界面和Office软件界面的操作是一样的,软件功能也非常强大和全面,下面就跟着小编一起来看看Visio如何绘制网站总体设计吧 GPT4.0+Midjourney绘画+国内大模型 会员永久免费使用! 【如果你想靠AI翻身,你先需要一个靠谱的工具!】https://www.jb51.net/softjc/833582.html
19.《Windows10全新界面设计:简洁高效个性化》Windows 10作为微软旗下最新一代操作系统,自发布以来凭借其简洁高效、个性化的界面设计受到了广大用户的青睐。本文将深入探讨Windows 10界面设计的特点,介绍系统的新功能,并分享一些使用技巧,帮助用户更好地体验Windows 10的魅力。 工具原料: 系统版本:Windows 10 21H2 品牌型号:联想小新Pro 16 2022 软件版本:Microsofthttps://www.163987.com/news/win10/141980.html
20.UGNX10.0模具设计教程第1章UGNX10.0基础知识在线免费阅读1.2 UG NX 10.0操作界面 要使用UG NX 10.0软件进行工程设计,必须进入该软件的操作环境。用户可通过新建文件的方法进入软件的操作环境,或者通过打开文件的方式进入操作环境。 选择“标准”工具栏中的“开始”→“所有程序”→“Siemens NX 10.0”→“NX 10.0”命令,即可进入UG NX 10.0单机版的主界面,如图1-1所示。https://fanqienovel.com/reader/7109299567740324877
21.ps学习计划精品2.能够熟练掌握PS软件中的基本工具和特效。 3.能够应用所学知识进行创意设计和图像处理。 计划具体内容: 1.基本操作的学习 了解PS软件界面 打开PS软件后,了解工作区的概念,了解主窗口、工具栏、选项栏、面板等界面组成部分,熟悉常见视图选项和窗口布局,并逐步接触实践操作。 https://www.jy135.com/xuexijihua/1974348.html
22.推荐两款上位机画面设计工具(教程版)对于上位机界面,大部分的工控男都是认为能用就OK,但对于客户而言,那可是非常讲究的:只是功能正常那是远远不够的,经常要细化到图形色调、按钮位置和实物相似度等要素。下面推荐两款设计工具以及使用的详细步骤。 实用的图标工具 (1)登陆网站:www.iconfont.cn http://www.360doc.com/content/24/0815/14/783088_1131434730.shtml
23.MorGain(结构快速设计软件)v2020.06中文版(附安装教程)MorGain 2020是一款非常好用的结构快速设计软件,该软件采用智能化交互界面,可实时显示计算结果。自动记忆工作现场及工作目录,提供对输入的原始数据保存、读取,帮助文件、速查手册详实 ,拥有一百四十多个新、旧规范不同版本的子程序。除此之外,这款软件包含建筑结构设计人员常用的五十多项功能,主要集中在基本结构、地基基https://blog.itpub.net/69977455/viewspace-2717227/