手机
当前位置:查字典教程网 >ps >PS鼠绘教程 >PS教你绘制精致的索爱播放器图标
PS教你绘制精致的索爱播放器图标
摘要:设计思路首先我们得想好,这玩意该怎么做?先来看看手机的效果图吧:从这张图里我们可以看到,手机由上下两部分组成,上面是屏幕,下面是翻盖和翻盖上...

 设计思路

首先我们得想好,这玩意该怎么做?先来看看手机的效果图吧:

PS教你绘制精致的索爱播放器图标1

从这张图里我们可以看到,手机由上下两部分组成,上面是屏幕,下面是翻盖和翻盖上的音乐播放按钮。那么我们画草图的时候就思路就很清晰了,也把图标分成上下两块。为了增强效果,我又加了顶部的厚度部分(手机我有,厚度部分我是照着手机做的)

先别急,不要忙着打开PS,我们先拿出纸和笔,画个草图出来并简单区分下明暗,比如这样:

PS教你绘制精致的索爱播放器图标2

······ 你们心里一定在想:卧槽!这特么是什么玩意?这二货作者真的能画出效果图那样的图么?他不会是抄袭的吧?我能解释的是:我手绘退步了,要不是为了说明下设计思路,我才不会自曝不足,哼╭(╯^╰)╮!!

需要注意的是,手机原型是长宽比例大概是1:3,而图标是1:1,那我们该怎么做呢?那有些地方变形是难免的,但是变形也不是盲目的变形,得知道会牵扯到哪些组成部分,该怎么变,和其他组成部分怎么组合才和谐?需要变形的部分内部有没有元素要跟着变,该不该变?这都要考虑好。

绘制图标

整个好看又能突出主体的背景。

我发布的相关作品中,背景太暗,图标也是灰色系,而且比较暗,这就没了对比,无法突出主题,犯了个低级错误。得亏美女大白(芷云白兔)同学一针见血的指出,所以这里改进下。背景不用浮夸,能突出主体又不抢镜就行。具体怎么样,大家随心所欲。

Part1:用形状和颜色来区分各区域

主体

PS教你绘制精致的索爱播放器图标3

PS教你绘制精致的索爱播放器图标4

顶层厚度

PS教你绘制精致的索爱播放器图标5

屏幕

PS教你绘制精致的索爱播放器图标6

按键

PS教你绘制精致的索爱播放器图标7

翻盖的轴

PS教你绘制精致的索爱播放器图标8

翻盖的把

Part2:丰富各区域的细节

然后根据手机效果图,我们把细节部分(不加图层样式)丰富起来

PS教你绘制精致的索爱播放器图标9

看着是不是有种扁平化风格呢?原谅我一下子就到了这一步,因为我觉得……就添加么,实在没什么好说的,不懂的同学请来私聊我。

PS教你绘制精致的索爱播放器图标10

PS教你绘制精致的索爱播放器图标11

PS教你绘制精致的索爱播放器图标12

注意给中间那层灰的加个1像素的内描边

以上所有的细节建议用各种形状工具来画,包括那个钥匙图案也是

Part3:逐个添加图层样式

接下来,我们从上到下,分别给各组成部分添加图层样式并丰富细节。有点无聊,闲话少叙,开整!

顶层的部分:

顶层厚度

PS教你绘制精致的索爱播放器图标13

PS教你绘制精致的索爱播放器图标14

添加并调整不透明度的节点中间2个节点不透明度为0,外面2各节点的不透明度为60(位置哥们几个是不是觉得很难调整啊,左右很难控制对不对?没关系,本狼偷偷你,你把鼠标放到位置的数值那,点一下然后滚动鼠标滚轮就可以很方便的调整了,这个方法之后我们也会用到,我一直用这样的方法来微调,或者用键盘的上下键也行。)

顶层的金边

PS教你绘制精致的索爱播放器图标15

PS教你绘制精致的索爱播放器图标16

(中间亮点的黄色,两边深一点的橙色,方法跟之前一样)

PS教你绘制精致的索爱播放器图标17

锁频键

锁屏键由两部分组成,按键和槽,这部分其实挺简单的。按键用一个个圆角矩形组合起来就可了,然后添加图层样式。槽就颜色暗一点就可以了。

PS教你绘制精致的索爱播放器图标18

PS教你绘制精致的索爱播放器图标19

槽的颜色:#212121;

饰品圆孔的颜色:#191919;

PS教你绘制精致的索爱播放器图标20

阴影颜色为:#000000;

PS教你绘制精致的索爱播放器图标21

投影颜色为#FFFFFF

顶层部分算是绘制完成了,有些地方写的不详细,因为我觉得小伙伴们应该可以自行脑补出来对么?

屏幕的部分:

外围的框

我们给外围的框添加一个小小的投影

PS教你绘制精致的索爱播放器图标22

投影颜色:#000000;

屏幕主体

PS教你绘制精致的索爱播放器图标23

PS教你绘制精致的索爱播放器图标24

然后加上一个音乐播放器的界面。这里要注意的是,原本手机屏幕的尺寸是宽<高,我们因为做成图标变形后,变成宽>高。虽然屏幕的长宽比例、尺寸变了,但是界面还是不能变的,所以得思考怎么做合理。

【PS教你绘制精致的索爱播放器图标】相关文章:

PS绘制精致西装图标

photoshop绘制飞舞的蝴蝶教程

PS鼠绘锅子图标

photoshop绘制气泡ICON图标教程

Photoshop绘制逼真的篮球技巧

PS设计皮革质感文件夹图标

Photoshop鼠绘可爱的梅花鹿

PS鼠绘水晶质感标志教程

PS绘制超强质感立体APP图标教程

Photoshop制作清爽的扁平铅笔图标

精品推荐
分类导航