Photoshop网站UI设计全程揭秘PDF|Epub|txt|kindle电子书版本网盘下载

Photoshop网站UI设计全程揭秘PDF格式电子书版下载

注意：本站所有压缩包均有解压码： 点击下载压缩包解压工具

第1章 网站UI概述1

1.1 了解网站UI1

1.1.1 什么是网页界面1

1.1.2 网页界面的分类1

1.2 网站建设流程1

1.2.1 域名注册2

1.2.2 购买虚拟主机2

1.2.3 确定网页设计3

1.2.4 网站建设3

1.2.5 网站测试3

1.2.6 网站维护4

1.3 网页的设计原则4

1.3.1 视觉美观5

1.3.2 主题明确5

1.3.3 内容与形式相统一5

1.3.4 快速下载6

1.3.5 为用户考虑6

1.4 网页的构成元素7

1.4.1 文字7

1.4.2 图像8

1.4.3 色彩8

1.4.4 多媒体8

1.5 网页设计命名规范9

1.6 本章小结10

第2章 Photoshop基本操作11

2.1 Photoshop简介11

2.2 Photoshop的安装11

实例01＋视频：Photoshop的安装11

2.3 Photoshop的基本操作12

2.3.1 新建文件13

2.3.2 打开文件14

2.3.3 保存文件15

实例02＋视频：制作简单的网页图标15

2.3.4 修改图像大小18

2.3.5 修改画布大小19

实例03＋视频：制作艺术小网页19

2.4 裁剪图像21

2.4.1 裁剪固定尺寸21

2.4.2 透视裁剪21

2.4.3 裁剪获得好的构图21

2.5 图像的复制和粘贴22

2.5.1 复制文档22

实例04＋视频：制作网页背景22

2.5.2 拷贝和粘贴24

实例05＋视频：制作网页广告插图24

2.5.3 选择性粘贴25

实例06＋视频：制作茶叶广告25

2.6 变换图像26

2.6.1 移动图像26

2.6.2 缩放图像26

2.6.3 旋转图像27

2.6.4 自由变换27

实例07＋视频：制作网页广告27

2.7 还原与恢复操作28

2.8 本章小结28

第3章 选区、形状与网站图标29

3.1 网站图标设计的准则29

3.2 网站图标的设计流程29

3.3 规则选区创建标志30

3.3.1 矩形选框工具30

3.3.2 椭圆选框工具30

实例08＋视频：制作简单的Logo31

3.3.3 单行选框工具和单列选框工具32

实例09＋视频：制作精美的新浪图标32

3.4 填充与描边改变图标风格36

3.4.1 油漆桶工具36

实例10＋视频：制作绚丽彩块图标37

3.4.2 填充39

实例11＋视频：制作简单立体图标40

3.4.3 描边42

实例12＋视频：制作美妙的音符图标43

3.5 渐变工具增加图标质感45

3.5.1 渐变的类型45

3.5.2 编辑类型46

实例13＋视频：制作可爱的小鸟图标47

3.6 形状工具创建图标51

3.6.1 关于形状工具51

3.6.2 多边形工具51

实例14＋视频：制作质感图标52

3.6.3 形状的加减55

实例15＋视频：制作时尚按钮图标55

3.6.4 自定义形状58

3.7 使用Kuler设置图标的颜色59

实例16＋视频：制作简单钟表图标59

3.8 本章小结62

第4章 图层与网站中的按钮63

4.1 按钮的设计要点63

4.2 按钮的应用格式63

4.3 使用图案增加按钮的质感64

实例17＋视频：制作水晶开关按钮64

4.4 图层的基本操作68

4.4.1 新建图层68

4.4.2 复制图层69

4.4.3 调整图层顺序70

实例18＋视频：制作Twitter按钮71

4.4.4 使用“不透明度”和“填充”75

实例19＋视频：制作简洁绿色按钮75

4.5 使用图层样式78

4.5.1 调整图层样式78

4.5.2 使用“投影”制作阴影效果79

4.5.3 使用“描边”为按钮添加轮廓79

实例20＋视频：制作简单可爱的按钮79

4.5.4 使用“斜面和浮雕”制作立体效果82

实例21＋视频：制作数据统计按钮83

4.5.5 使用“内阴影”增加层次86

实例22＋视频：制作圆形立体按钮87

4.5.6 使用“内发光”和“外发光”制作发光效果93

实例23＋视频：制作逼真的皮革按钮93

4.6 使用画笔工具细化按钮97

4.6.1 使用画笔工具97

实例24＋视频：制作苹果应用商店按钮97

