【生意多】-免费发布分类信息
当前位置: 首页 » 新闻 » IT资讯 » 正文

如何在四小时内学会用 Ai 做 UI?

放大字体  缩小字体 发布日期:2020-04-27 08:35:56    浏览次数:30
导读

  整个问题的初衷在于看到了@黎敏 的回答,产品经理新人是否有必要学习Photoshop? 我这个问题主要在于希望一些新人能速度的进入AI操作,而不必花时间去找教程,需要这个问题回答的人不少。再次谢谢 @黎敏。  好吧…… 其实真的很快。只是为了APP出界面的话(不许掐我哈~坚决没黑设计师,从实用,工程师快速出界面,出

  整个问题的初衷在于看到了@黎敏 的回答,产品经理新人是否有必要学习Photoshop? 我这个问题主要在于希望一些新人能速度的进入AI操作,而不必花时间去找教程,需要这个问题回答的人不少。再次谢谢 @黎敏。

  好吧…… 其实真的很快。只是为了APP出界面的话(不许掐我哈~坚决没黑设计师,从实用,工程师快速出界面,出切图方向给的建议)。

  我用的CS6,但是版本不影响。因为这是最少最少的功能了。排列方式等等,每一个版本都是一样。

  如果可能,尽量使用最新版,因为网络素材,尤其是韩、美国那些,常常是最新版,低版本偶尔无法打开高版本设计的图。

  右键(跟word等等一样)选择取消编组就好了。编组就是把一堆东西捆在一起了。方便一起移动。

  root-tools/ActivityCalendar at master 路 rarnu/root-tools 路 GitHub

  最近我从一套完整的APP中学习,尝试着总结一套像样的UI规范出来,花去了我整整两天的时间。如果四小时就能学会用AI做UI?那岂不是:

  软件操作不会就先学软件,理论不懂就买书来看,眼界不够开阔就多上Dribble、站酷、或者Behance,花费同样的时间做最有效的训练,这才是正确的学习方式?

  如果要报培训班,也十分建议熟练操作软件后(注意不要被骗,特别是打着保证就业、贷款报名的机构)!因为UI设计学科内,要学习的排版构图、色彩搭配、交互常识、平台规范的理论知识一大堆,课堂上没有谁有那么多时间精力来教你软件怎么使,所以,熟悉软件基本操作是学习设计最最基础的必要条件。

  平面设计学习日记网创始人。致力为自学设计的朋友提供优质的书籍、教程、经验等资源参考。目前收集了100本人气设计书籍和一些设计/插画视频教程,可供设计学习者参考。

  首先我要说的是,想要在四小时内学会用AI做UI,基本上是很难实现的,除非你掌握了AI软件操作,有一些美术的基础,做出一个UI界面图是可以的,或者说你跟着视频教程做出一个一模一样的UI设计,但是这种方法是不实际的,没有基础学的东西很快就会忘记,所以如果你是零基础学习AI,建议还是老老实实的先把基础学扎实,欲速则不达,一步登天基本是很难的,当然如果你有惊人的智商也是可以的。

  做出一个UI设计掌握的软件一般是Photoshop、illustrator(AI)等等的图形工具,在这里我就不介绍Photoshop了,因为题主问的是AI,想要了解PS的也可以自行参考Photoshop CC 2017零基础入门到进阶全功能教程,其次需要的就是美术的功底了,比如色彩的选择、排版等等,都是做UI不能少的。

  上面介绍的是做UI具备的一些基本条件,我就不多说了,先进入正题,说到AI软件,还没有熟悉的可以自学参考一些教程或者书籍,毕竟四小时学习AI做UI是一件有点难的事情。

  STEP 1:我们先从自行车的基本部件开始:车轮儿。首先用椭圆工具(L)画一个150px*150px的圆,填充色选无,描边颜色是深紫罗兰色,粗细是8pt。

  下面的步骤是为了给轮子加点阴影,这样就显得比较立体。复制这个圆环并“贴在上面”两次(Control-C Control-F Control-F)。选择最上层的圆环,用方向键向右平移,我移动了4px。(可以把这个圆环转换成描边填充,这样比较容易看到平移的效果)。

  选择刚才我们移动的图层以及它下面的图层,选择路径查找器-减去顶层,这样我们就剩下了两片月牙的形状了,调整混合模式为正片叠底,并调整颜色,色值为H-320.8,S-24.02,B-80,从而得到淡淡的阴影。

  STEP 3:复制这两个图层(即月牙形路径和原始的圆环路径),并“贴在后面”(Control-C Control-B),缩小这两个刚刚复制的路径(我缩小到直径145px)。

  然后调整这两个路径的颜色为米黄色,色值H:39.13,S:19.83,B:90.98。轮圈就做好了。

  STEP 4:接下来是加上辐条。使用直线工具(),按住Shift键,画一条垂直的线pt,颜色使用刚才的数值。需要注意的是,这条线段要相对之前的路径居中对齐。

  接下来,选中这条线段,双击工具面板上的旋转工具,在弹出的面板里进行如下图的参数设置,并点击复制,这样就有了两条相交的线段了。

  然后就是做更多的辐条。选中这两条相交的线段,再次双击旋转工具,按照下图设置,点击复制。在这里,360/20的意思是把360°分成20份,AI会自动计算合适的角度。重复这个操作几次,就得到下图。

  STEP 5:接下来是挡泥板。画一个和车轮一样大的黑色的圆,置于顶层,盖住轮子。改填充模式为描边(Shift-X),8pt,具体设置如下图。

  点击剪刀工具(C),在这个圆圈的左右两个锚点上各点一下,这样就把一个圆分为两半了,删掉下面那半。

  STEP 6:①选中这半个圆,选择对象-扩展,填充一个比较粉嫩的颜色,我填的是#ef77a0;②+③然后通过之前做车轮阴影一样的步骤,给挡泥板也加上点阴影。④画一个25px*25px的圆,放在车轮中心的位置。

  STEP 1:这步是加后轴。用矩形工具(M)画一个长方形,填个鲜亮的宝石绿色,#6ad6b6。然后用直接选择工具(A)选中矩形右上角的锚点,垂直上移一点,右下角的锚点下移。

  接下来的步骤需要实现如下图的效果。在这需要说明一下,原教程作者用的应该是最新版AI,我的版本里没有那个先进的功能,所以实在是没看懂他说的啥,就只要用自己的笨方法实现了类似的效果。我的步骤是复制右侧的圆,放大到与下面的矩形相交,通过路径查找器-分割,然后删掉多余的圆角部分。

  再用矩形工具或者圆角矩形工具,加一个踏板。这里原作者给后轴和踏板加上了阴影,但是没有过程,大家可以参考做轮子时的步骤。

  STEP 4:画一个斜线pt,作为车座的支架。添加另一个较细的线段,与这个较粗的线段形成三角形。然后用圆角矩形工具在上方加上车座。

  然后我们把前轮挡泥板的角度调一下。选择旋转工具(R),按住Alt的同时点击车轮的中心点,在弹出的面板里按下图调节,点确定。

  STEP 6:接下来就是把手了。先用钢笔工具(P)画一个折线,然后选中转角的锚点,将它转为平滑。

  STEP 6:接下来就是把手了。先用钢笔工具(P)画一个折线,然后选中转角的锚点,将它转为平滑。

  STEP 8:接着就是加点细节的时间。选择后轴,点击对象-路径-偏移路径,进行如图所示的设置,这样就得到一个新的路径。把这个新的路径调的深一点,还可以根据自己的喜好添加其他的元素。

  STEP 9:最后,我们可以加点云朵。用椭圆工具(L)画几个圆,相互重叠,然后使用橡皮擦工具(E),去掉下方多余的部分,就大功告成啦。

  看完上面的例子,相信入门的学员都会感觉到熟悉AI软件的重要性,着急吃不了热豆腐,扎实基础才是走向成功的唯一指标。

  最后我来总结一下,想要真正掌握AI做UI,需要的不是快速学习,而是扎实的把AI的基础学好,还有就是对自己的美术功底也要有提升,多参考一些设计类的网站,学习配色、排版等的知识,总归一句话:有目标的学习总是好的。

  关注微信公众号:yihuwang2012,更多软件资讯在等你,转身会员专区,可享更多的免费学习教程~

  用AI做UI的关键在于,首先要明白AI做设计做的是哪些东西。对于USER INTERFACE 最重要的一个方面就是对于ICON 的设计,其次才是界面的设计,在设计的过程中,首先要对于交互界面做一个了解,懂得分析界面的具体设计流程。同时,也要对AI软件的操作做到了解。所以在设计一个UI之前,设计师要知道如何去做,如何用不同的命令设计一个界面。

  以这个界面为例,设计师在制作这个界面的时候要明确这个界面中标题栏和左边的icon在设计的时候效果是不一样的,中间每个头像的点选也是不同的,同时注意每个对象之间的间隔线,还有就是三大背景的主要选择,以及点选符号。

  分析完了界面那么下一步应该开始弄清楚如何去用AI进行设计了。在学习AI的过程中,首先要了解具体给他功能界面的意图。首先是菜单栏,其次是左边的工具栏,还有就是辅助工具栏等。

  除此之外,那么在设计上述界面的时候,要分析到具体的命令。绿色背景的标题栏中,分两个色块,所以在用到AI的时候主要是点选钢笔工具或是矩形框来操作。两端的ICON可以采用不同的线的形式去操作。其次在设计左边的ICON的时候,要注意每个作品的行间距,最好有一定的尺寸标注,那么在设计的时候就比较容易统一风格。

  对于右边个人头像下边的渐变效果,可以采用AI 渐变效果来设计,同时界面中的字体设计可以采用图片的是与ICON做一个组合放到一起。在用AI设计UI作品的时候最重要的不是完成交互设计师所需求的东西更重要的是懂得如何去审视什么是好的设计作品。其次,AI只是一种设计工具,所以就AI如何入门而言可以把他当成基本的绘图软件。再次,对于一些特殊的艺术效果,AI的操作方法其实没有PS的效果好,如果对于PS的效果要求没有那么严格的话,其实可以采用PS的形式。

  以上述的作品为例,在设计的过程中,对于中间的白色区域元素,其实可以采用矢量图的形式,同时对于后边的背景渐变可以采用位图。如果对于界面的效果有特殊要求,如背景是一张图片而且是作用于这个界面的时候,这时可以采用PS的方式解决。所以,对于说如何去入门并且用AI去做UI最重要的不是如何去学,而是认清楚,在设计的时候最重要的是用哪种方法去做,去设计,和懂得如何去分析几个界面的基本构成等。

  為什麼要四小時呢學會呢?打電話跟客戶說遲一點交貨不就可以嗎?你老闆叫你做的嗎?那你告訴他你既不會 Ai 也不會 UI,四小時怎麼做。

  好了,四小時內學不學會 Ai 不是重點,重點是為什麼要選 Ai?用 Ai 做 UI 可以,就如你可以用「小畫家」畫 Icon。題主大概不是要做最終的 Visual Design 吧(設計一個完整的 App 或網站,四小時也做不完,找些素材什麼拼貼一起不算是在「做」吧),只是做 UI 流程或是要展示你的 UI 概念,那用你本身熟悉的工具就好,Keynote(可做簡單動畫)、OmniGraffle(做 wireframe 蠻好用的),其他人提出的 PowerPoint、Word、Fireworks 也可以,會 HTML、Javascript、CSS 的可把整個互動的介面做出。甚至可以在紙上畫,配合 POP App 就可以在設備上展示。

  前段时间在公司忙一个新项目,需要从0到1完成所有的界面设计,图标绘制,验收走查。每次在项目中我最怕的就是图标绘制,先不说图标的样式要独特,有趣。单单绘制就让我想起来头疼。尤其是路径裁剪,曲线拼接,总觉得自己的钢笔工具使用的不够熟练。

  后来在项目中不断摸索,总结了几个小技巧,让我的绘制效率提升至少50%以上。今天和大家分享一下其中常用的四个小技巧,它们分别是:图形与描边、转角工具、形状生成工具和路径偏移。文中使用的软件是AI工具,作个剧透下期讲 Ps、AI、XD、Sketch画图标分别有什么优劣势。

  举个“吸铁石”图标的例子,我们先拆解图标,可以看成是一个“拱门”图形添加描边的效果,再加上两条小短线。

  首先我们需要绘制“拱门”图形,这个形状是不是特别像一半的圆角矩形,可以先画一个圆角矩形。然后通过AI直接选择工具(快捷键A),

  激活圆角矩形的描点,将下面多余的描点选中(黑色的圈),Delete(删除),然后调整剩余圆角矩形的高度。

  通过 Shift+X 快捷键(转成描边快捷键)将图形变成描边,改变描边的粗细,这步决定了图标的形状。

  这个时候我们就得到了“拱门”图形,接下去只要对“拱门”进行描边处理就可以了,但是我们发现“拱门”图形已经是描边了,无法在描边上继续添加描边,就要用到AI里面的“扩展”功能,目的是将描边变成图形。

  再通过一次 Shift+X 快捷键(转成描边快捷键)将图形变成描边,最后调整描边粗细,底部的圆角,再加上两条小短线,就可以得到这个“吸铁石”图形。

  其实在这里也是可以的,因为“吸铁石”是相对比较规整的图标,但是当我们遇到以下这种图标时,两个图形相减并不是那么方便了。

  使用场景:适合描边的图标,用基本形状拼出想要的图标,然后通过 Shift+X 几次转化后得到最终的结果。

  圆角矩形和圆都是我们比较容易得到的图形,但是怎么样才能得到这条不规则的波浪线呢?之前我都是用钢笔去画圆角,这样并不规范,然且衔接处不自然。

  使用场景:适合带有圆角的图标,先画出直角,然后通过直接选择工具选中描点,激活边角(圆角)功能,调整到合适的数值,这样处理的图形过渡圆滑自然。

  在画图标的时候,我们只知道用两个形状去做加、减、交叉集合,这里要给大家介绍形状生成工具,它的优点

  图标的各个边都被选中了,并且鼠标靠近的时候,会显示“+”号,按住alt键会显示“-”号,这里我们只要下面实心部分,所以按住alt键,将上面部分减去。

  图中是一个三元环,通过形状生成工具,我将中间三个“花瓣”交叉的地方合并了,增加了一个新的图形,如果是使用路径查找器里面的“联集”(加法),得到的是全部合并,而不是单独部分的,如下图:

  使用场景:适合相交,有集合的图标,可以通过图形与图形,线与图形,线与线等各种形式得到想要的形状,灵活度高,操作性高。

  但是仔细看,两个对话框之间有几个像素的间距,在画图标的时候我们是不是经常用图标缩放相减的方式得到描边,但是缩小后我们发现,描边的间距并不是一样的,尖角那里明显小一些。

  虽然也能得到微信里的这那条白色间距,但是这种方式也是不够规范的,这时候就可以使用AI里面的偏移路径功能。

  使用场景:适合一些带尖角类型的图标,不能通过放大缩小得到。通过设置偏移数值,作出相对正确的图形。

  很多时候,多练习固然很重要,但是好方法比盲目的练习更加重要。就拿图标绘制来说,以前我只知道用图形相切和钢笔勾线这两种方法。规则的图形使用路径查找器绘制,不规则的图形只能使用钢笔勾勒,经常需要花费大量的时间去修正。

  通过这次的学习,让我提升了效率,减少至少50%以上的时间。现在再画上面的这四类图标都不会超过5分钟了,希望你们也能从中获得一些感悟。欢迎交流学习以及指正。

 
关键词: ai怎么用
(文/小编)
打赏
免责声明
• 
本文为小编原创作品,作者: 小编。欢迎转载,转载请注明原文出处:http://www.31duo.com/news/show-179075.html 。本文仅代表作者个人观点,本站未对其内容进行核实,请读者仅做参考,如若文中涉及有违公德、触犯法律的内容,一经发现,立即删除,作者需自行承担相应责任。涉及到版权或其他问题,请及时联系我们。
 

(c)2016-2019 31DUO.COM All Rights Reserved浙ICP备19001410号-4

浙ICP备19001410号-4