关灯
开启左侧

[PS入门教程] 有态度的PS教程!30分钟拟物图标速成记之USB篇

[复制链接]
apgckwmm 发表于 2015-2-11 11:37:45 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
有态度的PS教程!30分钟拟物图标速成记之USB篇

USB201501061

USB201501061
[size=1.2em]编者按:超精致图标教程第二弹!不同以往,同学今天的教程实实在在演示了专业UI设计师的绘制过程是怎样的,你可以学习如何拆分一个物体以及建立规范的图层分组,来练下手,绝对能让你有全新的感受 >>>
[size=1.2em]源文件 微盘下载
[size=1.2em]强烈推荐大家关注小碗同学的设计师交流群:150327690
[size=1.2em]最终效果图:

USB201501062

USB201501062
绘制Usb数据线中部

[size=1.2em]NO.1-1
[size=1.2em]首先新建一张纸
[size=1.2em]宽:800px 高:600px 分辨率:72像素/英寸 名称:USB-test

USB201501063

USB201501063
[size=1.2em]NO.1-2
[size=1.2em]点击选色工具中的前景色工具,输入色值 282828

USB201501064

USB201501064
[size=1.2em]NO.1-3
[size=1.2em]绘制出Usb数据线的中部,这是这一步的最终效果图…

USB201501065

USB201501065
[size=1.2em]先点击前景色,色值:d3d3d3
[size=1.2em]然后点击圆角矩形形状工具, ps界面上方属性栏显示如下,半径:16px;宽:138px;高:154px;

USB201501066

USB201501066
[size=1.2em]在屏幕中心创建圆角矩形形状,图层命名为“usb-中部”,右边为图层状态。

USB201501067

USB201501067
[size=1.2em]下面要利用路径相减功能,去掉刚才图形上半部分的圆角。
[size=1.2em]在该圆角矩形形状的路径被选中的状态下,再点击直角矩形工具,在ps上方属性栏上点击红色框内的路径选择工具,选择下拉菜单中的减去顶层形状。

USB201501068

USB201501068
[size=1.2em]建立一个高:16px,宽138px的矩形,目的是减掉圆角矩形上半部分的圆角,下图为放大效果:

USB201501069

USB201501069
[size=1.2em]单击图层 usb-中部,再点击图层界面下方的fx,选择渐变叠加…

USB2015010610

USB2015010610
[size=1.2em]点击前景色工具, 选择色值:ffffff;

USB2015010611

USB2015010611
[size=1.2em]然后点击圆形形状工具, ps界面上方属性栏显示如下,半径:6px;宽:138px;高:16 px;

USB2015010612

USB2015010612
[size=1.2em]数值选择好后,将此圆角矩形形状绘制在刚才usb-中部的上方位置,图层命名为:“usb-中部-1”;具体看下图:

USB2015010613

USB2015010613
[size=1.2em]单击图层 “usb-中部-1”,同上步骤,给usb-中部-1添加“渐变叠加”样式。
[size=1.2em]混合模式:正常;不透明度64%;样式:线性;角度:-90度;缩放:86%;

USB2015010614

USB2015010614
[size=1.2em]再单击图层 “usb-中部-1”,给usb-中部-1添加“描边”样式。
[size=1.2em]大小:正常;位置:内部;混合样式:正常;不透明度:100%;
填充类型:渐变;样式:线性;角度:-90度;缩放:100%;

USB2015010615

USB2015010615
[size=1.2em]下面要给usb中部加一些高光,用来点睛
选择矩形工具,宽:3px;高:124px;色值:ffffff;
将矩形绘制在下左方例图红框内,图层命名为:“usb-中部-高光1 ”;

USB2015010616

USB2015010616
[size=1.2em]单击图层 “usb-中部-高光1”,给该图层加入“渐变叠加”样式;
[size=1.2em]混合模式:正常;不透明度:100%;样式:线性;角度:-90度;缩放:100%
[size=1.2em]在渐变这里注意一下,把右边的透明度调成0%

