PS初级教程!手把手教你绘制酷炫有型的火箭图标 - 优设网 - UISDC

PS初级教程!手把手教你绘制酷炫有型的火箭图标

2015/02/13 15042评论区

create-stylish-flat-space-icons-1

编者按:今天的教程,不仅有超详细的步骤解说与多个技巧,而且绘制时能帮同学们深入学习Photoshop的基础形状,教程不难,作为扁平化图标入门教程再合适不过 >>>

绘制火箭图标

这些调色板上的颜色是我们将要用到的颜色,我选择了一些不那么鲜艳的颜色,这能和扁平化的图标很好地结合,你可以将这个色板储存在你的电脑中,这样你就可以在Photoshop中创建图形的时候直接用吸管工具选取这些颜色了。

一键下载超全的扁平化色板:《干货!专属扁平化设计的PS色板(配色库)》

0_palette

第1步

首先,让我们从背景开始做起。我们的icon是圆形的,所以在工具面板中选择椭圆工具,在画布上单击以弹出创建椭圆的对话框,将高度和宽度都设置为512px——OK,现在我们有了一个正圆。让我们用深蓝色来填充它吧,深蓝色也是代表太空的标志性颜色。保持椭圆工具的选择,在顶部的控制面板上找到颜色填充按钮,然后选择你保存的色板中相应的颜色。没有创建色板?好吧,也有参数值,点击右上角的小标志就可以弹出颜色选择对话框。注意,我用的是HSB颜色制式。

1-space-flat-icons-photoshop-rocket

第2步

现在我们开始来做火箭的大致轮廓了。开始,在背景中间绘制一个椭圆形。单击直接选择工具,在创建出来的椭圆边缘点击来使得创建除了路径和锚点可见。选择转换点工具(你可以在钢笔工具系列中找到它),并且在上方的锚点单击,将顶部调节成一个较尖锐的角度。

2-space-flat-icons-photoshop-rocket

第3步

保持当前图形的选择状态,在上方的形状控制面板中选择路径操作,然后选择相交。

选择矩形工具并且绘制一个矩形,要包含椭圆的绝大部分,而在地面留出一小部分不要覆盖。操作的最终成果就是,矩形选框之外的内容就会变得不可见了,这样我们就切掉了火箭的底部。

3-space-flat-icons-photoshop-rocket

第4步

让我们为椭圆的右半部分添加一点阴影。

首先,打开智能参考线(视图——显示——智能参考线),它们可以帮助你将图形放置在合适的位置上。继续使用矩形工具创建一个浅灰色的矩形并把它放在所有图层的上方,覆盖住火箭的右半部分。

4-space-flat-icons-photoshop-rocket

第5步

现在我们需要将火箭轮廓之外的矩形隐藏起来

首先,按住Ctrl键并在图层面板中的火箭图层缩略图上单击,你会看到火箭周围有了一个会滚动虚线框,其实就是选区啦。

现在,选中阴影所在的图层并在图层面板底部单击创建图层蒙版的按钮。这样你就为当前图层创造了一个遮盖,遮盖住未被选中的部分。

5-space-flat-icons-photoshop-rocket

第6步

选择椭圆工具并再添加一个圆。按住Ctrl + J来复制这个图层,然后按下Ctrl + J来变换当前的图形,将这个图形的高度和宽度缩小至原来的70%。

6-space-flat-icons-photoshop-rocket

以一种暗淡的灰蓝色填充内部的圆。然后,在火箭的底部用圆角矩形工具绘制一个火箭的小部件。

7-space-flat-icons-photoshop-rocket

第7步

让我们来给火箭添加上尾焰。

首先,使用椭圆工具绘制一个红色的圆圈,然后使用直接选择工具选择下方的锚点并将它往下拖动以拉长图形,然后使用转换点工具使得图形的下部变得更加细长。

8-space-flat-icons-photoshop-rocket

第8步

按下Ctrl + T,轻轻地旋转这个图形并将它放置在火箭的底部。然后,按下Ctrl + J来复制当前图层,再选择编辑——转换路径——水平翻转命令。用移动工具将新复制出的尾焰拉到图像的最左方,按住Shift键就可以在拖动时保持相同的高度。

9-space-flat-icons-photoshop-rocket

第9步

使用自由变换工具来加上第三束尾焰。

10-space-flat-icons-photoshop-rocket

第10步

现在我们需要给我们的icon添加一个长投影效果。创建一个黑色的矩形并将其不透明度调整到50%,然后将它45°逆时针旋转。

11-space-flat-icons-photoshop-rocket

使用自由变换工具将阴影放大成如下图所示的样子。

12-space-flat-icons-photoshop-rocket

第11步

将阴影图层移动到火箭图层的下方,好了,现在我们来除去出现在火箭左半部分的阴影。选取添加锚点工具,然后在矩形周围添加一些锚点。

第一个锚点你可以看见在左侧尾焰的小尖角上,第二个锚点在火箭的右上部。

现在我们可以使用直接选择工具拖动其他的锚点了,将它们拖到火箭的下方隐藏起来。

13-space-flat-icons-photoshop-rocket

第12步

要隐藏掉图标范围之外的阴影,这里有一个简单的方法。选择阴影图层然后按住Alt键,在阴影图层和背板图层之间单击,你可以看到有一个小方框和小箭头的标志,没错,这就是创建了一个剪切图层。

选择阴影图层,选择矩形工具,然后用从黑到白的渐变重新填充阴影,将混合模式设置为正片叠底。

14-space-flat-icons-photoshop-rocket

第13步

现在来给我们的火箭再添加一点小细节吧。

选择椭圆工具然后在火箭的顶部绘制一个红色的圆圈。保持椭圆工具的选择,然后同时选择这个新创建的图形和火箭箭体所在的图层,右击,然后选择形状重叠来隐藏掉不需要的部分。最后,用一种更加明亮的蓝色给舷窗进行一点高光处理。

15-space-flat-icons-photoshop-rocket

最后,在火箭周围撒布一些小星星,来达到画面纵深的效果。

16-space-flat-icons-photoshop-rocket

【能搞定的同学给你送点福利】

千万千万低调收藏马克:
《强烈推荐:90%的人都不知道的电影资源下载站》

边放松边提高审美的电影大片:
《看电影涨姿势!有哪些电影适合推荐给学艺术的人看?》
《看电影涨姿势!哪些电影适合推荐给学艺术的人看?(二)》

原文地址:tutplus
译文地址:shejipai
译者:设计派小温

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量90万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
官方微信:想在手机上、被窝里获取设计教程和各种意想不到的”福利”吗?添加优设哥微信号:youshege

chat-yinliu-pic

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/create-stylish-flat-space-icons

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 排版布局 职场 设计师干货 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 AI教程 设计流程 设计理论 神器下载 字体下载 设计师专访 psd下载 设计规范 用户体验设计 海报设计 设计趋势 平面设计 动效设计 logo设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里