轻松画图标!一分钟玩转PS路径描边

蓝蓝设计( www.lanlanwork.com)是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供有效的 UI界面设计、BS界面设计cs界面设计ipad界面设计包装设计图标定制用户体验 、交互设计、网站建设平面设计服务

来源:http://www.ui.cn/project.php?id=32915

如果您想订阅本博客内容,每天自动发到您的邮箱中,请点这里

作者:王铎(Micu设计)\

Photoshop的路径工具和钢笔工具,很容易被人忽视,功能很强大,一直很低调。今天咱一块唠唠怎么用路径和钢笔,快速绘制简易线状图标,这个看了都能做奥!!!!哪怕是第一天学PS,也能做到。

有人说UI难学,摸不到门路,那就从这一课开始吧。

(心急的同学,直接翻页到中下位置,教程部分即可,先练练手)

大背景:扁平化下的极简主义

自从苹果家扁平化后,整个世界都扁了。似乎被人们扔了很久的极简主义,一夜之间又流行起来了。看了下面的,是不是很清新,很直接呀。这样的图标适用于底部的标签栏中,及其顶部的左右按钮上。也许有人会说:这也叫图标,不就是些线条嘛嘛。呵呵,可别说,现在很多人就是好这口。在这样一个信息爆炸,App满天飞的年代,高效简洁自然有市场。扁平化代表了高效,我就是我,不需要多余的思考。



一、任务

这些线性图标难做吗?让我们分析一下它们的结构。

尺寸规格:一般线条为2px,也有的加强为3px的。

风格:线条简单,图形指示意义明确。

2px的图标

3px的图标



二、任务分析(思考和困难)

绘制不难,怎么快速绘制才是关键。

大家思考一下,这个线形图标是怎么做出来的呢?

很多同学会想用Illustrator进行绘制图形,但这样并不方便。在AI可能会出现绘制完后拖到PS中进行调整,会导致边缘线的大小变化,容易导致像素对不齐等情况。在迭代过程中不好保证图标描边大小的统一性,只能一个一个的到AI中进行更改非常的麻烦。折腾了半天画个线性图标,实在有些浪费。

如果用PS可行吗?先不要马上否定,好好想想路径工具和钢笔工具。

是用图层样式?选择工具?有人想到了样式描边的方法。貌似不行,因为未封闭的图标,用样式描边做出来却是封闭的...

那么问题来了,用封闭路径制作出来的图标在进行缩放时形状也会相应的等比缩放,这样会导致在需要不同大小的图形时,因缩放还需反复调整图标的路径边缘才能保证图标线条的一致性。因为整套图标要求线条都相对统一,调来调去太浪费青春!

好了,不拐弯抹角了,下面就给大家介绍一个构图快、一学就会、包教包会的方法。

记住三点:一是形状工具及填充,二是描边效果,三是用钢笔锚点工具删除无用路径

阅读全文>>

时间: 2024-10-31 14:08:43

轻松画图标!一分钟玩转PS路径描边的相关文章

轻松画图标!教你一分钟玩转PS路径描边

偶然学习到线框图标的制作方式,学着做了一张,效果不是很理想,矢量图在AI里是最好的,不过 这次实例强化了下钢笔工具,路径描边的使用,效果图: 一.PS绘制线式图标详细过程 绘制路径时用到的工具: 钢笔工具——绘制路径. 路径选择工具——调整路径大小使用. 直接矛点选择工具——调整矛点位置. 转角工具——调整路径圆角和角度使用 捎带脚了解几个快捷键,方便在作图中的使用.在选用钢笔工具绘制后你可以用Shift/Ctrl/Atl来回切换出需要使用的直接选择工具.锚点选择工具.倒角工具. 下面就一步一步

PS常用快捷键分享,教你轻松玩转PS

PS看似简单,实际操作起来却没有我们想象的那么容易,要想轻松玩转PS,首先快捷键的灵活运用是很重要的,掌握了一些常用快捷键,不仅能够帮助我们快速制作出精美的图片,在办公中还能够提高工作效率,下面让我们一起来看看是哪些快捷键吧! 关于PS快捷键今天的分享到这里就结束了,如果你经常需要使用这个工具不妨试试这些快捷键吧,希望上述的分享可以帮助到有需求的伙伴: 注:大家在操作的过程中有更好的方法可以分享出来我们一起学习哦! 原文地址:https://blog.51cto.com/14455371/242