USB2015010617

USB2015010617
[size=1.2em]点击图层“usb-中部-高光1”,将该图层的填充调整为0%

USB2015010618

USB2015010618
[size=1.2em]将图层 “usb-中部-高光1”复制,起名“usb-中部-高光-2”,并将“usb-中部-高光2”移动到右侧,如下图显示:

USB2015010619

USB2015010619
绘制Usb数据线下部

[size=1.2em]这是这一步的最终效果图:

USB2015010620

USB2015010620
[size=1.2em]选择圆角矩形工具,宽:48px 高:70px ;圆角半径:16px;色值:c2c2c2;
[size=1.2em]数值设置好后,将该圆角矩形绘制在下图位置,图层命名为 “usb-下部” , 把图层“usb-下部”放在“usb-中部”的下面:

USB2015010621

USB2015010621
[size=1.2em]下部的结构和中部一样,需要左右渐变样式来完成,但是由于整体光从上面打下来,中部会给下部一个阴影,所以需要下部需要一个左右渐变和一个上下渐变来完成。
[size=1.2em]首先复制“usb-下部”图层,改名为“usb-下部-左右渐变”;再右键“usb-下部-左右渐变”图层,点击创建剪切蒙版;

USB2015010622

USB2015010622
[size=1.2em]现在开始给“usb-下部-左右渐变”添加渐变样式。
[size=1.2em]点击“usb-下部-左右渐变”,在点击fx,选择其中的“渐变叠加”;
混合模式:正常;不透明度:100%;样式:线性;角度:0度;缩放:100%;

USB2015010623

USB2015010623
[size=1.2em]复制“usb-下部”图层,起名为“usb-下部-上下渐变”,放在“usb-下部-左右渐变”的上面;
[size=1.2em]再右键“usb-下部-左右渐变”图层,点击创建剪切蒙版:

USB2015010624

USB2015010624
[size=1.2em]现在开始给“usb-下部-上下渐变”添加渐变样式。
[size=1.2em]点击“usb-下部-上下渐变”,在点击,选择其中的“渐变叠加”
[size=1.2em]混合模式:正常;不透明度:29%;样式:线性;角度:-90度;缩放:100%;

USB2015010625

USB2015010625
[size=1.2em]点击“usb-下部-上下渐变”将它的填充改为:0%

USB2015010626

USB2015010626
绘制Usb数据线尾部

[size=1.2em]这是这一步的最终效果图:

USB2015010627

USB2015010627
[size=1.2em]选择圆角矩形工具,宽:20px 高:190px ;色值:c2c2c2;
[size=1.2em]数值设置好后,将该圆角矩形绘制在 下图位置,图层命名为 “usb-尾部” , 把图层“usb-尾部”放在“usb-下部”的下面;

USB2015010628

USB2015010628
[size=1.2em]点“usb-尾部”图层,再单击图层面板下面的添加矢量蒙版工具,图层状态变化如下图:

USB2015010629

USB2015010629
[size=1.2em]再点击工具栏里面的渐变工具,再点击功能栏里红色框的部分,弹出渐变界面,设置如下:

USB2015010630

USB2015010630
[size=1.2em]设置好渐变界面后,现在要开始给“usb-尾部”加垂直的渐变蒙版效果图与图层状态显示如下:

USB2015010631

USB2015010631
[size=1.2em]由于usb-尾部是一条圆柱体的线,所以我这里用内发光的方式处理圆柱体结构;首先选中“usb-尾部”,点击fx,选择内发光样式,结构【混合模式:正常;杂色:0%;色值:4d4d4d;】
[size=1.2em]图素【方法:柔和;源:边缘;阻塞:0%;大小:8px;】 品质【范围:50%;抖动:0%】

USB2015010632

USB2015010632
[size=1.2em]效果图与图层状态如下:

