记得收藏【国际动画教程网】,赶快注册吧!
注册

合作站点账号登陆

QQ登录

只需一步,快速开始

扫一扫,访问微社区

快捷导航

[UI教程] UI设计教程-火箭图标UI设计[含30P]

[复制链接]
发表于 2017-6-15 08:08:51 | 显示全部楼层 |阅读模式
        在本教程中,我们将在Photoshop创建一个复古风格的火箭。过程非常细致,效果超级赞,适合有有心在UI设计方面更进一步的同学练习,当然,有耐心的同学也可以一点点研究,如果能全程跟着完成,能力一定会提升很大的 :)


此外,我们将研究如何使用图层蒙版,以及如何利用多图层来节省时间,接下来,就让我们开始吧!


最终效果



UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853tlqqnqrx5v9ryin1 1



1、在Photoshop中打开一个新的文件使用以下设置,并保存为Retro Rocket.psd。切记要经常按Ctrl + S保存文件。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853cu8c5c11u94d88xi 2



2、首先,让我们来看看本教程的原型。这是一个很粗略的草图,但目的是为了有一个基本的概念。有左强光源。所以火箭的亮点大多是在左边。但在右侧我们也可以创建一些由于光漫射而产生的一些微妙的亮点。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853e8qsz5gtn05kuunm 3



3、回到Retro Rocket.psd文件,选择工具箱中的多边形工具。然后在选项栏上选择形状,右边末尾处的“边”选择3,现在拖动三角形并填充为红色(RGB255,0,0),具体如下图


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853h8xxoyq0na15wn4q 4



4、 选择直接选择工具(白色箭头),然后选择并拖动向上,使三角形顶部的定位点向上移。现在我们必须从直线到曲线改变三角形的边。我们会做这个转换锚点工具。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853cozh6smsmsu690he 5



5、 选择转换点工具(看起来像一个倒“V”)。然后单击并拖动顶部锚点延长方向点。要单独移动手柄(即方向),按下Alt键并拖动方向点。方向点是在方向线的端部的实心圆圈或圆点。这将创建火箭的主体形状。重命名此形状图层为“箭体顶”。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853czkofdo1olm3jwgv 6



6、 选择矩形工具,并按照之前的设置创建一个矩形。这将在“箭体顶”图层下面新建一个图层,命名此层为“箭体底”。如之前的过程中选择转换点工具,并改变矩形以匹配下面的截图。我们基本上是将箭体分成两个形状图层,即“箭体顶”和“箭体底”。注意有三条直线(如图所示)。通过使用相同的技术,将其转变成曲线。确保他们的弯曲量相等。这会让火箭更有3D透视的感觉。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853g51qlq0v404lqvfp 7



7、在“箭体顶”图层上选择多边形工具上创建一个三角形,命名为“火箭鼻子”。颜色为黑色带轻微的红色(RGB25,0,0)。通过移动锚点使用直接选择工具相匹配的三角形箭体顶部的大小。然后弯曲与转换锚点工具下部直线。曲线的方向应该是向上。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853p7zqshf1f0qyqffq 8



8、 现在创建三个类似翅膀的支架,使我们的火箭保持矗立。它们在飞行过程中也用于控制方向和平衡。我们将利用一个矩形形状图层和编辑锚点工具来改变形状成机翼形状。为此,我们将同样使用直接选择工具和转换点工具。让我们回顾一下这个过程。


我们还是利用工具创建形状,如矩形或用钢笔工具。然后利用直接选择工具编辑锚点。我们通过改变锚点的类型以及从角落的转换锚点工具来使之平滑,创建曲线。平滑点是那些从锚点两侧延长线(即方向点)的方向点控制曲线的高度和方向。要添加锚点,单击与钢笔工具路径的任何空白部分。要删除,用钢笔工具点击任何一个现有的锚点。详细细节如图所示:




UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853jzn7tmdma7sztm8d 9



请按照截图来做。因为这是一个试错的过程,预计要花费一些时间在这里。当你做出满意的机翼形状,然后在图层名称双击形状图层的文字更改为“左翅”。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853xhio92cmjm9z9yj9 10




9、 右键单击“左翅”层,选择复制图层。然后改变位置到右侧的火箭和重命名的层为“翼右”。现在选择路径选择工具(黑箭头),然后单击路径上,将其选中。然后按Ctrl+ T来获得所选择的路径周围的边框。现在的边框内点击右键,从菜单中选择水平翻转。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853tzh4e4dzdheahyzg 11



翻转和定位后得到新的图层“右翼”


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853evo5p3c4prkrrjku 12



10、复制“右翼wing right”图层,命名新图层为“中翼”,然后像之前的操作一样打造中翼。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853hlc12221cpw889d1 13



11、 按照相同的方法,并在“箭体底”层的下面创建一个黄色(RGB255,242,0)的矩形图层。改变形状如截图。命名此层为“发动机中部”。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853ij963kzca8xije7x 14



12、 在弯曲的“发动机中部”层的顶侧创建另一个矩形形状层(RGB0,0,0),并将其命名为“发动机上部”。把这个形状定位在发动机的中部的顶。详细如图所示:


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853z0lbyiizi1ybos81 15