学习 OpenStack 的方法论 - 每天5分钟玩转 OpenStack(150)

作为 OpenStack 的核心教程,我们已经到了最后总结的部分. OpenStack 目前已经有好几十个模块,本教程讨论的是最最重要的核心模块:Keystone,Nova,Glance,Cinder 和 Neutron.请大家看下图: 此图截自 https://www.openstack.org/software/project-navigator/,这是 OpenStack 官方定义的 6 个 Core Service.每个模块都会从三个维度来衡量: ADOPTION - 采用度 MATUR

写在最前面 - 每天5分钟玩转容器技术(1)

<每天5分钟玩转容器技术>是一个有关容器技术的教程,有下面两个特点: 系统讲解当前最流行的容器技术.从容器的整个生态环境到各个具体的技术,从整体到细节逐一讨论. 重实践并兼顾理论.从实际操作的角度带领大家学习容器技术. 为什么要写这个? 简单回答是:容器技术非常热门,但门槛高. 容器技术是继大数据和云计算之后又一炙手可热的技术,而且未来相当一段时间内都会非常流行. 对 IT 行业来说,这是一项非常有价值的技术.而对 IT 从业者来说,掌握容器技术是市场的需要,也是提升自我价值的重要途径. 拿我

ELK 完整部署和使用 - 每天5分钟玩转 Docker 容器技术(90)

上一节已经部署了容器化的 ELK,本节讨论如何将日志导入 ELK 并进行图形化展示. 几乎所有的软件和应用都有自己的日志文件,容器也不例外.前面我们已经知道 Docker 会将容器日志记录到 /var/lib/docker/containers/<contariner ID>/<contariner ID>-json.log,那么只要我们能够将此文件发送给 ELK 就可以实现日志管理. 要实现这一步其实不难,因为 ELK 提供了一个配套小工具 Filebeat,它能将指定路径下的日

运行第一个 Service - 每天5分钟玩转 Docker 容器技术(96)

上一节我们创建好了 Swarm 集群, 现在部署一个运行 httpd 镜像的 service,执行如下命令: docker service create --name web_server httpd 部署 service 的命令形式与运行容器的 docker run 很相似,--name 为 service 命名,httpd 为镜像的名字. 通过 docker service ls 可以查看当前 swarm 中的 service. REPLICAS 显示当前副本信息,0/1 的意思是 web_

Swarm 如何实现 Failover?- 每天5分钟玩转 Docker 容器技术(98)

故障是在所难免的,容器可能崩溃,Docker Host 可能宕机,不过幸运的是,Swarm 已经内置了 failover 策略. 创建 service 的时候,我们没有告诉 swarm 发生故障时该如何处理,只是说明了我们期望的状态(比如运行3个副本),swarm 会尽最大的努力达成这个期望状态,无论发生什么状况. 以上一节我们部署的 Service 为例,当前 3 个副本分布在 swarm-worker1 和 swarm-worker2 上. 现在我们测试 swarm 的 failover 特

如何滚动更新 Service?- 每天5分钟玩转 Docker 容器技术(102)

在前面的实验中,我们部署了多个副本的服务,本节将讨论如何滚动更新每一个副本. 滚动更新降低了应用更新的风险,如果某个副本更新失败,整个更新将暂停,其他副本则可以继续提供服务.同时,在更新的过程中,总是有副本在运行的,因此也保证了业务的连续性. 下面我们将部署三副本的服务,镜像使用 httpd:2.2.31,然后将其更新到 httpd:2.2.32. 创建服务: docker service create --name my_web --replicas=3 httpd:2.2.31 将 serv

如何配置 Health Check?- 每天5分钟玩转 Docker 容器技术(107)

容器状态是 UP 的,应用就是健康的吗? 还真不一定!Docker 只能从容器启动进程的返回代码判断其状态,而对于容器内部应用的运行情况基本没有了解. 执行 docker run 命令时,通常会根据 Dockerfile 中的 CMD 或 ENTRYPOINT 启动一个进程,这个进程的状态就是 docker ps STATUS 列显示容器的状态. 命令显示: 有的容器正在运行,状态为 UP. 有的容器已经正常停止了,状态是 Exited (0). 有的则因发生故障停止了,退出代码为非 0,例如