新媒体美工设计全攻略：小程序+公众号+朋友圈+H5界面+微商+微博+直播

2．1 工1．1 新媒体美工的定义．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．2 色彩让界面更具魅力．．．．．．．．．．．．．．．．．．．．．．．．8
1．2．1 色调奠定主旋律．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．8
1．2．2 调和配色使画面更和谐．．．．．．．．．．．．．．．．．10
1．2．3 色彩的使用要点．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
1．3 字体赋予界面竞争力．．．．．．．．．．．．．．．．．．．．．．13
1．3．1 文字要易于识别．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．13
1．3．2 文字的层次感要强．．．．．．．．．．．．．．．．．．．．．．．．．．14
1．3．3 清晰地表达文字信息．．．．．．．．．．．．．．．．．．．．．．．15
1．3．4 握好文字之间的间距．．．．．．．．．．．．．．．．．．．．．．．16
1．3．5 适当设置文字的色彩．．．．．．．．．．．．．．．．．．．．．．．17
1．4 版式布局让界面有格调．．．．．．．．．．．．．．．．．．．18
1．4．1 竖排列表布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．18
1．4．2 横排方块布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
1．4．3 九宫格布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
1．4．4 弹出框布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．19
1．4．5 热门标签布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
1．4．6 抽屉式布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．20
1．4．7 分段菜单式布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．21
1．4．8 底部导航栏布局．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．22
1．4．9 掌握图表信息布局设计方法．．．．．．．．．．．．22
1．4．10 掌握界面细节设计方法．．．．．．．．．．．．．．．．．23
1．4．11 新媒体界面的布局原则．．．．．．．．．．．．．．．．．24
1．5 新媒体设计注意事项．．．．．．．．．．．．．．．．．．．．．．25
1．5．1 良好的实用性．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．25
1．5．2 注重图片的品质美感．．．．．．．．．．．．．．．．．．．．．．．26
1．5．3 不要随意拉伸图片．．．．．．．．．．．．．．．．．．．．．．．．．．26作界面和基本操作．．．．．．．．．．．．．．．．．．．．．．29
2．1．1 认识Photoshop的界面．．．．．．．．．．．．．．．．．．29
2．1．2 实战——新建与存储文档．．．．．．．．．．．．．．．31
2．1．3 实战——打开与关闭文档．．．．．．．．．．．．．．．33
2．1．4 实战——创建与删除图层．．．．．．．．．．．．．．．34
2．1．5 实战——显示与隐藏图层．．．．．．．．．．．．．．．35
软件入门：PS基础
2
章
第
3．1 微信小程序组件界面介绍．．．．．．．．．．．．．．．．68
3．1．1 常规按钮．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．68
3．1．2 编辑输入框．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．68
3．1．3 网格式浏览．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．69
3．1．4 文本标签．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
3．1．5 导航栏．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
3．1．6 页面切换．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．70
微信小程序界面设计
3
章
第
2．1．6 实战——合并图层对象．．．．．．．．．．．．．．．．．．．36
2．1．7 实战——添加“斜面和浮雕”样式．．37
2．1．8 实战——添加“描边”样式．．．．．．．．．．．．38
2．1．9 实战——添加“渐变叠加”样式．．．．．39
2．1．10 实战——添加“外发光”样式．．．．．．41
2．1．11 实战——添加“投影”样式．．．．．．．．．．42
2．1．12 实战——复制/粘贴图层样式．．．．．．．．．43
2．1．13 实战——运用裁剪工具裁剪图像．．．45
2．1．14 实战——旋转/缩放图像．．．．．．．．．．．．．．．．46
2．2 抠图技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．47
2．2．1 实战——用“反向”命令抠图．．．．．．．．．47
2．2．2 实战——用矩形选框工具抠图．．．．．．．．．48
2．2．3 实战——用多边形套索工具填充图像．．49
2．2．4 实战——扩展选区图像．．．．．．．．．．．．．．．．．．．50
2．2．5 实战——将路径转换为选区．．．．．．．．．．．．52
2．2．6 实战——应用矢量蒙版抠图．．．．．．．．．．．．54
2．2．7 实战——应用剪贴蒙版抠图．．．．．．．．．．．．55
2．3 调色技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．56
2．3．1 实战——运用渐变工具填充渐变色．．56
2．3．2 实战——使用“亮度/对比度”命令．57
2．3．3 实战——使用“曲线”命令．．．．．．．．．．．．58
2．3．4 实战——使用“自然饱和度”命令．．59
2．3．5 实战——使用“色相/饱和度”命令．60
2．3．6 实战——使用“黑白”命令．．．．．．．．．．．．61
2．4 字排版技巧．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．62
2．4．1 实战——输入横排文字．．．．．．．．．．．．．．．．．．．62
2．4．2 实战——输入直排文字．．．．．．．．．．．．．．．．．．．64
2．4．3 实战——输入段落文字．．．．．．．．．．．．．．．．．．．65
2．4．4 实战——输入沿路径排列文字．．．．．．．．．66
新媒体美工全攻略1-6．indd 4 2017/11/1 13：58：18
4．1 实战——横幅广告Banner设计．．．．．．105
4．1．1 制作高饱和度的蓝色背景．．．．．．．．．．．．．105
4．1．2 制作主题文字与装饰图案效果．．．．．．．107
4．1．3 制作横幅广告界面效果．．．．．．．．．．．．．．．．．109
4．2 实战——公众号封面设计．．．．．．．．．．．．．．．110
4．2．1 制作中心渐变红色背景效果．．．．．．．．．．110
4．2．2 制作主题文字与装饰效果．．．．．．．．．．．．．．111
4．2．3 制作公众号封面的界面效果．．．．．．．．．．115
4．3 实战——底部广告设计．．．．．．．．．．．．．．．．．．116
4．3．1 制作背景框架效果．．．．．．．．．．．．．．．．．．．．．．．．116
4．3．2 制作书籍介绍效果．．．．．．．．．．．．．．．．．．．．．．．．118
4．3．3 制作底部广告界面效果．．．．．．．．．．．．．．．．．119
4．4 实战——公众号求关注设计．．．．．．．．．．．120
4．4．1 制作人物头像效果．．．．．．．．．．．．．．．．．．．．．．．．120
4．4．2 制作文字效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．123
4．4．3 制作公众号求关注界面效果．．．．．．．．．．124
4．5 实战——推荐公众号设计．．．．．．．．．．．．．．125
4．5．1 制作主体效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．126
微信公众号界面设计
4
章
第
6．1 实战——七夕活动促销H5页面设计．162
6．1．1 制作金色微粒背景效果．．．．．．．．．．．．．．．．．162
6．1．2 制作金色渐变立体文字．．．．．．．．．．．．．．．．．166
6．1．3 制作发光文字与按钮效果．．．．．．．．．．．．．168
6．2 实战——新品上市活动H5页面设计．170
6．2．1 制作浅色条纹背景效果．．．．．．．．．．．．．．．．．171
6．2．2 制作书籍与装饰效果．．．．．．．．．．．．．．．．．．．．172
6．2．3 制作新品上市文字效果．．．．．．．．．．．．．．．．．175
6．3 实战——简约企业招聘H5页面设计．179
6．3．1 运用渐变合成背景效果．．．．．．．．．．．．．．．．．179
6．3．2 制作六边形框架与文字效果．．．．．．．．．．182
6．3．3 制作招聘信息效果．．．．．．．．．．．．．．．．．．．．．．．．184
H5手机网页界面设计
6
章
第
5．1 实战——名人版朋友圈设计．．．．．．．．．．．129
5．1．1 制作黑色背景与头像效果．．．．．．．．．．．．．129
5．1．2 制作黑色背景与头像效果．．．．．．．．．．．．．133
5．1．3 制作名人版朋友圈界面效果．．．．．．．．．．135
5．2 实战——简介版朋友圈设计．．．．．．．．．．．136
5．2．1 制作头像与装饰效果．．．．．．．．．．．．．．．．．．．．137
5．2．2 制作信息简介效果．．．．．．．．．．．．．．．．．．．．．．．．140
5．2．3 制作简介版朋友圈界面效果．．．．．．．．．．142
5．3 实战——招代理朋友圈设计．．．．．．．．．．．143
5．3．1 制作金色粒子背景效果．．．．．．．．．．．．．．．．．144
5．3．2 制作头像与文字效果．．．．．．．．．．．．．．．．．．．．145
5．3．3 制作招代理朋友圈界面效果．．．．．．．．．．149
5．4 实战——店招版朋友圈设计．．．．．．．．．．．150
5．4．1 制作暗红欧式花纹背景效果．．．．．．．．．．151
5．4．2 制作店招效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．153
5．4．3 制作店招版朋友圈界面效果．．．．．．．．．．155
5．5 实战——插画版朋友圈设计．．．．．．．．．．．156
5．5．1 制作插画背景效果．．．．．．．．．．．．．．．．．．．．．．．．157
5．5．2 制作文字信息效果．．．．．．．．．．．．．．．．．．．．．．．．159
5．5．3 制作插画版朋友圈界面效果．．．．．．．．．．159
微信朋友圈界面设计
5
章
第
3．2 实战——绿色视觉小程序图标设计．．．．71
3．2．1 制作渐变花朵标志．．．．．．．．．．．．．．．．．．．．．．．．．．72
3．2．2 制作文字与界面效果．．．．．．．．．．．．．．．．．．．．．．74
3．3 实战——旅游小程序界面设计．．．．．．．．．．76
3．3．1 制作矩形搜索框效果．．．．．．．．．．．．．．．．．．．．．．77
3．3．2 制作功能菜单与首页广告效果．．．．．．．．．79
3．3．3 制作导航栏效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．82
3．4 实战——星东小程序界面设计．．．．．．．．．．83
3．4．1 制作店招与搜索框效果．．．．．．．．．．．．．．．．．．．84
3．4．2 制作抢购倒计时效果．．．．．．．．．．．．．．．．．．．．．．86
3．4．3 制作商品展示效果．．．．．．．．．．．．．．．．．．．．．．．．．．88
3．5 实战——婚纱摄影小程序界面设计．．．．90
3．5．1 制作首页广告效果．．．．．．．．．．．．．．．．．．．．．．．．．．91
3．5．2 制作服务中心效果．．．．．．．．．．．．．．．．．．．．．．．．．．93
3．5．3 制作彩色导航栏．．．．．．．．．．．．．．．．．．．．．．．．．．．．．95
3．6 实战——食品小程序界面设计．．．．．．．．．．96
3．6．1 制作店招与搜索框效果．．．．．．．．．．．．．．．．．．．97
3．6．2 制作商品活动区效果．．．．．．．．．．．．．．．．．．．．．．99
3．6．3 制作商品详情效果．．．．．．．．．．．．．．．．．．．．．．．．101
4．5．2 制作推荐公众号界面效果．．．．．．．．．．．．．127
新媒体美工全攻略1-6．indd 5 2017/11/1 13：58：18
目 录
6．4 实战——微信口令红包H5页面设计．185
6．4．1 制作口令红包效果．．．．．．．．．．．．．．．．．．．．．．．．186
6．4．2 制作多个按钮效果．．．．．．．．．．．．．．．．．．．．．．．．188
6．4．3 制作口令红包界面效果．．．．．．．．．．．．．．．．．191
6．5 实战——企业邀请函H5页面设计．．．．192
6．5．1 制作欧式边框背景效果．．．．．．．．．．．．．．．．．193
6．5．2 制作标志与邀请信息效果．．．．．．．．．．．．．195
6．5．3 制作底部装饰效果．．．．．．．．．．．．．．．．．．．．．．．．197
7．1 实战——店招设计．．．．．．．．．．．．．．．．．．．．．．．201
7．1．1 制作扁平化风格背景效果．．．．．．．．．．．．．201
7．1．2 制作文字与标志效果．．．．．．．．．．．．．．．．．．．．203
7．1．3 制作微店店招界面效果．．．．．．．．．．．．．．．．．205
7．2 实战——店铺公告设计．．．．．．．．．．．．．．．．．206
7．2．1 制作纯净蓝色星空背景效果．．．．．．．．．．207
7．2．2 制作公告信息效果．．．．．．．．．．．．．．．．．．．．．．．．208
7．2．3 制作微店公告栏界面效果．．．．．．．．．．．．．209
7．3 实战——商品简介区设计．．．．．．．．．．．．．．210
7．3．1 制作趣味顶部广告效果．．．．．．．．．．．．．．．．．．211
7．3．2 制作食品展示区效果．．．．．．．．．．．．．．．．．．．．213
7．3．3 制作微店展示区界面效果．．．．．．．．．．．．．215
7．4 实战——店铺收藏设计．．．．．．．．．．．．．．．．．216
7．4．1 制作梦幻紫色背景效果．．．．．．．．．．．．．．．．．217
7．4．2 制作主题文字效果．．．．．．．．．．．．．．．．．．．．．．．．217
7．4．3 制作界面效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．219
7．5 实战——美妆微店界面设计．．．．．．．．．．．220
7．5．1 制作店招与首页效果．．．．．．．．．．．．．．．．．．．．220
7．5．2 制作促销方案效果．．．．．．．．．．．．．．．．．．．．．．．．223
7．5．3 制作商品展示区效果．．．．．．．．．．．．．．．．．．．．224
微商店铺界面设计
7
章
第
8．1 实战——微博LOGO设计．．．．．．．．．．．．．229
8．1．1 制作蓝色球形标志．．．．．．．．．．．．．．．．．．．．．．．．229
8．1．2 制作文字及界面效果．．．．．．．．．．．．．．．．．．．．234
微博新媒体界面设计
8
章
第
9．1 实战——主播招募令设计．．．．．．．．．．．．．．256
9．1．1 制作背景效果．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．．256
9．1．2 制作人物与标题文字效果．．．．．．．．．．．．．258
9．1．3 制作招募信息效果．．．．．．．．．．．．．．．．．．．．．．．．260
9．2 实战——直播宣传长页设计．．．．．．．．．．．263
9．2．1 制作直播讲师信息效果．．．．．．．．．．．．．．．．．263
9．2．2 制作讲师简介与课程大纲效果．．．．．．．266
9．2．3 制作图书推荐与求关注效果．．．．．．．．．．268
9．3 实战——主播推荐海报设计．．．．．．．．．．．270
9．3．1 调整主播推荐海报背景颜色．．．．．．．．．．270
9．3．2 制作金色发光标题文字效果．．．．．．．．．．272
9．3．3 制作立体按钮与标志效果．．．．．．．．．．．．．273
9．4 实战——主播顶部展示设计．．．．．．．．．．．275
9．4．1 制作蓝色条纹背景效果．．．．．．．．．．．．．．．．．276
9．4．2 制作装饰图案效果．．．．．．．．．．．．．．．．．．．．．．．．277
9．4．3 制作人物与彩色文字效果．．．．．．．．．．．．．278
9．5 实战——游戏直播间设计．．．．．．．．．．．．．．281
9．5．1 制作紫色立体边框效果．．．．．．．．．．．．．．．．．281
9．5．2 制作主播头像边框效果．．．．．．．．．．．．．．．．．283
9．5．3 制作装饰与文字效果．．．．．．．．．．．．．．．．．．．．286