网络广告设计与制作ppt课件.pptx
网页广告设计与制作,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,01 抄现实,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,1 说说,就是抄袭现实中的物体,简单意义上说就是眼前所能见到的一切事物，正如你现在手中的书本、手指、桌上的台灯、水杯。这些生活中的事物通常具有丰富的形态和其延展的情感意义，我们可以利用它们来表达一些特定的主题，所以当我们接到一个要表现的主题时可以通过它的生活原貌来激发灵感。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,2 想想,抄现实的三步骤：减法、分块、加法,让我们暂且抛开主题，就一个物体可以如何变成网页而言，它有两个关键点：第一是现实事物转换成网页载体过程中的形态取舍，如何让观者既能辨识出抄袭的物体，又能够给未来信息留下足够的自由排版空间；第二是信息内容与形态载体的结合和排版，如何让信息内容完整的、有条理的排布到形态载体中。,选择物，是对主题视觉表现的选择。主题有抽像和具像之分。具像的主题一般比较好把握，如棒球比赛，我们很自然地选择棒球或球场做为主视觉。如果一些间接或者抽像的主题（比如安全选择盾牌、压力测试选择压力表等），则需要我们发挥一定的想象。下面我们来一起看看这一颗棒球的网页变形记。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,在还未翻到下一页前，你可以想像一下，假如这个棒球是一个网页，它会是什么样的？你会保留它的哪些特征让它看起来依然是一个棒球而非篮球？你会如何让它的形态和内容结合？你会如何利用它的形态关系使你的内容更有层次？给自己一分钟时间，不许翻页剧透。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,为了不使形态干扰到网页内容的表现，通常情况下，我们会先对物的形态进行简化，使其在保留特征的同时更适合之后的内容安置。简化步骤有两个：特征的提练。如案例中的棒球，它的特征有两个：一个是圆形的轮廓代表是一个球体；另一个是红色的缝线，代表它是一个棒球而非足球或篮球。审查删除重复的描述。特征提炼后，在保留棒球特征的情况下，我们选择去掉其中一根缝线，为信息腾出更多可操作的空间。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,分块便于根据物的形态对网页的信息内容进行规划。主要有三个关键点：对信息进行消化；充分理解信息对之后的排版和信息调整有很大的帮助。也可以和需求方进行沟通，对信息进行微调或收纳。在吃透信息后，我们就可以开始正式的分块，分块是一个逐层深入、由粗到细的过程。分块完成后，我们结合造型进行一定的信息和造型微调。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,进行加法前，网页的大致雏形已经出来了，之后加法的工作主要有 3 个。具体内容的填充。气氛和视觉的补充。可以让整体效果更真实，如前景的人物添加棒球的主题更明确、运动感更强。特征的还原和细节补充。不得不承认信息高于装饰，在确保信息的完整性后，我们在不干扰信息呈现的情况下还原一些原来删去的细节，如背景缝线的还原，选择了低透明低饱合的浅灰色，让棒球更真实。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,抄现实的过程是利用现实物件为原型来装载网页的信息内容。“抄现实”就像旧公寓改造，倘若我们将“抄现实”想象成一个旧公寓改造工程，假定我们和房子原主人有着不同的生活习惯，我们就需要拆墙，重新划分功能区，重新装修装饰，正如我们“抄现实”的方法：减法、分块、加法。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,3 看看,抄现实让网页主题一目了然、不言而喻,下面我们通过“减法、分块、加法”这三个步骤来欣赏和分析一些网页案例。在关注大的方法的同时，也可以学习它们的创意思路以及对于细节的处理方式。我们还可以关注近似主题的不同抄袭目标，以及相同抄袭目标的不同表达方式。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,在还未翻到下一页前，你可以想像一下，假如这个棒球是一个网页，它会是什么样的？你会保留它的哪些特征让它看起来依然是一个棒球而非篮球？你会如何让它的形态和内容结合？你会如何利用它的形态关系使你的内容更有层次？给自己一分钟时间，不许翻页剧透。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,这是一个韩国甜椒闲暇活动大盘点页面，PMANG 在节日里将公司各种游戏活动齐聚一堂为玩家献上了节日大餐，与上个案例一样也选择了节日聚餐的概念，但由于信息量的不同，这个网页选择了盘子做为活动内容的载体，近似的主题近似的抄袭对象却呈现了不同的视觉结果。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,这是韩国 C9 的圣诞节专题，同样是节日，这里选择了祝福的联想，利用信件来承载和传达活动信息。主视觉是一个红色的信封套，内容则通过拆叠展开的信纸来承载。信纸的延续性设计良好，信息承载量大。LOGO 位置摆放相当精巧，圆形的 LOGO 造型正好替代了西方信件的封口油泥，西式的祝福气氛得到了点睛。红绿的色彩搭配契合主题。抄现实的整体表现延续性好并且直观。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,这是一个 DNF 的黑钻推广、订制和续费的页面，黑钻是针对 DNF 的 VIP 用户开设的游戏特权图标，在这里，作者选择了黑钻的形态作为整体的网页视觉载体，主题明确而直观。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,这是一个赛车游戏的活动专题，这个专题由多个活动共同组成，它通过参加活动获得积分，积分累计由少到多，并且在不同的积分结点都有不同的奖品，页面利用赛车游戏的赛道将整体活动贯穿一体，并通过赛道表现了获得奖品的先后历程。很好地将虚拟的里程碑概念通过现实赛道的方式表现出来，既配合了活动内容又结合了游戏主题的表现。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,一个足球主题页面，选择的对像近似先前案例中的棒球，但由于内容的不同，信息排布的方式类似于之前的节日案例，抄袭对象的选择不仅需要考虑到主题的联想，也要同时关注信息的承载与后期的排版，这个案例就很好地利用了足球的实体造型，完美地安放了五个活动。视觉完整，主题突出。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,之前的案例基本只有一个核心活动，而这个案例则是由两个相对并列的活动组成：一个是以游戏筹码桌为主视觉的部分，是一个抽牌得积分筹码的活动；另一个是以手持写字板为主视觉的是一个签到活动，通过签到获得积分和奖励。它通过两个关联的承载体将两个活动串联在一起。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,这是一个解除密码锁的活动页面，只要打开仓库的大门，成功解除密码锁的玩家就可以获得奖品。这个页面的抄现实表现主要集中在仓库大门和解密板上，大门的平面为信息排版提供了空间，钢铁的质感对应科技化的密码锁，看起来真实并充满挑战，门把手、开门转盘、压力表等元素的加入让大门的表现更加生动。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,这是一个抽奖活动，但作者将它依附于拆弹情境。题材与上个主题近似，但由于 AVA 是一款射击游戏，所以这里的解密选择了抄袭拆弹现场的视觉表现。雪地里冰封的定时炸弹，红色的面板显示着剩余的时间，右边则是 2 选 1 的红蓝按钮，点击其中一个炸弹可能会拆除或者爆炸，如果成功拆除就能获得奖品。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,1 说说,剑灵武神塔介绍专题、QQ 西游安全中心,下面我们来自己动手试一试。为主题选择合适的“抄现实”目标，并对其进行特征提炼，把握内容排版与抄袭目标的关系，并注意细节搭配，让整体更加生动。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,一、需求分析2. 排版预想为了更好地表现主题并结合塔的造型，我们选择使用抄现实的方法，并计划利用塔的造型来装下这些信息。但如果将塔的造型与内容相结合我们将面临三个问题：一、保留哪些塔的特征？二、文字内容放在哪？三、如何梳理几块内容的层次？,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,一、需求分析1. 主题是武神就上 100 层，“武神塔”是剑灵游戏测试新版本中推出的一个特色内容，它是一个比武场，由底层到高层，难度逐层增加。页面的内容主要分为三部分：视频、武神塔副本的介绍以及七层塔中的 BOSS 和掉落的宝贝的介绍。需求方希望内容的呈现能够结合武神塔的造型进行表现。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,一、需求分析3. 现有素材大概理清思路后，我们来看看现有的素材。都说巧妇难为无米之炊，若着实无米，那就得自己种！开个玩笑，不过对于网页设计来说，真正对到枪口上的素材并不多，许多时候咱都得变着法子玩。一张武神塔的外景，拿到素材的时候它的像素并不高，只能暂时考虑作为背景的一小部分，如果要将内容放置在塔内的话，这个素材的编辑难度比较大。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,武神塔另外还有两张武神塔的内景截图，图片质量不错，但似乎对这个创意起不了太大的帮助，姑且先留着。个活动串联在一起。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,BOSS下面是每层塔内的 BOSS 截图，这套图一共有七张，由于是游戏过程中的截图，所以人物偏小，质量也不如原画和正式输出的 3D 模型高，而这些个 BOSS 又是内容中必需呈现给玩家的，所以如何扬长避短又是一个难题。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,人物剑灵现有的游戏素材大致可以分为三种：3D、2D、GIF 的恶搞 Q 版小动画。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,4. 总结通过对主题、内容、素材的了解，我们就有了大概的构思。我们将通过一个简洁的塔造型去承载整个信息内容，并配合以 Q 版有爱的小动画形像活跃视觉气氛。每层塔的内容安置在独立的单层塔中，并通过七层塔的组合构成一个高耸入云的塔型。在选定方向的同时也带来一个问题，简约的风格和必须出现的 BOSS 截图风格如何匹配？精度和风格之间的差异都会造成视觉的不统一。如果一时找不到答案，我们暂时把这个问题放在脑子的待处理区。策略从来不是万全的，在大方向确定之后，许多细节问题是在设计中一步步求解的。当然，这个方法并不是最好的，但却是我们经常遇到的情况，天时地利、情投意合的情况是少有的，如果要求以万全的策略才开工，那时间和环境都是不允许的，就像那句话怎么说来着，爱情就像一条河，谁不是摸着石头过河呢？所以在大方向确定后，我们就开始尝试动手了。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,人物剑灵现有的游戏素材大致可以分为三种：3D、2D、GIF 的恶搞 Q 版小动画。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,游戏中，武神塔拥有它复杂的飞檐造型和层次丰富的质感纹理，每层有大小不一的拱门。为了能给信息内容足够的空间，我们将复杂的飞檐造型进行归纳，并暂时去掉了拱门，这样我们也会比较明确信息内容的位置。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,接下来我们就需要开始对内容进行分块，我们知道内容大致分为三块：视频、副本介绍、七层塔。由于七层塔的数量较多，为了能使它与介绍和视频内容有区别并保持七层的统一性，我们将它们进行颜色的区分，并在位置上依照塔的物理顺序，由下而上从一层到七层。由于内容较长，每层塔可以做成收纳的形式，以便控制长度。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,将拱门重新安置在分层塔的左侧，用来安放每层比武塔的主BOSS，要突出的塔顶加入主视觉调节气氛，在背景加入其他建筑造型。并将主视觉的内容塔置于一个高耸入云的角度，体现了“是武神就上 100 层”的概念高度。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,回头说说先前留下的那个风格匹配的顾虑。如何降低写实的游戏截图与相对简约风格的网页的冲突感。浏览截图我们发现，素材都是塔内的场景，并且基本上是平视的角度，于是便在画面上开了一道立体的门，将场景安置在门后，一致的视角可以增强画面的统一感。门的微写实表现对截图和塔的两种风格进行了中间过渡，减弱了二者冲突感。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,一、需求分析1. 主题关于安全这个看似虚拟的形容词，我们可以做怎样的联想？这里我们选择了盾牌，它有防御的涵义，也有一定的空间可能性给我们安置内容。2. 排版预想在我们大致浏览了这个需求后，会发现它的核心是四个最重要的安全“铁防”，然后是它的 SLOGAN 及概述，以及四个拓展功能按钮，所以可以大致设想我们需要一个大的区域和三个小的辅助区域。,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,运用上图的形状,在原基础上进行设计,可运用加法减法 分块的手法,设计一个网页宣传海报,题目自拟!,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,网页广告设计与制作,广告设计与制作课程连文秀,WEB DESIGN,
