└── README.md /README.md: -------------------------------------------------------------------------------- 1 | # Awesome design tools 好用的设计工具合集 2 | 3 | > 按：以下设计相关的工具/资源，来自于我平时的整理。 4 | 尤其感些**神器挖掘机**阿文老师的贡献。 5 | 6 | 这些工具的分享者或作者包括但不限于： 7 | [@Simon_阿文](https://weibo.com/simonstudio2?topnav=1&wvr=6&topsug=1) 8 | [@亚赛大人](https://weibo.com/psaiaevegas?topnav=1&wvr=6&topsug=1) 9 | [@pissang](https://weibo.com/pissang?topnav=1&wvr=6&topsug=1) 10 | [@马赛克_m](https://weibo.com/hellomosaic?topnav=1&wvr=6&topsug=1&is_all=1) 11 | [@demi老方](https://weibo.com/u/5810655200?topnav=1&wvr=6&topsug=1&is_all=1) 12 | [@你丫才美工](https://weibo.com/honghaier555?topnav=1&wvr=6&topsug=1) 13 | [@包大有趣](https://weibo.com/fay1004?topnav=1&wvr=6&topsug=1&sudaref=s.weibo.com&is_all=1) 14 | [@林书尼](https://weibo.com/u/2475782525?topnav=1&wvr=6&topsug=1&is_all=1) 15 | [@优卡说](https://weibo.com/youkappt?is_hot=1) 16 | [@这里是lins](https://weibo.com/u/1921677254?profile_ftype=1&is_all=1#_0)：她整理了一份比我更全的神器工具集，指路[微博](https://weibo.com/1921677254/IrLG0aGCv?from=page_1005051921677254_profile&wvr=6&mod=weibotime&type=comment#_rnd1583895728022) 17 | 18 | ## 项目更新 Timeline 19 | 20 | * 这个项目是我很久以前跟着 @Simon_阿文 老师在微博上举办的「PPT 365」打卡活动，在做 PPT 的过程中积攒的一些设计工具，分享出来希望能帮到喜欢设计的朋友，感谢阿文老师在微博上的转发，才让这个项目有了这么多的 Star 21 | * 后来我放弃了做 PPT 或者做设计相关工作的念头，这个项目也好久没有更新或者维护了 22 | * 目前我是一名新媒体编辑，写的主要是效率工具推荐或软件使用技巧方面的内容，感兴趣的朋友可以移步我的个人公众号「[效率工具指南](https://mp.weixin.qq.com/s/yQBlY3d4AWbWHC6DTqgf0w)」，查看我目前正在做的内容 23 | 24 | ## 工具整理心得 25 | 26 | @Simon_阿文 老师曾写过这么一篇文章[《好玩的神器去哪里找？》](https://weibo.com/ttarticle/p/show?id=2309404121559609512336#_0) 27 | 28 | ## 使用方法 29 | * 使用浏览器自带的搜索功能，快捷键为Ctrl+F，通过输入关键字，能更快找到想要的工具。 30 | * 如果你想要提交好玩的工具，可以在Issue页面发起Issue，它可以看成是一个留言区。 31 | * 如果你不想使用Github，也可以看我之前整理在Mubu的[《神器种草》](https://mubu.com/doc/2u0lSKuDan)。 32 | 33 | ## Animation 动画 34 | [Panzoid](https://panzoid.com/)：在线修改网站提供的模板，制作炫酷动画。（@你丫才美工 推荐） 35 | [HATTEMI](https://hattemi.com)：液体粒子文字生成器，支持中文，生成的动画支持下载，清晰度为720p。（[@ruanyf](https://weibo.com/1400854834/IdKTlg8UN?type=comment) 老师推荐） 36 | 37 | ## App 38 | Slide AR：将 PPT 变成 AR，可能是苹果专属的 App，需要使用非大陆的 AppleID 才能搜索到。（@[阿文](https://weibo.com/1757693565/J0y8H1V6B?filter=hot&root_comment_id=0&type=comment#_rnd1591416070615) 老师推荐） 39 | [Glitch Art Studio](https://apps.apple.com/cn/app/glitch-art-studio-cam-effects/id1434795782?l=en)：iOS上的一个故障效果App，内有多种滤镜，如蒸汽波、坏电视、失真等，拍摄时所见即所得。下载免费，应用有内购。（@Simon_阿文 推荐） 40 | [Enlight Pixaloop](https://www.pixaloopapp.com/)：通过对静态图片的局部进行涂抹，可以将静态图片转换为动态图像。下载免费，应用有内购，购买之后支持导出Gif。推出这个App的团队也做出了[很多其他的产品](https://apps.apple.com/cn/developer/lightricks-ltd/id606310584)。（@Simon_阿文 推荐） 41 | [Mirror Lab](https://play.google.com/store/apps/details?id=com.ilixa.mirror&hl=en_US)：Android上的一个图像处理软件，可以制作出水波纹倒影、户外雨滴、低面风格和极坐标等效果。（@马赛克_m 推荐） 42 | CUTTT：这是一位个人开发者开发的App，可以用来制作四宫格、六宫格和九宫格切图效果。有幸在即刻认识了这个App的开发者，希望能多点人用他的App。这个App在两个平台都有，[安卓版本](https://www.coolapk.com/apk/geziip.com.cuttt)/[iOS版本](https://apps.apple.com/cn/app/cuttt/id1418359098) 43 | [Legend](https://apps.apple.com/cn/app/id945320876)：快速制作文字动效的App，内置了多种模板，可将制作好的动画导出成MP4格式。既可以使用中文也可以使用英文，但据说在安卓上使用中文会出现乱码的情况，所以这里只给出iOS版本的下载链接。 44 | [CleverBrush](https://www.cleverbrush.com/editor): 一种非常简单的在线替代流行的矢量绘图应用程序 45 | 46 | ## Code 代码 47 | [ThingJS](http://www.thingjs.com)：一个很容易创建3D城市的模型的平台。 48 | 49 | 50 | ## Color 颜色 51 | [Adobe Color](https://color.adobe.com/zh/create/color-wheel/?base=2&rule=Custom&selected=2&name=7137adf67a7efa4ef23fffe7ca9ac561e9f92fdd3bde-LJG04Wfw658&mode=rgb&rgbvalues=0.4470588235294118,0.4392156862745098,0.4470588235294118,0.6470588235294118,0.6392156862745098,0.6470588235294118,0.1411764705882353,0.12549019607843137,0.1450980392156863,0.8470588235294118,0.8313725490196079,0.8549019607843137,0.8392156862745098,0.12549019607843137,0.11764705882352941&swatchOrder=0,1,2,3,4)：Adobe 出品的配色工具，可以上传图片拾取配色。 52 | [中国色](http://zhongguose.com/)：中国风配色网站。 53 | [UiGradients](https://uigradients.com/)：渐变配色网站。 54 | [Gradient](https://gradient.shapefactory.co/)：ShapeFactory 出品的渐变色网站。 55 | [ColorSpace](https://mycolor.space/)：输入一种主色，自动生成多种好看的色卡。（@你丫才美工 推荐） 56 | [Colordot](https://color.hailpixel.com/)：滑动鼠标寻找配色。 57 | [Pigment](https://pigment.shapefactory.co/)：ShapeFactory 出品的配色网站。 58 | [Colors](https://www.vanschneider.com/colors)：由 Tobias van Schneider 收集的 120 个配色方案。 59 | 60 | ## Designer 设计师 61 | [Vasjen Katro](http://behance.net/katro16)：Adobe Illustration 2018启动界面设计者，他的作品涉及多种风格，包含蒸汽波、孟菲斯、故障艺术、赛博朋克、波普艺术等。他在[SkillShare](https://www.skillshare.com/site/join?teacherRef=2975272&via=teacher-referral-channel&utm_campaign=teacher-referral-channel&utm_source=ShortUrl&utm_medium=teacher-referral-channel&vanityUsername=katro)上开了一门课，跟着他学，你也能轻松做出骚得炸裂的海报。（[@林书尼](https://weibo.com/2475782525/Hvwh4sUK7?from=page_1005052475782525_profile&wvr=6&mod=weibotime&type=comment#_rnd1566726183837) 墙裂推荐） 62 | [Ruslan Khasanov](http://www.ruskhasanov.com/)：颜料大神，色彩掌控感优秀。 63 | [Jason K. Smith](http://colordodge.com/)：一个沉迷用代码创造各种交互动画的大神设计师。（@林书尼 推荐） 64 | [Aeforia](https://www.aeforiadesign.com/digital-art)：抽象、超现实主题的设计师。（@林书尼 推荐） 65 | 66 | ## Design Tutorial 设计教程 67 | [Uiiiuiii](https://uiiiuiii.com/)：优优教程网，简称U站，优设旗下的教程网站，上面的资源超全，有很多设计软件的学习教程，而且基本都是免费且高质量的。 68 | [doyoudo](http://www.doyoudo.com/)：这是一个在线设计教育的网站，上面既有免费也有收费课程，但免费课程更多，老师的声音也很好听。 69 | 70 | 71 | ## Effect 特效 72 | [PhotoMosh](https://photomosh.com/)：在线图片视频特效工具，拥有多种特效，可一键制作出故障风格等效果。 73 | [Duotone](https://duotone.shapefactory.co/?f=00d3d4&t=006cff)：双色调风格、一键重新着色（重新上色）。 74 | [Letters](https://text.design/letters/)：Mac上的文字特效软件，通过修改软件提供的模板，可以快速做出各种炫酷的文字效果。（[@你丫才美工](https://weibo.com/ttarticle/p/show?id=2309404384575756342159) 推荐） 75 | [Animated Water Effect](https://watereffect.net/)：动态水波纹倒影生成器，可导出视频或 Gif。这个网站顶部还提供了其他工具，如镜像特效、拼图、像素化（马赛克生成器）、恐怖特效等。（[@Simon_阿文](https://weibo.com/1757693565/J4Mop7xtc?from=page_1005051757693565_profile&wvr=6&mod=weibotime&type=comment#_rnd1591412903293) 推荐） 76 | 77 | 78 | ## Font 字体 79 | 80 | [Abelone](https://www.fontself.com/colorfontweek/valentine-edition-2019#abelone)：自带渐变效果的字体 81 | [Gilbert](https://www.typewithpride.com/)：彩虹字体 82 | [GROPE SANS](http://bompasandparr.com/projects/view/grope-mountain/#)：据说是最色的字体 83 | [汉仪阿尔茨海默病体](http://www.hanyi.com.cn/productdetail.php?id=2637)：汉仪字库的字体，文字的部分笔画用线条进行了代替。 84 | [2D动画字体](http://t.cn/RYfQ395)：只有26个字母和0-9 10个数字，需要使用到AE。（@马赛克_m 推荐） 85 | [logo字体](https://fonts2u.com/socialico.font)：这是一种比较特殊的字体，打出来的字是各个公司的logo，我暂时将它命名为logo字体。 86 | [Adamas](https://www.behance.net/gallery/2849429/Adamas-Regular-Free-font)：英文字体，Lowpoly（低平面）风格。 87 | [fontspace](https://www.fontspace.com/)：下载免费英文字体。（@Simon_阿文 推荐） 88 | [Cube](http://www.fontfabric.com/cube-font/#mailchimpboxin)：立体字体。 89 | [Sngk](http://sngk.net/)：动漫字体生成器，生成的字体可以保存成PNG。（@Simon_阿文 推荐） 90 | [PhatRave](https://fontmeme.com/fonts/phat-rave-font/)：手绘字体、黑板报字体。 91 | [OraqleScript](https://oload.stream/f/XdejM_-tPC8/OraqleScript.zip)：手写英文字体，由Be设计师[James Med](https://www.behance.net/chetouui110b1a)制作。（@包大有趣 推荐） 92 | [叶根友唐楷简](http://www.yegenyou.com/font-detail-167-3-.htm)：书法字体。个人仅限非商业用途使用，商用需购买版权。@Simon_阿文 老师曾在两份PPT模板作品《我在故宫修模板》《浮世绘》中用到这种文字。 93 | [猫啃网](https://www.maoken.com/)：搜集免费可商用中文字体。（@Simon_阿文 推荐） 94 | [WhatTheFont](https://www.myfonts.com/WhatTheFont/)：类似于求字体网，一个识别英文字体的在线工具。 95 | 96 | ### 免费可商用字体列表 97 | * 江西拙楷：很有辨识度的一款字体，笔画中带有泼墨设计，了解这款字体的由来，可以看这里👉👉《[我的第一套字体，终于跟大家见面了，免费商用！](https://mp.weixin.qq.com/s/uZxL5YlQboT2oEB4qL0PIg)》。字体作者「黄煜臣」，可在作者的公众号「字体树」下载，这里放一下字体作者提供的[百度网盘下载链接](https://pan.baidu.com/s/1EcbbHwPSp19L0bONOWEwLQ) 提取码：8mvm 98 | * [沐瑶软笔手写体](https://www.zcool.com.cn/work/ZMjg5MjAwMDQ=.html)：免费可商用的卡通字体，这是一位老爸送给女儿的一份礼物。 99 | * [庞门正道粗书体](https://pan.baidu.com/s/17o4-udkD94_gm2wWoqT0fA)：免费可商用的书法字体。提取码：bk84 100 | * 思源黑体 101 | * 思源宋体 102 | * [联盟起艺卢帅正锐黑体](https://mp.weixin.qq.com/s/6s5fvOS3B9zH_gghZyOO1A) 103 | * 站酷系列字体下载链接：[站酷字库-免费字体](http://www.zcool.com.cn/special/zcoolfonts/) 104 | > 站酷酷黑体 105 | > [站酷庆科黄油体](https://file.zcool.cn/community/file/2018/6/1034bc5b5980ce0000013ef2b1ebb6.zip?Expires=1567849304&OSSAccessKeyId=lwQTEmwHzzSWSkqd&Signature=L0Gc1c6NMzU7IFzNL9xTtfWPXQY%3D) 106 | > 站酷文艺体 107 | > 站酷小薇logo体 108 | > 站酷意大利体：站酷首款免费英文字体。 109 | > 站酷快乐体 110 | > 站酷高端黑体 111 | 112 | ## Game 游戏 113 | [Polygonal Planet](http://oskarstalberg.com/game/planet/planet.html)：这是一款游戏，通过游戏提供的工具，可以制作好看酷炫的星球。这个在线工具还有离线版本，如需下载，请前往阿文老师的微博（[@Simon_阿文](https://weibo.com/1757693565/GfGRfr4fS?type=comment#_rnd1567921637067) 推荐） 114 | 115 | ## Mockup 样机 116 | [Browseframe](https://browserframe.com/)：在线为截图添加macOS界面的样机。 117 | [Free design resources](https://freedesignresources.net/category/free-mockups/)：免费设计资源网站，上面有免费的样机可供下载。 118 | [iPhone XS longscroll mockup](https://www.ls.graphics/free/free-iphone-xs-longscroll-mockup)：卷轴样机侧面，看起来很酷。（@Simon_阿文 推荐） 119 | [Free longscroll iPhoneX mockup](https://www.ls.graphics/free/free-long-scroll-iphone-x-mockup)：卷轴样机正面。 120 | [LS.Graphics](https://www.ls.graphics/)：高质量的素材网站，可以找到一些免费的高质量样机。（@林书尼 推荐） 121 | 122 | ## Music 音乐 123 | [Fugue](https://icons8.com/music)：Icons8旗下的音乐素材网站，可免费下载，商业使用时需附带指向Icons8的链接。 124 | 125 | ## Openprocessing 126 | [Electric Sphere](https://www.openprocessing.org/sketch/389855)：毛球生成器，毛线星球生成器，毛绒绒的圆球。附上作者David Crooks的 127 | [Openprocessing主页](https://www.openprocessing.org/user/68039)（[@Simon_阿文](https://www.uisdc.com/9-planets-builder) 推荐） 128 | 129 | ## Picture 图片 130 | [纹理背景生成器](https://halftonepro.com/app/stripes)：纹理背景生成器。 131 | [Undraw](http://undraw.co/illustrations)：可商用的免费矢量素材网站，收录了超多流行的Google插画。（@你丫才美工 推荐） 132 | [Illustration Gallery](https://gallery.manypixels.co/)：与上面的Undraw类似，全部免费可商用，区别在于这个网站的矢量素材使用了渐变填充，显得更高级。（@优设网 推荐） 133 | [Isoflat](https://isoflat.com/)：一个等距风格的矢量图库，等距风格俗称2.5D，一般通过Adobe Illustration来制作出伪3D的效果。上面的素材是否可商用，需要看素材的具体情况。（@Simon_阿文 推荐） 134 | [WLPPR](http://original.wlppr.co/)：来自NASA等机构的航拍图片，可以找到许多星球的纹理素材。（@Simon_阿文 推荐） 135 | [Pictogram2](http://pictogram2.com/?lang=en)：火柴人网站，@Simon_阿文 的教程中用到的有趣小人，就是来自这里。 136 | [36-Gradients](https://images.superfamous.com/36-Gradients)：36张好看的渐变图片。 137 | [Freepik](https://www.freepik.com/)：可能是最好用的矢量素材网站，免费的素材/作品一抓一大把。（@优卡 @林书尼 推荐） 138 | [Svgbackgrounds](https://www.svgbackgrounds.com/#vanishing-stripes)：矢量背景/矢量纹理，可以下载SVG格式的文件。此外，它还提供了CSS代码，可用于网页设计。（@demi老方 推荐） 139 | [iconfont](https://www.iconfont.cn)：阿里的一个图标库，还包括一个阿里惠普字体，商用程度需要注意。 140 | 141 | 142 | ## pissang [Github主页](https://github.com/pissang) 143 | [Gradient Wave Generator](https://codepen.io/pissang/full/geajpX)：渐变背景生成器，下载下来的文件格式为svg。 144 | [Papercut](https://pissang.github.io/papercut-box-art/)：剪纸艺术。 145 | [图片像素化](http://gallery.echartsjs.com/editor.html?c=xS1l7vPPwW)：将普通图片一键转换为像素风格，可以调出金属质感。 146 | [立体城市](http://gallery.echartsjs.com/editor.html?c=xHyVK5fcTl)：彩色立体城市。 147 | [Little-big-city](https://pissang.github.io/little-big-city/)：3D星球立体城市，可导出obj格式的3D模型。 148 | [pissang大神出品的其他工具](https://gallery.echartsjs.com/explore.html?u=bd-2215764494&type=work#sort=rank~timeframe=all~author=all)：pissang大神出品的其他工具 149 | 150 | 151 | ## Templates 模板 152 | [slidesgo](https://slidesgo.com/)：图库网站 Freepik 旗下的 PPT 模板网站，模板的素材来自 Freepik，大多可自由编辑，细致到每一条线、每一个色块。所有PPT模板个人或商用都免费。（[@Simon_阿文](https://weibo.com/1757693565/J0FfbzoGk?from=page_1005051757693565_profile&wvr=6&mod=weibotime&type=comment#_rnd1591415823525) 推荐） 153 | 154 | 155 | 156 | ## Video 视频 157 | [Mixkit](https://mixkit.co/)：免费可商用的视频素材网站。 158 | [Pexels](https://www.pexels.com/videos/)：免费的视频素材网站，不过在线预览这个网站的视频需要跳墙。 159 | 160 | ## WebGL 161 | 162 | [Thorne](https://frontierwithin.thorne.com/)：数字肖像生成器，通过电脑摄像头，可以将拍摄的个人照片转换为一大群动态的粒子（[@林书尼](https://weibo.com/2475782525/HE9dVlJUc?from=page_1005052475782525_profile&wvr=6&mod=weibotime&type=comment) 安利） 163 | [VertexOscillation](http://colordodge.com/VertexOscillation/)：分层振荡生成器，可以生成动态抽象形状，可以通过控制面板调节参数。懒得调整参数，可以直接修改顶部的Default，里面还有3种其他的预置。附上这位作者的[个人网站](http://colordodge.com/)，还有超多好玩的神器。（@亚赛大人 [@林书尼](https://weibo.com/2475782525/HEbZsr8s0?from=page_1005052475782525_profile&wvr=6&mod=weibotime&type=comment#_rnd1566640274154) 推荐） 164 | 165 | [Fluid-Simulation](https://paveldogreat.github.io/WebGL-Fluid-Simulation/)：流体模拟器。这个工具有对应的App版本——流体模拟，链接分别为：[iOS](https://apps.apple.com/cn/app/%E6%B5%81%E4%BD%93%E6%A8%A1%E6%8B%9F/id1443124993)/[Android](https://play.google.com/store/apps/details?id=games.paveldogreat.fluidsim)。附上开发者的[Github主页](https://github.com/PavelDoGreat)。（@Simon_阿文 推荐） 166 | [Paint](http://david.li/paint/)：涂鸦油画颜料 167 | [Fluid](http://david.li/fluid/)：流动的粒子、流体粒子 168 | [INFINITOWN](http://demos.littleworkshop.fr/infinitown)：3D小镇 169 | [Cloud-islands](https://adrienlamy.fr/projects/cloud-islands)：凸起云海、动态波浪。这位作者的[主页](adrienlamy.fr)还有几个好玩的小玩具。（@马赛克 推荐） 170 | [Simplex Noise](https://www.yuichiroharai.com/wgl/)：动态渐变流体。这个网站包含了15个WebGL工具，每个WebGL工具没有独立的域名，点击不同名称，就可以切换到不同的WebGL工具。附上这位作者的[Github主页](https://github.com/yuichiroharai)。（@你丫才美工 推荐） 171 | [Biomes](https://demo.marpi.pl/biomes/)：体素（立体像素）生成器。 172 | [MQRZMp](https://codepen.io/anon/pen/MQRZMp)：炫光生成器，一键生成炫酷的炫光图片。（@Simon_阿文 推荐） 173 | [Abstract mountains](https://alteredqualia.com/xg/examples/abstract_mountains.html)：3D小山峰、抽象Lowpoly山峰，点一下就能改变山峰的颜色。 174 | [Nebula Artefact](https://alteredqualia.com/xg/examples/nebula_artefact.html)：液态星球生成器。 175 | [AlteredQualia](https://alteredqualia.com/)：超全的WebGL工具合集，WebGL的鼻祖开发的网站。附上他的[Github主页](https://github.com/alteredq)。 176 | 177 | ## 3D工具 178 | [Vectary](https://www.vectary.com/)：在线3D建模工具，分为免费版和收费版，免费般已有挺多功能可以使用。 179 | 180 | ## 插件 181 | [Muzli](https://chrome.google.com/webstore/detail/muzli-2-stay-inspired/glcipcfhmopcgidicgdociohdoicpdfc?utm_source=chrome-ntp-icon)：寻找灵感的Chrome插件，集合了多个设计网站的热门作品。 182 | [图片助手](https://www.pullywood.com/ImageAssistant/)：可以用来批量提取/下载网页图片。 183 | 184 | ## 设计导航工具 185 | [addog](http://www.addog.vip/)：虽然名字叫广告狗，面向的是广告从业者，但也适合设计师使用。 186 | [优设设计导航](https://hao.uisdc.com/)：优设网旗下的设计导航工具，对各类网站/工具分门别类进行了整理。 187 | 188 | 189 | ## 亚赛大人 [Github主页](https://github.com/wangyasai) 190 | [Design tools](https://wangyasai.github.io/designtools.html)：亚赛大人出品的设计工具合集 191 | * The Martix 电影《黑客帝国》片头文字效果 192 | * Particles-Emission 粒子发射器 193 | * Speed-Line 速度线 194 | * Mosaic 马赛克、音乐波纹 195 | * Perlin Noise 等高线 196 | * Play-a-ball 玩个球 197 | * PerlinNoisePainter 向量场迹线 198 | 199 | ## 其他 200 | 201 | Github上的两个高Star设计项目： 202 | [awesome-design](https://github.com/gztchan/awesome-design) 203 | [Awesome-Design-Tools](https://github.com/LisaDziuba/Awesome-Design-Tools) 204 | [Awesome Design Tools](https://flawlessapp.io/designtools)：这是上面的Github项目的网站，涵盖图片、视频、字体、配色、渐变色、icon、logo、mockup等方面，会不定期更新。 205 | 206 | [码力全开](https://design.maliquankai.com/)：产品/设计师/独立开发者的资源库，不定期更新各种资源工具。 207 | [炫网站](https://www.xuansite.com/color/colorful/)：一个收录了日本很多有特别设计创意的网站，访问的时候有点时候有些慢。 208 | 209 | 210 | 211 | 212 | --------------------------------------------------------------------------------