13、 复制“发动机上部”层然后放置在 “发动机中间”层的下部位置。命名此层为“发动机底”。


我们所做的基本上是建立引擎的三个部分。顶环为“发动机上部r”和底部一个是“发动机底”。 “发动机上部”和“发动机底”是黑色的,而中间部分是黄色的。




UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853co3mq4uf7h4zu0qo 16



14、 现在我们将创建的发动机的左侧。这实际上是在箭体(箭体底层)的延伸部分。因此,如下面的截图所示的位置,创建另一个红色(RGB255,0,0)矩形。命名为“引擎左侧”。改变这层下面的“箭体底”层的位置。你可以在图层面板拖动上下位置更改图层顺序。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853utzrvhvhcc1bctbn 17



15、 现在,从工具箱下面更改前景色为RGB(149,149,149)。选择椭圆工具,并创建一个类似以下截图的一个圆圈。您可以通过按住Shift键的同时拖动来创建一个标准的圆。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853csvqjuu7qx1x7csg 18



16、利用路径选择工具选择该圆,然后选择编辑>复制和编辑>粘贴。因此,我们现在具有相同的形状层中的两个的形状。利用路径选择工具选择这两个圆其中一个,并按住Shift键单击另一个。当选择路径后,选项栏上的顶部会出现形状选项。选择该选项排除重叠的形状。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853ken5pf0pcpd0ddcy 19




17、 这将产生一个环形。重命名此层为“外环”。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853wpjccnurqzquefee 20



18、 在“外环”的上面创建图层名称为“玻璃”的另一个圆圈图层。使“玻璃”层圆圈的大小与“外环”层的内圆相符合。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853ljnnn1smn9j5spes 21



19、图层面板中的图层越来越多,所以应当把他们组在一起,选择“火箭鼻子”,“箭体顶”和“箭体底”层。然后点击图层面板的右上角的面板选项。然后从图层选项中选择新建”火箭主体“组。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853m575rv2ssncu5ic7 22



UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853fcqzdvqdyrkcqq0r 23



20、 同样,创建三个组,即:“火箭发动机”,“火箭之翼”和“火箭驾驶舱”。请按以下步骤来:


1.火箭发动机组–“发动机的左侧”,“上下引擎”和“发动机中 “层。
2.火箭的翅膀组–“翼左”,“翼中”和“翼右”层。
3.火箭舱组–“外环”和“玻璃”层。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853xhhn77mqp7p37q5n 24



21、 现在选择“火箭驾驶舱”组,然后朝它的左侧移动一点。这将使3D效果更明显。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853ecz5ttod7tzzro8c 25



22、 通过点击文件夹图标左侧的箭头展开“箭体”组。创建一个新的矩形(RGB25,0,0)。根据截图调整形状。有了这个造型后,我们完成了火箭的形状。现在该制作一些阴影,创造火箭表面的外观了。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853gqdv6nmx1qqa66j1 26



23、关于阴影:


在开始制作火箭阴影部分之前,我们来讨论我们的一般制作阴影流程教程。请记住,阴影部分将是一个反复的过程,因为我们需要一次又一次的来做。


创建亮点:


这里分两部分:旧版本(CS 5 及以下)用钢笔工具描绘出形状,添加图层蒙版,应用高斯模糊,然后通过调整图层不透明度控制亮部。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853h6mmzohtvsnplfvp 27



对于Photoshop CS6的用户,步骤是:利用钢笔工具创建亮点的形状,像以前一样,但再不是应用高斯模糊滤镜,而是打开窗口>属性,在属性面板调整羽化量,这将产生类似高斯模糊类似的效果。所不同的是,你可以再次打开属性面板,调整以前应用的羽化量。然后调整图层的不透明度和之前一样。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853ivkimz9i9m9lf59u 28



针对这一情况,如果使用Photoshop CS5,您可以选择形状图层的矢量蒙版缩略图后,打开窗口>遮罩。然后,我们将在该层上增加一个遮罩(即无论它是一个栅格化图层或形状图层),以进一步控制可见性和外观的亮点形状。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853vq9ev6vs9q2vhbuz 29



另一种简单的方法是:进入路径面板,并从下方的状态栏点击新路径图标创建一个新的路径。然后用钢笔工具来创建和控制在路径面板形状的路径加载的选择。回到图层面板,创建一个新层。然后填充颜色,取消选择该选项。然后应用高斯模糊柔化的外形和使用遮罩和图层不透明度来控制形状的能见度。


UI设计教程-火箭图标UI设计 Photoshop,UI设计,工具箱,三角形 【UI】 080853slxubu8xczvlbwsw 30



是的,我知道。大量的信息在这里!但我要的是你尝试所有的步骤,然后选择你觉得最舒服的过程。然后一次又一次地使用相同的过程在整个教程中掌握它。


<p>               
一起共享资源,共建精品资源平台。记得一定要收藏我们网站。www.gjdhjc.com ||||| 还有我们的网址导航:www.58q8.com【链接失效可以留言看到第一时间补帖,如果懒的回复我也是没办法了】
快速回复 返回顶部 返回列表