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