跳至内容
ps教程自学网
ps教程分享,提供各版本的ps教程图文教程学习;适合新手学习的ps教程自学网!
  • 示例页面
  • 首页
  • 基础教程

    新手教程 技巧教程 工具教程

    通道教程 其它教程 理论教程

  • 滤镜教程

    滤镜做图 滤镜使用 边框教程

    动画闪字 动画教程 闪图闪字

  • 文字特效

    立体字 普通字 火焰字

    冰雪字 金属字 可爱字

    水墨字 岩石字

  • 美化教程

    磨皮教程 人像精修 美白教程

    上色教程 美容瘦身

  • 调色教程

    人物调色 风景调色 影楼调色

    LR教程 调色效果

  • 照片处理

    效果教程 转手绘 艺术画效

    元素效果 怀旧风格 动漫签

  • 抠图教程

    通道抠图 滤镜抠图 其它抠图

    抠透明物 抠头发 换背景

  • 合成教程

    照片合成 恶搞图片 换脸换头

    明星合成

  • 修复教程

    清除杂物 校正偏色 旧照翻新

    清除水印 清除网纹 模糊锐化

  • 制作实例

    制作实例 背景壁纸 海报设计

    贺卡设计 广告包装

  • 网页设计

    logo教程 按钮图标 UI设计

    淘宝美工 网页图片 网页模板

  • 绘画教程

    鼠绘教程 手绘教程 五官绘画

    插画教程 数位板绘画教程

  • 教程版本

    cc2017 cc2015 cc教程

    cs6教程 cs5教程

photoshop图层样式和路径绘制UI小图标

  • 分类 logo教程
  • photoshop图层样式和路径绘制UI小图标无评论
作者佚名   出处:jjying
相信很多和我一样的设计爱好者和初学者都是通过photoshop这样的图形软件而熟悉设计的。虽然软件只是工具,创意还是完全来自我们的大脑,但是软件 使用技法很大程度上决定了我们作品的细节处理。今天想和大家交流的就是我在UI设计中的主要绘图方法:路径+图层样式。希望能带给一些设计初学者一点启 发。

路径+图层样式的特点:

方便修改
作为设计师,改无止境经常是挂在我们嘴边的。面对很多形状上需要做出的改变,用钢笔描出来的路径显然比象素化的图层更容易修改,所以对于一些复杂的外形,我在日常工作当中尽量保持原来的路径,不到必须的时候都不会象素化。而图层样式更是如此,PS内置的图层效果功能已经比较强大,通过他来定义的风格可以随意地用参数来确定效果,并且随意地修改。

便于大量套用
PS当中的路径一般都通过图层样式来定义视觉风格,这样带来的好处是只要做出一个图层样式,我们就能方便地复制、粘贴样式来把风格应用到很多其他元素上。当我们在界面中把使用同一样式的元素都链接之后更是能方便的粘贴图层就可全部刷新效果。

可部分地进行矢量操作
矢量是个非常优越的特性,虽然这是AI的拿手绝活,但是photoshop中的路径也已经基本够用,并且面对着大量旋转、缩放等操作时如果不使用路径,那操作都将变得不可逆。

控制精确
PS对象素的操作只能精确到1x1的单象素,而对于路径的描点,我们却可以把精确度提高到远小于1象素。对于UI这类非常讲求精确的设计来说是很有利的。

容易陷入思维定势
以上几点其实归结起来只是给我们的设计带来方便,或者说特别适合懒人。所以当路径+样式成为主要制图方法的时候必须时常提醒自己不要局限于图层样式里的那些效果,毕竟好设计还是在于创意。

下面我想以一个实际的例子来和大家交流一下我的图标制作过程。





这是一枚风格比较简单的图标,造型上也并不复杂,又碰上需要处理多种分辨率的情况,所以非常适合使用路径+图层样式的制作方法。





确定透视之后,把整体的形状用钢笔勾勒出来或者取PS形状工具中基本造型进行变形和组合。比如光盘的造型是从圆形变形而来,而驱动器两侧的面是用两个形状相减而来。







驱动器的前面板是个胶囊形,图层样式中使用了向上的1象素白色投影来作为驱动器上表面和前面板接缝处的高光;用1象素的外发光来作为描边;上深下浅的渐变给面板增加凹进去的感觉;用光泽来给面板两端加深颜色增加图标的细节;而渐变方式的内描边则来表现前面板的边缘高光。完成之后把前面板复制一下,合并到新的图层(也就是在新复制出的面板下面新建一个新的图层,然后将面板合并到此图层,这样就能保留图层效果,得到一个象素化的面板)。对此新建的面板进行垂直镜像,高斯模糊并且使用蒙板使其显得若有若无,成为图标中的倒影,而盘体两侧的倒影因为反射的是驱动器底部,所以无从复制,我们只能手工使用画笔来描绘。