4.6.2 设置画笔预设102

4.7 图像的变换操作102

4.7.1 图像的翻转103

实例25＋视频：制作音量开关按钮103

4.7.2 透视和扭曲107

4.7.3 变形107

4.8 本章小结108

第5章 钢笔、文字与网站导航109

5.1 导航和菜单的作用109

5.2 导航的设计标准109

5.3 网页设计的辅助操作110

5.3.1 使用标尺110

5.3.2 创建精确的参考线110

实例26＋视频：制作简洁导航菜单111

5.4 修改选区115

5.4.1 羽化选区116

5.4.2 扩展／收缩选区116

5.5 加深和减淡修饰116

5.5.1 加深工具117

5.5.2 减淡工具117

实例27＋视频：制作创意音乐网站菜单118

5.6 使用钢笔工具绘制精确的形状123

5.6.1 使用钢笔工具123

实例28＋视频：制作复古导航条124

5.6.2 路径与选区的转换128

5.6.3 使用画笔描边路径128

实例29＋视频：制作帅气游戏网站导航129

5.7 使用文本工具134

5.7.1 输入文本134

5.7.2 设置文本135

实例30＋视频：制作时尚导航菜单136

5.8 快速对齐对象142

5.8.1 对齐对象142

5.8.2 分布对象143

实例31＋视频：制作漂亮的图片式导航144

5.9 本章小结148

第6章 调整命令与优化图像149

6.1 网站中的图像简介149

6.2 网站中适用的图片格式149

6.3 网站中的图像模式149

6.4 使用图章工具为图像添加效果150

6.4.1 使用仿制图章工具去除图像中的水印150

实例32＋视频：去除图像中的瑕疵150

6.4.2 使用图案图章工具制作网站背景152

6.5 修复网页中的图像152

6.5.1 使用污点修复画笔工具152

实例33＋视频：去除脸部的装饰153

6.5.2 使用修复画笔工具155

6.5.3 使用内容感知移动工具155

6.6 自动调整图像颜色156

6.6.1 自动色调增强图像清晰度156

6.6.2 自动对比度增强照片对比度156

6.6.3 自动颜色校正图像颜色157

6.7 自定义调整图像色彩157

6.7.1 使用曲线调整图像157

实例34＋视频：使图像更加鲜艳158

6.7.2 使用色阶提高图像清晰度160

6.7.3 使用亮度／对比度调整图像161

实例35＋视频：使图像更清晰161

6.7.4 使用色相／饱和度调整图像164

6.7.5 使用自然饱和度调整图像165

实例36＋视频：制作炫酷的图片166

6.7.6 使用变化命令改变图像的色调168

实例37＋视频：制作唯美的图片169

6.7.7 使用阴影／高光修整照片的逆光170

实例38＋视频：修整逆光的照片171

6.8 使用填充和调整图层174

6.8.1 纯色填充图层174

6.8.2 渐变填充图层175

6.8.3 图案填充图层175

实例39＋视频：制作炫彩网页175

6.8.4 调整面板178

实例40＋视频：制作黑白色图像178

6.9 锐化提高图像清晰度181

6.10 处理扫描图像181

6.11 批处理图像181

6.11.1 使用动作面板181

6.11.2 自定义动作182

实例41＋视频：批处理图像182

6.12 本章小结184

第7章 抠图与广告条设计185

7.1 网站广告条的类型185

7.2 广告条的常见尺寸185

7.3 如何设计好的广告条186

7.4 完美抠图合成广告条186

7.4.1 磁性套索工具抠图186

实例42＋视频：制作果盘广告系186

7.4.2 快速选择188

实例43＋视频：制作美食广告条188

7.4.3 使用魔棒工具189

7.4.4 使用钢笔工具190

实例44＋视频：制作薯条广告190

7.4.5 快速蒙版选择图像193

实例45＋视频：制作服装广告条193

7.4.6 调整边缘和精确选区195

实例46＋视频：制作精美夏装广告195

7.5 使用修边197

7.5.1 移除白边和黑边197

7.5.2 去边实现更好的合成效果197

实例47＋视频：制作时尚服装广告条197

7.6 使用画笔工具200

实例48＋视频：制作礼物宣传广告条200

7.7 使用蒙版合成图像203

7.7.1 图层蒙版替换图层局部203

7.7.2 图层蒙版融合图像204

实例49＋视频：制作快餐店广告条204

7.7.3 使用剪贴蒙版205

实例50＋视频：制作画廊展览小广告205

7.8 本章小结209

第8章 网站页面的配色210

8.1 色彩基础知识210

