细节是魔鬼,设计在于细节
 首页> 读。设计

写实日历图标UI设计教程

编者按:写实图标流行时,这几类效果很受欢迎(绳索、金属环、纸边撕裂等),今天这个教程把这些效果全收了,也是以前特别经典的一个日历图标,虽然现在是扁平化时代,不过写实图标这部分,新手最好掌握起来。把这个练完,绝对有不一样的收获!10454SJ8-1

1、观察这个图标

我们将它分成三个部分来制作,如下图所示。

10454Qa9-2

①日历的卷页 ②日历的夹子和金属环 ③底座

2、开始动手

新建一个700*800的画布,如下图所示:

10454W196-3

3、日历的卷页

(1)新建一个圆角矩形作为日历卷页的最后一页。如下图所示:

10454Q319-4

(2)为圆角矩形添加图层样式。

内发光、投影、渐变叠加。(内发光是重中之重,它主要区分了每一页日历,是使日历有层次敢最主要的效果!渐变叠加可添加也可以不添加,如果你想做的精细一些,可以自己尝试调整各类数值。最后一页的投影必须要有啦~)如下图所示:

10454U4J-5

(数值自己尝试一下哦~)

(3)向上复制“最后一页”作为“中间页”。调整“中间页的位置”修改图层样式(修改一下投影,不需要那么大啦!)如下图所示:

10454S262-6

(4)向上复制多张“中间页”图层,调整位置(向上调整1~3个像素点,移动大小不要一样,这样会显得比较真实。)合并复制的“中间页图层并作为”中间页“的剪切蒙版。此时得到的效果是这样的:

10454Q064-7

(5)制作完中间页后,开始制作第二页。就是这个部分:

10454TD8-8

观察”第二页“上有”第一页“的投影,所以,复制一层”中间页“向上移动并为其添加渐变叠加,同事向下做剪切蒙版。如下图所示:

10454Q1A-9

10454Rb4-10

(渐变叠加是逐渐变亮的,控制好角度就可以啦!)

(6)第二页制作完成后,开始制作第一页。我将第一页分为两个部分制作。如下图所示:

10454T122-11

首先制作位于下方的”第一页平页“。向上复制”第二页“,关闭”渐变叠加效果“,并作向下作为剪切蒙版。采用”直接选择“工具点选出”第一页平页“的路径,选择”钢笔——添加锚点工具“为”第一页平页“添加锚点。如下图所示:

10454W2U-1210454U533-13

添加锚点后,使用”直接选择工具,选中下图四处锚点,并删除,得到效果如下图所示:

10454W036-14

10454S562-15

(第一页平页制作完成)

接下来制作“第一页卷页”部分。

使用钢笔工具,描出卷页形状,并填充路径。并添加图层样式。如下图所示。

10454RW9-16

10454S201-17

得到的效果是这样的:

10454U1T-18

(7)为第一页添加日期,今天是30号。将“日期”置于“第一页平页”和“第一页卷页”之间,效果如下:

10454Qc8-19

(8)第一页制作完之后,制作撕掉页。首先使用钢笔工具勾出撕掉页轮廓,然后填充路径,并为其添加“投影”效果。(最好画两条不一样的撕掉页,这样比较真实。)如下图所示:

10454Q3S-20

10454S5B-21

10454T310-22

到此,【①日历的卷页】部分制作完成,大概是这个样子的:

10454QT4-23

4、日历的夹子和金属环:

(1)日历的夹子(就是红色那个部分):首先新建一个稍稍大一丢丢(几个像素就好啦)的圆角矩形置于最上层。就像这样的。

10454U116-24

新建一个矩形置于顶层,如下图所示:

10454T421-25

选择圆角矩形(日历红色夹子)按住shift加选白色矩形,使用“直接选择工具”鼠标右键单击,在菜单栏中选择“减去顶层形状”得到入下效果:

10454T352-26

10454V948-27

夹子的形状制作完毕,接下来为其添加效果。为了使其更立体,需要添加‘斜面和浮雕“”内阴影“”投影“然后添加一个颜色叠加变成红色。(数值可以自己尝试调节哦,每个效果都试试以后做其他的东西也会轻车熟路。)如下图所示:

10454R1Q-28

10454W3K-29

(此处可以适当调整”撕掉页“和”夹子“的位置。)

向上复制”红色夹子“图层,添加一个”渐变叠加“效果,并将透明度调小,给”红色夹子“增加一些变化。如下图所示:

10454UW4-30

10454TV9-31

10454R549-32

2)月份:首先输入”September“然后为其添加图层样式。

10454Wb7-33

10454Q5Q-34

(注意,因为文字是向下凹陷的所以“方向”是“下”。)

10454W359-35

效果如下:

10454T542-36

 

1 2 3

发表评论

还可以输入 1994 个字符

全部评论 (2)
  1. 逆向网赚    2015-10-25 : #1

    逆向直销,震撼来袭:

    优势①:逆向网赚,真正实现就算什么不干都赚钱
    优势②:十级提成,下线年年续费,上线年年收钱
    优势③:静态分红,每日签到就有钱,封顶一百元
    优势④:百万资源,每日更新,一键转存无限下载
    优势⑤:强大网站,八个栏目,无限发布产品广告

    免费注册地址:

    http://www.629494567.9489988.com/

    回复
  2. 北京网络电话安装    2015-10-24 : #2

    你的站很好, 可以做友情链接吗?
    我们的站http://www.8fen.cn专业安装网络电话的,长途、市话一律8分钱,很划算,QQ138130

    回复
切换登录

注册

切换注册

登录

忘记密码 ?