PS教程!30分钟拟物图标速成记之网球篇 - 优设网 - UISDC

PS教程!30分钟拟物图标速成记之网球篇

2015/02/03 17811评论区

wq201502031

编者按:超精致图标教程第一弹!@张小碗儿grace 同学的教程非常用心。图标光影到位,细节丰富,过程清晰明了,细致入微,说手把手教绝不为过。这一个为大家量身打造的教程,就别光马克咯,速速学起来  >>>

强烈推荐大家关注小碗同学的设计师交流群:150327690

先展示一下整体效果图和两个细节图:

wq201502032

绘制网球基本雏形

首先新建一张纸。

宽:1600px  高:1200px  分辨率:72像素/英寸

名称:网球-test

wq201502033

添加画纸背景色。

点击选色工具中得前景色工具,输入色值  e6efd4

wq201502034

绘制出网球基本圆

先点击前景色 ,色值:90bf00

wq201502035

然后点击圆形形状工具 , ps界面上方属性栏显示如下,宽:800px;长:800px;

wq201502036

在屏幕中心创建圆形形状,图层命名为绿毛毛层,右下角为图层状态。

wq201502037

为绿毛毛层添加图层样式,使用颜色渐变,绘制出网球大概的体感,光感。

鼠标选中绿毛毛层,再点击图层界面最下方图层样式:

混合模式:正常;  样式:径向;  角度:15度;  缩放:150%

wq201502038

处理以上的参数外,还有点击红框内的渐变条。

wq201502039

wq2015020310

勾画网球上的白线。新建图层,命名为白线,点击钢笔工具,勾画出网球上的白线,色值:e9efb8

给白线增加描边的图层样式。大小:3px  ;位置:外部;  混合模式:正片叠底;不透明度:11%

wq2015020311

扣除网球多余的部分。

选择绿毛毛层,点击路径选择工具,再点击屏幕中间的绿球,选中绿毛毛球的路径。

wq2015020312

再点击钢笔工具,在ps上方属性栏上点击红色框内的路径选择 工具,选择下拉菜单中的 减去顶层形状。

小心慢慢的扣去多余的形状,如下图:

wq2015020313

刻画网球绒毛材质

这一步是绘制绿毛毛球的虚边,为最后的毛绒边做准备,是步骤比较多的一步。

将绿色毛毛层【右键】转化为  智能对象

wq2015020314

点击滤镜 – 杂色 – 添加杂色

wq2015020315

数量:16%   分布:平均分布   勾选单色

wq2015020316

点击滤镜 – 模糊 – 径向模糊

wq2015020317

数量:10 ;模糊方法:缩放;品质:草图;

wq2015020318

点击滤镜 – 锐化 – 进一步锐化

wq2015020319

这一步是绘制绿毛毛球的表面。

将刚才做好的绿毛毛层复制(起名绿毛毛层-2),放在原绿毛毛层的上面,然后关掉 进一步锐化、径向模糊前面的小眼睛。

wq2015020320

然后给绿毛毛-2层再加一个 高斯模糊的滤镜。

wq2015020321

半径:0.5px

wq2015020322

细致绘制白色胶质部分

因为白线的的原因,网球绿毛毛层在贴近白线的部分会产生一定的厚度。

首先我们来做上阴影。将白线层复制,起名为白线-2,再将绿毛毛层-2复制,起名为白线材质-1  ,【右键】白线材质-1层;

选择创建剪切蒙版 , 将白线材质-1的图层属性改为正片叠底。图层状态如下图。

然后选中红框中的两个图层(白线-2、白色材质-1),上移10px

wq2015020323

然后我们再用同样的方法来做上阴影。将白线层复制,起名为白线-3,再将绿毛毛层-2复制,起名为白线材质-2 ,【右键】白线材质-2层 ;

选择创建剪切蒙版 , 将白线材质-2的图层属性改为柔光。图层状态如下图。

然后选中红框中的两个图层(白线-2、白色材质-1),上移10px

wq2015020324

添加白线明暗。

有很多的方法可以给白线加明暗光影,我这用的是笔刷工具。选择这款柔柔的笔刷,大小:800px ; 用前景色工具选取 , 色值:4e6e17

wq2015020325

在白线-1上面,新建图层,起名为白线暗部-1,右键白线暗部-1层,创建剪切蒙版,在下图1号位置上,点一下。

wq2015020326

wq2015020327

在白线暗部-1上面,新建图层,起名为白线暗部-2,右键白线暗部-2层,创建剪切蒙版,在下图2号位置上,点一下。

wq2015020328

wq2015020329

在白线暗部-2上面,新建图层,起名为白线暗部-3,右键白线暗部-3层,创建剪切蒙版,在下图3号位置上,点一下。

注意一下:3号位置因为离光源比较近,所以白色暗部-3的涂层属性为正片叠底,不透明度为70%。

wq2015020330

用前景色工具选取色值:ffffff

在白线暗部-3上面,新建图层,起名为白线亮部-1,右键白线亮部-1层,创建剪切蒙版,在下图4号位置上,点一下。

wq2015020331

添加白线上的纹理。

先给白线加一层浅浅的纹理,把白色材质-1层复制,起名白色材质-3,放在白色亮部-1的上面。右键白线材质-3,创建剪切蒙版。

wq2015020332

然后将白线材质-3的图层属性改为柔光。

wq2015020333

选择白线材质-3,按键盘快捷键 ctrl+u键,弹出色相/饱和度界面。

色相:0;饱和度:-60;明度:0;

wq2015020334

下面要给白线添加一些类似浮雕一样的材质。

有很多的方法可以做白线上一些细小的材质,我这里用的是光效笔刷(微盘下载),然后进行图层样式和图层属性的处理。

将下载好的笔刷加载到PS笔刷库里,在白线材质-3上新建一层,起名为白线材质-4。

点击画笔工具 , 选择刚刚加载的笔刷。

用前景色工具选取色值:ffffff;笔刷大小设定为250px ;

wq2015020335

右键白线材质-4,创建剪切蒙版。

wq2015020336

选择白线材质-4图层,再点击图层界面下方的图层样式按钮,选择斜面和浮雕。

样式:内斜面; 方法:雕刻清晰; 深度:53%; 方向:上; 大小:5px; 软化:0px;

角度:60°; 高度30°;

高光模式:正常;不透明度:8%;色值:ffffff;

阴影模常:正常;不透明度:70%   色值:3d4e04

wq2015020337

wq2015020338

将白线材质-4的图层样式调整为柔光,不透明度:50%

wq2015020339

细致绘制网球毛边

外边缘毛边。

复制绿毛毛-1层,命名为绿毛毛层-2,放在绿毛毛层-1下面.【右键】绿毛毛层-2,选择栅格化图层;用这一层来做毛边效果

wq2015020340

使用涂抹工具来实现毛边效果,大小:3px; 模式:正常;强度80%

wq2015020341

在边缘涂抹出网球的毛边,这时候就比较考验耐心了,涂抹到自己满意就可以了。

wq2015020342

细化细节。
下图黑框里面的地方是网球离光源最近的地方,所以它的细致度要增强一些。用笔刷工具,选择这款笔刷,笔刷大小为1px , 用前景色工具选取色值:f3fb04  ,细细的刻画一些小细节,增加亮点。

wq2015020344 wq2015020345

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

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

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

投稿者:@张小碗儿grace

【优设网 原创文章 投稿邮箱: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/skeuomorphism-icon-rapid-design

发表评论 加载中....

评论加载中....

uisdc

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

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

您还没有登录

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

微信扫码

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

把好文章收藏到微信

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