8.1.1 光和色的三原色210

8.1.2 色种的不同210

8.1.3 色彩的构成要素212

8.1.4 色彩的混合212

8.1.5 色彩的分类213

8.1.6 不同的色系214

8.2 色彩的视觉心理感受216

8.2.1 色彩的轻重216

8.2.2 色彩的冷暖217

8.2.3 色彩的软硬217

8.2.4 色彩的大小218

8.2.5 色彩的活泼和庄重感218

8.2.6 色彩的兴奋和沉静感218

8.2.7 色彩的华丽和朴素感219

8.3 网页配色标准219

8.3.1 Web安全颜色219

8.3.2 使用Web安全色调色板220

8.4 网页配色技巧220

8.4.1 色彩搭配的原则221

8.4.2 确定网页的主题色222

8.4.3 正确选择文字的颜色222

8.5 网页风格与配色223

8.5.1 暖色调配色223

8.5.2 冷色调配色223

8.5.3 稳定、安静风格的配色224

8.5.4 发挥白色效果的配色224

8.5.5 高彩度的配色225

8.5.6 低彩度的配色225

8.6 影响网站配色的因素226

8.6.1 根据行业特征选择网页配色226

8.6.2 根据生命周期选择网页配色226

8.6.3 根据色彩联想选择网页配色228

8.6.4 根据受众色彩偏好选择网页配色229

8.7 本章小结231

第9章 网页的版式和布局232

9.1 常见的网页布局方式232

9.1.1 “国”字型232

9.1.2 拐角型232

9.1.3 标题正文型233

9.1.4 左右框架型234

9.1.5 上下框架型234

9.1.6 封面型234

9.1.7 Flash型235

9.1.8 变化型235

9.2 文字在网页中的作用235

9.2.1 明确性236

9.2.2 易读性236

9.2.3 美观性236

9.3 网页文字的设计原则237

9.3.1 可读性237

9.3.2 艺术化238

9.4 网页文字的排版设计239

9.4.1 文字排版规则239

9.4.2 文字排版的常用手法241

9.5 根据内容决定布局242

9.5.1 左侧的页面布局242

9.5.2 水平居中的页面布局243

9.5.3 水平和垂直居中的页面布局243

9.5.4 满屏的页面布局244

9.6 页面分割方式244

9.6.1 横向分割244

9.6.2 纵向分割245

9.6.3 横向纵向复合分割245

9.6.4 运用固定区域246

9.7 页面布局的连贯性和多样性246

9.8 本章小结247

第10章 游戏类网站设计248

10.1 制作帅气的游戏网站248

10.1.1 行业分类248

10.1.2 色彩分析248

10.1.3 版式分析248

实例51＋视频：帅气游戏网站——导航249

实例52＋视频：帅气游戏网站——Logo251

实例53＋视频：帅气游戏网站——主体253

实例54＋视频：帅气游戏网站——切图257

10.2 制作华丽的游戏网站259

10.2.1 行业分类259

10.2.2 色彩分析259

10.2.3 版式分析260

实例55＋视频：华丽游戏网站——背景与导航260

实例56＋视频：华丽游戏网站——内容与装饰265

实例57＋视频：华丽游戏网站——切图272

10.3 制作魔幻的游戏网站273

10.3.1 行业分类274

10.3.2 色彩分析274

10.3.3 版式分析274

实例58＋视频：魔幻游戏网站——背景与框架274

实例59＋视频：魔幻游戏网站——导航与主体278

实例60＋视频：魔幻游戏网站——切图2840

10.4 本章小结287

第11章 休闲类网站设计288

11.1 制作儿童类网站288

11.1.1 行业分类288

11.1.2 色彩分析288

11.1.3 版式分析288

实例61＋视频：儿童类网站——背景和导航289

实例62＋视频：儿童类网站——主体和Logo291

实例63＋视频：儿童类网站——切图295

11.2 制作大气专业的汽车网站298

11.2.1 行业分类298

11.2.2 色彩分析298

11.2.3 版式分析298

实例64＋视频：大气专业的汽车网站——导航与主体299

实例65＋视频：大气专业的汽车网站——版底与Logo303

实例66＋视频：大气专业的汽车网站——切图306

11.3 制作电子产品网站308

11.3.1 行业分类308

11.3.2 色彩分析309

11.3.3 版式分析309

实例67＋视频：电子产品网站——导航与背景309

实例68＋视频：电子产品网站——Banner312

实例69＋视频：电子产品网站——主体和版底315

实例70＋视频：电子产品网站——切图317

11.4 本章小结319