PS教程 H5手绘专题运营设计.docx

PS教程手绘与实景打造H5运营专题【写在前面什么叫H5专题】：简单说来，H5专题是现在在移动端（手机、Pad）上面的一种推广形式。可能是游戏形式，也可能是一种翻页的故事形式，平时大家也可以在微信朋友圈里看到很多这种H5专题的推广。这种形式比较活泼生动、比较利于传播及推广产品。【内容概要】：今天给大家介绍一个生活服务类的H5专题从前期整个思路推导，到整个专题的搭建过程。主要知识点有三个方面：1. H5页面构成2. 素材的再加工3. 气氛营造。4.PS+AI实际操作【需求原型】：不可否认，在所有项目的最开始，设计师需要解决的问题就是理解项目与需求。下面这张图就是产品经理给到UE设计师的活动策划，大家可以看到这个活动策划是纯文字的。【最终效果】：设计师需要根据这些文字构建起画面可以通过手绘的形式，也可以通过口头描述的形式。再把它反馈给我们的产品经理，综合交流、沟通，最终产品经理和UE设计师达到意见的一致。我们来看最终效果：【思维分析】：简单分析一下该H5专题：1.H5的交互形式其实非常简单，从下往上翻页。它的目的是给用户带来一个故事性的小专题。2.使用的设计语言主要是手绘风格。在手绘风格的同时结合了一些实景，整体的风格偏怀旧，是一个情感化的气质。3.理想和现实的落差感对比。可以看到，过去的画面是非常斑斓的，整个形式比较梦幻。而现在整体的色调和风格是非常暗淡的，正好体现了我们现实生活的平淡、无奈的感觉。通过这种配色以及视觉元素上的对比，给用户带来一个更好的落差感。由此延伸一下，一个运营设计师平时在做项目时候的思路与重点，主要归结为以下三点：营造出专题氛围、突出主题和卖点、美化视觉。再回归到此次的H5专题设计：1.根据与产品经理的沟通及主题的理解，推导出这次主基调的关键词为温馨、走心；视觉落差、梦想与现实的对比、虚幻色彩等；2.根据主基调与关键词，推导情感化的表达形式为手绘；推导落差感的表达形式为色彩的对比、虚实的结合；3.产品与品牌植入为：hao123及生活服务类的卖点；【视觉规划与设计输出】：进入了视觉规划阶段：要解决的几个问题：场景的设计、素材选择、色彩选择、页面布局与素材处理1.场景设计我们这次的专题策划，主要是强调了理想场景和现实场景的对比落差，这个是我们专题的重点，结合我们H5这种移动端的操作习惯，那么使用这种上下翻页营造出前后对比，可能是比较好的处理方式。它能更好的把梦境和现实两个场景比较饱满的这种用视觉来做出对比感，所以我们最后在场景设计上选用这种全屏的、上下翻页的这种形式。2.主题素材选择主题素材也是构成我们整体视觉风格非常重要的一环，根据之前的设想，我们这次的视觉风格还是需要营造一个对比落差的感觉，所以在素材的挑选上也要遵循这种对比落差的感觉，来贯穿于我们整个的视觉风格。因此，在理想状态，我们选用了这种口红、高跟鞋、爆米花等；现实状态选用了类似公交卡、闹钟、搓衣板等和生活息息相关、非常平庸的物品来营造我们平淡的现实生活。一方面，通过这种对比形成一系列的落差，给用户一些理想和现实对比的暗示。另一方面，也是暗含小心机，如之前说过的也需要在素材的选用上结合产品与品牌（此处为hao123）的特色、卖点，其实爆米花替代了hao123服务的特价电影票，漂亮的高跟鞋和口红正好针对一些女性的O2O上门服务，还有公交卡正好映射代驾、租车等服务，搓衣板正好映射上门洗衣的O2O服务。如此一来，给用户软性呈现的同时，达到推广产品的效果。同时，为了烘托温馨的气氛，辅之以水彩、手绘的纸飞机、邮戳等这类轻松、理想梦幻的元素。3. 色彩选择要点：体现品牌色；营造气氛。体现品牌色：hao123的品牌色为绿色和橙色。所以在此次设计中选取了一定量的品牌绿来融入界面，作为整个专题视觉风格的一些点缀。营造气氛：使用一些瑰丽飘渺、饱和度非常高的色彩来体现理想的画面，使用一些暗淡沉郁的、饱和度偏低偏灰的色彩来体现现实的画面，从色彩上亦形成一定的对比。4.页面布局在页面布局方面需要大家注意几个问题，由于移动端页面主要以竖版构图为主，而且它因为面积比较小所以承载的内容是有限的。我们这次页面的规格是这种竖长的720X1280分辨率，并且由于我们这次的专题是一个从下往上翻页的一个交互形式，所以我们把这个整个页面一个长页面分成三等份，以下面这个面积为主要的视觉焦点的一个基点，由此发散出这个三角形的位置，是整个页面的一个主画面的主视觉区域。其他元素从主视觉区域的中心向外发散，在文字部分由于可能我们这个专题是一个情感专题，它的文字使用的是一种手写型的文字，所以可能竖排版更适于它的情感化，或者说更适于我们这种竖版的平衡的构图形式。5. 素材处理把素材活用，让素材更好地为作品服务，是素材处理的一个重点。为什么要进行素材改造呢？主要是为了解决两个问题： 一是版权问题。我们有的时候找的图片可能会涉及到版权，比如一些人物、一些商品。我们在用这些素材时候，就要对它进行一些改造、优化。二是素材如果直接用的话可能并不能为我们的作品服务，比如我们这次想用一些比较旧的颜色，比较粗糙、比较沧桑的这种感觉，直接用这个图片可能是非常新非常阳光的一个感觉，那我们就需要把它进行一些处理，让它服务于我们整体的风格和气质。来看两个案例，首先以下图中的闹钟为例，简单几步：第一步：用AI对闹钟的形状重新绘制一遍；第二步：把实物的照片对它抠图抠出来；第三步：给它实物做一些色彩上的调整，如饱和度、灰度；第四步：对实物局部地区进行一些艺术的加工，如色块化、笔触感处理；第五步：将处理好的实物图像与手绘的图像结合。完毕，产出了针对整个设计风格进行再加工的一个素材，有没有觉得很神奇，总之变化还是挺大的吧。再来一例，简单说一下处理过程。该图片的原图也是有些不合适的地方，第一个问题是它是需要版权的，下载不到它的原始图片，第二是他的一些动态我只需要一些局部，所以我就把这个局部描绘出来，结合了一些电脑的实景，让他的手绘和实景相结合，这样也是一种比较独特的视觉风格。第一步：使用AI进行整体描摹（在手绘的时候，一般都会选择AI这样的矢量媒介进行素材储存）注意：使用画笔工具，选择比较倾斜的笔触，这样比较像手绘的效果。描绘比较放松、自由，适当断开，比较有手绘与文艺的感觉（学过速写的同学知道，这个比较像工笔速写的效果）。注意外轮廓与细节部分的粗细对比，细节的地方可以使用相对较细的笔触，细笔触与粗笔触的结合使得画面更加生动富有变化。适当刻画一些细节，注意把握节奏感，疏密有致。第二步：选中所有的描摹线条，选择对象-扩展外观，就使得所有的线条形式变成了体积形式。command+G键，把所有的图形打包编组。第三步：在PS中，将绘制的图像与实物电脑相组合，在细节处理上，把人物与电脑重合的地方填充上颜色，在咖啡杯里填上一个黑色与电脑屏幕实体相呼应等。这种手绘+实物的画面，就能很好地展现现实与理想的矛盾感，也比较耐看。第四步：最后，将前期的方法论与素材进行适当地组合，一层层叠加调整即可完成。在720X1280分辨率的画布上填充白色在白色的基础上加上一层简约风格的纸张的肌理与材质；将素材层（主视觉层）放置在之前设想的视觉焦点位置，文字层放置在左上位置（竖向排版，手写体，重点文字放大加粗）；另外，增加一些装饰来衬托与丰富画面装饰的水墨进行去色处理并放置在