界面设计篇分解.ppt

任务一分析——精美按钮设计 任务一分析——精美按钮设计 项目效果图 任务一分析——简约型音乐播放器界面设计 素材 任务二分析——“Iphone 3G”手机界面 项目效果图 原始素材 1、新建文件 2、绘制手机形状 3、绘制手机顶部、侧部按键 4、编辑素材-背景 5、绘制手机音孔 6、绘制手机home按键 7、以正确的格式保存文件 设计思路 任务二分析——“Iphone 3G”手机界面 填充图层和调整图层 知识点和技能 “纯色”、“渐变”、“图案”属于填充图层命令，其余选项属于调整图层命令。可根据需要进行设置。调整图层与填充图层也具有图层不透明度和混合模式选项。 素材 项目效果图 原始素材 任务二分析——“Iphone4”手机界面 素材 任务三分析——竖排MP4界面设计 项目效果图 原始素材 设计思路 任务三分析——竖排MP4界面设计 1、新建文件 2、绘制MP4形状 3、绘制MP4屏幕 4、绘制MP4按键 5、编辑素材-背景 6、以正确的格式保存文件 通道 知识点和技能 RGB、CMYK、Lab图像的“通道”面板均不同，但其“通道”面板均包含图像中的所有通道。通道名称左侧均为通道内容缩览图，编辑通道缩览图会自动更新。 素材 项目效果图 原始素材 任务三分析——横排MP4界面设计 任务四分析——登陆界面设计 项目效果图 设计思路 任务四分析——登陆界面设计 1.新建文件。 2.绘制圆角矩形。 3.填充颜色。 4.绘制登陆头像。 5.输入文字。 6.添加文字效果。 7.保存文件。 Photoshop图像处理项目式教程 界面设计篇PhotoshopCS6 项目一 网页设计 任务1：网站页面元素设计 任务2：个人网站页面设计 任务2：商业网站页面设计 任务3：婚纱网页设计 BBS页面设计 任务布置 项目效果图 设计思路 1.新建文件。 2.绘制圆角矩形并添加图层样式。 3.绘制斜线，添加“斜线效果图案”。 4.输入文字，导入箭头符号。 5.添加图层样式。 6.保存文件。 知识点和技能 图层组 旧版本中的图层组只能设置混合模式和不透明度，而新版本中的图层组则可以象普通图层一样设置图层样式、填充、不透明度以及其它高级混合选项 。 项目效果图 任务一分析——导航栏设计 素材 任务二分析——明星个人网页框架设计 项目效果图 原始素材 1、 新建文件 2、 设计网页结构 3、 绘制背景 4、 导航条的设计与制作 5、 主体部分的设计与制作 6、 文字的编辑于排版 7、 以正确的格式保存文件 设计思路 任务二分析——明星个人网页框架设计 输出设置是控制如何设置 HTML 文件的格式、如何命名文件和切片，以及在存储优化图像时如何处理背景图像。 素材导入、设置输出 知识点和技能 素材 项目效果图 原始素材 任务二分析——个人网页框架设计 任务三分析——礼品购物网页设计 项目效果图 1、 新建文件 2、 设计网页结构 3、 绘制背景 4、 导航条的设计与制作 5、 主体部分的设计与制作 6、 文字的编辑于排版 7、 以正确的格式保存文件 设计思路 任务二分析——礼品购物网页设计 知识点和技能 使用“自定义形状” 可以灵活绘制各种非对称图形或 选择PS自带的各种复杂图形。 绘图工具 自定义形状 知识点和技能 图层样式的编辑 通过“图层样式”对话框，复合选择各种图层样式，可以获得不同的显示效果。 素材 项目效果图 原始素材 任务三分析——汽车网站页面设计 素材 任务四分析——主页面设计 项目效果图 原始素材 1、 新建文件 2、 设计网页结构 3、 绘制背景以及Logo 4、 导航条的设计与制作 5、 主体部分的设计与制作 6、 文字的编辑于排版 7、 以正确的格式保存文件 设计思路 任务四分析——主页面设计 网页切片 知识点和技能 绘制完成的网页通常需要进行切片之后，才能应用到实际网页设计与制作中。切片使用 HTML 表或 CSS 图层将图像划分为若干较小的图像，这些图像可在 Web 页上重新组合。通过划分图像，可以指定不同的 URL 链接以创建页面导航，或使用其自身的优化设置对图像的每个部分进行优化。 切片的方法有很多种：可以使用“切片”工具直接在图像上绘制切片线条，或使用图层来设计图形，然后基于图层创建切片。最常使用的是使用“切片”工具绘制切片。 Web图形格式与优化 、将 HTML 文本添加到切片 知识点和技能 Web 图形格式可以是位图（栅格）或矢量。位图格式（GIF、JPEG、PNG 和 WBMP）与分辨率有关，这意味着位图图像的尺寸随显示器分辨率的不同而发生变化，图像品质也可能会发生变化。矢量格式（SVG 和 SWF）与分辨率无关，可以对图像进行放大或缩小，而不会降