Photoshop网页设计从入门到精通

作品简介

本书由一线讲师和设计师倾力编写，系统地讲解了在网页设计、网页界面设计工作和应用中的各类设计技巧和应用技巧，对于目前互联网世界中所倡导的“体验为王”的思考方式也进行了探索，并通过实本书由一线讲师和设计师倾力编写，系统地讲解了在网页设计、网页界面设计工作和应用中的各类设计技巧和应用技巧，对于目前互联网世界中所倡导的“体验为王”的思考方式也进行了探索，并通过实际的案例和设计技巧将其融入实际的应用之中。

作者：李彦广，焦元奇

作品目录

• 前言 Preface
• 本书可提供100个重点疑难问题的解决方案
• 第01章 Photoshop CC设计网页的4项基本常识
• 1.1 网页设计师必知的Photoshop CC软件4项新功能
• 1.1.1 图像的无损缩放与清晰化处理
• 1.1.2 清除拍摄抖动对照片的影响
• 1.1.3 圆角矩形及CSS复制
• 1.1.4 多重形状和路径选择
• 1.2 网页设计中常用的尺寸
• 1.3 网页图像的4项基础知识
• 1.3.1 网页图像的大小
• 1.3.2 网页图片格式
• 1.3.3 Web图像优化的3个关键点
• 1.3.4 网站效果图的切图
• 1.4 图像颜色模式
• 1.4.1 网页设计应知的4种色彩模式
• 1.4.2 色彩模式的选择
• 第02章 网站策划必知的6项要点
• 2.1 网站的主题一定要明确
• 2.1.1 按照用户类型确定表现形式
• 2.1.2 明确的主题清晰的内容
• 2.2 分析背景材料3种途径
• 2.2.1 网站所属行业的资料分析
• 2.2.2 同类网站及竞争对手网站的分析
• 2.2.3 背景资料的自我积攒
• 2.3 网页设计的本质
• 2.4 用户体验设计4个要点
• 2.4.1 简单
• 2.4.2 易用
• 2.4.3 信任
• 2.4.4 可访问性
• 2.5 达到“设计”目的的5个要点
• 2.5.1 网站策划书
• 2.5.2 网页界面设计的4个切入点
• 2.5.3 导航的设计
• 2.5.4“宣传口号”的作用
• 2.5.5 网页内容安排技巧
• 2.6 网站文案写作的4项技巧
• 2.6.1 良好的标题
• 2.6.2 清晰的结构
• 2.6.3 包含一定的情感
• 2.6.4 用户可以得到的好处
• 第03章 网页中的6种主要元素
• 3.1 网站标志
• 3.2 标题
• 3.3 副标题
• 3.4 视觉焦点
• 3.5 营销文案
• 3.6 联系方式
• 3.7 重要知识点提炼
• 3.7.1 快速制作网页背景的光影效果：图层的原理
• 3.7.2 快速提升网页设计的效率：移动与链接图层（样式）
• 3.7.3 提升设计的细节：图层样式的3点不足与解决方案
• 3.7.4 提升设计的细节与效率：盖印图层
• 3.7.5 网页设计中的“高富帅”：不透明度与填充
• 3.7.6 展示不同的网页设计方案：图层命名与图层复合
• 3.7.7 遮盖网页图像中的瑕疵：图层蒙版
• 3.7.8 调整网页图像局部的技巧：剪贴蒙版的图层结构
• 3.7.9 网页界面中的清晰线条：矢量线
• 3.7.10 网页中华丽线条的绘制技巧：再谈“描边路径”
• 第04章 网页界面合理布局的12个要点
• 4.1 网页界面结构布局的技巧
• 4.2 网页布局的5条基本原则
• 4.2.1 协调
• 4.2.2 一致
• 4.2.3 醒目
• 4.2.4 可读性
• 4.2.5 强调
• 4.3 网页界面设计常用的4种方法
• 4.3.1 直观的方法：栏目分割
• 4.3.2 严谨的设计方法：网格布局
• 4.3.3 炫耀的设计方法：色彩布局法
• 4.3.4 直接的设计方法：标志拓展法
• 4.4 网页布局方法及思路
• 4.4.1 网页布局方法及思路
• 4.4.2 分析目标对象
• 4.4.3 设置页面板块
• 4.4.4 修改与细化页面板块
• 4.5 网站首页规划的4个要点
• 4.5.1 配色方案的制定
• 4.5.2 网页内容的设计一定要有效
• 4.5.3 首页布局分布的4点经验
• 4.5.4 素材的准备
• 4.6 网站界面设计的4个基本步骤
• 4.6.1 网页的头部设计
• 4.6.2 网页的导航设计
• 4.6.3 网页的banner 设计
• 4.6.4 网页的主体区域设计
• 4.6.5 网页的尾部设计
• 4.7 重要知识点提炼：5种常用工具的另类讲解
• 4.7.1 网页设计中描边的秘密：从“先选择，后操作”说起
• 4.7.2 制作网页设计中的高光：选区操作中的布尔运算
• 4.7.3 网页设计中漂亮的边线：“蚂蚁线”的2个小秘密
• 4.7.4 虚实之间的奥秘：路径与选区之间的转换
• 4.7.5 选择网页图像中的高光和阴影
• 4.8 页面布局中的常见4种指示性元素
• 4.8.1 图标
• 4.8.2 标签
• 4.8.3 指示线
• 4.8.4 色彩和闪动
• 4.8.5 折角
• 4.9 重要知识点提炼
• 4.9.1 通道到底是个什么东西
• 4.9.2 从黑和白说起
• 4.9.3 抠图与去背
• 4.10 页面布局中视觉焦点创建的5种方法
• 4.10.1 色彩
• 4.10.2 图像
• 4.10.3 光影
• 4.10.4 轮廓边框
• 4.10.5 标签与文字
• 4.11 重要知识点提炼
• 4.11.1 网页图形设计的关键点：矢量路径与锚点
• 4.11.2 万“线”归一：直线、曲线和折线的相互转换
• 4.11.3 为网页中的“线”段美容：路径的描边和填充
• 4.11.4 网页设计中的形状与自定义形状
• 4.11.5 变换与对齐
• 4.11.6 对象的变形与保护
• 4.11.7 关于复制的妙用
• 4.11.8 智能切图
• 4.11.9 从 PSD 文件生成应用于移动设备的图像资源
• 第05章 网页设计中的色彩知识(基础篇)
• 5.1 色彩的3个基本属性
• 5.1.1 色相
• 5.1.2 明度
• 5.1.3 饱和度
• 5.2 彩色的心理感觉
• 5.3 色彩在网页中的3个重要作用
• 5.3.1 营造网站的氛围
• 5.3.2 视觉区域和信息展示区域的划分
• 5.3.3 引导主次关系
• 5.4 网页中的4种色彩
• 5.4.1 背景色
• 5.4.2 文案的色彩
• 5.4.3 多媒体元素的色彩
• 5.4.4 串联色
• 5.5 重要知识点提炼：色彩的4种应用表现
• 5.5.1 色彩明度的两种应用技巧
• 5.5.2 设置色彩的饱和度的两种方法
• 5.5.3 精确选择颜色的两种方法
• 5.5.4 如何快速获得网页界面设计的配色方案
• 5.6 色彩应用案例解析
• 第06章 网页设计中的色彩知识(提高篇)
• 6.1 色彩的色调
• 6.1.1 色彩的主次
• 6.1.2 色彩的冷暖
• 6.1.3 按页面中色彩的色相分
• 6.2 色彩对比的6种形式
• 6.2.1 色相对比
• 6.2.2 纯度对比
• 6.2.3 明暗对比
• 6.2.4 补色对比
• 6.2.5 冷暖对比
• 6.2.6 面积对比
• 6.3 色彩调和的4种常用方法
• 6.3.1 同种色调和
• 6.3.2 邻近色调和
• 6.3.3 对比色调和
• 6.3.4 渐变色调和
• 6.4 网页色彩搭配的4个基本原则
• 6.4.1 色彩的独特性
• 6.4.2 色彩的鲜明性
• 6.4.3 色彩的适用性
• 6.4.4 色彩的联想性
• 6.5 重要知识点提炼
• 6.5.1 利用色彩突出主体
• 6.5.2 利用色彩烘托氛围
• 6.5.3 边线配色的两个技巧
• 6.5.4 Kuler工具的应用
• 6.5.5 渐变填充
• 6.6 色彩应用案例解析
• 第07章 网站的logo设计
• 7.1 常见logo的3种类型
• 7.1.1 汉字（字母）与数字型
• 7.1.2 图形
• 7.1.3 卡通动漫型
• 7.2 logo设计的15种常用方法
• 7.2.1 反白
• 7.2.2 局部调节
• 7.2.3 连笔
• 7.2.4 情趣
• 7.2.5 拉近距离
• 7.2.6 壮男淑女
• 7.2.7 用i点睛
• 7.2.8 笔画截肢
• 7.2.9 飘逸
• 7.2.10 巧用字母（数字）
• 7.2.11 巧用涟漪
• 7.2.12 七上八下
• 7.2.13 巧用镜像
• 7.2.14“O”的巧用
• 7.2.15 框的巧用
• 7.3 logo设计的5个步骤
• 7.3.1 调查与研究
• 7.3.2 创意构思
• 7.3.3 草稿的绘制
• 7.3.4 深化与改进
• 7.3.5 色彩的应用
• 7.3.6 正稿的设计
• 7.4 常见6类网站的logo设计案例
• 7.4.1 购物商城类网站的logo设计
• 7.4.2 餐饮类网站logo设计
• 7.4.3 教育培训网站的logo设计
• 7.4.4 医疗健康网站的logo设计
• 7.4.5 数码家电类网站的Logo设计
• 7.4.6 旅游网站的Logo设计
• 7.5 关于网站标志设计的7个重要知识点提炼
• 7.5.1 描边
• 7.5.2 羽化
• 7.5.3 不透明度
• 7.5.4 填充
• 7.5.5 容差
• 7.5.6 自定义图案
• 7.5.7 自定义笔刷
• 第08章 网页中情感文字的设计
• 8.1 文字设计的4个基本原则
• 8.1.1 文字的可读性
• 8.1.2 鲜明的风格特征
• 8.1.3 在设计上要富于创造性
• 8.2 5种情感文字的设计案例
• 8.2.1 光影的运用：质感的标题艺术字
• 8.2.2 等高线的奥秘：金属质感文字
• 8.2.3 色彩亮度的运用：干净通透的网页特效字
• 8.2.4 此阴影与彼阴影的区别：小伙伴文字
• 8.2.5 为文字的边缘添加图层样式：游戏网站的锈迹文字
• 8.3 重要知识点提炼：网页文字设计的3个重要技巧
• 8.3.1 为标题艺术字添加阴影
• 8.3.2 为标题艺术字添加发光
• 8.3.3 为标题艺术字添加透视
• 8.4 网页排版需要注意的4个问题
• 8.4.1 什么是Web字体
• 8.4.2 文字排版的层次性
• 8.4.3 文字排版的条理性
• 8.4.4 重点词汇的突出性
• 8.5 6个重要知识点提炼
• 8.5.1 字体的选择
• 8.5.2 字号的大小
• 8.5.3 文字的修饰
• 8.5.4 段落编排的技巧
• 8.5.5 特殊字符的平衡
• 8.5.6 网页排版字体解决方案：微软雅黑+宋体
• 第09章 网页Banner的设计
• 9.1 网页Banner设计需要注意的7个要点
• 9.1.1 主题明确
• 9.1.2 目标要明确
• 9.1.3 符合视觉阅读习惯
• 9.1.4 版式布局要合理
• 9.1.5 色彩的搭配与选择
• 9.1.6 具有点击的欲望
• 9.1.7 留白的使用
• 9.2 网页Banner设计7则实例
• 9.2.1 教育培训Banner 设计：图形与文字构建版式的平衡
• 9.2.2 地产网站 Banner 设计：用网站界面凸显宽敞的空间
• 9.2.3 电商网站 Banner 设计:借用背景色与产品色
• 9.2.4 咨询服务行业的Banner：体现干净简练的行业特征
• 9.2.5 家装网站 Banner 设计：展现替客户着想的理念
• 9.2.6 电商网站 Banner 设计：搭建场景的技巧
• 9.2.7 婚纱摄影网站 Banner 设计：讲述浪漫的故事
• 9.3 网页图像调整的9个重要知识点提炼
• 9.3.1 网页界面设计中为什么要“置入”图像
• 9.3.2 网页图像不可或缺的锐化
• 9.3.3 网页图像中明暗调的对比
• 9.3.4 网页图像精美的关键点：瑕疵修复
• 9.3.5 网页图像色彩3属性的调节
• 9.3.6 网页图像色彩多变的秘密
• 9.3.7 调节网页图像色调和通透度的技巧
• 9.3.8 选用恰当网页图像的3个关键点
• 9.3.9 智能对象与智能滤镜
• 9.4 导航的设计
• 9.4.1 网页导航的3个主要功能
• 9.4.2 页面导航设计的4个基本技巧
• 9.5 导航设计需要考虑的4个小问题
• 9.5.1 注意导航条的颜色
• 9.5.2 注意导航的位置
• 9.5.3 导航的文字选择
• 9.5.4 注意鼠标滑过的效果
• 9.6 网页导航设计4则实例
• 9.6.1 眼镜销售网站的二级导航设计：柔和的背景
• 9.6.2 垂直导航条的设计：巧妙地运用色彩的对比
• 9.6.3 突破极限的酒店导航设计：逆向思维
• 9.6.4 服饰网站导航
• 9.7 提升设计质量的7个重要知识点
• 9.7.1 创造材质
• 9.7.2 创造倒影效果的3 种常用方法
• 9.7.3 外发光和内发光
• 9.7.4 斜面浮雕与浮雕效果
• 9.7.5 渐变叠加与颜色叠加
• 9.7.6 精准定位“镜头光晕”的位置
• 9.7.7 透明玻璃
• 第10章 网页设计中的5个拓展工具软件
• 10.1 设计师的网页配色利器：ColorSchemeDesigner
• 10.2 Xara3D：轻松制作三维立体字
• 10.3 Flame_Painter：快速制作网页中的光影
• 10.4 Photoshop精密抠图插件：Ver tusFluidMask
• 10.5 支持矢量图浏览的软件：STThumbnailsExplorer
• 第11章 页面布局与用户体验的5个“必须”
• 11.1 必须了解用户的浏览习惯
• 11.1.1 浏览习惯
• 11.1.2 浏览习惯对网站改版的影响
• 11.2 必须了解用户的浏览线路
• 11.3 必须明确网站视觉信息的3个传递技巧
• 11.3.1 严格限制需要记忆的材料数量
• 11.3.2 选用最直接的表现形式
• 11.3.3 用好关键的“文字”符号
• 11.4 数据对页面设计的两点影响
• 11.4.1 设计师应知晓用户密集浏览的区域
• 11.4.2 合理地确定网站界面的布局形式
• 11.5 必须学会网格系统的应用技巧
• 11.5.1 网格系统的4个优点
• 11.5.2 与网格系统有关的两个关键知识点
• 第12章 两则品牌营销类网站界面设计
• 12.1 创造浏览者的第一印象
• 12.1.1 专业
• 12.1.2 真实
• 12.1.3 简洁
• 12.1.4 必要的交互
• 12.2 网站的策划
• 12.2.1 配色方案的制定
• 12.2.2 页面设计的4个特点
• 12.2.3 网站布局的3个模块
• 12.3 数码相机网站:光与影的巧妙结合
• 12.3.1 创建网页的基本结构
• 12.3.2 网页的导航设计
• 12.3.3 设计网站的Banner
• 12.3.4 设计网站的产品导航
• 12.3.5 设计网站的产品列表
• 12.3.6 设计网站的页脚
• 12.4 家纺网站：如何凸显品牌的特征
• 12.4.1 基本的布局设计
• 12.4.2 页面的顶部设计
• 12.4.3 设计导航
• 12.4.4 主体banner的设计
• 12.4.5 品牌优势简介区域设计
• 第13章 门户网站：突出网站布局的严谨性
• 13.1 行业分析
• 13.2 内容分析
• 13.2.1 总体规划
• 13.2.2 文字的排列方式
• 13.2.3 编排的视觉流程
• 13.2.4 非常重要的 960 网格系统
• 13.3 网站界面设计
• 13.3.1 确定网站界面的基本结构
• 13.3.2 制作页眉区域
• 13.3.3 制作内容区域
• 13.3.4 制作页脚区域
• 13.3.5 制作内容页面
• 第14章 交友网站——素材不同表现迥异
• 14.1 创造浏览者的第一印象
• 14.1.1 亲和力
• 14.1.2 易用
• 14.1.3 激动人心的色彩
• 14.2 网站的策划
• 14.2.1 配色方案的制定
• 14.2.2 网站的布局分布
• 14.3 详细制作过程分享
• 14.3.1 创建网站的基本结构
• 14.3.2 网站 Banner图像的色调调整
• 14.3.3 设计导航与Banner
• 14.3.4 制作在线会员板块
• 14.3.5 设计疑难解答模块
• 14.3.6 设计细节的调整
• 第15章 优秀设计师的5种绝密武器
• 15.1 弄清楚您的浏览对象
• 15.2 细节的设计是对浏览者的一种尊重
• 15.3 敢于突破传统的思维
• 15.4 创意其实更需要基础知识的积累
• 15.4.1 基础的基础：借用七巧板
• 15.4.2 借用不同行业的表现技巧
• 15.5 从文学修辞入手
• 15.5.1 象征
• 15.5.2 双关
• 15.5.3 比喻
• 15.5.4 比拟
• 15.5.5 对比