IAMUE
  • Home
  • 文章分类
    • 交互
      • 从零开始学交互
      • IxD案例
      • 微信热点
    • UXD
    • Wireframes
    • GUID
    • PM
  • More
    • AID
    • 资源下载
    • 作品集
    • 电子书:《从零开始做交互》
    • Sketch 4.9 - Sketch全系列免费下载(更新Sketch4.9)
    • 淘宝手机H5版UX移动交互设计规范
    • Axure基础入门
    • 隐私政策

怎样制作高大上的图片标注?(附下载链接)

ioued • 2016-10-18 14:02 • 资源下载

来源:知乎

在日常写文章的过程中,经常会给文章配图,很多人关心怎样制作出高大上的效果?其实并不难,看完这一篇就足够了。这次来跟大家聊一下怎么做图示:一拖一拽就搞定的,几乎瞬间就可以完成的那种。

|适合对象:经常写文章配图的产品汪 运营喵 ......

|阅读时长:约10分钟

|重点介绍:标注工具、图示类型、截图临时管理等,附使用技巧

文章概述:

一、日常使用的工具n二、常见的图示类型n三、加壳配图n四、截图临时管理n五、制作图示需要的图标n六、推荐阅读材料

对于无所不能的设计师来说,左手photoshop,右手sketch,没有什么效果是做不出来的。但是对于大多数人来说,缺乏设计方面的专业知识,只希望快速完成写作,用ps作图学习成本也高,时间也长,再说搞个配图就把祭出神器Ps,实在大材小用,杀鸡焉用牛刀,对吧?你肯定会问:有没有什么简单粗暴的办法,最好是无脑操作那种?最好是一拖一拽就搞定了!

正式介绍之前咱们先安利几个神器,Mac和Windows上都有,每个人根据个人喜好,选择顺手的兵器就可以开搞了。

君子生非异也,善假于物也 —《荀子·劝学》

一、日常使用的工具

常见的标注类型:n1.指向线条 2.编号 3.便签 4.放大镜 5.马赛克 6.拼合图像

▌Snagit(Mac、Windows):推荐,功能全面,操作简单

1476770464-9476-f7800004774c288f292

Snagit定位是综合类软件,但还是偏科的,在截图、注图上面的优势最为明显,Snagit 拥有业内设计最复杂、集成度极高的 截图菜单(下图)。内置了 Image 和 Video 两大截取功能,分别负责截图与抓屏工作。

使用流程:屏幕截图 → 图片标注 → 截图管理

1)屏幕截图&屏幕录像:

1476770463-2752-f770000c4043b8449b3

2)图片标注:

1476770464-6170-f740001642fa9ddbb9a

3)截图管理:

1476770465-6374-f7900069248ce84868d

选择 Snagit 作为主力的原因有两个:

  • 自带标注图示功能丰富,诸如放大镜之类的一应俱全,如下图:

1476770465-2078-f7b00007d722fcc4ff9

支持图层模式编辑,可以拼合多张截图,例如:

1476770464-7866-f7b00007d73497758b0

▲ 在介绍软件菜单的时候,特别方便

▌预览(Mac):简单处理

预览(系统偏好设置 - 扩展 - 操作)是系统自带应用,提供了常用的选择套索、裁切、文本、箭头、图片颜色修改等工具,形状工具列表中还提供了比较独特的「投影」和「放大镜」

缺点:没有图层功能,没法拼合多张截图。

1476770466-7479-f78000047754da3e8e3

▌OmniGraffle(Mac):很好很强大,学习成本高

OmniGraffle是绘图软件,可以绘制图表、流程图组织结构图、插图、以及脑图,也可以作为样式管理器,或设计网页或PDF文档的原型。反正没有它做不到的事情,强大的一塌糊涂。