USB2015010633

USB2015010633
整理图层

[size=1.2em]由于图层太多了,在这一步把图层分类整理一下,先选中下图选中的四个图层,打成一个图层文件夹(快捷键ctrl+G),起名“usb-中部”

USB2015010634

USB2015010634
[size=1.2em]同样方法,选中下图的三个图层,打成一个图层文件夹,起名“usb-下部”

USB2015010635

USB2015010635
[size=1.2em]为了强迫症同学看着整齐哈,把尾部的一个图层也打成图层文件夹,起名usb-尾部;

USB2015010636

USB2015010636
绘制Usb数据上部

[size=1.2em]这是这一步的最终效果图:

USB2015010637

USB2015010637
[size=1.2em]选择圆角矩形工具,宽:106px 高:112px ;色值:afafaf;圆角:6px; 数值设置好后,将该圆角矩形绘制在下图位置,图层命名为 “usb-上部” , 把图层“usb-上部”放在文件夹“usb-中部”的上面;

USB2015010638

USB2015010638
[size=1.2em]将图层“usb-上部”复制,改名“usb-上部-渐变”,再给 “usb-上部-渐变”添加渐变样式 ,混合模式:正常;不透明度:100%;样式:线性;角度:90度;缩放:100%;

USB2015010639

USB2015010639
[size=1.2em]效果图和图层状态如下:

USB2015010640

USB2015010640
[size=1.2em]下面要给usb-上部添加立面结构,首先点击圆角矩形工具,宽:6px;高:106px;半径:2px;色值:454545;

USB2015010641

USB2015010641
[size=1.2em]现在要给“usb-上部-左”添加渐变样式;混合模式:正常;不透明度100%;样式:渐变;角度:0度;缩放:100%;

USB2015010642

USB2015010642
[size=1.2em]再调整“usb-上部-左”的填充,填充:0%

USB2015010643

USB2015010643
[size=1.2em]再右键“usb-上部-左”图层,选择创建剪切蒙版,图层状态如下:

USB2015010644

USB2015010644
[size=1.2em]用同样的方法,制作出右边的立面,图层状态和效果图如下:

USB2015010645

USB2015010645
[size=1.2em]选择圆角矩形工具,宽:6px;高:106px;半径:6px; 色值:ffffff ;图层命名为:“usb-上部-左-光”

USB2015010646

USB2015010646
[size=1.2em]选中“usb-上部-左-光”图层,图层样式:柔光,不透明度:15%,右键点击创建剪切蒙版;

USB2015010647

USB2015010647
[size=1.2em]将“usb-上部-左-光”复制,命名为“usb-上部-右-光”然后将其移动到右边,如图:

USB2015010648

USB2015010648
[size=1.2em]现在要给金属部分加材质。
[size=1.2em]将“usb-上部”图层复制放在“usb-上部-右-光”的上面;命名为“usb-上部-材质”

USB2015010649

USB2015010649
[size=1.2em]选中“usb-上部-材质”图层,再点击滤镜;

USB2015010650

USB2015010650
[size=1.2em]数量:16%;分布:平均分布;单色

USB2015010651

USB2015010651
[size=1.2em]把调节“usb-上部-材质”的图层样式调整为叠加;不透明度:30%;

USB2015010652

USB2015010652
现在要给金属部分添加细节部分啦!

[size=1.2em]选择圆角矩形工具,宽:28px;高:22px;半径:6px;色值:848589;图层命名:“usb-上部-左-细节”,将此形状绘制在下图位置;

USB2015010653

USB2015010653
[size=1.2em]给“usb-上部-左-细节”添加图层样式(斜面浮雕、描边、内阴影);
[size=1.2em]斜面和浮雕(样式:外斜面;方法:雕刻柔和;深度:584%;方向:上;大小:1px;软化:0px;)(角度:90度;高度30度;高光模式:滤色-不透明度:0%;阴影模式:正常-色值:ffffff;不透明度:50%)

