&img src=&/v2-7c06d0dc23c44a0c73bd7_b.jpg& data-rawwidth=&1000& data-rawheight=&667& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/v2-7c06d0dc23c44a0c73bd7_r.jpg&&&p&谢邀，放假回来了，明天就要开工，今晚就来知乎看看有啥有意思的邀请。&/p&&br&&p&题主的图做起来不难的，但我不想做题图那么夸张，所以就做了个程度较轻的版本。&/p&&br&&p&要做得像题图一样更扭曲变形，多加一些扭曲滤镜或者调整参数就好。&/p&&br&&p&首先在PS里新建文件，我选了一个岩石的图片，做这类的图尽量选择这样对比度高错综复杂的素材。&/p&&img src=&/v2-962d7d9e0f3deb8fc30add1dcf54ac1c_b.png& data-rawwidth=&1129& data-rawheight=&914& class=&origin_image zh-lightbox-thumb& width=&1129& data-original=&/v2-962d7d9e0f3deb8fc30add1dcf54ac1c_r.png&&&br&&p&接着使用渐变映射，选自己喜欢的就好。&/p&&img src=&/v2-3eeb2e16e1dfb8d4d57845_b.png& data-rawwidth=&1129& data-rawheight=&914& class=&origin_image zh-lightbox-thumb& width=&1129& data-original=&/v2-3eeb2e16e1dfb8d4d57845_r.png&&&br&&p&接着使用扭曲滤镜里的波浪滤镜，调整参数到自己满意为止。这步看心情，不一定只有一个波浪，你想多加一些扭曲类的滤镜就随便加，跟着感觉走。&/p&&img src=&/v2-ccb2f5546777_b.png& data-rawwidth=&1121& data-rawheight=&905& class=&origin_image zh-lightbox-thumb& width=&1121& data-original=&/v2-ccb2f5546777_r.png&&&br&&p&个人觉得做到这样就有感觉了，就没接下去扭曲了，要更扭曲就加大参数或者增加新扭曲滤镜就好。&/p&&img src=&/v2-55f14eda5c2fe77d484d4c_b.png& data-rawwidth=&1129& data-rawheight=&914& class=&origin_image zh-lightbox-thumb& width=&1129& data-original=&/v2-55f14eda5c2fe77d484d4c_r.png&&&br&&p&最后码上字，齐活儿~&/p&&img src=&/v2-30a9071931bff6b7c77cdba_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&/v2-30a9071931bff6b7c77cdba_r.jpg&&&br&&img src=&/v2-225f6f433bedb538c18639_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&/v2-225f6f433bedb538c18639_r.jpg&&&br&&img src=&/v2-917e67b5b9b89bf0f3335_b.jpg& data-rawwidth=&1080& data-rawheight=&1920& class=&origin_image zh-lightbox-thumb& width=&1080& data-original=&/v2-917e67b5b9b89bf0f3335_r.jpg&&&br&&p&做这类图啊，就是看心情。&/p&
谢邀，放假回来了，明天就要开工，今晚就来知乎看看有啥有意思的邀请。 题主的图做起来不难的，但我不想做题图那么夸张，所以就做了个程度较轻的版本。 要做得像题图一样更扭曲变形，多加一些扭曲滤镜或者调整参数就好。 首先在PS里新建文件，我选了一个岩…
&blockquote&&b&&i&来源：&/i&&/b&&b&&i&&a href=&/?target=https%3A///qian-duan-qie-tu-shen-qi-avocode/& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&前端切图神器avocode&i class=&icon-external&&&/i&&/a&&/i&&/b&&p&&b&&i&作者：&a href=&/people/b634b0afdd22a635f71fdad& data-hash=&b634b0afdd22a635f71fdad& class=&member_mention& data-editable=&true& data-title=&@john mike& data-hovercard=&p$b$b634b0afdd22a635f71fdad&&@john mike&/a&&/i&&/b&&/p&&/blockquote&&h3&&b&安装avocode&/b&&/h3&&p&前端的基础工作就是把设计师的设计稿还原成前端页面，所以切图是作为一个前端的基本技能。杀敌要有趁手的兵器，而前端一般都是用photoshop,但是这个兵器非常笨重，可能当你笨拙的挥动的它时，敌人已经挥刀到你的颈部了。毕竟不是所有人都是杨过。所以我们应该选择轻便锋利的武器。那么现在我来介绍一下一个很好用的前端切图神器avocode。&/p&&p&avocode的官网地址是&a href=&/?target=https%3A///& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&&i class=&icon-external&&&/i&&/a&，官网的标语是&strong&Build web, iOS & Android apps exactly as they were designed. Goodbye hand coding. Hello avocoding.&/strong&&/p&&p&就是让你告别繁琐的切图工作。&/p&&p&&img src=&/v2-236fef5ea5_b.png& data-rawwidth=&1440& data-rawheight=&770& class=&origin_image zh-lightbox-thumb& width=&1440& data-original=&/v2-236fef5ea5_r.png&&下载安装之后，注册登录之后。现在需要创建一个文件夹。创建文件夹可以选择你需要的切图的类型，有&strong&IOS&/strong&,&strong&ANDROID&/strong&,&strong&WEB&/strong&三种类型。我们这里选择的&strong&WEB&/strong&.&br&&/p&&img src=&/v2-a67eab06beee36a10b8cf_b.png& data-rawwidth=&1389& data-rawheight=&747& class=&origin_image zh-lightbox-thumb& width=&1389& data-original=&/v2-a67eab06beee36a10b8cf_r.png&&&p&进入之后可以选择上传按钮上传我们的PSD文件，这里有一个问题，就是这是国外的软件，服务器在国外，如果没有科学上网的话，上传的速度会让你痛不欲生，所以作为一个程序员科学上网是非常重要的。&/p&&p&我这里上传了一个示例的简历psd&br&&/p&&p&&img src=&/v2-599b73e667af29a7d6eae_b.png& data-rawwidth=&1346& data-rawheight=&701& class=&origin_image zh-lightbox-thumb& width=&1346& data-original=&/v2-599b73e667af29a7d6eae_r.png&&打开这个psd之后，可以看到很多工具栏，avocode由于版本的更新，工具栏的位置是会发生改变的。本文中的使用的版本是&strong&2.12.5&/strong&。在界面中的左边，有四个按钮图层、活动信息、版本记录、psd的各种相关信息。上边的工具栏是对psd进行具体的切图工作。右边的工具栏显示的是具体选中或者进行操作的获得的图层信息。&br&&/p&&img src=&/v2-2baae87ab150_b.png& data-rawwidth=&1597& data-rawheight=&805& class=&origin_image zh-lightbox-thumb& width=&1597& data-original=&/v2-2baae87ab150_r.png&&&h3&&b&avocode的使用&/b&&/h3&&p&现在着重的介绍一下上面的工具栏，第一个手形的按钮&br&&/p&&p&&img src=&/v2-7a4a87f4e85b1b6ec8344_b.png& data-rawwidth=&79& data-rawheight=&77& class=&content_image& width=&79&&,这个按钮代表着你可以拖动的整个文件，第二个按钮&br&&/p&&p&&img src=&/v2-269aab5c25a5a848e72f5c4cedb85b58_b.png& data-rawwidth=&78& data-rawheight=&77& class=&content_image& width=&78&&有点像photoshop中的选择按钮，可以直接选择psd中的一个图层，当我们选中某个图层之后，我们就可以进行我们切图的工作的重头戏。假如选中图层中有一个标题。&br&&/p&&p&&img src=&/v2-a392a97ae31a5fc99103_b.png& data-rawwidth=&885& data-rawheight=&469& class=&origin_image zh-lightbox-thumb& width=&885& data-original=&/v2-a392a97ae31a5fc99103_r.png&&在右边显示关于这个标题的css信息，这个css可以包含&strong&color&/strong&、&strong&font-size&/strong&、&strong&line-height&/strong&、&strong&border-color&/strong&、&strong&background-color&/strong&等等。有了这些信息，写css就会相当容易。&br&&/p&&p&&img src=&/v2-5db0cdefddabf27ff51e39_b.png& data-rawwidth=&277& data-rawheight=&294& class=&content_image& width=&277&&当你需要这个图层导出图片当背景，就可以右键选中导出图片，某些情况下还支持&strong&svg&/strong&格式，也可以支持base64。&br&&/p&&p&&img src=&/v2-30affa4eaa36dc6c7991de_b.png& data-rawwidth=&498& data-rawheight=&616& class=&origin_image zh-lightbox-thumb& width=&498& data-original=&/v2-30affa4eaa36dc6c7991de_r.png&&第三个是测量按钮&br&&/p&&p&&img src=&/v2-69da671fc831a1e3302f_b.png& data-rawwidth=&87& data-rawheight=&73& class=&content_image& width=&87&&，这个可以获得选中图层的大小和周围的间距大小。&br&&/p&&p&&img src=&/v2-bbc19f09_b.png& data-rawwidth=&407& data-rawheight=&337& class=&content_image& width=&407&&第四个是取色按钮&br&&/p&&p&&img src=&/v2-beecabf0cdb2_b.png& data-rawwidth=&69& data-rawheight=&64& class=&content_image& width=&69&&,这个就用取色器直接吸取这个图层的颜色。第五个是裁剪按钮&br&&/p&&p&&img src=&/v2-4fd19a44196_b.png& data-rawwidth=&76& data-rawheight=&65& class=&content_image& width=&76&&,这个也有点类似photoshop的裁剪功能。&br&&/p&&p&&img src=&/v2-e3cae03fda4_b.png& data-rawwidth=&959& data-rawheight=&735& class=&origin_image zh-lightbox-thumb& width=&959& data-original=&/v2-e3cae03fda4_r.png&&第6个按钮是备注按钮&br&&/p&&img src=&/v2-c3d4cab222ed327daa42102_b.png& data-rawwidth=&88& data-rawheight=&69& class=&content_image& width=&88&&&p&, 这个功能就不介绍了。&/p&&p&通过上面的介绍，已经基本把avocode的功能给介绍清楚了，但是更完整的体验你可以自己下载安装体验。最后我想说的时候，这个是&b&付费软件&/b&，第一次注册之后可以免费使用14天，14天过后的话，每个月要$8.99。好的东西应该要付费支持，这样作者才会有动力去更新，如果你是在囊中羞涩的话，也可以通过多注册账号来解决这个问题。&/p&&img src=&/v2-b7ba910cf_b.png& data-rawwidth=&1168& data-rawheight=&696& class=&origin_image zh-lightbox-thumb& width=&1168& data-original=&/v2-b7ba910cf_r.png&&
来源：作者：安装avocode前端的基础工作就是把设计师的设计稿还原成前端页面，所以切图是作为一个前端的基本技能。杀敌要有趁手的兵器，而前端一般都是用photoshop,但是这个兵器非常笨重，可能当你笨拙的挥动的它时，敌人已经…
&img src=&/v2-03d664d88d91_b.png& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-03d664d88d91_r.png&&&img src=&/v2-f0f9ba977dbbd7139ebfa729dc311b98_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-f0f9ba977dbbd7139ebfa729dc311b98_r.jpg&&&i&&b&Pen Tool Animation by Gal Shir&/b&&/i&&br&&p&在力力初学 UI 的时候，临摹了很多作品，每次临摹基本都可以分为两个步骤，第一步是用钢笔工具和形状工具把物体勾勒出来，第二步是往形状上填充颜色，然后加一些渐变或者投影。在填充颜色和细节的时候是很享受的，但是在勾轮廓的时候总是很崩溃，画出来的曲线总是不流畅，也不知道问题出在哪里，其实就是钢笔工具没有掌握好。&br&&/p&&p&后来看到一篇外文文章，写的是在 Illustrator 中使用钢笔工具的技巧，才明白了怎样才能用钢笔工具画好曲线，今天结合那篇文章加上我的感悟来聊一聊 UI 设计中的难点，钢笔工具。&/p&&br&&br&&br&&br&&h2&&strong&准备工作，勾选橡皮带工具&/strong&&/h2&&p&&strong&&em&&img src=&/v2-9a4c69ae124f407d910e9_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-9a4c69ae124f407d910e9_r.jpg&&I Design With Code by Chris Gannon&/em&&/strong&&/p&&p&钢笔工具大家应该都很熟悉了，中间一个节点，两边两个手柄，调节手柄的方向可以控制曲线的走向，调节手柄的长度可以控制曲线的弧度。上面的动效设计表达的就是这个意思。&/p&&br&&p&在使用钢笔工具的时候有个能帮助我们的选项，叫&strong&橡皮带&/strong&，勾选上以后，曲线会随着鼠标移动，方便我们预览曲线的走向，看下图，在图片最右边，点击齿轮勾选上：&/p&&br&&br&&br&&br&&h2&&strong&节点手柄方向和位置是画好曲线的关键&/strong&&/h2&&p&接下来就要开始用钢笔工具画曲线了，在画以前我们可以看看高级 UI 设计师们是怎么处理曲线的节点的，看下面两张图：&/p&&img src=&/v2-c15a6dbeedc_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-c15a6dbeedc_r.jpg&&&br&&img src=&/v2-99ca4c6e6c99b2968c75bea_b.jpg& data-rawwidth=&800& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&800& data-original=&/v2-99ca4c6e6c99b2968c75bea_r.jpg&&&br&&p&从图片里我们能发现，这些节点的方向都是有规律的，都遵循了一种秩序，&strong&第一个规律是：除了曲线结束的角，所有节点的手柄不是水平的就是垂直的&/strong&，具体情况要根据曲线的走向，如果曲线横着走，手柄方向就水平，如果竖着走，方向就垂直。第二个规律请看下面的两张图：&/p&&br&&img src=&/v2-4b2fe6d245ceb83fd0c022a_b.png& data-rawwidth=&669& data-rawheight=&312& class=&origin_image zh-lightbox-thumb& width=&669& data-original=&/v2-4b2fe6d245ceb83fd0c022a_r.png&&&br&&img src=&/v2-d78c4cb45e83c53db25f_b.jpg& data-rawwidth=&554& data-rawheight=&579& class=&origin_image zh-lightbox-thumb& width=&554& data-original=&/v2-d78c4cb45e83c53db25f_r.jpg&&&p&图片中红色的圈代表水平的节点，蓝色的圈代表垂直的节点，从图片里可以看出，不仅仅是手柄的方向有规律，节点的位置也是有规律的，&strong&第二个规律就是：所有的节点都在曲线的 “最” 外侧或者 “最” 内侧。&/strong&简单得说就是如果曲线是凸出来的，节点就放在&strong&最&/strong&凸的那个地方，如果节点是凹进去的，节点就要放在&strong&最&/strong&凹的那个地方。掌握了这两个规律就可以轻松画出完美的曲线了。&/p&&br&&br&&br&&br&&h2&&strong&实战演示一下&/strong&&/h2&&img src=&/v2-ea_b.png& data-rawwidth=&1236& data-rawheight=&730& class=&origin_image zh-lightbox-thumb& width=&1236& data-original=&/v2-ea_r.png&&&p&比如说用钢笔工具画上图这个 “ &strong&S &/strong&”&/p&&br&&br&&p&&img src=&/v2-fd65af9a5542c_b.png& data-rawwidth=&1206& data-rawheight=&726& class=&origin_image zh-lightbox-thumb& width=&1206& data-original=&/v2-fd65af9a5542c_r.png&&根据第二个规律，所有节点都在曲线最凸或最凹的地方，在这些位置依次画上节点。&/p&&br&&br&&p&&img src=&/v2-df252de78e592ae3ffd38ff8_b.jpg& data-rawwidth=&1374& data-rawheight=&806& class=&origin_image zh-lightbox-thumb& width=&1374& data-original=&/v2-df252de78e592ae3ffd38ff8_r.jpg&&根据第一个规律，手柄的方向不是垂直就是水平的，鼠标长按钢笔工具，在菜单的最后找到&strong&转换点工具&/strong&，就是图片里 “&strong&T&/strong&” 上面的那个，按住 shift 点击节点拖动，在每个节点上把手柄拖出来，这时候拖出来的两个手柄是一样长的，位置大概正确就行，不用刻意调整。&/p&&br&&br&&img src=&/v2-e7cf7d1ccee2cfb265d6db_b.jpg& data-rawwidth=&560& data-rawheight=&400& class=&origin_image zh-lightbox-thumb& width=&560& data-original=&/v2-e7cf7d1ccee2cfb265d6db_r.jpg&&&p&在把所有手柄拖出来以后，我们开始调细节，还是用转换点工具，按住 shift ，分开拖动每个手柄使曲线吻合。&/p&&br&&br&&p&&img src=&/v2-60b77098aadc46ad8f4e921_b.png& data-rawwidth=&1156& data-rawheight=&670& class=&origin_image zh-lightbox-thumb& width=&1156& data-original=&/v2-60b77098aadc46ad8f4e921_r.png&&所有手柄都调整完成后就大功告成啦！&/p&&br&&br&&br&&br&&p&今天的教程主要讲了钢笔工具的使用技巧，只要熟练掌握了就可以画出世界上任何的造型，再加上颜色和质感，我们就能创造出精彩的设计。一定要多多练习，钢笔工具可以说是基础，但也是 UI 设计中的一个难点，大家加油！&br&&/p&&img src=&/v2-11b3a0c3db58f_b.png& data-rawwidth=&600& data-rawheight=&600& class=&origin_image zh-lightbox-thumb& width=&600& data-original=&/v2-11b3a0c3db58f_r.png&&
Pen Tool Animation by Gal Shir 在力力初学 UI 的时候，临摹了很多作品，每次临摹基本都可以分为两个步骤，第一步是用钢笔工具和形状工具把物体勾勒出来，第二步是往形状上填充颜色，然后加一些渐变或者投影。在填充颜色和细节的时候是很享受的，但是在勾…
&img src=&/v2-831ad2397baaecc302c452_b.jpg& data-rawwidth=&640& data-rawheight=&714& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-831ad2397baaecc302c452_r.jpg&&不难。&br&等我一会儿，组织下语言跟你说。&br&这算我的设计类的处女答，本来觉得答这种问题，要自己做一遍，费时间。（不做的话，也不知道到底能不能出效果。），一看自己竟然恬不知耻的加了个设计师的标签，好吧，就当练手和学习吧。&br&&br&我是用ps做的，其实也不费时间，我想了下，不管用3d建模还是ps，只要注重细节，都会费时间的。&br&&br&用ps的话，知识点主要是剪贴蒙版和图层蒙版。（敲黑板，ps的蒙版很重要。），这个图的主要难点是折页的透视调整。（如果非要考虑透视的精准，还是3d建模吧，ps这种方法不适合你。）&br&&br&&b&1.先用形状工具，把折页的画出来,然后创建剪贴蒙版。&/b&&br&&br&&br&&b&&img src=&/v2-3ba7cece23e3ac24b376b_b.png& data-rawwidth=&1710& data-rawheight=&1034& class=&origin_image zh-lightbox-thumb& width=&1710& data-original=&/v2-3ba7cece23e3ac24b376b_r.png&&2.选张图片，还是剪贴蒙版，挨着不同的图层贴上去。&/b&&br&我随便百度了一张。&br&&img src=&/v2-fd5075f82fbef9_b.png& data-rawwidth=&1812& data-rawheight=&1280& class=&origin_image zh-lightbox-thumb& width=&1812& data-original=&/v2-fd5075f82fbef9_r.png&&大概像这样。&br&&img src=&/v2-ded3addee09f99c95027f61_b.png& data-rawwidth=&1258& data-rawheight=&942& class=&origin_image zh-lightbox-thumb& width=&1258& data-original=&/v2-ded3addee09f99c95027f61_r.png&&&b&3.每个图层把投影加上。&/b&&br&大概像这样。&br&&img src=&/v2-b8e35a527fab3_b.png& data-rawwidth=&1540& data-rawheight=&1118& class=&origin_image zh-lightbox-thumb& width=&1540& data-original=&/v2-b8e35a527fab3_r.png&&然后调下透视。（难点。）&br&不管你是用路径还是套索啥工具，反正把你的要调整的地方选出来。&br&&img src=&/v2-5dc138d70badb214fba6_b.png& data-rawwidth=&1392& data-rawheight=&904& class=&origin_image zh-lightbox-thumb& width=&1392& data-original=&/v2-5dc138d70badb214fba6_r.png&&&br&微调一下就OK啦。&br&&img src=&/v2-975b59fffc1_b.png& data-rawwidth=&1290& data-rawheight=&764& class=&origin_image zh-lightbox-thumb& width=&1290& data-original=&/v2-975b59fffc1_r.png&&然后就是加投影，加高光， 画笔画或者钢笔形状，画个大概的，加图层蒙版，用画笔擦，这样的投影才自然。&br&大概是这样。（注重细节你就画仔细点）&br&&img src=&/v2-d877d4eafa5130bde592e_b.png& data-rawwidth=&1026& data-rawheight=&638& class=&origin_image zh-lightbox-thumb& width=&1026& data-original=&/v2-d877d4eafa5130bde592e_r.png&&把字体排上去就OK啦。&br&&img src=&/v2-294e41fdb0cb787ebae9fc1_b.png& data-rawwidth=&1558& data-rawheight=&992& class=&origin_image zh-lightbox-thumb& width=&1558& data-original=&/v2-294e41fdb0cb787ebae9fc1_r.png&&谢谢。
不难。 等我一会儿，组织下语言跟你说。 这算我的设计类的处女答，本来觉得答这种问题，要自己做一遍，费时间。（不做的话，也不知道到底能不能出效果。），一看自己竟然恬不知耻的加了个设计师的标签，好吧，就当练手和学习吧。 我是用ps做的，其实也不费…
谢邀，这样的海报研究制作手法确实没啥意思，探讨背后想法的价值胜过方法，感谢题主意识到了这一点。&br&&br&&br&==========================&br&这是很有代表性的新锐拼贴设计方式，毕加索老爷子就是个中好手：&br&&img src=&/v2-a22d8a67ca_b.jpg& data-rawwidth=&799& data-rawheight=&1075& class=&origin_image zh-lightbox-thumb& width=&799& data-original=&/v2-a22d8a67ca_r.jpg&&&br&&br&基本思想是有一个要表达的主体元素，找一些不同材质、类型的相关元素，和主体元素打散重构，最后用线和面进行构成上的辅助。&br&&br&这类海报比较常见于潮流艺术、展览、电子音乐，和一些比较新锐的、年轻人喜欢的场合，比如酒吧、时尚品、商超等等。随着互联网的普及，一些banner也越来越多采用这种新锐的风格，并且为动态效果提供了方便，动起来会非常魔性（题主的图其实是个动态海报）。&br&&br&特意按照海报上的内容找了一下，听了一下音乐，果然走的是电子音乐风。&br&&br&&br&&b&【总结一下】&/b&&br&做好这样的海报需要比较强的构成功底，选择与主题相关的元素，控制主体元素与次要元素的位置、比例关系，控制颜色的数量，避免元素过多导致失去焦点。&br&&br&&b&适用场景&/b&：潮流文化、年轻人&br&&br&&b&关键词&/b&：潮、新锐、复古&br&（因为设计手法与上个世纪的新锐潮流设计很像，使用的元素中又有大量的古典元素，所以这种新锐的设计反而有时会有复古的感觉。）&br&&br&&b&配色&/b&：荧光色、鲜艳的颜色、渐变色&br&&br&&b&代表艺术&/b&：立体主义、超现实主义、达达、波普、蒸汽波&br&&br&&b&常用元素/手法&/b&：点线面，石膏像、切割、打洞&br&&br&&br&更具体的做法可以再参考一下苏秋嵘的这篇文章：&a href=&///?target=http%3A///article/sjll/53.html& class=& wrap external& target=&_blank& rel=&nofollow noreferrer&&致那些我爱的拼贴设计&i class=&icon-external&&&/i&&/a&&br&&br&&br&附一些Pinterest上优秀的拼贴作品供参考：&br&首先是同组的系列海报：&br&&img src=&/v2-a7055400bceb31f0aec8cf3e00e9c72f_b.jpg& data-rawwidth=&564& data-rawheight=&797& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-a7055400bceb31f0aec8cf3e00e9c72f_r.jpg&&&br&&img src=&/v2-dce7ed104e7e_b.jpg& data-rawwidth=&564& data-rawheight=&797& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-dce7ed104e7e_r.jpg&&&br&&br&&img src=&/v2-99c713e4be19b9d51f08dc9ff6b5b478_b.jpg& data-rawwidth=&564& data-rawheight=&797& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-99c713e4be19b9d51f08dc9ff6b5b478_r.jpg&&&br&&br&&img src=&/v2-9c0b2cb6fb0cf714dd8507fc_b.jpg& data-rawwidth=&564& data-rawheight=&789& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-9c0b2cb6fb0cf714dd8507fc_r.jpg&&&br&&br&&img src=&/v2-d7f905f99b7fd913c209d2d2ea8ab04f_b.jpg& data-rawwidth=&564& data-rawheight=&779& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-d7f905f99b7fd913c209d2d2ea8ab04f_r.jpg&&&br&&img src=&/v2-f739c38f8ceadc_b.jpg& data-rawwidth=&564& data-rawheight=&797& class=&origin_image zh-lightbox-thumb& width=&564& data-original=&/v2-f739c38f8ceadc_r.jpg&&
谢邀，这样的海报研究制作手法确实没啥意思，探讨背后想法的价值胜过方法，感谢题主意识到了这一点。 ========================== 这是很有代表性的新锐拼贴设计方式，毕加索老爷子就是个中好手： 基本思想是有一个要表达的主体元素，找一些不同材质、类型…
&img src=&/v2-fe97b2c184d_b.jpg& data-rawwidth=&900& data-rawheight=&500& class=&origin_image zh-lightbox-thumb& width=&900& data-original=&/v2-fe97b2c184d_r.jpg&&&p&作为一个重度沉溺在音乐世界中的设计师，我是上班路上塞着耳机，作图的时候塞着耳机，下班路上还是塞着耳机的，其实这样对听力不好。但是一边听音乐一边作图，真的觉得灵感都丰富多了。心情愉快，做出来的图也会更令人满意哦。&/p&&p&所以我是每天都必须打开音乐类APP的人，平时用得最多的两个音乐类APP就是网易云音乐和虾米音乐。很喜欢这两个APP，觉得无论从视觉设计上，还是用户体验上，它们都有可圈可点之处。我认为网易云音乐和虾米音乐的banner设计都比较有设计感。&br&&/p&&p&今天我想和大家简单分析一下，这两个APP的banner设计。主要从构图、字体、配色、装饰这四个方面来分析。以下案例均来自网络，版权归网易云音乐和虾米音乐所有。&br&&/p&&p&首先想和大家简析一下网易云音乐的banner设计。&br&&/p&&p&&strong&1.构图&/strong&&br&&/p&&p&A.左字右图。&/p&&p&左字右图是最常见最容易掌握的排版，中规中矩，不易出错。&/p&&img src=&/v2-0de798315_b.png& data-rawwidth=&658& data-rawheight=&299& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-0de798315_r.png&&&img src=&/v2-5d50ab6b0bb231cedf3e6bb10d204cf5_b.png& data-rawwidth=&658& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-5d50ab6b0bb231cedf3e6bb10d204cf5_r.png&&&img src=&/v2-e717ccc9_b.png& data-rawwidth=&658& data-rawheight=&289& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-e717ccc9_r.png&&&img src=&/v2-ff92ba5dfcba3cbfe2ba9c_b.png& data-rawwidth=&658& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ff92ba5dfcba3cbfe2ba9c_r.png&&&img src=&/v2-a2ae3bca2b_b.png& data-rawwidth=&658& data-rawheight=&308& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-a2ae3bca2b_r.png&&&p&B.左图右字。&/p&&p&左图右字和左字右图差不多，首先要根据素材图片的构图和走向确定图片是适合放在左边还是右边，再做文案的排版。左图右字也是属于比较常规不容易出错的构图。&/p&&img src=&/v2-4b2a518133ace23ff4a7e_b.png& data-rawwidth=&658& data-rawheight=&298& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-4b2a518133ace23ff4a7e_r.png&&&img src=&/v2-ebd3aea88ba156ffedf96baec5c6c91d_b.png& data-rawwidth=&658& data-rawheight=&304& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ebd3aea88ba156ffedf96baec5c6c91d_r.png&&&img src=&/v2-bbc3836aaeb9c1bace4e507_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-bbc3836aaeb9c1bace4e507_r.jpg&&&p&C.左中右构图。&/p&&p&左中右构图。左中右构图一般为左图中字右图或者左字中图右字。这种构图比左右构图版式会丰富点，但是比它们难把握。如果banner上要出现两个人物，比较适合左中右构图。或者想要重点突出人物，也可以把人物居中，把文案放在人物两侧。&/p&&img src=&/v2-891faefe8b455abdf1a40b7_b.png& data-rawwidth=&658& data-rawheight=&305& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-891faefe8b455abdf1a40b7_r.png&&&img src=&/v2-dcbc0_b.png& data-rawwidth=&658& data-rawheight=&299& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-dcbc0_r.png&&&img src=&/v2-bada433efc778_b.png& data-rawwidth=&658& data-rawheight=&299& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-bada433efc778_r.png&&&img src=&/v2-af56bcefcb5_b.png& data-rawwidth=&658& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-af56bcefcb5_r.png&&&img src=&/v2-05bcfb21fa0b72ffb0c9_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-05bcfb21fa0b72ffb0c9_r.jpg&&&p&D.上下构图。&/p&&p&上下构图一般为上字下图。上下构图不好掌握，常见于一个Banner中要出现多个人物，多个人物在左右构图里不好摆放。&/p&&img src=&/v2-eaf903e13_b.jpg& data-rawwidth=&658& data-rawheight=&299& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-eaf903e13_r.jpg&&&img src=&/v2-68a345c0d6c0cf916d770240fbe14b69_b.png& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-68a345c0d6c0cf916d770240fbe14b69_r.png&&&img src=&/v2-1ffb1b87dc7121add20dc18f4c82708b_b.png& data-rawwidth=&658& data-rawheight=&306& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-1ffb1b87dc7121add20dc18f4c82708b_r.png&&&img src=&/v2-b4dec335ea0bfea080cb0_b.png& data-rawwidth=&658& data-rawheight=&304& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-b4dec335ea0bfea080cb0_r.png&&&p&E.文字作为主体居中&/p&&p&图片作为背景起到一个装饰的作用，或者没有图片素材。常见于文案内容比较抽象、不方便或者不需要用到图片素材、不知道用什么图片素材去表达画面内容，没有一个代表性的图片素材作为画面主体的情况。&/p&&img src=&/v2-7eaadae1a5a2f1e_b.png& data-rawwidth=&658& data-rawheight=&288& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-7eaadae1a5a2f1e_r.png&&&img src=&/v2-823fccc526dd257b5fbd7_b.png& data-rawwidth=&658& data-rawheight=&301& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-823fccc526dd257b5fbd7_r.png&&&p&F.不规则构图。&/p&&p&不规则构图最难把握，相对的，最有设计感。不规则构图如果把握得好，版式的丰富会给人眼前一亮的感觉。其实不规则构图也是在常规构图的基础上再做一些变化，万变不离其宗。&/p&&img src=&/v2-8d351b51b35e9b74c481fd24af24f4f8_b.png& data-rawwidth=&658& data-rawheight=&305& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-8d351b51b35e9b74c481fd24af24f4f8_r.png&&&img src=&/v2-43a734d347ad7bd592d2110_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-43a734d347ad7bd592d2110_r.jpg&&&img src=&/v2-c19eaf04a18b381d0484_b.png& data-rawwidth=&658& data-rawheight=&301& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-c19eaf04a18b381d0484_r.png&&&p&&strong&2.字体&/strong&&/p&&p&正确选择字体在banner设计中也是非常重要的，字体的气质和画面的气质要一致，这样画面看起来才是一个和谐的整体。例如，如果画面中的人物是女生，就不适宜用粗犷硬朗的字体，要用能够衬托出主角气质的字体。&/p&&p&字体主要分为两类，一类是系统字体，一类是设计师自己设计的字体，设计师设计字体可以在系统字体的基础上做些改变，或者自己重新设计字体的笔画，但是重新设计会比较费时间。所以要根据工作时间做合理的安排，如果时间紧急，就没必要做字体设计了。当然对于大神来说，做个字体设计是小菜一碟，但是对于我来说，做字体设计还是挺吃力的，还需努力。&br&&/p&&p&网易云音乐作为一个音乐类APP，banner的风格一般都比较文艺，最常见的字体是宋体和细黑体，有时候会根据画面的气质做相应的改变。下面举几个案例。&br&&/p&&p&A.用宋体和细黑体表达文艺、品质感的气质。&br&&/p&&img src=&/v2-5d50ab6b0bb231cedf3e6bb10d204cf5_b.png& data-rawwidth=&658& data-rawheight=&300& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-5d50ab6b0bb231cedf3e6bb10d204cf5_r.png&&&img src=&/v2-a2ae3bca2b_b.png& data-rawwidth=&658& data-rawheight=&308& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-a2ae3bca2b_r.png&&&img src=&/v2-1d80b9f1dcb8a997d194_b.png& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-1d80b9f1dcb8a997d194_r.png&&&img src=&/v2-eca88b514af632b5232fdbd2a60d9b7b_b.jpg& data-rawwidth=&658& data-rawheight=&263& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-eca88b514af632b5232fdbd2a60d9b7b_r.jpg&&&img src=&/v2-c24cb1e6b867d1d00dfd1dc_b.jpg& data-rawwidth=&658& data-rawheight=&301& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-c24cb1e6b867d1d00dfd1dc_r.jpg&&&img src=&/v2-73ee178dc447afb49cf26bf_b.jpg& data-rawwidth=&640& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-73ee178dc447afb49cf26bf_r.jpg&&&p&B.根据画面的气质做相应的选择。&br&&/p&&img src=&/v2-9ce295dbebf03a56ca25e78_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-9ce295dbebf03a56ca25e78_r.jpg&&&img src=&/v2-e717ccc9_b.png& data-rawwidth=&658& data-rawheight=&289& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-e717ccc9_r.png&&&img src=&/v2-bf1eb8e9ff0ec16eccea5985807bcda8_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-bf1eb8e9ff0ec16eccea5985807bcda8_r.jpg&&&img src=&/v2-c6aafbd07f048e98b16302_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-c6aafbd07f048e98b16302_r.jpg&&&img src=&/v2-f19adde4e6ab6cdcbabb543f14d58884_b.png& data-rawwidth=&658& data-rawheight=&301& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-f19adde4e6ab6cdcbabb543f14d58884_r.png&&&p&C.字体设计。&/p&&p&经过设计的字体总是让人眼前一亮，富有设计感。为画面增色不少。&br&&br&&img src=&/v2-cbcdb0749846_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-cbcdb0749846_r.jpg&&&img src=&/v2-a1cbe5447885eae7ac7dbb9_b.png& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-a1cbe5447885eae7ac7dbb9_r.png&&&img src=&/v2-2e4dd573a4e3eeaf47fb9_b.png& data-rawwidth=&658& data-rawheight=&302& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-2e4dd573a4e3eeaf47fb9_r.png&&&img src=&/v2-2ad8a4d9d61b08dcb6a268_b.png& data-rawwidth=&658& data-rawheight=&301& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-2ad8a4d9d61b08dcb6a268_r.png&&&br&&img src=&/v2-af56bcefcb5_b.png& data-rawwidth=&658& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-af56bcefcb5_r.png&&&img src=&/v2-b1dc69557bee77908faa11d631e8aff5_b.png& data-rawwidth=&658& data-rawheight=&295& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-b1dc69557bee77908faa11d631e8aff5_r.png&&&/p&&img src=&/v2-05bcfb21fa0b72ffb0c9_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-05bcfb21fa0b72ffb0c9_r.jpg&&&p&&strong&3.配色&/strong&&/p&&p&配色用得最多的两种方法，第一，把素材黑白化，再根据文案和人物的气质选取一个合适的颜色。第二种方法就是从素材里面直接吸取合适的颜色，再调节饱和度和明度，调出一个基本色，再取基本色的对比色、近似色等等作为辅助色。&/p&&p&下面举几个把素材黑白化，根据文案和人物的气质选取一个合适的颜色的案例。&/p&&img src=&/v2-ef6e0d3c26bbf68115c09f_b.png& data-rawwidth=&658& data-rawheight=&302& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ef6e0d3c26bbf68115c09f_r.png&&&p&黄黑白这种颜色搭配比较经典，容易出效果。素材黑白化之后加入黄色的色块，对比鲜明，具有视觉冲击力，符合文案的气质。&img src=&/v2-b4dec335ea0bfea080cb0_b.png& data-rawwidth=&658& data-rawheight=&304& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-b4dec335ea0bfea080cb0_r.png&&&/p&&p&浅蓝色和黑白搭配。人物素材黑白化处理之后，选用了浅蓝色作为背景色，再调节背景色的饱和度和明度，深蓝色点缀画面。&br&&/p&&img src=&/v2-af56bcefcb5_b.png& data-rawwidth=&658& data-rawheight=&293& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-af56bcefcb5_r.png&&&p&蓝色和黑白搭配。人物素材黑白化处理，可以看到人物的亮部调得很亮，黑色背景突出人物，文案用了蓝色。&/p&&p&下面举几个从素材里面直接吸取合适的颜色的案例。&br&&/p&&img src=&/v2-05bcfb21fa0b72ffb0c9_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-05bcfb21fa0b72ffb0c9_r.jpg&&&p&可以看到人物衣服的颜色主色是蓝绿色和黄色。直接吸取衣服的颜色，加以调节，蓝绿色作为背景色，黄色作为点缀色，整个画面比较和谐统一。&br&&/p&&img src=&/v2-73ee178dc447afb49cf26bf_b.jpg& data-rawwidth=&640& data-rawheight=&371& class=&origin_image zh-lightbox-thumb& width=&640& data-original=&/v2-73ee178dc447afb49cf26bf_r.jpg&&&p&可以看到人物衣服的颜色主色是蓝色和浅蓝色。所以直接用了浅蓝色作为背景色，蓝色作为文案色。&br&&/p&&img src=&/v2-df3eb689c7d349ca07e0_b.jpg& data-rawwidth=&658& data-rawheight=&299& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-df3eb689c7d349ca07e0_r.jpg&&&p&这个案例是吸取了人物头发的颜色，调浅之后作为背景色，调深了作为文案的颜色，再加入浅黄色和白色的色块，整个画面非常文艺和安静。&/p&&p&&strong&4.装饰&/strong&&/p&&p&装饰常见于点、线、面，或者一些手绘的元素等等，在确定基本的构图和配色之后，加入一点小元素和小装饰，会让画面更有细节，更有设计感。&br&&/p&&p&例如下面这个案例，给人物加上一些手绘的小装饰，画面增加了一些轻松、诙谐、可爱的感觉。加什么装饰，要看设计师的目的，而不是盲目地为了加而加，加任何一个元素，都要有它存在的意义。&br&&/p&&img src=&/v2-38eb413da671a16a44959f_b.jpg& data-rawwidth=&658& data-rawheight=&302& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-38eb413da671a16a44959f_r.jpg&&&p&例如下面这个案例，加入了嘴唇的剪影和线框，增强了设计感，线框把文案和人物连接在一起，形成一个整体。&/p&&img src=&/v2-1d244c89c82bb70be87ba58ae659f7a6_b.png& data-rawwidth=&658& data-rawheight=&304& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-1d244c89c82bb70be87ba58ae659f7a6_r.png&&&p&例如下面这个案例，斜线不仅填补了空白，平衡画面，而且丰富了画面。&br&&/p&&img src=&/v2-4b866f645a2_b.jpg& data-rawwidth=&658& data-rawheight=&303& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-4b866f645a2_r.jpg&&&p&下面这个案例也是同样的道理，波浪线和右边的英文字母不仅起到一个平衡画面的作用，还装饰了画面。&br&&/p&&img src=&/v2-ee7d82d8c9abacfe4303_b.jpg& data-rawwidth=&658& data-rawheight=&306& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ee7d82d8c9abacfe4303_r.jpg&&&p&下面这个案例就加入了一些墨迹，渲染了“摇滚”的氛围，同时还起到“点”的作用，丰富了画面。&br&&/p&&img src=&/v2-db0cecbbc47069_b.jpg& data-rawwidth=&658& data-rawheight=&302& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-db0cecbbc47069_r.jpg&&&p&谈完了网易云音乐，下面和大家分享一下虾米音乐的banner设计。虾米音乐的我就不讲那么详细了，其实道理都差不多。下面主要是举例。&/p&&p&&strong&1.构图&/strong&&/p&&p&A.左图右字。&/p&&img src=&/v2-0c7ebebb2c985db65234d_b.png& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-0c7ebebb2c985db65234d_r.png&&&img src=&/v2-0c7efff2e106_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-0c7efff2e106_r.jpg&&&img src=&/v2-45feb0ff71c12dfa5e963ef_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-45feb0ff71c12dfa5e963ef_r.jpg&&&p&B.左字右图&br&&/p&&p&&img src=&/v2-f363b92ea9a9b7d0e28ec2_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-f363b92ea9a9b7d0e28ec2_r.jpg&&&img src=&/v2-c02f93ee3d5610e38eedda_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-c02f93ee3d5610e38eedda_r.jpg&&&img src=&/v2-e937a77e3bb2d3cb1213fa_b.png& data-rawwidth=&658& data-rawheight=&154& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-e937a77e3bb2d3cb1213fa_r.png&&&img src=&/v2-abe3b4cbc2b_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-abe3b4cbc2b_r.jpg&&&img src=&/v2-d4e83d0d9af0ac53b302c9_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-d4e83d0d9af0ac53b302c9_r.jpg&&C.左中右构图&br&&/p&&img src=&/v2-cda43f4a08e0de6eefa945_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-cda43f4a08e0de6eefa945_r.jpg&&&img src=&/v2-bc55b63fcfacbad7b445a_b.png& data-rawwidth=&658& data-rawheight=&150& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-bc55b63fcfacbad7b445a_r.png&&&img src=&/v2-2d65da103a9e7cc8ddcca_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-2d65da103a9e7cc8ddcca_r.jpg&&&img src=&/v2-6e2c80a2edd2af805311_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-6e2c80a2edd2af805311_r.jpg&&&img src=&/v2-ae_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ae_r.jpg&&&img src=&/v2-3f49f85f2aad30aa82625_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-3f49f85f2aad30aa82625_r.jpg&&&p&D.文字作为主体居中。&br&&/p&&img src=&/v2-aeca8ff179deb2b8f6784792_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-aeca8ff179deb2b8f6784792_r.jpg&&&img src=&/v2-67af468b6bcac300f0572bcaa8427ca1_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-67af468b6bcac300f0572bcaa8427ca1_r.jpg&&&img src=&/v2-7b868d8b_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-7b868d8b_r.jpg&&&img src=&/v2-03b2f6e871b6f1a816a6a7e2aa28bfc2_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-03b2f6e871b6f1a816a6a7e2aa28bfc2_r.jpg&&&img src=&/v2-bc900c5167d0_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-bc900c5167d0_r.jpg&&&p&&strong&2.字体&/strong&&/p&&p&A.用宋体表达文艺、品质感、复古的气质。&/p&&img src=&/v2-52f49aaa90e3b0686263_b.png& data-rawwidth=&658& data-rawheight=&153& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-52f49aaa90e3b0686263_r.png&&&img src=&/v2-08acbabd3a38ccb7e82cb5_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-08acbabd3a38ccb7e82cb5_r.jpg&&&img src=&/v2-f68c026afb13637cfb729759_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-f68c026afb13637cfb729759_r.jpg&&&img src=&/v2-73d7f9a669a3ac04308ebbc92ea55a2e_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-73d7f9a669a3ac04308ebbc92ea55a2e_r.jpg&&&img src=&/v2-bc900c5167d0_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-bc900c5167d0_r.jpg&&&img src=&/v2-03b2f6e871b6f1a816a6a7e2aa28bfc2_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-03b2f6e871b6f1a816a6a7e2aa28bfc2_r.jpg&&&p&B.在虾米音乐的banner里面，其实黑体反而是最常见的，大概是因为黑体几乎适合所有的气质，并且适合做标题吧。&/p&&img src=&/v2-35ce529efd94bb8d24e1cc5e3c0a346c_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-35ce529efd94bb8d24e1cc5e3c0a346c_r.jpg&&&img src=&/v2-3f49f85f2aad30aa82625_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-3f49f85f2aad30aa82625_r.jpg&&&img src=&/v2-b2e4baf2d85aa44279cecf_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-b2e4baf2d85aa44279cecf_r.jpg&&&img src=&/v2-37eb1dfef55dfd9e90bf_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-37eb1dfef55dfd9e90bf_r.jpg&&&img src=&/v2-d6417ec8dedbcf968a003e01c8ce537d_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-d6417ec8dedbcf968a003e01c8ce537d_r.jpg&&&p&C.根据画面的气质做相应的选择&/p&&img src=&/v2-7a7268493ffb2f49bf25b0_b.png& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-7a7268493ffb2f49bf25b0_r.png&&&p&D.字体设计&/p&&p&看了一下我收集的案例，发现虾米音乐banner的字体设计比网易云音乐的要少。虾米音乐的Banner主要是运用点线面把画面的版式设计得非常丰富。&/p&&img src=&/v2-ffff7b8dd84feb3f39f2f42ff7bd9002_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ffff7b8dd84feb3f39f2f42ff7bd9002_r.jpg&&&img src=&/v2-4ebc862d8bb431d881ec_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-4ebc862d8bb431d881ec_r.jpg&&&img src=&/v2-d2fb9e00fbea_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-d2fb9e00fbea_r.jpg&&&img src=&/v2-ae8ed41eaa346d8f4d55e256_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ae8ed41eaa346d8f4d55e256_r.jpg&&&img src=&/v2-acdc4cdee490ebb4b5585690_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-acdc4cdee490ebb4b5585690_r.jpg&&&p&&strong&3.配色&/strong&&br&&/p&&p&A.发现虾米音乐非常喜欢把人物单色化处理。&br&&/p&&img src=&/v2-52be057f21fd1d31cb182ec1a4eee0ad_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-52be057f21fd1d31cb182ec1a4eee0ad_r.jpg&&&img src=&/v2-acdc4cdee490ebb4b5585690_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-acdc4cdee490ebb4b5585690_r.jpg&&&img src=&/v2-f68c026afb13637cfb729759_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-f68c026afb13637cfb729759_r.jpg&&&img src=&/v2-6e2c80a2edd2af805311_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-6e2c80a2edd2af805311_r.jpg&&&img src=&/v2-37eb1dfef55dfd9e90bf_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-37eb1dfef55dfd9e90bf_r.jpg&&&p&B.从素材里面直接吸取合适的颜色，再调节饱和度和明度。&/p&&p&吸取衣服的颜色。&/p&&p&&img src=&/v2-4ebc862d8bb431d881ec_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-4ebc862d8bb431d881ec_r.jpg&&吸取衣服的颜色。&br&&/p&&img src=&/v2-ae8ed41eaa346d8f4d55e256_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ae8ed41eaa346d8f4d55e256_r.jpg&&&p&吸取衣服图案的颜色。&br&&/p&&img src=&/v2-290d4a0da1c342efa627933_b.png& data-rawwidth=&658& data-rawheight=&154& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-290d4a0da1c342efa627933_r.png&&&p&吸取衣领的颜色。&br&&/p&&p&&img src=&/v2-c02f93ee3d5610e38eedda_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-c02f93ee3d5610e38eedda_r.jpg&&吸取人物身上披着的布料的颜色。&br&&/p&&img src=&/v2-f363b92ea9a9b7d0e28ec2_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-f363b92ea9a9b7d0e28ec2_r.jpg&&&p&吸取人物衣服的颜色和肤色。&br&&/p&&img src=&/v2-d4e83d0d9af0ac53b302c9_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-d4e83d0d9af0ac53b302c9_r.jpg&&&p&&strong&4.装饰&/strong&&/p&&p&A.点。&br&&/p&&p&通常起到点缀和丰富画面的作用。&br&&/p&&p&&img src=&/v2-dc3eff5632ebdedf14f0bcec1ce5c4fd_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-dc3eff5632ebdedf14f0bcec1ce5c4fd_r.jpg&&&img src=&/v2-ecff8c849a3eaca4dd8adf7dafd14ab5_b.jpg& data-rawwidth=&658& data-rawheight=&154& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-ecff8c849a3eaca4dd8adf7dafd14ab5_r.jpg&&辅助文案起到点的作用，让版式更加丰富。&br&&/p&&img src=&/v2-a2eed105c523d2300983_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-a2eed105c523d2300983_r.jpg&&&p&B.线&/p&&p&通常起到分割、强调、点缀、丰富画面的作用。&br&&/p&&img src=&/v2-e64e23af1ea3cebc85a3a4_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-e64e23af1ea3cebc85a3a4_r.jpg&&&img src=&/v2-6b41f0b7c9e4d61badff7ff223cc7f20_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-6b41f0b7c9e4d61badff7ff223cc7f20_r.jpg&&&img src=&/v2-db47bfbc895c_b.jpg& data-rawwidth=&658& data-rawheight=&154& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-db47bfbc895c_r.jpg&&&p&C.面。&/p&&p&通常起到强调、平衡、丰富画面的作用。&br&&/p&&img src=&/v2-a6207dab7b2bf23c8d98f4e_b.jpg& data-rawwidth=&658& data-rawheight=&153& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-a6207dab7b2bf23c8d98f4e_r.jpg&&&img src=&/v2-0e916c00b058baf8e130b_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-0e916c00b058baf8e130b_r.jpg&&&img src=&/v2-56b79f2c679ddd4c753a4e16f3ad79ab_b.jpg& data-rawwidth=&658& data-rawheight=&151& class=&origin_image zh-lightbox-thumb& width=&658& data-original=&/v2-56b79f2c679ddd4c753a4e16f3ad79ab_r.jpg&&&p&可以看到，一张Banner，不仅仅由点或者不仅仅由线组成，而是点、线、面相互组合，相互平衡，最终形成一个版式丰富的Banner图。&/p&&p&总而言之，看到别人的作品，不要单纯地觉得“哇塞真好看！“就点了关闭键，或者右键另存为之后就再也没有打开过它。我们需要做的是，保存别人的作品之后，要分析别人作品值得我们学习的地方，等到我们设计的时候，要懂得把别人用得好的版式、字体、配色、装饰等等运用到我们自己的设计上，这才是设计师的思考方式。&br&&/p&&p&虽然这只是音乐类的banner ，但是其中的大部分版式设计、对于字体的选择与设计、配色的分析、装饰的应用等等，在电商设计、品牌设计等等其他的平面设计中也会用到。大家在平时的设计中有哪些好的发现和领悟呢？欢迎在评论区留言哦。谢谢大家的支持~祝大家新年快乐！&/p&&p&&b&欢迎关注我的微信公众号哦。&/b&&/p&&p&&b&公众号名称：凉小七&/b&&/p&&p&&b&公众号ID：sunnyxiaoqi597&/b&&/p&
作为一个重度沉溺在音乐世界中的设计师，我是上班路上塞着耳机，作图的时候塞着耳机，下班路上还是塞着耳机的，其实这样对听力不好。但是一边听音乐一边作图，真的觉得灵感都丰富多了。心情愉快，做出来的图也会更令人满意哦。所以我是每天都必须打开音乐类…
&img src=&/v2-f288dedfeaa8_b.jpg& data-rawwidth=&1920& data-rawheight=&991& class=&origin_image zh-lightbox-thumb& width=&1920& data-original=&/v2-f288dedfeaa8_r.jpg&&&p&工欲善其事，必先利其器。Mock up 是设计师经常用来展示给客户看的真实效果图，我们中文称为“融图”，也有人称为“贴图”，客户只看我们的平面设计稿是无法想象出最后实物效果的，而Mock up方便客户更真实了解作品的最终效果，特别是品牌视觉形象如Logo，物料设计，平面广告等，一个好的 Mock up 展示模板，在很大程度上会提升你作品的视觉效果，而且能大大减少提案的时候修改的次数哦！&br&&/p&&p&我个人在做融图的时候分两种方法，一是下载&b&&u&已有的Mock up素材&/u&&/b&，二是自己&b&&u&搜索所需的物料形式，网络图片或者自行拍摄&/u&&/b&，再将自己的设计融入效果图中。第一种方法快速方便，视觉效果很强，缺点是容易撞车，因为网络上的素材大家都有，比较适合初期概念提案使用；如果素材无法满足设计物料的需求，可以使用第二种方法，但较费时费力，优点是目标性明确，也不撞车，适合出版发布或后期概念落地使用。&/p&&p&今天为大家整理的Mock up展示模板素材非常漂亮，为了统一效果我模拟了一套形象出来，仅供各位参考。还有一些收费的 mockup 也非常不错，建议设计师下载收藏。&/p&&p&下面为大家介绍如何使用这两种方式。&/p&&p&&b&【方法一：Mock up素材】：&/b&&/p&&p&操作方式十分简单，第一步，完成自己的设计平面稿&/p&&p&&img src=&/v2-dace00b555b19c095df781_b.jpg& data-rawwidth=&1754& data-rawheight=&659& class=&origin_image zh-lightbox-thumb& width=&1754& data-original=&/v2-dace00b555b19c095df781_r.jpg&&第二步，下载我附件中的Mock up素材，打开.PSD文件，找到图层中logo的链接（如图），双击进去图层，在AI中复制你的设计稿，再粘贴在刚刚打开的图层，调整好大小，Ctrl+S保存。简单两步做出logo激凸效果，是不是简单的吓人？这也是为什么大家都很喜欢用Mock up，因为真的省时省力，效果还不错。&img src=&/v2-be3d54bdebb_b.jpg& data-rawwidth=&2153& data-rawheight=&831& class=&origin_image zh-lightbox-thumb& width=&2153& data-original=&/v2-be3d54bdebb_r.jpg&&&img src=&/v2-0d8e79bbd03e6bfae47e5_b.jpg& data-rawwidth=&1200& data-rawheight=&887& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-0d8e79bbd03e6bfae47e5_r.jpg&&&/p&&p&同样的做法，还有很多其他应用，让你的品牌增色不少，如&b&店面招牌发光字&/b&&/p&&p&&img src=&/v2-babd6f11cef2bdd5f6380_b.jpg& data-rawwidth=&1200& data-rawheight=&816& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-babd6f11cef2bdd5f6380_r.jpg&&&b&产品包装&/b&&img src=&/v2-c867ead278b49b246418_b.jpg& data-rawwidth=&1200& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-c867ead278b49b246418_r.jpg&&&img src=&/v2-08c67e8cbb47a1c02b4bb2_b.jpg& data-rawwidth=&1200& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-08c67e8cbb47a1c02b4bb2_r.jpg&&&/p&&p&&b&logo工艺：&img src=&/v2-afc807aa976e4e88df57a1abff530361_b.jpg& data-rawwidth=&1185& data-rawheight=&838& class=&origin_image zh-lightbox-thumb& width=&1185& data-original=&/v2-afc807aa976e4e88df57a1abff530361_r.jpg&&&/b&&/p&&img src=&/v2-110afdbeff9a8d23f014c4fe_b.jpg& data-rawwidth=&2700& data-rawheight=&1794& class=&origin_image zh-lightbox-thumb& width=&2700& data-original=&/v2-110afdbeff9a8d23f014c4fe_r.jpg&&&img src=&/v2-6e16ca77adc56cd36e654_b.jpg& data-rawwidth=&1200& data-rawheight=&825& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-6e16ca77adc56cd36e654_r.jpg&&&p&&b&杂志封面&/b&&/p&&img src=&/v2-ef8f0b708cb5a_b.jpg& data-rawwidth=&6000& data-rawheight=&4242& class=&origin_image zh-lightbox-thumb& width=&6000& data-original=&/v2-ef8f0b708cb5a_r.jpg&&&p&&b&平面海报：&/b&&/p&&img src=&/v2-8dbd86162adca4f5ee30_b.jpg& data-rawwidth=&1000& data-rawheight=&1000& class=&origin_image zh-lightbox-thumb& width=&1000& data-original=&/v2-8dbd86162adca4f5ee30_r.jpg&&&img src=&/v2-b7277faa8f4ea9ba6060b16aac091770_b.jpg& data-rawwidth=&1200& data-rawheight=&800& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-b7277faa8f4ea9ba6060b16aac091770_r.jpg&&&p&&b&【方法二：自行融图】：&/b&&br&&/p&&p&这个方法对PS的技能要求较高。如果上诉的Mock up没有满足你的设计需求，那则需要自行融图，素材可通过寻找网络图片或者自行拍摄。这里举几个例子给大家参考。&/p&&p&首先，找到合适自己项目需求的物料，例如需要在铝罐上做标签设计，那第一步，则需要找到合适的铝罐形状。找到图片后先别急于融图，先将图片中的杂质修掉，调整好光线，所以这一步的难点在于处理原始图片。&img src=&/v2-c80aeeec1a1000_b.jpg& data-rawwidth=&2988& data-rawheight=&2113& class=&origin_image zh-lightbox-thumb& width=&2988& data-original=&/v2-c80aeeec1a1000_r.jpg&&&/p&&p&第二步，将自己的设计稿复制粘贴后，Ctrl+T调整好大小和透视关系。&/p&&p&&img src=&/v2-ab1aaeb5afb_b.png& data-rawwidth=&1416& data-rawheight=&996& class=&origin_image zh-lightbox-thumb& width=&1416& data-original=&/v2-ab1aaeb5afb_r.png&&第三步，用减淡和加深工具做出光线关系，如果边框太过生硬，可以用模糊工具稍微擦拭标签四周，让标签能更好贴合在铝罐上。&br&&img src=&/v2-7d6aa785cda68e1ec60c2a5a19076a3b_b.jpg& data-rawwidth=&2988& data-rawheight=&2113& class=&origin_image zh-lightbox-thumb& width=&2988& data-original=&/v2-7d6aa785cda68e1ec60c2a5a19076a3b_r.jpg&&&img src=&/v2-c874c3efa959bc_b.jpg& data-rawwidth=&2988& data-rawheight=&2113& class=&origin_image zh-lightbox-thumb& width=&2988& data-original=&/v2-c874c3efa959bc_r.jpg&&第四步，如果觉得黑白颜色无法突出质感，那可以加多这一步，用钢笔将铝罐的形状扣出，再叠加颜色，例如铜色，金色等等，一切根据你的设计需求为主，也可以再叠加多个背景色。这样一张融图就算是做完了。&br&&/p&&p&&img src=&/v2-acc5b018dc3ad_b.jpg& data-rawwidth=&2988& data-rawheight=&2113& class=&origin_image zh-lightbox-thumb& width=&2988& data-original=&/v2-acc5b018dc3ad_r.jpg&&如果你找到的素材上面有其他信息，那只能先用印章工具把东西P干净，其他步骤和之前的一样。&br&&img src=&/v2-18c435b5bdfe_b.jpg& data-rawwidth=&1200& data-rawheight=&883& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-18c435b5bdfe_r.jpg&&&img src=&/v2-abb6fae49_b.jpg& data-rawwidth=&1200& data-rawheight=&883& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-abb6fae49_r.jpg&&&img src=&/v2-e58d1e66d7f7f282d5d480cb408a95ab_b.jpg& data-rawwidth=&1200& data-rawheight=&883& class=&origin_image zh-lightbox-thumb& width=&1200& data-original=&/v2-e58d1e66d7f7f282d5d480cb408a95ab_r.jpg&&&/p&&p&当然，融图只是你提案展示时的一个辅助作用。但是，打好融图技巧的基础，可以大大缩短做提案文件的时间，腾出精力在基础设计部分上，毕竟这才是最重点。&/p&&p&最后，我把平时收藏的一些Mock up素材上传在百度云里，分享给大家下载，希望对大家有用。&/p&&p&&img src=&/v2-957c5d9d7e20bd718b7cd309_b.jpg& data-rawwidth=&1867& data-rawheight=&1240& class=&origin_image zh-lightbox-thumb& width=&1867& data-original=&/v2-957c5d9d7e20bd718b7cd309_r.jpg&&下载链接: &a href=&/?target=https%3A///s/1eSeb7sI& class=& external& target=&_blank& rel=&nofollow noreferrer&&&span class=&invisible&&https://&/span&&span class=&visible&&/s/1eSeb7s&/span&&span class=&invisible&&I&/span&&span class=&ellipsis&&&/span&&i class=&icon-external&&&/i&&/a& 密码: i9pf&/p&&p&一起进步。&/p&&p&共勉。&/p&
工欲善其事，必先利其器。Mock up 是设计师经常用来展示给客户看的真实效果图，我们中文称为“融图”，也有人称为“贴图”，客户只看我们的平面设计稿是无法想象出最后实物效果的，而Mock up方便客户更真实了解作品的最终效果，特别是品牌视觉形象如Logo，…
额...最近忙得差点猝死&br&一打开知乎 竟然有上千条的邀请 吓死我以为我要去拯救地球了&br&&br&正文开始&br&我分析了一下图，如果是用ps和ai，我觉得图层溶解和添加杂色都能达到类似效果.&br&我先说简单一点的溶解。溶解图层的原理就是根据透明度的不同会出现点点。如果透明度为100%溶解模式是没有效果的。&br&先在ai画两个圆，然后剪成一个圆环。&br&&img src=&/v2-5c76d782d97dc1c584a81_b.png& data-rawwidth=&536& data-rawheight=&558& class=&origin_image zh-lightbox-thumb& width=&536& data-original=&/v2-5c76d782d97dc1c584a81_r.png&&填充白色，透明度10%。&br&&img src=&/v2-79c8dcb5e6d28da262ef16_b.png& data-rawwidth=&654& data-rawheight=&698& class=&origin_image zh-lightbox-thumb& width=&654& data-original=&/v2-79c8dcb5e6d28da262ef16_r.png&&&br&然后复制到ps里，图层模式调为溶解，可以调整图层透明度来更改点的数量。（是不是有点看不清？我反正是看不清...放大图？）&img src=&/v2-b62c65cccbb8fff1e1e17_b.jpg& data-rawwidth=&1600& data-rawheight=&1000& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/v2-b62c65cccbb8fff1e1e17_r.jpg&&&br&然后回到ai复制两个圆，做径向渐变。这两个圆渐变都是三个节点，且三个节点都&b&靠近右边&/b&。&br&第一个圆渐变节点透明度0％－5％－10%&br&第一个圆渐变节点透明度0％－5％－0%（这三个节点靠得非常近）&br&&img src=&/v2-7cc3b8bcabd1f9f18d524abb2ca6732c_b.png& data-rawwidth=&1312& data-rawheight=&770& class=&origin_image zh-lightbox-thumb& width=&1312& data-original=&/v2-7cc3b8bcabd1f9f18d524abb2ca6732c_r.png&&&br&然后再复制到ps里，图层模式调为溶解，可以调整图层透明度来更改点的数量。&b&重点啊！&/b&&br&三个圆分别会变成这样。&br&&img src=&/v2-bd270ba8db4a8059af3e_b.jpg& data-rawwidth=&1600& data-rawheight=&1000& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/v2-bd270ba8db4a8059af3e_r.jpg&&然后合在一起，打上字。（细心的胖友发现我打错单词了，我真的是觉得好羞愧，捂脸.jpg）&br&&img src=&/v2-73f28a6d88e56bee8cae70f_b.jpg& data-rawwidth=&1600& data-rawheight=&1000& class=&origin_image zh-lightbox-thumb& width=&1600& data-original=&/v2-73f28a6d88e56bee8cae70f_r.jpg&&做完啦！快吧！easy吧！&br&等我有时间了再来更新怎么用杂色做，会比较复杂...
额...最近忙得差点猝死 一打开知乎 竟然有上千条的邀请 吓死我以为我要去拯救地球了 正文开始 我分析了一下图，如果是用ps和ai，我觉得图层溶解和添加杂色都能达到类似效果. 我先说简单一点的溶解。溶解图层的原理就是根据透明度的不同会出现点点。如果透明…
&blockquote&人啊，终究有一次，会和混合工具不期而遇。&/blockquote&&br&我们打开AI，新建一个800x600的画布。&br&&img src=&/v2-bec59f79f804cf20ad2d1d6b862f5d19_b.png& data-rawwidth=&1366& data-rawheight=&768& class=&origin_image zh-lightbox-thumb& width=&1366& data-original=&/v2-bec59f79f804cf20ad2d1d6b862f5d19_r.png&&&br&我们画出这四个圆&br&&img src=&/v2-baeafd957aabd04a5a24be3_b.png& data-rawwidth=&1348& data-rawheight=&666& class=&origin_image zh-lightbox-thumb& width=&1348& data-original=&/v2-baeafd957aabd04a5a24be3_r.png&&双击混合工具，选取平滑颜色，然后一次点击各个圆。&br&&img src=&/v2-536ea3c0bc065b0c7e91decb1ad54c91_b.png& data-rawwidth=&1366& data-rawheight=&768& class=&origin_image zh-lightbox-thumb& width=&1366& data-original=&/v2-536ea3c0bc065b0c7e91decb1ad54c91_r.png&&&br&用钢笔画出一条路径&br&&img src=&/v2-163bb5a5a345a3491f0c_b.png& data-rawwidth=&1348& data-rawheight=&666& class=&origin_image zh-lightbox-thumb& width=&1348& data-original=&/v2-163bb5a5a345a3491f0c_r.png&&&br&框选这两个物体，执行对象—混合—替换混合轴，效果就出来了。&br&&img src=&/v2-982ffdd5fa50ccac5ad52cda8461de83_b.png& data-rawwidth=&1348& data-rawheight=&666& class=&origin_image zh-lightbox-thumb& width=&1348& data-original=&/v2-982ffdd5fa50ccac5ad52cda8461de83_r.png&&
人啊，终究有一次，会和混合工具不期而遇。 我们打开AI，新建一个800x600的画布。 我们画出这四个圆 双击混合工具，选取平滑颜色，然后一次点击各个圆。 用钢笔画出一条路径 框选这两个物体，执行对象—混合—替换混合轴，效果就出来了。
&b&软件AI&/b&&br&&b&一、画圈 &/b&&br&a、b的直径为c的半径&br&&b&&img src=&/v2-f941a2cafee8c44c2b975145afb3187b_b.jpg& data-rawwidth=&724& data-rawheight=&575& class=&origin_image zh-lightbox-thumb& width=&724& data-original=&/v2-f941a2cafee8c44c2b975145afb3187b_r.jpg&&二、形状生成器&/b&&br&&b&&img src=&/v2-5c6d89c84b9e02740ececc2_b.jpg& data-rawwidth=&765& data-rawheight=&594& class=&origin_image zh-lightbox-thumb& width=&765& data-original=&/v2-5c6d89c84b9e02740ececc2_r.jpg&&三、旋转复制&/b&&br&以b圆心为旋转中心，当然那个装饰圈a也可以跟着复制&br&&b&&img src=&/v2-99fe642f6b7d25078e0fed1e9adc9143_b.jpg& data-rawwidth=&725& data-rawheight=&609& class=&origin_image zh-lightbox-thumb& width=&725& data-original=&/v2-99fe642f6b7d25078e0fed1e9adc9143_r.jpg&&四、上色&/b&&br&可以用混合模式也可以把图形分割为几个部分填色&br&&br&&b&最后&/b&&br&上面的角度可以完成后旋转下，也可以再开始时以b圆心旋转a、c&br&&img src=&/v2-81b042cd07e38c446f27b8d577abf735_b.jpg& data-rawwidth=&1096& data-rawheight=&723& class=&origin_image zh-lightbox-thumb& width=&1096& data-original=&/v2-81b042cd07e38c446f27b8d577abf735_r.jpg&&以上
软件AI 一、画圈
a、b的直径为c的半径 二、形状生成器 三、旋转复制 以b圆心为旋转中心，当然那个装饰圈a也可以跟着复制 四、上色 可以用混合模式也可以把图形分割为几个部分填色 最后 上面的角度可以完成后旋转下，也可以再开始时以b圆心旋转a、c 以上
已有帐号？
无法登录？
社交帐号登录
5648 人关注
145 条内容
123 人关注
4180 人关注
865 条内容
270 人关注
169 条内容