强大到一看就懵逼了,一直也没时间去学。。。传送门:官方中文用户文档(http://t.cn/RVtaDy1)

1476770466-6620-f78000047763ecda0a6

二、常见的图示类型

好的图示做到清晰明确就行,让读者快速获取到想要的信息就算完成任务了,稍微复杂一些的图示需要费心搞以下排版和布局。

如果要达到完美的视觉效果,还要考虑图片和标注的景深和层次、色彩的搭配、图片的大小、内容的拼合等问题。(不在本文的讨论范围)

让我们看看国外大神们都是怎么做图示标注的,也好借鉴学习一下。

根据应用场景的不同,可以将标注分为五种:指向线条、编号、便签、突出和放大、场景

▌指向型线条

1476770467-1964-f79000692492d4904f6

▌编号

1476770467-7817-f7c000045a4c6ec7324

▌突出和放大

1476770467-4604-f74000164303572121a

▌段落便签型

1476770467-7726-f7800004777c791ac77

▌实物和场景型

1476770467-5758-f790006924c67c8763d

文中「标注类型1-5」所采用的图片均来自网络,图片源:Pinterest.com(http://t.cn/RVtS72z)

三、加壳软件

给软件截图添加设备外壳就要简单的多,可以借助专门的软件或者网站来快速实现,

▌例如Andriod里的软件:带壳截图(http://t.cn/RZ0sP7F)

1476770467-6101-f7c000045a5e17b6daf

▌Mac 环境下的收费软件 Promotee,如果缺常用的素材,也可以自行添加。

官方教程:添加自己的模板库(http://t.cn/RVtSbe5)模板大全:https://placeit.net/(https://placeit.net)

1476770468-5305-f7b00007d74fe01d392

▌基于 Web 页面的加壳服务:mockuphone.com

1476770469-7213-f7800004778dc901bd9

PlaceIt:收费, 除了常规的纯硬件展示,它还提供了诸如手持的图片。

1476770469-4320-f7b00007d7644c201ce

例如下面的这张 Ulysses 演示截图:

1.首先在手机里截图

2.使用 Promotee 的 iPhone 6 外壳

3.最后在 插入 Snagit ,调整输出

1476770469-2491-f790006924b5a3b3c8e

四、截图临时管理

▌Dropzone for mac:临时截图寄存处,点我查看使用gif(http://t.cn/RVtSfrx)

每次截完图之后,桌面就乱的惨不忍睹,尤其是写一篇长文章要配好多图的情况下,就更混乱了。

Dropzone 便是为了解决这个难题而诞生的。作为一款拖拽操作增强工具,它不仅能帮助用户方便优雅地完成跨应用,多位置的文件转移操作,还能作为快速启动器迅速打开文件,通过多种 Action 帮助用户完成各种工作。

使用技巧:将桌面的截图都归档到一个文件夹里,拖进用Dropzone 里面,等工作完成之后,要杀要剐,随你啦。

1476770472-5590-f7b00007d78d01dab92

1476770472-6750-f7800004779975531bc

▌Inboard for mac:收集图片,比Ember更轻盈

如果你用过Ember回头再来使用Inboard,你会发现它在功能上确实会少很多。但带来的好处就是应用足够轻盈,易用。再看看Ember中那些复杂的功能,我会用到的始终只会是它其中的一小部分。

1.创建文件夹和Tag方式的方式来管理图片库

2.Chrome、Safari上支持区域截图和滚动截图

1476770472-1920-f770000c4055982453f

▌Hazel:自动整理文件,让你的Mac井井有条

Hazel 是一款可以自动监控并整理文件夹的工具,它的使用有点类似于网络服务 IFTTT,你可以设定一个 if 条件,如果被监控的文件夹出现符合条件的项,那么对其执行 then 的操作。

例如:设定好规则后可以定时自动化的将图片归档到指定的文件夹。

1476770472-7408-f7c000045a61849a383

系统级应用

1476770474-4663-f770000c406f4db9b5d

使用前:

1476770474-7171-f7b00007d7920c2b077

使用后:

1476770474-5118-f7c000045a74ea69c85

使用攻略:Hazel,自动整理文件,让你的 Mac 井井有条

▌Snappy:悬浮截图,将每次的截屏图片钉在桌面最上面,打字看图两不误。

1476770474-2088-f7c000045a888dad655

五、制作图示需要的图标

1)Freebies(http://geticonjar.com/freebies/):Iconjar官方推荐

特点:19套图标,数量总共有5000+,基本满足日常需求 n

2)Iconfont(http://www.iconfont.cn) :阿里巴巴矢量图标库

特点:n1.分为阿里官方公开库 和 其他公司或个人的所有公开库n2.支持用户自己上传图标n3.支持Webfont字体 n

3)Flaticon(http://www.flaticon.com) :

特点:n1.共 189,189 枚矢量图标分布在 3,096 图标集里n2.号称拥有最大的PNG, SVG, EPS, PSD and BASE 64图标数据库n3.图标质量还是蛮不错的 n

4)thenounproject(https://thenounproject.com) :

特点:n1.Lingo自己家的图标素材网站n2.会有一些比较新颖的图标集,如下图:

1476770474-5185-f7400016431b8ae2ae0

5)Instantlogosearch(http://instantlogosearch.com)(只提供Logo,国内大厂的也有,覆盖挺全的)

1476770474-7693-f770000c409a85dd059

6)几个图标提取小技巧

▌从网页里提取:

在百度里搜索【某个应用程序+Apptore】例如【微信 Appstore】

1476770475-9162-f7400016432ff453cee

然后打开AppStore的已用详情,右键 「检查元素」 →Network → Img → 搞定

1476770475-8370-f790006924db0588ed6

▌从APP里提取:

先打开「预览」程序

1476770475-2287-f7b00007d7a85062f6b

然后在 Finder将目标应用从应用程序列表拖至Dock 栏上的「预览」

1476770475-6392-f770000c4079c5130ad

▌Mac 的符号输入面板

快捷键「control+command+空格」打开系统内置的符号输入面板

1476770475-3275-f770000c4086001adee

原创文章,作者:ioued,如若转载,请注明出处:https://www.iamue.com/18074/

iPhonelogoPSPSDsketch产品原型图标场景字体微信用户素材视觉设计设计师运营
赞 (0)
iouedioued
0
生成海报
一款APP从设计稿到切图全记录
上一篇 2016-10-18 13:59
PC端web管理系统的交互设计规范分享
下一篇 2016-10-18

相关推荐

  • Justinmind v6.9.1–更好的高保真线框图工具 Justinmind免费资源

    Justinmind v6.9.1–更好的高保真线框图工具

    今天,我们推出Justinmind的新版本,进一步提高您的高保真线框工具。我们已经介绍了一些bug修复和可用性改进及对文本输入部件类型的增加。 新增文本输入部件的类型 到目前为止,已经有3个不同的输入类型选择:文本…

    2015-10-29
  • Axure手机多屏幕滑动原型案例下载 IxD案例

    Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • 开学福利!2016 年 9 月设计圈超实用干货大合集 资源下载

    开学福利!2016 年 9 月设计圈超实用干货大合集

    又到了每个月发放设计圈干货的时间了!这个月的合集依然是以免费的高素质设计素材为主,靠谱的图标合集,种类多样的笔刷,精致的网页模板,永远不会缺席的高素质字体,还有可以帮你搞定各种问题的实用小工具。50 款免费素材,其中总有几款能满足你需求的吧? —— 由AleCC 分享

    2016-09-08
  • 【福利】设计师必备网站,很多免费资源快来收割。

    IAMUE.com 发福利了!!!快快MK转发~~~ 免费PSD源文件 PSDS.co — www.psds.co Fribbble — www.fribbble.com Premium Pixels — www.premiumpixels.com Teehan+Lax iOS 7 Gui PSD (iPhone)— www.teehanlax.com/tools…

    资源下载 2015-08-12
  • 设计师们值得一试的十款用户体验工具 原型设计教程

    设计师们值得一试的十款用户体验工具

    设计师们值得一试的十款用户体验工具

    2016-07-18
  • 交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。 交互设计

    交互设计丛书分享:《从零开始做交互》告诉入门交互师具体操作的的一本书籍。

    内容简介   遇到很多的人来咨询我什么是用户体验设计师,什么是交互设计师,UI与UE设计师有什么区别?为什么一个新生派的交互设计师职位一上来就在IT界有8000起的薪资待遇? 那么说了那么多,怎么才能成为一个…

    2015-07-15
  • UE网国内首发:Axure APP:Axshare APP下载地址非google play Axure

    UE网国内首发:Axure APP:Axshare APP下载地址非google play

    很多童鞋反应googleplay下载不下来,我们发布在 UE社区 以后各种新的东东想第一时间知道欢迎安装我们的UE小组APP 请需要的同学尝鲜下载。 http://www.iamue.cn/read.php?tid=16&fid=2 不过阿西这里要提醒下,这…

    2015-05-25
  • axure官方原版教材(英文) Axure

    axure官方原版教材(英文)

    AxureCoreTraining axure rp 官方教程,PDF免费下载 推荐阅读英文版,翻译的毕竟有些差异的。   点我下载AxureCoreTraining 

    2015-06-11
  • 破茧成蝶读书笔记

    01什么是用户体验  用户体验:使用一个产品时的主观感受 用户体验设计:提升用户体验而做的设计 书中讲到首先我们要明确什么是设计?设计不等于艺术。我了解到的是,设计是解决问题的,艺术是提出问题的。 书中两口…

    交互设计书籍分享 2015-08-19
  • 资源下载

    体验的品质:如何定义有效的交互设计?

    经验分类: 设计规范/资料 / 自译外文 原作者: Lauralee Alben 体验的品质:如何定义有效的交互设计? 本文的主要内容是由交互设计先驱Lauralee Alben为第一届ACM交互设计奖所撰写的用户体验准则。        Quality …

    2014-10-30
  • UED书单
  • 微信精选
  • 投稿说明
  • 赞助

Copyright © 2024 WPCOM 版权所有 粤ICP备000000000号 Powered by WordPress