Photoshop网页设计
合集下载
相关主题
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
图像多增强阅读活力，反之，则会减少阅读兴
趣 文字比例太低则会削弱沟通力和亲和力，阅读 兴趣也会随之减弱
8
9
10
“网格设计”
确定版面率
页面整体布局
页面局部布局
11
网站标志
导航
会员 登录 万客 会刊 万科 楼盘
网站广告
广告
新闻中心
广告 版权信息
趣味空间 12
2.1.2、常见的网页布局结构
35
Pop——照片组合式布局（新世界以全景式自由的 展现出来）
多张照片经过组合，产生新的情趣，显现出全景式 的效果。
36
37
38
2.1常见的网页布局结构
8．FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体 的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
1．“国字”型布局 “国”字型布局由“同”字型布局进化而来，因布局 结构与汉字“国”相似而得名。 特点：结构清晰、主次分明
13
2.1.2、常见的网页布局结构
2．T型布局 T型布局结构因与英文大写字母T相似而得名。也称为“厂字 型”。 特点：结构具有变化性，相对显得活泼。
14
2.1.2、常见的网页布局结构
确定版面率
页面整体布局
页面局部布局
网页布局的流程图
5
确定版面率 网页的版面率是图片和文字在浏览器中所占 的比率，也就是网页中留白区域的面积。
留白区域面积少会使页面局促、紧凑； 留白区域多，会使页面自由、大气
6
7
还要确定网页中文字和图像的面积比率，这 关系到版面产生的生动性、记忆性和阅读性
拖动可将切片限制为正方形。按住【Alt】键拖动 可从中心绘制
81
82
固定长宽比设置高宽比。
83
固定大小指定切片的高度和宽度。输入整数像素值
84
3.2.2.创建切片
基于参考线创建切片
85
3.2.2.创建切片
基于图层的切片
86
3.2.3.切片选择工具
69
2.5网页设计实例分析
放置名称及导航文字： 确定颜色后，我们要对付文字。文字应该能够与图 片产生互补：繁杂的图片 / 简单的字体；优雅的图 片 / 优雅的字体；平静的图片 / 装饰性强的字体。
70
2.5网页设计实例分析
采用补色： 在这个例子中，一张半抽象的图片传达出 D&T 建 筑设计公司的风格，如果按上面的那个例子来选择 颜色，那蓝 / 灰的颜色会对 LOGO 产生过于抑制的 影响，所以我们使用一种反色。
3．标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页 面和一些注册页面等。
15
2.1.2、常见的网页布局结构
4．左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种 布局结构。
16
17
2.1.2、常见的网页布局结构
5．上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在 于是一种上下分为两页的框架。
利用键盘中的【K】键来直接选择【切片工具】或【切片选 择工具】 选择多个切片。 调整切片大小方法 复制切片 组合切片 更改切片堆栈 对齐切片 分布切片 删除切片 锁定切片
Photoshop 网页设计
——2013年省赛培训
1
Photoshop 网页设计
1、为什么要使用ps设计网页
2、如何使用ps设计网页 3、切图——通向DW的道路 4、如何评价网页设计
2
Photoshop 网页设计
1、为什么要使用photoshop设计网页
效果图 便于审阅 易修改
56
页面布局
首页可分为各种结构，注意每个部位的距离， 要根据一定的规律去做排版，注意利用版心 线，网格等控制网页部位的比例。
57
网页留白
注意控制留白之间的距离，如上中下之间的 距离，左中右之间的距离，甚至网页上每个 模块与模块之间的距离，模块内容距离边界 的距离，文字与文字之间的行高等，要保持 等距。
将小图像间隔地排列，视线无论从哪个角度都可以 进入页面，从而给人以开放的轻松气氛
22
23
页面中均一排列着多幅小图像，给人开放。 轻松的感受，容易吸引浏览者，
24
页面中的图像过少，则看起来不像是全景 式布局
25
页面中的图像过大，给人迟钝和沉重的感受
26
27
28
Pop——卫星式布局 （以太阳为中心的卫星环绕型）
58
网页中的文字
特殊字体慎用 在ps中虽然可以使用任意字体，但是当页面上传至 网络空间中，文字是非图片形式可编辑的时候，你 不能预测你的访问者在他们的计算机上将看到什么。 一般中文网页正文文字大小多为12px，门户网站的 正文多为14px，英文文字大小多为9px，标题多为 14——16px（注意ps设计里正文文字样式效果设置 为无，切不可出现锐利、浑厚等样式）
71
2.5网页设计实例分析
补色形成强烈的对比效果：整张图片都是由冷色构成，蓝色不 能传达它那种冲劲及活力。 解决办法：我们用蓝色的反色或补色来安排 LOGO 区域。我们 首先在色轮上确定蓝色的位置，然后选择与其相对的另一种颜 色（见上方色轮）。互为补色的两种颜色并不拥有同一种基色 （不象其它颜色关系，比如，绿色及橙色，这两种颜色都有黄 色在里面），这就是为什么互为补色的两种颜色能够形成非常 强烈的对比。在上方这个色轮中，紫色与黄色具有最高的色度 对比。 72
53
2.2网页设计配色
原始配色方案 亮色 柔和色
中性色调色板
54
2.3 网页设计的注意事项
页面的宽度和高度 页面布局 栏目布局 网页留白 网页翔实 分辨率设置 颜色的使用 视觉效果新颖
55
页面的宽度和高度
宽度：控制在960px——1003px，如果超过 1003px，浏览器将会出现左右滚动条，这样 不够美观，为什么呢，以IE浏览器为准，浏 览器显示范围只有1003px，剩下的21像素刚 好是IE上的滚动条的宽度。 高度：一般设计首页效果图高度有限制，网 站内页高度不做限制，注意设计高度要随着 页面内容拉伸，保证页面的左右是一个整体。
63
2.4网页中的图片格式
PSD——用于原图保存，方便修改 BMP位图——文件大，不受网络欢迎 GIF——文件小，可存储动画，适合网络环 境 JPEG——性能优异，应用广泛，是网络主流 图片格式 PNG——结合了GIF和JPEG的优点
64
2.5网页设计实例分析
网站界面设计:如何设计网页横幅
3
Photoshop 网页设计
2、如何使用photoshop设计网页
2.1、排版——网页布局 2.2、配色
2.3、网页设计的注意事项 2.5、网页中图片格式
2.5、网页设计实例分析
4
2.1.1、网页的布局设计流程
按照一定的规律把网页中图像和文字等页面元素排 列到最佳的位置，也可以称为网页排版 分割、组织和传达信息，并且使网页容易阅读，使 界面具有亲和力和可用性是网页设计师的责任。
2.2网页设计配色
以上案例和前面的有着相同色相的配色方案，但是色度上的 调整体现出多样性。它适合用于有个性主题的网站设计 。
52
2.2网页设计配色
具有广范围色度的互补配色方案。这种配色方案最基本的形式是仅 由两种颜色构成，但是可以很容易通过色调，浅色和阴影色的形式扩展。 但从严格意义上来说，互补色看起来很刺眼。因此最好通过在它们之间 留白。这种配色方案更适用于个性主题的网站设计。
74
75
3.2切片的基本操作
1.切割类型 2.创建切片 3.切片选择工具 4.切片操作的注意事项 5.切片的技巧
76
1.切片类型
均匀切割
77
78
3.2.1.切片类型
手动切割
79
80
3.2.2.创建切片
使用切片工具创建切片
拖动的同时确定切片比例
固定长宽比设置高宽比 固定大小指定切片的高度和宽度。 在要创建切片的区域上拖动。按住【Shift】键并
62
网页元素与图层
网页中的元素有很多，像Banner条、文本框、文字、 版权、Logo、广告等。 尽量把这些相对独立的元素放在不同的图层中，这 样方便以后的再编辑。 图层多时，可建立多个图层组来进行管理。单击图 层面板右上角的小三角按钮，从弹出菜单中选择” 新建组”，在随后出现的对话框中为新建组取一个 名称，确定即可。建组名称依据可依照css对版块的 布局名称来命名。如头部文件可建立立一个header 组，在header中建立banner logo等常用的组
67
2.5网页设计实例分析
寻找一张具表现力的图片：
一张漂亮的图片是设计一个漂亮横幅的关键。在找到照片后，我 们还要仔细研究一下截取照片的哪一部分可以最有效传达相关的 信息。其实在实践中你会发现，要发掘这一点并不难。
68
2.5网页设计实例分析
用颜色分配区域：
用吸管工具从图片选取一种较深的颜色，将这种颜色的色阶由暗到 亮排列，然后我们再来决定哪一个区域用哪一种颜色。特别要注意 的是能产生对比。
59
分辨率设置
统一为72dpi，不按照这个为参照的话，打在 图层上的文字会显示不正常尺寸，或大或小。
60
颜色的使用
一般网页出现的颜色不超过三种，具体根据 建站类型和阅读群体，选择正确的色相型。
61
视觉效果新颖
网页形象要不落俗套，要重点突出一个“新” 字，这个原则要求要结合自身的实际情况创 作出一个独特的网站。 在设计网页时，要尽量做到“少”而“精”， 又必须突出“新”。把内容的独特的元素， 如名称、标志、标准字体、标准色等，通过 这些元素的合理应用，来实现网站形象与个 性的塑造提高视觉效果。
黑白灰渐变
44
2.2 网页设计配色
色相明度渐变
45
46
47
2.2 网页设计配色
加入黑色的纯度变化和加入白色的纯度变化
48
49
2.2 网页设计配色
50
2.2网页设计配色
以上是一个传统的类似色配色方案，虽然它的视觉感染力很强， 但是对于设计一个让人印象深刻的网站来说，颜色的对比度不够强。
51
布局特点是中间有一个太阳，各个卫星以全 景布局展开，让浏览者沉浸在可以自由参与 的开发感之中。 太阳带来坚定不移的安定感和卫星带来的开 放感并存。
29
30
31
卫星式布局包括以下几种类型：
以太阳为中心，小卫星均匀散开
32
33
以太阳为中心的不同散开形式
பைடு நூலகம்
34
太阳不在页面的中心，卫星在周围排列
设计一个吸引人的网页主横幅其实可以很简 单，我们思考的只是如何分配区域。
65
2.5网页设计实例分析
从划分空间开始：
一个网页横幅的宽度横跨整个网页，而高度又相当窄。将其 分成三个区域：名称，图片及导航链接。然后我们分别对其 进行设计。
66
2.5网页设计实例分析
如何分配区域：
一般来说，我们都是将名称放在左上方，而导航栏目放在下方。其空 间的分配应该慎重。空间的比例大小是根据具体的名称（长或短）和 图片而定的，很难说有什么最佳的比例。但是，应该避免将上方空间 分成两等份，因为分成两等份会让人的注意力都放在版式上，而不是 放在内容上。采用不对称的分布效果会更好。
18
2.1.2、常见的网页布局结构
6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局的 页面布局技术
19
2.1.2、常见的网页布局结构
7．POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面 设计通常以一张精美的海报画面为布局的主体。
20
21
Pop——全景式布局（用趣味性吸引浏览者）
Photoshop 网页设计
3、 切图——通向Dreamweaver的道路
3.1、切图基本概念 3.2、PS切片的基本操作 3.3、输出
73
3.1 基本概念
1.切图，是一种网页制作技术，他是将美工 效果图转换为页面效果图的重要技术。 Photoshop、Fireworks提供了切图技术，Flash 则直接提供了网页格式输出技术（不需要切 图）。 2.切片，是切图的直接结果，切图实际上就 将图切分为一系列的切片
39
2.2网页设计配色
色彩是您的网站的最重要的一个部分 彩色系的颜色具有三个基本属性：
色相、
彩度、
明度。
40
2.2网页设计配色
41
2.2网页设计配色
RGB
三原色
红黄蓝
42
2.2网页设计配色
类似色
十 二 色 相
60° 120°
180° 对比色 互补色
43
2.2网页设计配色
色调： 黑 白 灰
趣 文字比例太低则会削弱沟通力和亲和力，阅读 兴趣也会随之减弱
8
9
10
“网格设计”
确定版面率
页面整体布局
页面局部布局
11
网站标志
导航
会员 登录 万客 会刊 万科 楼盘
网站广告
广告
新闻中心
广告 版权信息
趣味空间 12
2.1.2、常见的网页布局结构
35
Pop——照片组合式布局（新世界以全景式自由的 展现出来）
多张照片经过组合，产生新的情趣，显现出全景式 的效果。
36
37
38
2.1常见的网页布局结构
8．FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体 的布局方式。在这种布局中，大部分甚至整个页面都是Flash。
1．“国字”型布局 “国”字型布局由“同”字型布局进化而来，因布局 结构与汉字“国”相似而得名。 特点：结构清晰、主次分明
13
2.1.2、常见的网页布局结构
2．T型布局 T型布局结构因与英文大写字母T相似而得名。也称为“厂字 型”。 特点：结构具有变化性，相对显得活泼。
14
2.1.2、常见的网页布局结构
确定版面率
页面整体布局
页面局部布局
网页布局的流程图
5
确定版面率 网页的版面率是图片和文字在浏览器中所占 的比率，也就是网页中留白区域的面积。
留白区域面积少会使页面局促、紧凑； 留白区域多，会使页面自由、大气
6
7
还要确定网页中文字和图像的面积比率，这 关系到版面产生的生动性、记忆性和阅读性
拖动可将切片限制为正方形。按住【Alt】键拖动 可从中心绘制
81
82
固定长宽比设置高宽比。
83
固定大小指定切片的高度和宽度。输入整数像素值
84
3.2.2.创建切片
基于参考线创建切片
85
3.2.2.创建切片
基于图层的切片
86
3.2.3.切片选择工具
69
2.5网页设计实例分析
放置名称及导航文字： 确定颜色后，我们要对付文字。文字应该能够与图 片产生互补：繁杂的图片 / 简单的字体；优雅的图 片 / 优雅的字体；平静的图片 / 装饰性强的字体。
70
2.5网页设计实例分析
采用补色： 在这个例子中，一张半抽象的图片传达出 D&T 建 筑设计公司的风格，如果按上面的那个例子来选择 颜色，那蓝 / 灰的颜色会对 LOGO 产生过于抑制的 影响，所以我们使用一种反色。
3．标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页 面和一些注册页面等。
15
2.1.2、常见的网页布局结构
4．左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种 布局结构。
16
17
2.1.2、常见的网页布局结构
5．上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在 于是一种上下分为两页的框架。
利用键盘中的【K】键来直接选择【切片工具】或【切片选 择工具】 选择多个切片。 调整切片大小方法 复制切片 组合切片 更改切片堆栈 对齐切片 分布切片 删除切片 锁定切片
Photoshop 网页设计
——2013年省赛培训
1
Photoshop 网页设计
1、为什么要使用ps设计网页
2、如何使用ps设计网页 3、切图——通向DW的道路 4、如何评价网页设计
2
Photoshop 网页设计
1、为什么要使用photoshop设计网页
效果图 便于审阅 易修改
56
页面布局
首页可分为各种结构，注意每个部位的距离， 要根据一定的规律去做排版，注意利用版心 线，网格等控制网页部位的比例。
57
网页留白
注意控制留白之间的距离，如上中下之间的 距离，左中右之间的距离，甚至网页上每个 模块与模块之间的距离，模块内容距离边界 的距离，文字与文字之间的行高等，要保持 等距。
将小图像间隔地排列，视线无论从哪个角度都可以 进入页面，从而给人以开放的轻松气氛
22
23
页面中均一排列着多幅小图像，给人开放。 轻松的感受，容易吸引浏览者，
24
页面中的图像过少，则看起来不像是全景 式布局
25
页面中的图像过大，给人迟钝和沉重的感受
26
27
28
Pop——卫星式布局 （以太阳为中心的卫星环绕型）
58
网页中的文字
特殊字体慎用 在ps中虽然可以使用任意字体，但是当页面上传至 网络空间中，文字是非图片形式可编辑的时候，你 不能预测你的访问者在他们的计算机上将看到什么。 一般中文网页正文文字大小多为12px，门户网站的 正文多为14px，英文文字大小多为9px，标题多为 14——16px（注意ps设计里正文文字样式效果设置 为无，切不可出现锐利、浑厚等样式）
71
2.5网页设计实例分析
补色形成强烈的对比效果：整张图片都是由冷色构成，蓝色不 能传达它那种冲劲及活力。 解决办法：我们用蓝色的反色或补色来安排 LOGO 区域。我们 首先在色轮上确定蓝色的位置，然后选择与其相对的另一种颜 色（见上方色轮）。互为补色的两种颜色并不拥有同一种基色 （不象其它颜色关系，比如，绿色及橙色，这两种颜色都有黄 色在里面），这就是为什么互为补色的两种颜色能够形成非常 强烈的对比。在上方这个色轮中，紫色与黄色具有最高的色度 对比。 72
53
2.2网页设计配色
原始配色方案 亮色 柔和色
中性色调色板
54
2.3 网页设计的注意事项
页面的宽度和高度 页面布局 栏目布局 网页留白 网页翔实 分辨率设置 颜色的使用 视觉效果新颖
55
页面的宽度和高度
宽度：控制在960px——1003px，如果超过 1003px，浏览器将会出现左右滚动条，这样 不够美观，为什么呢，以IE浏览器为准，浏 览器显示范围只有1003px，剩下的21像素刚 好是IE上的滚动条的宽度。 高度：一般设计首页效果图高度有限制，网 站内页高度不做限制，注意设计高度要随着 页面内容拉伸，保证页面的左右是一个整体。
63
2.4网页中的图片格式
PSD——用于原图保存，方便修改 BMP位图——文件大，不受网络欢迎 GIF——文件小，可存储动画，适合网络环 境 JPEG——性能优异，应用广泛，是网络主流 图片格式 PNG——结合了GIF和JPEG的优点
64
2.5网页设计实例分析
网站界面设计:如何设计网页横幅
3
Photoshop 网页设计
2、如何使用photoshop设计网页
2.1、排版——网页布局 2.2、配色
2.3、网页设计的注意事项 2.5、网页中图片格式
2.5、网页设计实例分析
4
2.1.1、网页的布局设计流程
按照一定的规律把网页中图像和文字等页面元素排 列到最佳的位置，也可以称为网页排版 分割、组织和传达信息，并且使网页容易阅读，使 界面具有亲和力和可用性是网页设计师的责任。
2.2网页设计配色
以上案例和前面的有着相同色相的配色方案，但是色度上的 调整体现出多样性。它适合用于有个性主题的网站设计 。
52
2.2网页设计配色
具有广范围色度的互补配色方案。这种配色方案最基本的形式是仅 由两种颜色构成，但是可以很容易通过色调，浅色和阴影色的形式扩展。 但从严格意义上来说，互补色看起来很刺眼。因此最好通过在它们之间 留白。这种配色方案更适用于个性主题的网站设计。
74
75
3.2切片的基本操作
1.切割类型 2.创建切片 3.切片选择工具 4.切片操作的注意事项 5.切片的技巧
76
1.切片类型
均匀切割
77
78
3.2.1.切片类型
手动切割
79
80
3.2.2.创建切片
使用切片工具创建切片
拖动的同时确定切片比例
固定长宽比设置高宽比 固定大小指定切片的高度和宽度。 在要创建切片的区域上拖动。按住【Shift】键并
62
网页元素与图层
网页中的元素有很多，像Banner条、文本框、文字、 版权、Logo、广告等。 尽量把这些相对独立的元素放在不同的图层中，这 样方便以后的再编辑。 图层多时，可建立多个图层组来进行管理。单击图 层面板右上角的小三角按钮，从弹出菜单中选择” 新建组”，在随后出现的对话框中为新建组取一个 名称，确定即可。建组名称依据可依照css对版块的 布局名称来命名。如头部文件可建立立一个header 组，在header中建立banner logo等常用的组
67
2.5网页设计实例分析
寻找一张具表现力的图片：
一张漂亮的图片是设计一个漂亮横幅的关键。在找到照片后，我 们还要仔细研究一下截取照片的哪一部分可以最有效传达相关的 信息。其实在实践中你会发现，要发掘这一点并不难。
68
2.5网页设计实例分析
用颜色分配区域：
用吸管工具从图片选取一种较深的颜色，将这种颜色的色阶由暗到 亮排列，然后我们再来决定哪一个区域用哪一种颜色。特别要注意 的是能产生对比。
59
分辨率设置
统一为72dpi，不按照这个为参照的话，打在 图层上的文字会显示不正常尺寸，或大或小。
60
颜色的使用
一般网页出现的颜色不超过三种，具体根据 建站类型和阅读群体，选择正确的色相型。
61
视觉效果新颖
网页形象要不落俗套，要重点突出一个“新” 字，这个原则要求要结合自身的实际情况创 作出一个独特的网站。 在设计网页时，要尽量做到“少”而“精”， 又必须突出“新”。把内容的独特的元素， 如名称、标志、标准字体、标准色等，通过 这些元素的合理应用，来实现网站形象与个 性的塑造提高视觉效果。
黑白灰渐变
44
2.2 网页设计配色
色相明度渐变
45
46
47
2.2 网页设计配色
加入黑色的纯度变化和加入白色的纯度变化
48
49
2.2 网页设计配色
50
2.2网页设计配色
以上是一个传统的类似色配色方案，虽然它的视觉感染力很强， 但是对于设计一个让人印象深刻的网站来说，颜色的对比度不够强。
51
布局特点是中间有一个太阳，各个卫星以全 景布局展开，让浏览者沉浸在可以自由参与 的开发感之中。 太阳带来坚定不移的安定感和卫星带来的开 放感并存。
29
30
31
卫星式布局包括以下几种类型：
以太阳为中心，小卫星均匀散开
32
33
以太阳为中心的不同散开形式
பைடு நூலகம்
34
太阳不在页面的中心，卫星在周围排列
设计一个吸引人的网页主横幅其实可以很简 单，我们思考的只是如何分配区域。
65
2.5网页设计实例分析
从划分空间开始：
一个网页横幅的宽度横跨整个网页，而高度又相当窄。将其 分成三个区域：名称，图片及导航链接。然后我们分别对其 进行设计。
66
2.5网页设计实例分析
如何分配区域：
一般来说，我们都是将名称放在左上方，而导航栏目放在下方。其空 间的分配应该慎重。空间的比例大小是根据具体的名称（长或短）和 图片而定的，很难说有什么最佳的比例。但是，应该避免将上方空间 分成两等份，因为分成两等份会让人的注意力都放在版式上，而不是 放在内容上。采用不对称的分布效果会更好。
18
2.1.2、常见的网页布局结构
6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局的 页面布局技术
19
2.1.2、常见的网页布局结构
7．POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面 设计通常以一张精美的海报画面为布局的主体。
20
21
Pop——全景式布局（用趣味性吸引浏览者）
Photoshop 网页设计
3、 切图——通向Dreamweaver的道路
3.1、切图基本概念 3.2、PS切片的基本操作 3.3、输出
73
3.1 基本概念
1.切图，是一种网页制作技术，他是将美工 效果图转换为页面效果图的重要技术。 Photoshop、Fireworks提供了切图技术，Flash 则直接提供了网页格式输出技术（不需要切 图）。 2.切片，是切图的直接结果，切图实际上就 将图切分为一系列的切片
39
2.2网页设计配色
色彩是您的网站的最重要的一个部分 彩色系的颜色具有三个基本属性：
色相、
彩度、
明度。
40
2.2网页设计配色
41
2.2网页设计配色
RGB
三原色
红黄蓝
42
2.2网页设计配色
类似色
十 二 色 相
60° 120°
180° 对比色 互补色
43
2.2网页设计配色
色调： 黑 白 灰