这本书的特点:
在网页效果图设计中软件技术和设计方面经验和技巧的 总结,或者可以看成是一本技巧大全。
很多人都能熟练使用软件,但总是设计不出满意的作品,以我多年的代课经验,认为一个好的效果图设计应该包括布局、配色、素材的选择、通栏的设计、标志的设计、字体的设计和应用等多个方面。简单来说就是注重所有的细节,在细节上下功夫,一定能做出好的作品。
对于没有美术基础或者不会配色的人来说,配色是个难题,或者选择一张好的素材不是那么简单的。那么我的这本书就会告诉你改如何去做。我认为,所有的东西都可以进行归纳和总结,不管是设计还是技术,告诉你一二三,你就按着这个做,不一定做的是最好的,但绝对不是最差的。同时大家自己也能够学会归纳和总结,从而逐步提高。
这本书面向的人群:
- 对于刚刚接触网页设计的朋友,这本书可以看成是一个技巧大全,激发你的创意和灵感。
- 对于熟练掌握软件技术的朋友,在这本书里能学到很多你所不了解的设计知识。
- 对于有一定设计能力的朋友,这本书能够帮助你更有效率,更好的完成你的设计。
由于我的能力有限,也欢迎大家批评指正,在出版之前进行修改和提高
-------------------------------------------
部分章节试读
Fireworks蒙版基础教程
http://bbs.blueidea.com/thread-2786269-1-1.html
网页的布局设计:
http://bbs.blueidea.com/thread-2821860-1-1.html
辅助配色软件“colorimpact”的使用:
http://bbs.blueidea.com/thread-2831935-1-1.html
效果图设计之色彩索引:
http://bbs.blueidea.com/thread-2835894-1-1.html
Fireworks的高级操作技巧集合:
http://bbs.blueidea.com/thread-2841637-1-1.html
制作网格化图像效果:
http://bbs.blueidea.com/thread-2863823-1-1.html
--------------------------------------------------
大纲已经出来了,大家可以看看,书基本上已经写完了,就等出版了,出版后的大纲名称可能会有些不一样,但基本内容不会有太大的改动了。另外这个大纲的页数是乱的,不用看。
============================================
第一章 网页效果图设计的一般流程... 114
1.1 网页效果图设计流程概述... 115
1.2 网站策划... 116
1.2.1 收集客户资料... 117
1.2.2 分析网站类型... 117
1.2.3 确定网站风格... 118
1.3 各类网站的布局特点分析... 118
1.3.1 资讯类网站... 121
1.3.2 电子商务类网站... 125
1.3.3 互动游戏类网站... 128
1.3.4 教育类网站... 134
1.3.5 功能型网站... 136
1.3.6 综合类网站... 138
第二章 网页的布局... 114
2.1 网页布局基础... 115
2.1.1 网页中的基本元素... 115
2.1.2 网页的构成... 118
2.1.3 网页的空间与页面尺寸... 123
2.2 网页的布局设计... 125
2.2.1 布局方法... 125
2.2.2 确定版面率... 128
2.2.3 网格设计... 130
2.3 网页布局的分类... 133
2.3.1 满版布局形式... 133
2.3.2 十字布局形式... 134
2.3.3 九宫格布局形式... 135
2.3.4 米字布局形式... 136
2.4 网页布局技巧... 138
2.4.1 黄金分割式布局(完美的比例给人视觉上的享受)... 138
2.4.2 左右对齐式布局(没有浪费的空间,表现商业性形象)... 141
2.4.3 全景式布局(用趣味性吸引浏览者)... 144
2.4.4 卫星式布局(以太阳为中心的卫星环绕型)... 146
2.4.5 照片组合式布局(新世界以全景式自由的展现出来)... 150
2.4.6 包围式布局(限定范围的效果)... 151
2.4.7 散开式布局(山水画般的自由和优雅)... 156
2.4.8 单侧齐行式布局(理性与自由共存的版式设计)... 159
2.4.9 对称式布局(以中心为基线,左右对称)... 161
第三章 网页的色彩设计... 115
3.1 网页设计要素-色彩... 115
3.1.1 色彩决定印象... 115
3.1.2 色彩印象无法更改... 117
3.1.3 色彩无处不在,具有多重效果... 118
3.2 色彩的原理... 119
3.2.1 光与色彩... 119
3.2.2 物体色... 120
3.3.3 色彩类型... 121
3.2.4 色彩三要素... 122
3.3 色相环的作用... 128
3.3.1 色相环的构成... 129
3.3.2 色相环中的颜色特点... 130
3.3.3 色彩之间的关系... 132
3.4 网页中的色彩... 141
3.4.1 RGB色彩模式... 142
3.4.2 HTML语言对颜色的描述... 144
3.4.3 216网页安全色... 144
3.5 色彩索引... 145
3.5.1 红色... 145
3.5.2 橙色... 148
3.5.3 黄色... 150
3.5.4 绿色... 152
3.5.5 蓝色... 155
3.5.6 紫色... 157
3.5.7 黑色... 159
3.5.8 白色... 160
3.5.9 灰色... 162
3.5.10 色彩索引配色法... 163
3.6 色调的变化效果... 164
3.6.1 鲜艳的色调... 164
3.6.2 亮色调... 165
3.6.3 淡色调... 165
3.6.4 中间色调... 166
3.6.5 浅浊色调... 166
3.6.6 暗色调... 167
3.7 色彩的四种功能... 168
3.7.1 主色... 168
3.7.2 背景色... 170
3.7.3 融合色... 174
3.7.4 强调色... 175
3.8 实用配色网站推荐... 176
3.8.1色彩爱好者(
http://www.colourlovers.com/)... 176
3.8.2 天天配色(
http://beta.dailycolorscheme.com/)... 177
3.8.3 色彩杰克(
http://www.colorjack.com/)... 178
3.8.4 简单配色(
http://www.easyrgb.com/harmonies.php)... 178
3.8.5 色彩机构(
http://www.colr.org/)... 178
3.8.6 调色板生成器(
http://www.degraeve.com/color-palette/?src=rss)... 179
3.8.7 Kuler(
http://kuler.adobe.com/)... 179
第四章 Fireworks图像处理稿件技术精讲... 114
4.1 Fireworks基本操作技巧集锦... 115
4.2 矢量绘制关键技术... 117
4.2.1 两种方法绘制圆角矩形... 117
4.2.2 防止对圆角矩形变形的时候圆角改变... 118
4.2.3巧妙消除路径边缘的锯齿... 120
4.2.4 多种方法绘制虚线... 122
4.2.5制作网页效果图中的清晰小字... 123
4.2.6使文字按照路径排列... 125
4.2.7制作电视扫描线的效果... 126
4.2.8自定义纹理... 127
4.2.9添加和修改渐变色填充... 128
4.2.10巧妙制作渐隐的线条... 134
4.2.11解决图标缩小后变形的问题... 137
4.3 图像处理关键技术... 139
4.3.1蒙版的三种用途... 139
4.3.2选区和路径的转换... 151
4.3.3制作图像条形码效果... 153
4.3.4 Fireworks中的外挂滤镜... 156
4.3.5制作淡彩钢笔画效果... 159
4.3.6 制作特殊的渐变色效果... 161
4.3.7 制作网格化图像效果... 162
4.3.8 制作老照片效果... 166
4.3.9 使用【曲线】命令校正图像的色彩... 167
4.3.10 使用【色阶】命令调整图像的色彩... 175
第五章 Fireworks网页制作关键技术精讲... 114
5.1 Gif动画制作关键技术... 114
5.1.1 使用Fireworks制作补间动画... 114
5.1.2 巧用“补间”技术作图... 116
5.1.3 巧做网页LOGO中的光描动动画... 119
5.2 Fireworks行为相关关键技术... 122
5.2.1 使用Fireworks制作交互按钮... 122
5.2.2使用Fireworks的行为实现图像翻转特效... 125
5.2.3把Fireworks中的交互效果添加到网页中... 130
5.3 切片和优化的关键技术... 134
5.3.1 在Fireworks中对图像进行优化... 134
5.3.2 选择合适的图像优化格式... 135
5.3.3 巧妙去除Gif图像周围的白边... 137
5.3.4导出效果图切片... 138
5.4 Fireworks效率工具问题集合... 144
5.4.1 巧妙执行重复的操作... 144
5.4.2对大量的图像素材进行批量处理... 147
第六章 网页的LOGO设计... 115
6.1 Logo设计的基本构成要素... 116
6.1.1 LOGO中的线条... 116
6.1.2 LOGO 中的形状... 118
6.1.3 用线条和形状构成 LOGO.. 119
6.1.4 LOGO中的英文字体... 120
6.1.5 LOGO中的中文字体... 122
6.2 40种常用LOGO设计技巧... 127
6.2.1线条的过度效果... 127
6.2.2局部变形... 127
6.2.3 斜线和曲线... 128
6.2.4 用图案来替换局部... 128
6.2.5 对字母“i”进行变形... 128
6.2.6 把圆形结合到LOGO中... 128
6.2.7 笔划结合效果... 129
6.2.8 线条的运动感... 129
6.2.9 横线贯穿... 129
6.2.10 错位重叠... 130
6.2.11 笔划连接... 130
6.2.12 笔划错位... 130
6.2.13 对字母“L”进行变形... 130
6.2.14 虚实结合... 131
6.2.15 中空字体... 131
6.2.16 对数字“0”或字母“O”进行变形... 131
6.2.17 添加空白线条... 131
6.2.18 多图嵌套... 132
6.2.19 部分省略... 132
6.2.20 压缩图形间距... 132
6.2.21 用曲线来装饰... 132
6.2.22 底图加反白... 132
6.2.23 局部换色... 133
6.2.24 一笔相连... 133
6.2.25 图形镜像... 133
6.2.26 动感线条... 133
6.2.27 粗细结合... 134
6.2.28 拉伸笔划... 134
6.2.29 添加边框... 134
6.2.30 拉伸图形... 135
6.2.31 对字母“T”进行变形... 135
6.2.32 装饰性的文字... 135
6.2.33直接表述... 135
6.2.34 抽象概括... 136
6.2.35 字母大小写结合... 136
6.2.36 为空白背景填色... 136
6.2.37 使用卡通形象... 137
6.2.38 添加立体效果... 137
6.2.39 旋转或调整方向... 137
6.2.40 大小对比... 137
6.3 Web2.0风格LOGO设计要素... 138
6.3.1 使用明亮的颜色... 138
6.3.2使用渐变色... 138
6.3.3 添加倒影... 138
6.3.4 制作立体的LOGO.. 139
6.3.5 高光和阴影... 139
6.4 实用LOGO设计网站推荐... 139
6.4.1 LOGO池塘(
http://logopond.com)... 139
6.4.2 LOGO沙司(
http://www.logosauce.com/)... 140
6.4.3 至爱欣赏(
http://faveup.com/)... 140
6.5 LOGO设计案例分析... 141
6.5.1欧梅雅楼梯有限公司... 141
6.5.2中川家缘木业有限公司... 142
6.5.3强能鱼圆中餐连锁企业... 142
6.5.5福田汽车... 142
6.5.6 ATLANTICA COMERCIAL LTDA. 143
6.5.7天淇立信息技术有限公司... 143
6.5.8威盛光学有限公司... 143
6.5.9 山东沾化恒生工贸有限公司... 144
6.5.10家欣家具有限公司... 144
6.5.11 DKD CLUB. 144
6.5.12成明房产代理有限公司... 145
第七章 Fireball篮球队LOGO设计... 114
7.1 案例分析... 114
7.2 案例实现... 114
7.3 案例扩展... 118
7.3.1 Center Alliance International LOGO设计... 118
7.3.2 Metrox Oil LOGO设计... 118
7.3.3 矩形 LOGO设计... 119
7.3.4 Mero LOGO设计... 119
第八章 水滴LOGO设计... 114
8.1 案例分析... 114
8.2 案例实现... 114
8.3 案例扩展... 119
8.3.1 Blueqprint LOGO设计... 119
8.3.2 Bluedesign LOGO设计... 119
8.3.3 汽车站LOGO设计... 119
8.3.4 健康中心 LOGO设计... 120
第九章 顽主论坛徽章LOGO设计... 114
9.1 案例分析... 114
9.2 案例实现... 114
9.3 案例扩展... 120
9.3.1 第1媒体 LOGO设计... 120
9.3.2 calarymeet LOGO设计... 120
9.3.3 Fireworks地带LOGO设计... 121
9.3.4 大电影 LOGO设计... 121
第十章 网页的导航设计... 114
10.1 网站的栏目构成... 114
10.2 导航的视觉设计... 117
10.3 导航的交互设计... 121
10.4没有“导航”的导航—搜索... 122
第十一章 TAB导航制作... 114
11.1 案例分析... 114
11.2 案例实现... 114
11.3 案例扩展... 120
11.3.1 水平箭头导航制作... 120
11.3.2 TAB导航效果2. 120
11.3.3 TAB导航效果3. 120
第十二章 彩虹导航制作... 114
12.1 案例分析... 114
12.3 案例实现... 114
12.3 案例扩展... 118
12.3.1 水晶导航... 118
12.3.2 旋转按钮式导航... 118
12.3.3 矩形渐变色导航... 119
第十三章 立体水晶导航制作... 114
13.1 案例分析... 114
13.3 案例实现... 114
13.3 案例扩展... 122
13.3.1 立体导航... 122
13.3.2 阴影线导航... 122
13.3.3 立体边框导航... 122
第十四章 网页的通栏设计... 115
14.1 网页通栏概述... 115
14.1.1 网页中的通栏... 116
14.1.2 网页通栏的设计形式... 117
14.1.3 网页通栏的尺寸... 119
14.2图像素材的选择... 119
14.2.1 说服力的强弱... 120
14.2.2 内容的相关度... 122
14.2.3 发掘图像背后的故事... 123
14.2.4 色彩的层次... 124
14.2.5 与众不同... 124
14.2.6 幽默诙谐... 125
14.2.7 唯美主义... 125
14.2.8 戏剧化... 126
14.2.9 强调脸部... 126
14.3图像裁剪的技巧... 127
14.3.1 将图像转化为相同的尺寸... 127
14.3.2 制作不同比例的图像... 128
14.3.3 统一人物肖像的尺寸... 129
14.3.4 对人物肖像进行裁剪... 130
14.3.5 裁剪掉无关的部分... 132
14.3.6 调整图像的角度... 132
14.3.7 放大后裁剪... 133
14.3.8 只保留局部... 134
14.3.9 改变图像传递的信息... 135
14.3.10 一图多用... 136
14.3.11突破空间... 140
14.3.12 边缘的处理... 141
14.4图像设计的技巧... 143
14.1.1 添加边框... 143
14.1.2 叠加效果... 145
14.1.3 添加元素... 146
14.1.4剪贴薄效果... 146
14.1.5卷曲效果... 148
14.1.6 制作“拍立得”效果... 151
14.1.7 异形边缘... 152
14.1.8 小图锐化... 154
14.5 通栏广告的设计技巧... 155
14.5.1 选择合适的素材... 155
14.5.2 环境背景设计... 156
14.5.3 产品的展示... 157
14.5.4 字体的选择和设计... 157
第十五章 淘宝网旺铺通栏设计... 114
15.1 案例分析... 114
15.2 案例实现... 116
15.3 案例扩展... 127
15.3.1 古库男装通栏设计... 127
15.3.2 时尚搭配女装通栏设计... 127
第十六章 淘宝网旺铺宝贝促销区设计... 114
16.1 案例分析... 115
16.2 案例实现... 117
16.3 案例扩展... 125
16.3.1 古酷男装促销区设计... 125
16.3.2 时尚搭配女装促销区设计... 126
第十七章 网页效果图设计... 114
17.1 网页效果图设计流程... 114
17.1.1 创建辅助线... 114
17.1.2 绘制结构底图... 115
17.1.3 添加内容... 116
17.1.4 切片... 117
17.1.5 优化... 118
17.1.6 导出... 119
17.2 如何能够提高自己的设计能力... 121
17.2.1 网页设计的技术要求... 121
第十八章 简单风格的小型网站设计... 114
18.1 案例分析... 115
18.1.1 页面布局形式... 115
18.1.2 添加文字和图像... 118
18.2 案例实现... 123
18.2.1 制作效果图... 123
18.2.2 切片、优化和导出... 127
18.2.3 布局页面... 130
第十九章 标准型网站设计... 114
19.1 案例分析... 116
19.1.1 页面布局形式... 116
19.1.2 页眉的设计... 118
19.1.3 内容区域的设计... 123
19.1.4 页脚的设计... 124
19.1.5 字体的选择... 125
19.2 案例实现... 126
19.2.1 制做结构底图... 126
19.2.2 页眉设计... 131
19.2.3 通栏设计... 132
19.2.4 制作内容区域... 134
19.2.5 制作页脚... 135
19.2.6 切片、优化和导出... 138
19.2.7 布局页面... 142
[
本帖最后由 froglt 于 2008-6-27 13:40 编辑 ]