界面设计篇.ppt

1、Photoshop图像处理项目式教程界面设计篇PhotoshopCS4Photoshop图像处理项目式教程项目一 网页设计 任务任务1 1：个人网站页面设计：个人网站页面设计 任务任务2 2：商业网站页面设计：商业网站页面设计 任务任务3 3：游戏娱乐网站页面设：游戏娱乐网站页面设计计 网页人机交互界面（网页人机交互界面（UIUI）设计）设计任任务务布布置置 Photoshop图像处理项目式教程素材任务一分析任务一分析明星个人网页框架设计明星个人网页框架设计 项目效果图原始素材Photoshop图像处理项目式教程1、新建文件2、设计网页结构3、绘制背景4、导航条的设计与制作5、主体部分的设计与

2、制作6、文字的编辑于排版7、以正确的格式保存文件设计思路任务一分析任务一分析明星个人网页框架设计明星个人网页框架设计 Photoshop图像处理项目式教程输出设置是控制如何设置输出设置是控制如何设置 HTML 文件的格式、如何文件的格式、如何命名文件和切片，以及在存储优化图像时如何处理背命名文件和切片，以及在存储优化图像时如何处理背景图像。景图像。素材导入、设置输出 知识点和技能知识点和技能Photoshop图像处理项目式教程素材项目效果图原始素材任务一分析任务一分析个人网页框架设计个人网页框架设计Photoshop图像处理项目式教程任务二分析任务二分析礼品购物网页设计礼品购物网页设计 项目效

3、果图Photoshop图像处理项目式教程1、新建文件2、设计网页结构3、绘制背景4、导航条的设计与制作5、主体部分的设计与制作6、文字的编辑与排版7、以正确的格式保存文件设计思路任务二分析任务二分析礼品购物网页设计礼品购物网页设计 Photoshop图像处理项目式教程知识点和技能知识点和技能使用使用“自定义形状自定义形状”可以灵活绘制各种非对称图形或可以灵活绘制各种非对称图形或选择选择PS自带的各种复杂图形。自带的各种复杂图形。绘图工具 自定义形状 Photoshop图像处理项目式教程知识点和技能知识点和技能图层样式的编辑通过通过“图层样式图层样式”对话框，复合选择各种图层样式，可对话框，复合

4、选择各种图层样式，可以获得不同的显示效果。以获得不同的显示效果。Photoshop图像处理项目式教程素材项目效果图原始素材任务二分析任务二分析商业网站页面设计商业网站页面设计Photoshop图像处理项目式教程素材任务三分析任务三分析游戏网站页面设计游戏网站页面设计项目效果图原始素材Photoshop图像处理项目式教程1、新建文件2、设计网页结构3、绘制背景以及Logo4、导航条的设计与制作5、主体部分的设计与制作6、文字的编辑与排版7、以正确的格式保存文件设计思路任务三分析任务三分析游戏网站页面设计游戏网站页面设计Photoshop图像处理项目式教程网页切片 知识点和技能知识点和技能绘制完成

5、的网页通常需要进行切片之后，才能应用到绘制完成的网页通常需要进行切片之后，才能应用到实际网页设计与制作中。切片使用实际网页设计与制作中。切片使用 HTML 表或表或 CSS 图层将图像划分为若干较小的图像，这些图像可在图层将图像划分为若干较小的图像，这些图像可在 Web 页上重新组合。通过划分图像，可以指定不同页上重新组合。通过划分图像，可以指定不同的的 URL 链接以创建页面导航，或使用其自身的优化链接以创建页面导航，或使用其自身的优化设置对图像的每个部分进行优化。设置对图像的每个部分进行优化。切片的方法有很多种：可以使用切片的方法有很多种：可以使用“切片切片”工具直接在工具直接在图像上绘制

6、切片线条，或使用图层来设计图形，然后图像上绘制切片线条，或使用图层来设计图形，然后基于图层创建切片。最常使用的是使用基于图层创建切片。最常使用的是使用“切片切片”工具工具绘制切片。绘制切片。Photoshop图像处理项目式教程Web图形格式与优化、将 HTML 文本添加到切片 知识点和技能知识点和技能Web 图形格式可以是位图（栅格）或矢量。位图格式图形格式可以是位图（栅格）或矢量。位图格式（GIF、JPEG、PNG 和和 WBMP）与分辨率有关，这意）与分辨率有关，这意味着位图图像的尺寸随显示器分辨率的不同而发生变化，味着位图图像的尺寸随显示器分辨率的不同而发生变化，图像品质也可能会发生变化

