ps教程论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

查看: 17787|回复: 116
收起左侧

[UI设计] 教你打造宇宙飞船图标

[复制链接]
发表于 2014-9-11 02:07:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?注册

x
      


在本教程中,我们将在Photoshop创建一个复古风格的火箭。过程非常细致,效果超级赞,适合有有心在UI设计方面更进一步的同学练习,当然,有耐心的同学也可以一点点研究,如果能全程跟着完成,能力一定会提升很大的 :)
此外,我们将研究如何使用图层蒙版,以及如何利用多图层来节省时间,接下来,就让我们开始吧!
最终效果

提示:教程详细步骤在二楼,不用回复也能看到!
想下载该教程的可以回复获取下载网址:点击进入下载页
教程编号:134459 作者:_Wangyijie_ 出处:优设网
 楼主| 发表于 2014-9-11 02:07:15 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:16 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:17 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:18 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:19 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:20 | 显示全部楼层

教你打造宇宙飞船图标

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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:21 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:22 | 显示全部楼层

教你打造宇宙飞船图标


8、 现在创建三个类似翅膀的支架,使我们的火箭保持矗立。它们在飞行过程中也用于控制方向和平衡。我们将利用一个矩形形状图层和编辑锚点工具来改变形状成机翼形状。为此,我们将同样使用直接选择工具和转换点工具。让我们回顾一下这个过程。
我们还是利用工具创建形状,如矩形或用钢笔工具。然后利用直接选择工具编辑锚点。我们通过改变锚点的类型以及从角落的转换锚点工具来使之平滑,创建曲线。平滑点是那些从锚点两侧延长线(即方向点)的方向点控制曲线的高度和方向。要添加锚点,单击与钢笔工具路径的任何空白部分。要删除,用钢笔工具点击任何一个现有的锚点。详细细节如图所示:


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:23 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:24 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:25 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:26 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:27 | 显示全部楼层

教你打造宇宙飞船图标

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


回复 支持 反对

使用道具 举报

 楼主| 发表于 2014-9-11 02:07:28 | 显示全部楼层

教你打造宇宙飞船图标


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


回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

求建议和反映问题|小黑屋|免责声名|Archiver|photoshop教程论坛 ( 粤ICP备07017357号 )

GMT+8, 2024-11-22 14:20 , Processed in 0.045591 second(s), 10 queries , XCache On.

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表