驱动器的上表面用了3层来表现,底下的一层主要表现大致的光影和外部描边,上面一层区分开驱动器上表面的两个颜色。最后通过渐变叠加表现一下驱动器的两个侧面。






因为是要做的是一个光盘驱动器,所以增加了一张半藏的光盘。光盘也是用路径做了3个同心圆,一个用来作为中间不全反射的白色部分,另两层则使用径向的渐变效果来模拟光盘的样子,一层的叠加控制灰度,另外一层控制颜色。为了和整个图标的风格相符合,渐变用得还是比较柔和的颜色。最后在驱动器的正面加上光盘插孔,因为细节不多,只需要用灰色画个很窄的椭圆即可。





图标大体完工。结束时在驱动器边缘的地方新建图层加入一些渐变效果来增强高光,并且加入了DVD的标志来表现这是个DVD光盘驱动器。

这样图标在48x48分辨率下就完工了,然后我们可以直接对源文件进行缩放来制作32x32的版本:





一般不建议同时缩放图层效果,因为对于描边等一般都精确到象素的效果来说在各个分辨率下保持一致有助于控制统一性,所以我们需要手工调整一下效果,比如缩小光泽和内发光等的尺寸。调整之后得到的图象有些图层会产生错位,稍微调整一下位置即可得到比较理想的效果。





接下来就是一般最令人头痛的16x16图标。很多时候在这样的分辨率下即使只是1px的边缘模糊成2个象素也足以使图标的整体效果变样。所以我觉得这样的小图标主要是修改其边缘。用路径和图层样式的好处在这里十分明显。先把32x32大小的文件调整成16x16:






我首先去掉了dvd标志的图层,因为在这种尺寸下,肯定怎么都看不清了。由于路径描点精确到亚象素(暂时这么叫吧,呵呵),所以经过缩放之后常常看到路径的边缘不在整数的象素坐标上,这样的结果就让本来大小为1象素的效果如描边等被需化了。经过简单的调整把描点重新移动到画面中象素的边缘即可保证图标的清晰。将所有移位的描点都处理过之后16象素的图标也完成了,当然,虽然16象素与32等图标大小只差一倍,但因为包含象素少,所以很多部位必须进行取舍以在保证图标元素不丢失的同时仍然突出细节。比如在这里,因为驱动器前面板只剩3象素高,所以光盘插入孔也没必要继续存在,只需在光盘和面板接触的面板之间淡淡的加上一个深色的图层略微做一下区分。另外,16象素下的路径往往在经过我们的调整后变化较大,常会改变原来的透视,所以需要我们不断调试取得比较好的效果保证不失真。





以上只是个人在以往积累的一丁点经验,所谓闭门造车,难免有很多不足,只希望能抛砖引玉,大家一起交流心得,共同提高:D
  • 标签 福特少普ps

← photoshop图标制作教程:绿房子 → photoshop设计黑色网站导航

发表评论 取消回复

要发表评论,您必须先登录。

近期文章

  • 雪景效果,制作唯美的下雪效果照片
  • 古风后期,打造古典武侠中国风侠女后期
  • 图章制作,设计带有斑驳纹理的电子公章图片
  • 创意合成,通过PS制作创意合成水果螃蟹
  • 卡通字,制作立体效果卡通字
  • 图标制作,鼠绘非常有创意质感的饮料UI图标
  • 下雨效果,用PS制作下雨效果
  • 素描效果,用PS打造不一样的创意素描照片
  • 下雨照片,给迪丽热巴在游乐场的照片制作下雨动态效果
  • 图标制作,用PS打造轻拟物相机图标

最新评论

  • 非主流绿色色调教程
  • 常见的非主流滚动电影边框图效教程
  • [非主流PS教程] 非主流:很多MM喜欢的风格,类似V.onai
  • ps制作印章
  • 1-2 灰度色彩模式
  • 1-1 RGB色彩模式
  • 4-1 建立规则选区
  • PS抠图教程:初学生通道抠图教程
  • 6-5 单独调整通道曲线
  • [非主流PS教程] Photoshop制作非主流漫画风格照片

© 2022 ps教程自学网

由WordPress强力驱动

返回顶部↑ 向上 ↑