7、。矢量格式（图像品质也可能会发生变化。矢量格式（SVG 和和 SWF）与分辨率无关，可以对图像进行放大或缩小，而不会降与分辨率无关，可以对图像进行放大或缩小，而不会降低图像品质。低图像品质。当选取当选取“无图像无图像”类型的切片时，可以输入要在所生成类型的切片时，可以输入要在所生成Web页的切片区域中显示的文本。此文本可以是纯文本页的切片区域中显示的文本。此文本可以是纯文本或使用标准或使用标准HTML标记设置格式的文本。标记设置格式的文本。Photoshop图像处理项目式教程素材项目效果图原始素材任务三分析任务三分析娱乐网站页面设计娱乐网站页面设计Photoshop图像处理项目式教程实践模式实

8、践模式网页人机交互界面（网页人机交互界面（UI）设计）设计参考效果图 技能要求根据交互性、整体风格和色彩搭配原则设计一个网站首页。素材Photoshop图像处理项目式教程项目二 产品界面设计 任务任务1 1：播放器界面设计：播放器界面设计 任务任务2 2：手机界面设计：手机界面设计 任务任务3 3：MP4MP4界面设计界面设计 产品界面设计综合训练产品界面设计综合训练任任务务布布置置 Photoshop图像处理项目式教程任务一分析任务一分析音频播放器音频播放器1 1 项目效果图Photoshop图像处理项目式教程1、新建文件2、制作渐变背景3、制作播放器面板4、添加高光条5、制作按键6、绘制进

9、度条7、添加文字等界面内容8、以正确的格式保存文件设计思路任务一分析任务一分析音频播放器音频播放器1 1 Photoshop图像处理项目式教程创建硬边的直线，在画面中绘制当前的前景色。创建硬边的直线，在画面中绘制当前的前景色。铅笔工具知识点和技能知识点和技能Photoshop图像处理项目式教程画笔工具知识点和技能知识点和技能创建颜色的柔和描边，在画面中绘制当前的前景色。创建颜色的柔和描边，在画面中绘制当前的前景色。“画笔预设画笔预设”菜单与菜单与“铅笔铅笔”工具相同，可设置工具相同，可设置“主主直径直径”、“硬度硬度”大小。大小。Photoshop图像处理项目式教程画笔面板知识点和技能知识点和

10、技能Photoshop图像处理项目式教程画笔面板知识点和技能知识点和技能Photoshop图像处理项目式教程画笔面板知识点和技能知识点和技能Photoshop图像处理项目式教程画笔面板知识点和技能知识点和技能Photoshop图像处理项目式教程项目效果图任务一分析任务一分析音频播放器音频播放器2 2 Photoshop图像处理项目式教程素材任务二分析任务二分析“Iphone“Iphone 3G”3G”手机界面手机界面 项目效果图原始素材Photoshop图像处理项目式教程1、新建文件2、绘制手机形状3、绘制手机顶部、侧部按键4、编辑素材-背景5、绘制手机音孔6、绘制手机home按键7、以正确的

11、格式保存文件设计思路任务二分析任务二分析“Iphone“Iphone 3G”3G”手机界面手机界面 Photoshop图像处理项目式教程填充图层和调整图层 知识点和技能知识点和技能“纯色纯色”、“渐变渐变”、“图案图案”属于填充图层命令，其余选属于填充图层命令，其余选项属于调整图层命令。可根项属于调整图层命令。可根据需要进行设置。调整图层据需要进行设置。调整图层与填充图层也具有图层不透与填充图层也具有图层不透明度和混合模式选项。明度和混合模式选项。Photoshop图像处理项目式教程素材项目效果图原始素材任务二分析任务二分析“Iphone4”“Iphone4”手机界面手机界面 Photosho

12、p图像处理项目式教程素材任务三分析任务三分析MP4MP4界面界面1 1 项目效果图原始素材Photoshop图像处理项目式教程设计思路任务三分析任务三分析MP4MP4界面界面1 1 1、新建文件2、绘制MP4形状3、绘制MP4屏幕4、绘制MP4按键5、编辑素材-背景6、以正确的格式保存文件Photoshop图像处理项目式教程通道知识点和技能知识点和技能RGB、CMYK、Lab图像的图像的“通通道道”面板均不面板均不同，但其同，但其“通通道道”面板均包面板均包含图像中的所含图像中的所有通道。通道有通道。通道名称左侧均为名称左侧均为通道内容缩览通道内容缩览图，编辑通道图，编辑通道缩览图会自动缩览图会自动更新。更新。Photoshop图像处理项目式教程素材项目效果图原始素材任务三分析任务三分析MP4MP4界面界面2 2 Photoshop图像处理项目式教程实践模式实践模式“ipad“ipad”界面设计界面设计 参考效果图 技能要求根据参考效果图制作ipad产品界面。