:PhotoshopH5广告设计卢博 pdf下载

基本信息

书名：Photoshop H5广告设计

定价：79.80元

作者：卢博

出版社：清华大学出版社

出版日期：2019-04-01

ISBN：9787302517924

字数：

页码：312

版次：1

装帧：平装

开本：16

商品重量：0.4kg

编辑推荐

内容提要

菜鸟如何快速成为H5广告页面设计高手？如何用H5广告页面征服上司和客户？如何零基础制作出专业、漂亮的H5广告页面？《Photoshop H5广告设计》将按照两条线路帮助读者精通Photoshop H5广告设计：

一条是横向案例线，通过20多个经典案例，包括产品推广、活动推广、互粉增粉、人才招募、企业宣传、节日活动、会议邀请、喜庆请柬等，从零开始学习制作H5广告效果。

另一条是纵向技巧线，讲解了配色常识、文字排版、版式布局等核心技能，帮助读者读懂、玩透H5广告设计。

《Photoshop H5广告设计》适合H5页面广告设计者、新媒体广告设计师、移动互联网广告设计人员等阅读。

目录

作者介绍

卢博

毕业于广州美术学院，专业广告学出身

曾于佛罗伦萨美术学院（意大利）进修

站酷网 H5 设计师，亚洲CI网、红动中国 H5 设计师

擅长新媒体、H5、APP界面设计，如H5界面、H5广告、直播广告、公众号、小程序等广告

文摘

4.1 H5页面的版式设计

如何制作出美观、酷炫的H5作品？除了简单的图文搭配，以及一些元素的添加修饰外，整个页面的版式设计也是非常重要的。我们详细了解一下如何对H5页面的版式进行专业的设计，制作出吸引人眼球的H5版面。

4.1.1 H5版式设计的原则

在大多数的H5设计工具中，不论是移动端的小程序、APP上的H5设计工具，还是PC端的网站H5设计工具，所制作的H5页面都是适合在移动手机端屏幕展示的。

版式设计要考虑的因素是非常多的，例如手机屏幕适用H5页面的尺寸，以及如何在有限的屏幕中对所需传达的内容进行排版设计等。详细介绍H5版式设计的原则。

1. 内容分类整理

对H5页面进行设计排版时，对需要向用户传达的信息进行分类整理，把相关的信息归类在一起，排版时将相关的元素进行整体排列，可以对用户在观赏H5页面时的逻辑思维提供信息组织帮助，提高用户信息的获取量。图4-1所示为对页面信息进行的分类整理。

图4-1 信息分类整理

2. 元素对齐排列

将页面元素进行对齐排列，为的是能够让整个页面中的元素形成整体视觉效果。对齐排列作为常用的排版方式，能够使页面整体元素具有条理性，形成一个统一的整体，建立一种清晰的视觉效果。

图4-2所示为对页面元素进行对齐排列的效果。

图4-2 元素对齐排列

3. 布局重复交错

重复是指在H5页面布局中，对相关的元素、图像或文字使用相同的属性设计，使其形成一种视觉上的重复；而交错的应用就是为了避免生硬的重复，导致整个页面过于死板，如图4-3所示。

图4-3 对页面进行重复交错

4. 关键点的对比布局

在H5页面制作时，图文元素会存在主次之分。作为主要信息存在的元素，在页面中为了吸引用户眼球，就要对元素进行着重设计，使得主要元素与其他元素呈现完全不同的效果，形成对比性，有助于用户的阅读逻辑性。

如图4-4所示，这是在页面中突出重点信息的版式效果。

图4-4 突出重点信息

4.1.2 H5页面的网格设计

网格设计，又称为“网格系统”，起源于20世纪初的西欧国家，完善成熟于20世纪中期的瑞士。

早对这个概念进行阐释的是瑞士的约瑟夫??米勒-布罗克曼，其于1961年出版的《平面艺术家及其设计议题》一书，使网格设计成为了平面设计史上的先驱。

的版式设计决定了整个作品的基调以及美观程度，在形成良好的视觉信息传递时，也能够很好地进行传播。但不是所有的行业企业都会为自己的品牌聘请一个设计师，接下来便带大家学习如何在零基础的情况下掌握网格设计。

网格的运用在设计领域可以说是非常普遍的，在所有的常用绘图软件中都必然存在着网格工具，例如，图4-5所示为Photoshop CC 2018绘图页面中的网格工具。

图4-5 Photoshop CC 2018绘图页面中的网格工具

1. 设计原理

网格设计的风格形成，早是对建筑的应用，其风格特点是通过严格的数字比例关系进行运算，再把版心划分为无数统一尺寸的网格。将版面分为若干个均匀的格子，形成网状式的网格，将图片与文字置入其中，使版面具有的节奏化，从而形成一种优美的韵律，但也会使版面产生呆板的负面影响。

网格为所有的设计元素提供了一个结构，可以使设计创造更轻松、灵活。采用这种方法设计的页面有着非常好的比例感和秩序感，同时也能形成很好的准确性与严密性，帮助设计师设计出美观、大方，而又实用的版面。

图4-6所示为现代杂志中运用的网格设计。

图4-7所示为网页中运用的网格设计。

序言