USB2015010654

USB2015010654
[size=1.2em]描边(大小:1px;位置:外部;混合模式:正常;不透明度:15%;颜色:ffffff;)

USB2015010655

USB2015010655
[size=1.2em]内阴影(混合模式:正片叠底;颜色:000000;不透明度:18%;角度:90度;距离:3px;阻塞:16%;大小:2px;)

USB2015010656

USB2015010656
[size=1.2em]选择矩形工具,宽:10px;高:24px;色值:e3d514; 图层命名:“usb-中部-左-细节-线”;将该形状绘制在下图的地方;

USB2015010657

USB2015010657
[size=1.2em]给“usb-上部-左-细节。
[size=1.2em]混合模式:正常;不透明度:76;样式:线性;角度:0度;缩放:100%;

USB2015010658

USB2015010658
[size=1.2em]再给“usb-上部-左-细节-线”添加描边样式。
[size=1.2em]大小:1px;位置:外部;混合模式:正常;不透明度:44%;

USB2015010659

USB2015010659
[size=1.2em]数值调节好后,效果图和图层状态如下:

USB2015010660

USB2015010660
[size=1.2em]右键“usb-上部-左-细节-线”选择创建剪切蒙版,效果图如右侧:

USB2015010661

USB2015010661
[size=1.2em]用同样的方法,制作出右边结构。效果图和图层状态如下:

USB2015010662

USB2015010662
[size=1.2em]选择圆角矩形工具,宽:30px , 高:8px , 半径:10px , 色值:848589;数值设置好后,将形状绘制在下图位置,图层命名为:“usb-上部-下-细节”

USB2015010663

USB2015010663
[size=1.2em]下面要给“usb-上部-下-细节”添加图层样式(斜面浮雕、描边、内阴影)。
[size=1.2em]样式:外斜面;方法:雕刻柔和;深度:584%;方向:上;大小:1px;软化:0px;
[size=1.2em]角度:90度;高度:30%;高光模式:滤色;色值:ffffff;不透明度:0%;
[size=1.2em]阴影模式:正常;色值:ffffff;不透明度:50%;

USB2015010664

USB2015010664
[size=1.2em]样式:描边;大小:1px;位置:外部;混合模式:正常;不透明度:15%;颜色:ffffff;

USB2015010665

USB2015010665
[size=1.2em]样式:内阴影;混合模式:正片叠底;不透明度:18%;角度:90度;距离:3px;阻塞:16%;大小:2px;

USB2015010666

USB2015010666
[size=1.2em]数值都设置好后,效果图和图层状态如下:

USB2015010667

USB2015010667
现在要做金属部分的平面部分

[size=1.2em]选择圆角矩形工具,宽:104px;高:12px; 半径:12px; 色值:787878; 图层命名为“usb-上部-平面” 数值设置好后,将形状绘制在下图位置;

USB2015010668

USB2015010668
[size=1.2em]给“usb-上部-平面”加描边样式,大小:1px;位置:外部;混合模式:正常;不透明度:100%;颜色:bcbcbb;

USB2015010669

USB2015010669
[size=1.2em]现在要给“usb-上部-平面”加一条细高光。
[size=1.2em]选择矩形工具,宽:94px;高:1px;色值:ffffff;图层命名为:“usb-上部-平面-高光”

USB2015010670

USB2015010670
[size=1.2em]再给“usb-上部-平面-高光”添加渐变样式,混合模式:正常;不透明度:100%;样式:线性;角度:0度;缩放:100%;

USB2015010671

USB2015010671
[size=1.2em]再将该图层上方的填充值调整为0%

USB2015010672

USB2015010672
[size=1.2em]这一步虽然只画了一条高光,但是不要小看这一条高光,下面给大家看一下对比图:

USB2015010673

USB2015010673
现在我们要做金属平面结构里面的部分

