Photoshop网页设计剖析.ppt

Photoshop 网页设计 Photoshop 网页设计 1、为什么要使用ps设计网页 2、如何使用ps设计网页 3、切图——通向DW的道路 4、如何评价网页设计 Photoshop 网页设计 1、为什么要使用photoshop设计网页 Photoshop 网页设计 2.1.2、常见的网页布局结构 1．“国字”型布局 “国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。 特点：结构清晰、主次分明 2.1.2、常见的网页布局结构 2．T型布局 T型布局结构因与英文大写字母T相似而得名。也称为“厂字型”。 特点：结构具有变化性，相对显得活泼。 2.1.2、常见的网页布局结构 3．标题正文型 标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。 2.1.2、常见的网页布局结构 4．左右框架型布局 左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。 2.1.2、常见的网页布局结构 5．上下框架型 上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。 2.1.2、常见的网页布局结构 6. 综合框架型 综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术 2.1.2、常见的网页布局结构 7．POP布局 POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。 2.1常见的网页布局结构 8．FLASH布局 FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。 2.2网页设计配色 色彩是您的网站的最重要的一个部分 彩色系的颜色具有三个基本属性： 色相、 彩度、 明度。 2.2网页设计配色 2.2网页设计配色 2.2网页设计配色 2.2网页设计配色 2.2 网页设计配色 2.2 网页设计配色 2.2网页设计配色 2.2网页设计配色 2.2网页设计配色 2.2网页设计配色 2.3 网页设计的注意事项 页面的宽度和高度 页面布局 栏目布局 网页留白 网页翔实 分辨率设置 颜色的使用 视觉效果新颖 页面的宽度和高度 宽度：控制在960px——1003px，如果超过1003px，浏览器将会出现左右滚动条，这样不够美观，为什么呢，以IE浏览器为准，浏览器显示范围只有1003px，剩下的21像素刚好是IE上的滚动条的宽度。 高度：一般设计首页效果图高度有限制，网站内页高度不做限制，注意设计高度要随着页面内容拉伸，保证页面的左右是一个整体。 页面布局 首页可分为各种结构，注意每个部位的距离，要根据一定的规律去做排版，注意利用版心线，网格等控制网页部位的比例。 网页留白 注意控制留白之间的距离，如上中下之间的距离，左中右之间的距离，甚至网页上每个模块与模块之间的距离，模块内容距离边界的距离，文字与文字之间的行高等，要保持等距。 网页中的文字 特殊字体慎用 在ps中虽然可以使用任意字体，但是当页面上传至网络空间中，文字是非图片形式可编辑的时候，你不能预测你的访问者在他们的计算机上将看到什么。 一般中文网页正文文字大小多为12px，门户网站的正文多为14px，英文文字大小多为9px，标题多为14——16px（注意ps设计里正文文字样式效果设置为无，切不可出现锐利、浑厚等样式） 分辨率设置 统一为72dpi，不按照这个为参照的话，打在图层上的文字会显示不正常尺寸，或大或小。 颜色的使用 一般网页出现的颜色不超过三种，具体根据建站类型和阅读群体，选择正确的色相型。 视觉效果新颖 网页形象要不落俗套，要重点突出一个“新”字，这个原则要求要结合自身的实际情况创作出一个独特的网站。 在设计网页时，要尽量做到“少”而“精”，又必须突出“新”。把内容的独特的元素，如名称、标志、标准字体、标准色等，通过这些元素的合理应用，来实现网站形象与个性的塑造提高视觉效果。 网页元素与图层 网页中的元素有很多，像Banner条、文本框、文字、版权、Logo、广告等。 尽量把这些相对独立的元素放在不同的图层中，这样方便以后的再编辑。 图层多时，可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮，从弹出菜单中选择”新建组”，在随后出现的对话框中为新建组取一个名称，确定即可。建组名称依据可依照css对版块的布局名称来命名。如头部文件可建立立一个header组，在header中建立banner logo等常用的组 2.4网页中的图片格式 PSD——用于原图保存，方便修改 BMP位图——文件大，不受网络欢迎 GIF——文件小，可存储动画，适合网络环境 JPEG——性能优异，应用广泛，是网络主流图片格式 PNG——结合了GIF和JPEG的优点 2.5网