www.2527.com_澳门新葡8455手机版_新京葡娱乐场网址_
做最好的网站

盒装饭菜君带你画UI,绘制清新的情调活泼的网页

2019-09-16 08:45 来源:未知

www.2527.com 1界面原创:By Anton Aheichanka for InVision

先看看最终效果图www.2527.com 2第一步:新建文档1200px * 750px,选择渐变工具(G),对背景图层从上(#www.2527.com,792700)到下(#000000)新建渐变,如下图所示:www.2527.com 3第二步:添加色彩新建图层,选择笔刷工具(B),选取直径为300px的软笔刷,分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部,图层命名为颜色。如下图所示:www.2527.com 4第三步:添加纹理打开一开始保存好的绿叶图片,使用移动工具(V),移动到当前文档内,右击新图层,选择转换为智能对象,然后转到菜单:滤镜>艺术化>胶片颗粒,滤镜>像素化>马赛克,参照下图的设置,最后设置此图层的混合模式为差值,透明度为30%,图层命名为:纹理。如下图所示:www.2527.com 5www.2527.com 6第四步:为内容添加黑色背景新建图层,选择圆角矩形工具(U),设置3px的半径,创建一个黑色圆角矩形框,双击图层,弹出图层样式对话框,如下图一样设置阴影,最后设置此图层的透明度为70%,图层命名为:黑色形态,如下图所示:www.2527.com 7第五步:添加组管理图层按住ctrl键,选择目前为止创建的所有图层,进行图层编组(ctrl g),组命名为:背景,如下图所示。www.2527.com 8第六步:创建更多组新建组(图层>新建>图层编组),组命名为:主页,在主页内再增加一个组,组命名为logo,如图所示:www.2527.com 9第七步:创建logo和网站副标题在logo的组里新建图层,选取字体工具(T),书写您的网站名字,颜色为#f4f4f4。双击图层,按照下图设置图层样式,斜面与浮雕,外发光,渐变叠加。然后再新建图层编辑网站副标题,颜色为#eeeeee。www.2527.com 10www.2527.com 11第八步:创建注册,登录按钮现在将在布局的右上角创建两个按钮。新建组,命名为注册|登录;选取圆角矩形工具(U),像我一样创建圆角矩形;双击形状图层,弹出图层样式对话框,如下图进行设置。设置前景颜色为白色,用字体工具(T)在按钮上编写注册|登录,设置字体层的透明度为75%。www.2527.com 12www.2527.com 13第九步:创建1px高的蓝色水平线新建组,命名为导航,新建图层,选取单行选框工具并在文档新建1px高的选区,以颜色#406f94进行填充,使用矩形选框工具(M)删除超出黑色矩形的选区,设置透明度为40%,层命名为横线。www.2527.com 14第十步:给导航添加渐变选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl D撤消选区,右击图层,转换为智能对象,然后再转到菜单 滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为渐变,且在渐变与横线之间留出1px的距离。www.2527.com 15第十一步:编辑导航菜单选取字体工具(T),并在导航栏上编辑菜单,这里我应用的字体是Adobe仿宋体,然后双击字体图层,按下图一样设置图层样式。www.2527.com 16www.2527.com 17第十二步:创建分隔线现在我们将在菜单栏中创建分隔线,新建图层,选取单列选框工具,并在菜单的布局上点击一下,选取矩形选框工具(M),并在选项栏上选择交叉选区。www.2527.com 18对新的选区以白色填充,最后按ctrl d,取消选框。最终结果如下图:www.2527.com 19第十三步:双击上步新建的图层,命名为竖线1,并进行如下图层样式的设置。www.2527.com 20第十四步:按ctrl j复制图层竖线1,重命名为竖线2。选取移动工具(V),点击键盘上的方向键,向右移动1px,并更改渐变叠加的设置。如下所示:www.2527.com 21您的图将会是这样:www.2527.com 22按住ctrl,选择竖线1和竖线2,转换为智能对象,新图层命名为分隔线。第十五步:创建蓝色高光1、新建图层,放置在分隔线下,选取矩形选框工具(M)创建像下图一样的选区www.2527.com 232、以颜色#35423e填充该选区,按ctrl d撤消选框,右击,在下拉菜单中选择转换为智能对象3、去往菜单 滤镜>模糊>高斯模糊,并设置半径为4px4、再次 滤镜>杂色>添加杂色,数量为0.7%,属性为第一个选项,像第十步那样设置5、设置图层透明度为60%,命名为高光图片最终为:www.2527.com 24第十六步:为图层分隔线创建图层蒙版选定图层分隔线,转到菜单 图层>图层蒙版>显示所有,选择渐变工具(G),新建一个从黑到透明的渐变,方向是从上到中间。www.2527.com 25第十七步:复制图层分隔线,高光同时选中分隔线,高光这两个图层,使用移动工具(V),按住alt shift,拖动两个图层中的对象至另一个菜单与菜单之间,这就相当于复制分隔线,高光的操作,重复拖动动作,根据您的菜单多少来复制www.2527.com 26第十八步:为图层分隔线,高光编组选择所有的图层分隔线,高光,按ctrl g,进行编组,组命名为分隔线。第十九步:为当前页面创建激活按钮现在我们将为当前菜单页面创建一个激活按钮,来区分其它的菜单按钮。选取矩形工具(U)并像下图一样新建矩形,并把这图层放置在菜单图层的下方,双击图层,进行渐变叠加的设置,图层命名为激活按钮,设置透明度为50%。www.2527.com 27效果图:www.2527.com 28第二十步:创建搜索框新建组,命名为搜索,放置在导航组上面。选取圆角矩形工具(U),设置半径3px,前景色为#104f59,创建圆角矩形,命名新的图层为文本区域,透明度为80%。www.2527.com 29选取矩形工具,在文本区域右边创建一矩形,并如下图进行设置图层样式渐变叠加,然后右击图层,在下拉菜单中选择创建快速蒙版,层命名为按钮。www.2527.com 30www.2527.com 31选取字体工具(T),使用白色,在按钮上书写搜索两字,图层透明度为75%。www.2527.com 32选取线条工具(U),使用颜色#123036创建直线,图层命名为直线,并放置在按钮图层下方,把此直线移动在搜索框和按钮之间。www.2527.com 33第二十一步:新建蓝色矩形在组导航下新建组(图层>新建>组),组命名为案例,再新建组放置在案例中,并命名为背景选取矩形工具(U),颜色设置为#219aad,创建宽度为983px,高度为273px的蓝色矩形,(提示:打开(按F8)信息面板,查看宽度和高度),设置此图层的透明度为55%,命名为bg4www.2527.com 343. 在photoshop中打开在上篇中一开始要保存的第二张图片像素化的蓝色矩形,把图片移动到此文档中,并且覆盖蓝色矩形,同样也设置透明度为55%,命名为bg3。www.2527.com 354. 按住ctrl键,点击bg4中的矢量蒙版缩略图以选中此蒙版www.2527.com 365. 新建图层,放在bg3上方,命名为bg2,选取渐变工具(G),画一个颜色#56b8e5到透明的渐变,方向是从选区底部到选区头部,然后按ctrl d撤消选区www.2527.com 376、新建图层,放在图层bg2上方,命名为bg1,选取矩形选框工具(M),像下图一样创建选区,宽度为983px,高度43pxwww.2527.com 387、选取渐变工具(G),画一个颜色#0f2b42到颜色#2a607f的渐变,方向是从选区底部到选区头部,然后按ctrl d撤消选区www.2527.com 39第二十二步:注册与了解更多1.新建组注册按钮,放在组背景上方,选取圆角矩形工具(U),设置半径2px,像下图一样新建圆角矩形(82*38),并设置如下图一样的图层样式(注意:shap2图层的透明度是100%)www.2527.com 40www.2527.com 41www.2527.com 42www.2527.com 432. 重复步驟1创建了解更多的按鈕,并且增加一层,添加箭头,选取自定义形状工具(U)中的第二个箭头形状,像下图一样创建箭头www.2527.com 44第二十三步1. 新建组,命名为左箭头,放在组了解更多按钮 上方,选取椭圆工具(U),新建颜色为#406F94的圆,并设置内阴影和描边的图层样式www.2527.com 45www.2527.com 462. 新建图层,选取自定义工具(U)中的箭头形状,创建白色箭头,并设置图层样式阴影,透明度为50%www.2527.com 473. 重复步骤2,在右边也创建同样的箭头www.2527.com 48第二十四步1. 在组案例中新建组,命名为图片,在组里放置一张小图片,双击图层,设置如下图的图层样式外发光www.2527.com 492. 新建组,选取字体工具(T),在蓝色矩形左边添加文字说明(这个得自己发挥了),组命名为文字。www.2527.com 50第二十五步:创建内容区1. 新建组,放在组案例下面,命名为内容,在此组里再新建一组阴影,选取矩形工具(U),创建一白色矩形(983*181),图层命名为白色形状,透明度为90%。www.2527.com 512. 像二十一步中的第4点一样,选中白色形状的图层蒙版,然后新建图层,命名为头部阴影,选取渐变工具(G),画一个颜色为#8f8f8f到透明的渐变,方向为选区的头部到选区的底部,设置图层透明度为50%,然后选取移动工具(V),按键盘上的向下的方向键两次www.2527.com 523. 新建图层,选取矩形选框工具(M)像下图一样新建选区(273*180)。选取渐变工具(G)画一个颜色#8f8f8f到透明的渐变,然后取消选区,以下图为参考。www.2527.com 534. 添加图层蒙版(图层>图层蒙版>显示全部),使用大一点的黑色软笔刷(我用的是27px),涂在阴影中间部分上面,设置图层透明度为30%,命名为垂直阴影1,复制(ctrl j)图层垂直阴影1,移动至右边,重命名为垂直阴影2。www.2527.com 545. 选取线条工具(U),新建重1px,颜色为#aebcc7的水平线,将图层转换为智能对象(右击图层,在下拉菜单中选择转换为智能对象)图层命名为水平线。www.2527.com 556. 选取字体工具(T),编辑网站内容,您也可以使用图片或别的来替换www.2527.com 56第二十六步:创建网站底部内容1. 新建组底部,并新建图层,选取矩形选框工具(M),新建选区(982*88)。www.2527.com 572. 设置前景色为#555555,选择一大的软笔刷(我选的是100px),沿着选区头部边缘进行涂画,撤消选区,设置图层透明度为50%,并命名为渐变。www.2527.com 58最终的渐变将是这个样子:www.2527.com 593. 新建图层,选择单行选框工具,新建一选区,并以白色填充。按ctrl d撤消选区。转到菜单 图层>图层蒙版>显示所有,选取一大点的黑色软笔刷像下图一样遮住图层,以下图为参考。设置图层透明度为15%,命名为直线。www.2527.com 604. 添加底部文字说明。www.2527.com 61这个大制作终于完功了,里面的字体设置什么的还需要各位看客们多担待!最终效果图:www.2527.com 62

以下是创建过程中所需的图片:

最近偶然的机会看到这套界面,个人有着临摹练习的习惯临摹了一套,很多看到了想学习UI设计的伙伴们问怎么做的,有的尝试着画一下,遇到了当中的某个“难点”后又放弃。决定做这个小教程,给大家分享下设计思路和技法。如果大家喜欢的话就小小关注一下吧,轻喷~

  • 绿叶
  • 像素化的蓝色矩形

准备素材

第一步:新建文档 

1.一张背景图,和四张人物图像图片

1200px * 750px,选择渐变工具(G),对背景图层从上(#792700)到下(#000000)新建渐变,如下图所示:

2.线性图标

www.2527.com 63第二步:添加色彩

3.准备字体

  新建图层,选择笔刷工具(B),选取直径为300px的软笔刷,分别以红(#be4816)、黄(#c0952c)、蓝(#33afc6)三种颜色涂在背景层的上半部,图层命名为颜色。如下图所示:

4.界面色值

 www.2527.com 64第三步:添加纹理

(注:图片可以找一样的,也选择自己的喜欢图片)

  打开一开始保存好的绿叶图片,使用移动工具(V),移动到当前文档内,右击新图层,选择转换为智能对象,然后转到菜单:滤镜>艺术化>胶片颗粒,滤镜>像素化>马赛克,参照下图的设置,最后设置此图层的混合模式为差值,透明度为30%,图层命名为:纹理。如下图所示:

推荐几个我平时收集素材的一些网站给大家吧!

www.2527.com 65www.2527.com 66第四步:为内容添加黑色背景

① Dribbble(大名鼎鼎的UI设计网站,一个注册码都要好几百)

新建图层,选择圆角矩形工具(U),设置3px的半径,创建一个黑色圆角矩形框,双击图层,弹出图层样式对话框,如下图一样设置阴影,最后设置此图层的透明度为70%,图层命名为:黑色形态,如下图所示:

② Behance(PSAI完美结合,Adobe公司的亲儿子)

www.2527.com 67 第五步:添加组管理图层

③ 500px

  按住ctrl键,选择目前为止创建的所有图层,进行图层编组(ctrl g),组命名为:背景,如下图所示。

④ Goodfon

www.2527.com 68第六步:创建更多组 新建组(图层>新建>图层编组),组命名为:主页,在主页内再增加一个组,组命名为logo,如图所示:www.2527.com 69第七步:创建logo和网站副标题  在logo的组里新建图层,选取字体工具(T),书写您的网站名字,颜色为#f4f4f4。双击图层,按照下图设置图层样式,斜面与浮雕,外发光,渐变叠加。然后再新建图层编辑网站副标题,颜色为#eeeeee。www.2527.com 70www.2527.com 71 第八步:创建注册,登录按钮

⑤ Uigreat(其实没到上面的级别,帮朋友推荐一下)

  现在将在布局的右上角创建两个按钮。新建组,命名为注册|登录;选取圆角矩形工具(U),像我一样创建圆角矩形;双击形状图层,弹出图层样式对话框,如下图进行设置。设置前景颜色为白色,用字体工具(T)在按钮上编写注册|登录,设置字体层的透明度为75%。

常见界面布局

www.2527.com 72www.2527.com 73第九步:创建1px高的蓝色水平线

www.2527.com 74

  新建组,命名为导航,新建图层,选取单行选框工具并在文档新建1px高的选区,以颜色#406f94进行填充,使用矩形选框工具(M)删除超出黑色矩形的选区,设置透明度为40%,层命名为横线。

这些布局都是我们常见的几种布局,而这次的练习界面采用的是侧边导航布局。而它的优点:突出核心功能,将其他的功能隐藏掉。适用一些有很多功能,强调目前核心完善的功能,弱化其它功能的产品。如果你细心观察,你会发现很多成熟产品比如QQ、微信,都采用的底部导航。

www.2527.com 75第十步:给导航添加渐变

字体

  新建图层,选取矩形选框工具(M)创建选区(提示:你可以使用标尺),然后使用渐变工具(G)从底部到头部画一个从#35423e到透明的渐变。按Ctrl D撤消选区,转到滤镜>杂色>添加杂色,并按照下图进行设置。给此图层命名为渐变,且在渐变与横线之间留出1px的距离。

www.2527.com 76

www.2527.com 77第十一步:编辑导航菜单  选取字体工具(T),并在导航栏上编辑菜单,这里我应用的字体是Adobe仿宋体,然后双击字体图层,按下图一样设置图层样式。www.2527.com 78www.2527.com 79第十二步:创建分隔线现在我们将在菜单栏中创建分隔线,新建图层,选取单列选框工具,并在菜单的布局上点击一下,选取矩形选框工具(M),并在选项栏上选择交叉选区。www.2527.com 80对新的选区以白色填充,最后按ctrl d,取消选框。最终结果如下图:www.2527.com 81第十三步:双击上步新建的图层,命名为竖线1,并进行如下图层样式的设置。www.2527.com 82第十四步:按ctrl j复制图层竖线1,重命名为竖线2。选取移动工具(V),点击键盘上的方向键,向右移动1px,并更改渐变叠加的设置。如下所示:www.2527.com 83您的图将会是这样:www.2527.com 84按住ctrl,选择竖线1和竖线2,转换为智能对象,新图层命名为分隔线。第十五步:创建蓝色高光1、新建图层,放置在分隔线下,选取矩形选框工具(M)创建像下图一样的选区www.2527.com 852、以颜色#35423e填充该选区,按ctrl d撤消选框,右击,在下拉菜单中选择转换为智能对象3、去往菜单 滤镜>模糊>高斯模糊,并设置半径为4px4、再次 滤镜>杂色>添加杂色,数量为0.7%,属性为第一个选项,像第十步那样设置5、设置图层透明度为60%,命名为高光图片最终为:www.2527.com 86第十六步:为图层分隔线创建图层蒙版选定图层分隔线,转到菜单 图层>图层蒙版>显示所有,选择渐变工具(G),新建一个从黑到透明的渐变,方向是从上到中间。www.2527.com 87第十七步:复制图层分隔线,高光同时选中分隔线,高光这两个图层,使用移动工具(V),按住alt shift,拖动两个图层中的对象至另一个菜单与菜单之间,这就相当于复制分隔线,高光的操作,重复拖动动作,根据您的菜单多少来复制www.2527.com 88第十八步:为图层分隔线,高光编组选择所有的图层分隔线,高光,按ctrl g,进行编组,组命名为分隔线。第十九步:为当前页面创建激活按钮现在我们将为当前菜单页面创建一个激活按钮,来区分其它的菜单按钮。选取矩形工具(U)并像下图一样新建矩形,并把这图层放置在菜单图层的下方,双击图层,进行渐变叠加的设置,图层命名为激活按钮,设置透明度为50%。www.2527.com 89效果图:www.2527.com 90第二十步:创建搜索框新建组,命名为搜索,放置在导航组上面。选取圆角矩形工具(U),设置半径3px,前景色为#104f59,创建圆角矩形,命名新的图层为文本区域,透明度为80%。www.2527.com 91选取矩形工具,在文本区域右边创建一矩形,并如下图进行设置图层样式渐变叠加,然后右击图层,在下拉菜单中选择创建快速蒙版,层命名为按钮。www.2527.com 92www.2527.com 93选取字体工具(T),使用白色,在按钮上书写搜索两字,图层透明度为75%。www.2527.com 94选取线条工具(U),使用颜色#123036创建直线,图层命名为直线,并放置在按钮图层下方,把此直线移动在搜索框和按钮之间。www.2527.com 95最终效果图:www.2527.com 96第二十一步:新建蓝色矩形

www.2527.com 97www.2527.com 98

  1. 在组导航下新建组(图层>新建>组),组命名为案例,再新建组放置在案例中,并命名为背景
  2. 选取矩形工具(U),颜色设置为#219aad,创建宽度为983px,高度为273px的蓝色矩形,(提示:打开(按F8)信息面板,查看宽度和高度),设置此图层的透明度为55%,命名为bg4

在UI设计中,避免使用有衬线。iOS中英文用Helvetica,中文使用冬青、思源黑体等一些无线衬字体,尽量用一下和iOS自有字体相似的字体做设计,这样在app实现后能和设计稿效果减小相差出入。

www.2527.com 993. 在photoshop中打开在上篇中一开始要保存的第二张图片像素化的蓝色矩形,把图片移动到此文档中,并且覆盖蓝色矩形,同样也设置透明度为55%,命名为bg3.www.2527.com 1004. 按住ctrl键,点击bg4中的矢量蒙版缩略图以选中此蒙版www.2527.com 1015. 新建图层,放在bg3上方,命名为bg2,选取渐变工具(G),画一个颜色#56b8e5到透明的渐变,方向是从选区底部到选区头部,然后按ctrl d撤消选区www.2527.com 1026、新建图层,放在图层bg2上方,命名为bg1,选取矩形选框工具(M),像下图一样创建选区,宽度为983px,高度43pxwww.2527.com 1037、选取渐变工具(G),画一个颜色#0f2b42到颜色#2a607f的渐变,方向是从选区底部到选区头部,然后按ctrl d撤消选区www.2527.com 104第二十二步:注册与了解更多

www.2527.com 105

  1. 新建组注册按钮,放在组背景上方,选取圆角矩形工具(U),设置半径2px,像下图一样新建圆角矩形(82*38),并设置如下图一样的图层样式(注意:shap2图层的透明度是100%)www.2527.com 106www.2527.com 107www.2527.com 108www.2527.com 109

选色

2. 重复步驟1,创建了解更多的按鈕,并且增加一层,添加箭头,选取自定义形状工具(U)中的第二个箭头形状,像下图一样创建箭头www.2527.com 110第二十三步:1. 新建组,命名为左箭头,放在组了解更多按钮 上方,选取椭圆工具(U),新建颜色为#406F94的圆,并设置内阴影和描边的图层样式www.2527.com 111www.2527.com 1122. 新建图层,选取自定义工具(U)中的箭头形状,创建白色箭头,并设置图层样式阴影,透明度为50%www.2527.com 1133. 重复步骤2,在右边也创建同样的箭头www.2527.com 114第二十四步:

基本选择两个颜色,主色、辅色。而高光、阴影基于主色,高光向左上角去选择合适的色值,阴影向右下角选择暗一些的色值。主色选择是很重要的,每一个主题都有一个适合的颜色,就像旅游类的采用蓝绿色系的色值。同样色值也是有忌讳的,比如在国内金融就不能使用绿色了,因为绿色在股市代表着跌;可想而知,一个用绿色作为主题色的金融app会怎样?

1. 在组案例中新建组,命名为图片,在组里放置一张小图片,双击图层,设置如下图的图层样式外发光

画界面

www.2527.com 1152. 新建组,选取字体工具(T),在蓝色矩形左边添加文字说明(这个得自己发挥了),组命名为文字。www.2527.com 116第二十五步:创建内容区1. 新建组,放在组案例下面,命名为内容,在此组里再新建一组阴影,选取矩形工具(U),创建一白色矩形(983*181),图层命名为白色形状,透明度为90%。www.2527.com 1172. 像二十一步中的第4点一样,选中白色形状的图层蒙版,然后新建图层,命名为头部阴影,选取渐变工具(G),画一个颜色为#8f8f8f到透明的渐变,方向为选区的头部到选区的底部,设置图层透明度为50%,然后选取移动工具(V),按键盘上的向下的方向键两次。www.2527.com 1183. 新建图层,选取矩形选框工具(M)像下图一样新建选区(273*180)。选取渐变工具(G)画一个颜色#8f8f8f到透明的渐变,然后取消选区,以下图为参考。www.2527.com 1194. 添加图层蒙版(图层>图层蒙版>显示全部),使用大一点的黑色软笔刷(我用的是27px),涂在阴影中间部分上面,设置图层透明度为30%,命名为垂直阴影1,复制(ctrl j)图层垂直阴影1,移动至右边,重命名为垂直阴影2。www.2527.com 1205. 选取线条工具(U),新建重1px,颜色为#aebcc7的水平线,将图层转换为智能对象(右击图层,在下拉菜单中选择转换为智能对象)图层命名为水平线。www.2527.com 1216. 选取字体工具(T),编辑网站内容,您也可以使用图片或别的来替换www.2527.com 122第二十六步:创建网站底部内容1. 新建组底部,并新建图层,选取矩形选框工具(M),新建选区(982*88)。www.2527.com 1232. 设置前景色为#555555,选择一大的软笔刷(我选的是100px),沿着选区头部边缘进行涂画,撤消选区,设置图层透明度为50%,并命名为渐变。www.2527.com 124最终的渐变将是这个样子:www.2527.com 1253. 新建图层,选择单行选框工具,新建一选区,并以白色填充。按ctrl d撤消选区。转到菜单 图层>图层蒙版>显示所有,选取一大点的黑色软笔刷像下图一样遮住图层,以下图为参考。设置图层透明度为15%,命名为直线。www.2527.com 1264. 添加底部文字说明。www.2527.com 127这个大制作终于完功了,里面的字体设置什么的还需要各位看客们多担待!最终效果图:www.2527.com 128

准备好要用的色值、字体、图片素材后,我们就来开始做界面。界面画布尺寸设定:“750*1334px”,状态栏高度设定:40px,导航栏高度设定:88px,导航栏两侧按钮设为大小设为36*36px。小伙伴在工作会遇到有时候按钮宽为24px、高为36px的时候,或者程序员说点击热区太小的时候,我们可以画一个不小于大小44px的透明矩形盖按钮下方了。如图1所示,左边是没有加透明框的,右边是添加了不小于44px热区的。

为什么要添加透明框?

1.这是个细节问题,对于工作交付标注图,这样作出的标注更规范严谨。

2.提高用户体验,增大用户可以点击按钮热区,试想下一个20px和40px的按钮,谁更容易点击?

www.2527.com 129图1www.2527.com 130

如图2所示,圈画的地方,相对于新手暂时是“难点”,圈画的地方有5处,其实归类起来只有2个,一个蒙版,一个图层样式的渐变。2.2、2.1、2.3、2.4是涉及图层蒙版的,2.5是涉及图层样式描边渐变的。

图层蒙版

www.2527.com 131

上图所示都是涉及图层蒙版的,图层蒙版是什么?简单点的意思就是说,你只想要一片区域都消失,只显示你想要的部分区域。蒙版就是盖住其它你不想看到的区域,只显示你想要的区域的一个工具。蒙版怎么做呢,蒙版有好几种蒙版形式,这里采用的是图层蒙版。怎么操作呢?现在我用2.2的蒙版做一个演示。

www.2527.com 132

画一个正圆,拖入一张图片,覆盖在正圆上方,选中图片按住“alt”键,将鼠标剪头放置图片图层和椭圆图层之间就会出现一个标示,点击一下完成图层蒙版。

渐变描边

www.2527.com 133

使用椭圆工具画一个320*320像素大小的正圆,关闭3.1中的填充,打开描边,设置描边为6px,选择3.2的渐变描边。设置3.3为“角度”,3.4为“90”,根据自己的需要在3.5中设置色块。就能得到2.5的效果。

图片处理

www.2527.com 134

图4是原图,把图片拖入后转换成智能对象,变成智能对象后,图片文件大小变小能少占一些内存,图片放大缩小不会模糊,也是为了方便在智能对象里对图片单独做一些色相/饱和度的调整。图4我在智能里调整了一下饱和度和明度,用了图层样式的颜色叠加;叠加的颜色用得是基于主色相对于比较暗的色,这样和整体更加融合一些。最终的效果就是图4.4的效果,配合图层蒙版就达到最终的结果。

包装

做完界面以后呢,千万别以为完事了。给自己的做的界面做个简单的包装,衬托美好下自己的界面,对于自己也算是留下了一个好的作品吧!等在UI这条道路上走稳了,再回过头来,看看自己以前和现在你就会发现不一样的惊喜,因为你每天都在成长。包装的话,像头图那样简单包装也行,找个手机模版放入你的界面也行。

www.2527.com 135

第一次写教程,可能还有些不够清晰或者不够理解的。可以找盒饭噢~

TAG标签:
版权声明:本文由澳门新葡8455手机版发布于www.2527.com,转载请注明出处:盒装饭菜君带你画UI,绘制清新的情调活泼的网页