[size=1.2em]选择矩形工具,宽:98px;高:8px;色值:adadad; 数值设置好后,绘制在下图位置,图层命名为:“usb-上部-平面-内部”

USB2015010674

USB2015010674
[size=1.2em]给“usb-上部-平面-内部”加添渐变样式,混合模式:正常;不透明度:100%;样式:线性;角度:90度;缩放:100%;

USB2015010675

USB2015010675
[size=1.2em]再选择矩形工具,宽:98px;高:3px;色值:e4e4e4; 数值设置好后,绘制如下图,图层命名为“ usb-上部-平面-内平面”;
[size=1.2em]然后将“usb-上部-平面-内平面”的左上角路径点选中,向右移动2px;同样方法,将右上的点向左调节2px;

USB2015010676

USB2015010676
[size=1.2em]调节好后,效果图如下:

USB2015010677

USB2015010677
[size=1.2em]为了提高细节品质,我们给内平面也加 1px 的高光;
[size=1.2em]选择矩形工具,宽:98px;高:1px; 色值:ffffff;绘制如下,图层命名为“usb-上部-平面-内高光”

USB2015010678

USB2015010678
现在要做内部的里面细节

[size=1.2em]选择矩形工具,宽:12px;高:6px;色值:e1e1e1;绘制在下图位置;图层命名为:“usb-上部-平面-立面1”

USB2015010679

USB2015010679
[size=1.2em]将“usb-上部-平面-立面1”的图层样式改为:正片叠底

USB2015010680

USB2015010680
[size=1.2em]接着,用同样方法制作出“usb-上部-平面-立面2”、“usb-上部-平面-立面3”、”usb-上部-平面-立面4”;“usb-上部-平面-立面2”、“usb-上部-平面-立面3”的宽:12px;高:4px;

USB2015010681

USB2015010681
 

精彩评论10

正序浏览
wwdu926a 发表于 2015-2-17 21:21:25 | 显示全部楼层
 
楼猪.重量级人物阿.
 
bqtklouu 发表于 2015-2-17 21:22:48 | 显示全部楼层
 
看完楼主的帖子,我的心情竟是久久不能平静
 
bqtklouu 发表于 2015-2-17 21:22:49 | 显示全部楼层
 
做为新人!在这里不敢大声说话!送完经验我就走!
 
effoggikeftor 发表于 2015-2-17 21:23:23 | 显示全部楼层
 
杂觉滴~` 你~~` 嘿嘿 这个想法不该从你的脑瓜儿出来拉~`
 
tohme 发表于 2016-3-25 19:01:34 | 显示全部楼层
 
机会就像水中的鱼,耐心等待就能上钩。
 
gevaemaidovef 发表于 2016-3-25 19:01:54 | 显示全部楼层
 
相比他连说拜拜的 想法都没了 哈哈
 
bqtklouu 发表于 2016-3-25 19:02:15 | 显示全部楼层
 
老天不公啊.....
 
Mqokjdvq 发表于 2016-3-25 19:02:28 | 显示全部楼层
 
要相信自己~智商为0
 
vgtkl 发表于 2016-10-31 12:58:57 | 显示全部楼层
 
好贴,一定不要放过,顶












                               
登录/注册后可看大图

12V3A桌面式电源适配器
 
zswzo 发表于 2017-3-8 06:17:17 | 显示全部楼层
 
看帖子的都发表一下看法












                               
登录/注册后可看大图

广东15V1A电源适配器供应厂家
 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


0关注

0粉丝

24帖子

热门图文
热门帖子
排行榜
作者专栏

关注我们:微信订阅号

官方微信

APP下载

全国服务Q Q:

956130084

中国·湖北

Email:956130084@qq.com

Copyright   ©2015-2022  站长技术交流论坛|互联网技术交流平台Powered by©Discuz!技术支持:得知网络  

鄂公网安备 42018502006730号

  ( 鄂ICP备15006301号-5 )