购买

¥ 30.0

加入VIP
  • 专属下载特权
  • 现金文档折扣购买
  • VIP免费专区
  • 千万文档免费下载

上传资料

关闭

关闭

关闭

封号提示

内容

首页 Photoshop网页设计

Photoshop网页设计.ppt

Photoshop网页设计

烟雨梦兮
2018-10-14 0人阅读 举报 0 0 暂无简介

简介:本文档为《Photoshop网页设计ppt》,可适用于IT/计算机领域

Photoshop网页设计年省赛培训Photoshop网页设计、为什么要使用ps设计网页、如何使用ps设计网页、切图通向DW的道路、如何评价网页设计Photoshop网页设计、为什么要使用photoshop设计网页便于审阅效果图易修改Ps功能:图像处理、编辑、通道、图层、路径综合运用图像色彩的校正各种特效滤镜的使用特效字的制作图像输出与优化等,灵活运用图层风格流体变形及褪底和蒙板制作出千变万化的图像特效Photoshop网页设计、排版网页布局、配色、网页设计实例分析、网页中图片格式、如何使用photoshop设计网页、网页设计的注意事项、网页的布局设计流程按照一定的规律把网页中图像和文字等页面元素排列到最佳的位置也可以称为网页排版分割、组织和传达信息并且使网页容易阅读使界面具有亲和力和可用性是网页设计师的责任。网页布局的流程图*确定版面率网页的版面率是图片和文字在浏览器中所占的比率也就是网页中留白区域的面积。留白区域面积少会使页面局促、紧凑留白区域多会使页面自由、大气**还要确定网页中文字和图像的面积比率这关系到版面产生的生动性、记忆性和阅读性图像多增强阅读活力反之则会减少阅读兴趣文字比例太低则会削弱沟通力和亲和力阅读兴趣也会随之减弱***“网格设计”**、常见的网页布局结构.“国字”型布局“国”字型布局由“同”字型布局进化而来因布局结构与汉字“国”相似而得名。特点:结构清晰、主次分明其页面的最上部分一般放置网站的标志和导航栏或Banner广告页面中间主要放置网站的主要内容最下部分一般放置网站的版权信息和联系方式等。、常见的网页布局结构.T型布局T型布局结构因与英文大写字母T相似而得名。也称为“厂字型”。特点:结构具有变化性相对显得活泼。其页面的顶部一般放置横网站的标志或Banner广告下方左侧是导航栏菜单下方右侧则用于放置网页正文等主要内容感觉就像在“墙壁”的某一侧打开一个缺口给人互动的、开放的感受、常见的网页布局结构.标题正文型标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。上面是标题或标志下面是正文绝大多数搜索引擎站点都采用这种类型。、常见的网页布局结构.左右框架型布局左右框架型布局结构是一些大型论坛和企业经常使用的一种布局结构。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接有时会有一个小的标题或标志。右侧则放置网站的主要内容单侧齐行式布局(理性与自由共存的版式设计)这种布局形式是指以左对齐式为基调将右侧散开。在追求理智与自由感平衡的场合常使用这种布局形式。、常见的网页布局结构.上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。、常见的网页布局结构综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术、常见的网页布局结构.POP布局POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。文字或图像充满整个页面有时是以单一的背景颜色或图像填充页面美观、大气、充满艺术气息。Pop满屏版式Pop全景式布局(用趣味性吸引浏览者)将小图像间隔地排列视线无论从哪个角度都可以进入页面从而给人以开放的轻松气氛*Pop全景式布局(用趣味性吸引浏览者)将小图像间隔地排列视线无论从哪个角度都可以进入页面从而给人以开放的轻松气氛图像的位置是重点页面中均一排列着多幅小图像给人开放。轻松的感受容易吸引浏览者*页面中的图像过少则看起来不像是全景式布局*页面中的图像过大给人迟钝和沉重的感受***Pop卫星式布局(以太阳为中心的卫星环绕型)布局特点是中间有一个太阳各个卫星以全景布局展开让浏览者沉浸在可以自由参与的开发感之中。太阳带来坚定不移的安定感和卫星带来的开放感并存。***卫星式布局包括以下几种类型:以太阳为中心小卫星均匀散开**以太阳为中心的不同散开形式*太阳不在页面的中心卫星在周围排列*Pop照片组合式布局(新世界以全景式自由的展现出来)多张照片经过组合产生新的情趣显现出全景式的效果。***常见的网页布局结构.FLASH布局FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中大部分甚至整个页面都是Flash。网页设计配色色彩是您的网站的最重要的一个部分彩色系的颜色具有三个基本属性:色相、彩度、明度。颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色而其他所有颜色均属于彩色。从心理学和视觉的角度出发彩色具有三个属性:色相、明度、纯度(彩度)  色相:色彩的色相是色彩的最大特征是指能够比较确切地表示某种颜色色别的名称。色彩的成分越多色彩的色相越不鲜明。  纯度:色彩的彩度表示彩色相对与非彩色差别的程度。是描述色彩离开相同明度中性灰色的程度的色彩感觉属性是主观心理量。一般是直接用色彩中纯色成分的主观观察量表示。如蒙塞尔系统中的、、等。若彩度也用百分数表示时其含义是“含彩量”或“含灰量”。彩度越高颜色越艳彩度越低颜色越涩  明度:色彩的明度是指色彩的明亮程度。各种有色物体由于它们反射光量的区别就产生颜色的明暗强弱。色彩的明度有两种情况:一是同一色相不同明度二是各种颜色的不同明度。网页设计配色色相是色彩的首要特征是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性而色相也就是由原色、间色和复色来构成的。色相色彩可呈现出来的质的面貌。自然界中各各不同的色相是无限丰富的如紫红、银灰、橙黄等。色相即各类色彩的相貌称谓色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色就可以得到一个色彩环。色环通常包括种不同的颜色。网页设计配色三原色RGB红黄蓝光的三原色和颜料的三原色原色:  也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多变化丰富但这三种颜色却是最基本的原色原色是其他颜色调配不出来的。除白色外把三原色相互混合可以调和出其他种颜色。  根据三原色的特性做出相应的色彩搭配有最迅速最有力最强烈的传达视觉信息效果。网页设计配色°°°类似色对比色互补色十二色相对比色是人的视觉感官所产生的一种生理现象是视网膜对色彩的平衡作用。指在色相环上相距度到度之间的两种颜色称为对比色。  在色相环中每一个颜色对面(度对角)的颜色,称为"对比色(互补色)"把对比色放在一起,会给人强烈的排斥感若混合在一起,会调出浑浊的颜色如:红与绿,蓝与橙,黄与紫互为对比色。  也可以这样定义对比色:两种可以明显区分的色彩叫对比色。包括色相对比、明度对比、饱和度对比、冷暖对比、补色对比、色彩和消色的对比等。是构成明显色彩效果的重要手段也是赋予色彩以表现力的重要方法。其表现形式又有同时对比和相继对比之分。比如黄和蓝、紫和绿、红和青任何色彩和黑、白、灰深色和浅色冷色和暖色亮色和暗色都是对比色关系。网页设计配色色调:黑白灰黑白灰渐变网页设计配色色相明度渐变明度也叫亮度指颜色的深浅、明暗程度没有色相和饱和度的区别。不同的颜色反射的光量强弱不一因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。黄色分析:  选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值时HSB数值中的SB也呈现最高值页面呈现最高纯度亮度纯黄色。因此黄色在三原色中也是亮度最高的颜色。  结论:  HSB中SB呈现的数值越高饱和度明度越高页面色彩强烈艳丽由于黄色是亮度最高的颜色这一特性也给人视觉产生强烈刺激的状态对视觉刺激是迅速的、警戒、醒目的效果但不易于长时间观看。红色分析:  我们看到RGB中R的数值是混合了G、B因此红色的纯度轻微降低颜色稍偏深红。HSB数值中S显示的饱和度为B为因此颜色还是较为饱和明亮。  结论:  主色R数值较高的时候由于混合了G、B少许颜色饱和度明度稍微降低视觉刺激减弱红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性该网页整体看来仍然厚重而热烈的表达了主题。网页设计配色加入黑色的纯度变化和加入白色的纯度变化纯度(Chroma):  也叫S饱和度指色彩的鲜艳程度。原色最纯颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色加入了白色或者黑色使得它的纯度低颜色趋于柔和、沉稳。纯度例图纯度分析:  上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。  我们看到蓝色S数值呈现%具有相当高的饱和度B明度为玫瑰色S饱和度数值为B明度为%。当饱和度和明度同时呈最高值时色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低饱和度较高而玫瑰色的明度较高该颜色纯度随之加强因此玫瑰色相对蓝色对人的视觉刺激更强烈。结论:  HSB模式中S(饱和度)和B(亮度明度)呈现的数值越高饱和度明度越高页面色彩强烈艳丽对视觉刺激是迅速的醒目的效果但不易于长时间的观看。以上两种颜色的S数值接近是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态相对于SB来说意义不大。在HSB模式中H(hues)表示色相S(saturation)表示饱和度B(brightness)表示亮度。网页设计配色网页设计配色以上是一个传统的类似色配色方案虽然它的视觉感染力很强但是对于设计一个让人印象深刻的网站来说颜色的对比度不够强。在色轮上度角内相邻接的色统称为类似色例如红-红橙-橙黄-黄绿-绿青-青紫-紫等均为类似色类似色由于色相对比不强给人有色感平静、调和的感觉因此在配色中常应用。网页设计配色以上案例和前面的有着相同色相的配色方案但是色度上的调整体现出多样性。它适合用于有个性主题的网站设计。网页设计配色具有广范围色度的互补配色方案。这种配色方案最基本的形式是仅由两种颜色构成但是可以很容易通过色调浅色和阴影色的形式扩展。但从严格意义上来说互补色看起来很刺眼。因此最好通过在它们之间留白。这种配色方案更适用于个性主题的网站设计。网页设计配色原始配色方案亮色柔和色中性色调色板网页设计的注意事项页面的宽度和高度页面布局栏目布局网页留白网页翔实分辨率设置颜色的使用视觉效果新颖页面的宽度和高度宽度:控制在pxpx如果超过px浏览器将会出现左右滚动条这样不够美观为什么呢以IE浏览器为准浏览器显示范围只有px剩下的像素刚好是IE上的滚动条的宽度。高度:一般设计首页效果图高度有限制网站内页高度不做限制注意设计高度要随着页面内容拉伸保证页面的左右是一个整体。页面布局首页可分为各种结构注意每个部位的距离要根据一定的规律去做排版注意利用版心线网格等控制网页部位的比例。网页留白注意控制留白之间的距离如上中下之间的距离左中右之间的距离甚至网页上每个模块与模块之间的距离模块内容距离边界的距离文字与文字之间的行高等要保持等距。网页中的文字特殊字体慎用在ps中虽然可以使用任意字体但是当页面上传至网络空间中文字是非图片形式可编辑的时候你不能预测你的访问者在他们的计算机上将看到什么。一般中文网页正文文字大小多为px门户网站的正文多为px英文文字大小多为px标题多为px(注意ps设计里正文文字样式效果设置为无切不可出现锐利、浑厚等样式)也许在你的计算机里看起来相当好的网页在另一个不同平台上看起来可能就会变形走样。所以要避免特殊字体。分辨率设置统一为dpi不按照这个为参照的话打在图层上的文字会显示不正常尺寸或大或小。颜色的使用一般网页出现的颜色不超过三种具体根据建站类型和阅读群体选择正确的色相型。视觉效果新颖网页形象要不落俗套要重点突出一个“新”字这个原则要求要结合自身的实际情况创作出一个独特的网站。在设计网页时要尽量做到“少”而“精”又必须突出“新”。把内容的独特的元素如名称、标志、标准字体、标准色等通过这些元素的合理应用来实现网站形象与个性的塑造提高视觉效果。网页元素与图层网页中的元素有很多像Banner条、文本框、文字、版权、Logo、广告等。尽量把这些相对独立的元素放在不同的图层中这样方便以后的再编辑。图层多时可建立多个图层组来进行管理。单击图层面板右上角的小三角按钮从弹出菜单中选择”新建组”在随后出现的对话框中为新建组取一个名称确定即可。建组名称依据可依照css对版块的布局名称来命名。如头部文件可建立立一个header组在header中建立bannerlogo等常用的组网页中的图片格式PSD用于原图保存方便修改BMP位图文件大不受网络欢迎GIF文件小可存储动画适合网络环境JPEG性能优异应用广泛是网络主流图片格式PNG结合了GIF和JPEG的优点、PSD格式(Photoshop格式)  Adobe公司开发的图像处理软件Photoshop中自建的标准文件格式就是PSD格式在该软件所支持的各种格式中PSD格式存取速度比其它格式快很多功能也很强大。由于Photoshop软件越来越广泛地应用所以这个格式也逐步流行起来。PSD格式是Photoshop的专用格式里面可以存放图层、通道、遮罩等多种设计草稿。这个格式只用于原图存储方便于修改之用。  、BMP位图格式  最典型的应用BMP格式的程序就是Windows的画笔。文件几乎不压缩占用磁盘空间较大它的颜色存储格式有位、位、位及位该格式是当今应用比较广泛的一种格式。但缺点是该格式文件比较大所以只能应用在单机上不受网络欢迎。  、GIF格式  该图形格式却在Internet上被广泛地应用原因主要是种颜色已经较能满足主页图形需要而且文件较小适合网络环境传输和使用。可以存储动画属性。  、JPEG格式  可以用不同的压缩比例对这种文件压缩其压缩技术十分先进对图像质量影响不大因此可以用最少的磁盘空间得到较好的图像质量。由于它优异的性能所以应用非常广泛而在Internet上它更是主流图形格式。  、PNG格式  PNG(PortableNetworkGraphics)是一种新兴的网络图形格式结合了GIF和JPEG的优点具有存储形式丰富的特点。PNG最大色深为bit采用无损压缩方案存储。:在制作图片时单张图片不要超过KB每个网页的图片总量不要超过KB(一般情况)。据统计分析每页不超过KB图片的网页其下载速度是可以让人接受的。所有的图片都必须“减肥”为小图片(×)一般可以控制在KB以内动画控制在KB以内较大的图片可以分割成小图片。网页设计实例分析网站界面设计:如何设计网页横幅设计一个吸引人的网页主横幅其实可以很简单我们思考的只是如何分配区域。从划分空间开始:一个网页横幅的宽度横跨整个网页而高度又相当窄。将其分成三个区域:名称图片及导航链接。然后我们分别对其进行设计。网页设计实例分析如何分配区域:一般来说我们都是将名称放在左上方而导航栏目放在下方。其空间的分配应该慎重。空间的比例大小是根据具体的名称(长或短)和图片而定的很难说有什么最佳的比例。但是应该避免将上方空间分成两等份因为分成两等份会让人的注意力都放在版式上而不是放在内容上。采用不对称的分布效果会更好。网页设计实例分析寻找一张具表现力的图片:一张漂亮的图片是设计一个漂亮横幅的关键。在找到照片后我们还要仔细研究一下截取照片的哪一部分可以最有效传达相关的信息。其实在实践中你会发现要发掘这一点并不难。网页设计实例分析用颜色分配区域:用吸管工具从图片选取一种较深的颜色将这种颜色的色阶由暗到亮排列然后我们再来决定哪一个区域用哪一种颜色。特别要注意的是能产生对比。网页设计实例分析放置名称及导航文字:确定颜色后我们要对付文字。文字应该能够与图片产生互补:繁杂的图片简单的字体优雅的图片优雅的字体平静的图片装饰性强的字体。网页设计实例分析采用补色:在这个例子中一张半抽象的图片传达出DT建筑设计公司的风格如果按上面的那个例子来选择颜色那蓝灰的颜色会对LOGO产生过于抑制的影响所以我们使用一种反色。网页设计实例分析补色形成强烈的对比效果:整张图片都是由冷色构成蓝色不能传达它那种冲劲及活力。解决办法:我们用蓝色的反色或补色来安排LOGO区域。我们首先在色轮上确定蓝色的位置然后选择与其相对的另一种颜色(见上方色轮)。互为补色的两种颜色并不拥有同一种基色(不象其它颜色关系比如绿色及橙色这两种颜色都有黄色在里面)这就是为什么互为补色的两种颜色能够形成非常强烈的对比。在上方这个色轮中紫色与黄色具有最高的色度对比。网页设计实例分析、切图通向Dreamweaver的道路、切图基本概念、PS切片的基本操作、输出Photoshop网页设计基本概念切图是一种网页制作技术他是将美工效果图转换为页面效果图的重要技术。Photoshop、Fireworks提供了切图技术Flash则直接提供了网页格式输出技术(不需要切图)。切片是切图的直接结果切图实际上就将图切分为一系列的切片ps中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部分并对每个部分应用不同的压缩和交互设置。【存储为Web和设备所用格式】对话框可让我们在存储为一些网页兼容的格式之前预览不同的优化设置并调整颜色调板、透明度和品质设置。当然对图像切割的最大好处就是提高图像的下载速度减轻网络的负担。另外分多块下载的图像在视觉上也会给观众以“进行中”的感觉在心理上给人以下载速度快的错觉。虽然在网络上很多图片都进行了切割但在正常显示状态下我们完全不能直接看出哪些图片被切割过而哪些是完整的。因此切片无疑是一种巧妙的、“鱼与熊掌兼得”的解决方案。要确定哪些图片被切割过可以在网页中的文本区域往图片区域拖曳如果图片分小块变暗变蓝则该图片是被切割过的如图所示。切割类型创建切片切片选择工具切片操作的注意事项切片的技巧切片的基本操作切片类型均匀切割切片使用HTML表格或CSS层将图像划分为若干较小的图像这些图像可在网页上重新组合成完整的图像。通过划分图像我们可以指定不同的URL链接以创建页面导航或使用其自身的优化设置对图像的每个部分进行压缩。而在ps中提供了“切片工具”和“切片选择工具”两种实现切割图像的工具手动切割切片类型切片最重要的是区分出网页中哪些是图像区域而哪些是文本区域并创建图文并茂的网站界面。使用“切片工具”的方法和使用选区类似拖曳出希望切片的区域即可除对于有些切片本身就位于一个独立的图层那么就更容易创建切片。首先选择该图层创建切片使用切片工具创建切片拖动的同时确定切片比例固定长宽比设置高宽比固定大小指定切片的高度和宽度。在要创建切片的区域上拖动。按住【Shift】键并拖动可将切片限制为正方形。按住【Alt】键拖动可从中心绘制绘制的任何切片都将自动出现在文档窗口中选取选项栏中的样式设置正常在我们拖动的同时来确定切片比例固定长宽比设置高宽比。固定大小指定切片的高度和宽度。输入整数像素值基于参考线创建切片创建切片按CtrlR先调出标尺!为了做到精确的等分我们不采用直接从标尺上拖曳的方式来建立参考线而采用:视图>>>新建参考线在对话框中准确输入参考线的位置这时可以把文档放大以便参考线更准确基于图层的切片创建切片基于图层的切片与图层的像素内容相关联因此移动切片、组合切片、划分切片、调整切片大小和对齐切片的唯一方法是编辑相应的图层将自动切片和基于图层的切片转换为用户切片:图像中的所有自动切片都链接在一起并共享相同的优化设置。如果要为自动切片设置不同的优化设置则必须将其提升为用户切片。使用切片选择工具选择一个或多个要转换的切片。单击选项栏中的【提升】。切片选择工具利用键盘中的【K】键来直接选择【切片工具】或【切片选择工具】选择多个切片。调整切片大小方法复制切片组合切片更改切片堆栈对齐切片分布切片删除切片锁定切片【切片选择工具】是在我们使用【切片工具】创建切片后用来更精确的调整和划分切片用的我们可以选择某个部分的切片利用控制句柄来调整它的大小也可以利用选项栏中的【划分】按钮来从一个切片中划分出多个切片。调整切片大小对切片大小调整方法有两种一种通过切片的控制点进行自由调整另一种通过双击切片在选项对话框中进行调整。如图所示:选择切片通过使用切片选择工具对图片进行单击选择按住【shift】键可选择多个切片。移动切片选择切片后按住鼠标左键不放进行移动组合切片选择要组合的切片点击鼠标右键选择【组合切片】选项。一种通过切片的控制点进行自由调整另一种通过双击切片在选项对话框中进行调整。A置为顶层B前移一层C后移一层D置为底层A顶对齐B垂直居中对齐C底对齐D左对齐E水平居中对齐F右对齐A按顶分布B垂直居中分布C按底分布D按左分布E水平居中分布F按右分布更改切片的堆栈顺序选择切片通过选项栏中的堆叠顺序选项进行更改更改切片的堆栈顺序选择切片通过选项栏中的堆叠顺序选项进行更改。对齐切片选择切片通过选项栏的对齐选项按钮进行对齐分布切片选择切片通过选项栏中分布按钮进行分布删除切片选择【视图】【清除切片】进行删除。如想删除某一个切片可单击鼠标右键选择【删除】。锁定切片选择【视图】【锁定切片】切片操作的注意事项输出背景前景图片线切片命名切片保存切片最重要的是区分出网页中哪些是图像区域哪些是文本区域并创建图文并茂的网站界面切片前,先要仔细对设计进行分析,考虑要因设计制宜切片时,可不断放大缩小设计观察精准度,可以根据辅助线进行切片切片后,要对导出的切片进行审核是否符合要求,比如大小颜色图片质量透明背景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。、输出背景观察背景:如果是单一颜色的,则不需要切片,网页制作的时候设置背景RGB即可如果是有规律的图片,那么按最小单位切一条几个像素的切片,单独优化输出,制作时不是插入图片而是作为背景图片可以横向平铺达到设计效果。(为什么不是全部切片完了再输出呢,因为,背景图片上一般还会叠加其他的图片,如LOGO,就要输出透明背景的前景图片有时切片会有重叠现象,所以采用分别输出的方法能达到比较好的效果。)、前景图片(包括网站标识,特殊字体的标题,导航,中英文切换的文字连接,特殊的小图标特殊的边角)观察背景上的网站标识:如果直接插入切片输出会连带背景图案一起输出,那样以后制作也面的时候可能标识部分的图和背景对接不好产生错位切片的时候隐藏背景单独优化输出如果一张网页里面有重复用到的一张图,只需要切一个一次就可以了、线如果是直角的单色的边框,可以表格边框设置,就不需要切片如果是不规则角(圆角,图案),可以单单切下框的角,然后观察剩余的线:按照如切片背景图案的方法进行切片、切片命名切片单独输出,可以按照其用途重新命名,如背景可以为MAINBGGIF,网站标识为LOGOGIF等,切记不要用中文命名,那样在制作的时候插入图片的图片名可能就是一大串乱码切片保存首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面,但是如果素材图片多时,最好另起一个文件夹单独保存,以便制作和修改的方便FW切片导出时设置为"只要切片输出",如果按照"HTML和图像"输出会有很多的废代码,所以手动设置布局比较理想切片的技巧按网页结构和图片特点来切按颜色范围来切切片大小切片区域无整性导出类型保留源文件按网页的结构和图片的特点进行切片(一)根据颜色范围来切:如果一个区域中颜色对比的范围不是很大的就只有几种颜色这样的话就应该单独的把他切出来如果一个区域中就一种颜色,写代码的时候就可以直接用背景色来表示。颜色过多的话也没有关系很多时候都要用到渐变的效果应该把切片数量切的多一些尽量把单个切片控制在一个颜色范围的轮廓内。其次网页切片要点(二)切片大小:把网页的切片切的越小越好这是有道理的。切片越小的话可以加快网页下载图片的速度让多个图片同时下载而不是只下载一个大图片所以切片大小要根据需要来切标志LOGO等主要部分尽量切在一个切片内防止显示遇到特殊情况时显示一部分圆角表格部分要根据显示区域的大小来切控制好边缘和边有时候切出来的切片并不是直接插入到DW了事而需要在DW中编辑比如有的图片应该设置成背景图片网页切片要点(三)切片区域无整性:保证完整的一部分在一个切片内例如某区域的标题文字以后修改时方便网页切片要点(四)导出类型:颜色单一过渡少的应该导出为GIF颜色过渡比较多颜色丰富的应该导出为JPG有动画的部分应该导出为GIF动画。网页切片要点(五)保留源文件:即使页面作好了也要保留带切片层的源文件说不上哪天要改某一个部分例如文字什么的直接修改单独导出所用的切片就可以了切图技巧主要有几下几点属性均匀的区域适合分为一个切片均匀主要是指颜色和形状都没有变化或者在X或在Y方向上没有变化。属性渐变的区域适合分为一个切片渐变有两种表现形式颜色渐变形状渐变根据原图的内容布局确定整体的切分策略即切分要有分块的思想要在想象中将整个布局看成是一个两个table然后在具体到每个table去考虑里面应该如何切。、切片是生成表格的依据切片的过程要先总体后局部即先把网页整体切分成几个大部分再细切其中的小部分。、对于渐变的效果或圆角等图片特殊效果需要在页面中表现出来的要单独切出来、在DW中进行编辑时少用图片如果能用背景颜色代替的就使用背景颜色能使用图案的也尽可能使用图案平铺来形成背景、图片应该是平均切而不是大一块小一块的以免图片出现速度不平衡切图切的好不好在我们打开这个站点时候看到图片出来的先后顺序和速度是可以发觉的。输出HTML文件选择文件菜单另存为WEB格式命令保存时会生成indexhtml图片文件会存放在images文件夹中(CS要选择存储为html和图片)如何评价网页Photoshop网页设计网页元素是否齐全放置位置是否合理网页颜色的配置是否协调导航条是否齐全以及与网页是否协调弄清楚是模仿设计还是创意设计切片划分是否合理Ps功能:图像处理、编辑、通道、图层、路径综合运用图像色彩的校正各种特效滤镜的使用特效字的制作图像输出与优化等,灵活运用图层风格流体变形及褪底和蒙板制作出千变万化的图像特效********其页面的最上部分一般放置网站的标志和导航栏或Banner广告页面中间主要放置网站的主要内容最下部分一般放置网站的版权信息和联系方式等。其页面的顶部一般放置横网站的标志或Banner广告下方左侧是导航栏菜单下方右侧则用于放置网页正文等主要内容感觉就像在“墙壁”的某一侧打开一个缺口给人互动的、开放的感受上面是标题或标志下面是正文绝大多数搜索引擎站点都采用这种类型。其布局结构主要分为左右两侧的页面。左侧一般主要为导航栏链接有时会有一个小的标题或标志。右侧则放置网站的主要内容单侧齐行式布局(理性与自由共存的版式设计)这种布局形式是指以左对齐式为基调将右侧散开。在追求理智与自由感平衡的场合常使用这种布局形式。文字或图像充满整个页面有时是以单一的背景颜色或图像填充页面美观、大气、充满艺术气息。Pop满屏版式*Pop全景式布局(用趣味性吸引浏览者)将小图像间隔地排列视线无论从哪个角度都可以进入页面从而给人以开放的轻松气氛图像的位置是重点***************颜色可以分为非彩色和彩色两大类。非彩色指黑色、白色和各种深浅不一的灰色而其他所有颜色均属于彩色。从心理学和视觉的角度出发彩色具有三个属性:色相、明度、纯度(彩度)  色相:色彩的色相是色彩的最大特征是指能够比较确切地表示某种颜色色别的名称。色彩的成分越多色彩的色相越不鲜明。  纯度:色彩的彩度表示彩色相对与非彩色差别的程度。是描述色彩离开相同明度中性灰色的程度的色彩感觉属性是主观心理量。一般是直接用色彩中纯色成分的主观观察量表示。如蒙塞尔系统中的、、等。若彩度也用百分数表示时其含义是“含彩量”或“含灰量”。彩度越高颜色越艳彩度越低颜色越涩  明度:色彩的明度是指色彩的明亮程度。各种有色物体由于它们反射光量的区别就产生颜色的明暗强弱。色彩的明度有两种情况:一是同一色相不同明度二是各种颜色的不同明度。色相是色彩的首要特征是区别各种不同色彩的最准确的标准。事实上任何黑白灰以外的颜色都有色相的属性而色相也就是由原色、间色和复色来构成的。色相色彩可呈现出来的质的面貌。自然界中各各不同的色相是无限丰富的如紫红、银灰、橙黄等。色相即各类色彩的相貌称谓色环是色彩按红、黄、绿、蓝、红依次过度渐变呈现出来的不同颜色就可以得到一个色彩环。色环通常包括种不同的颜色。光的三原色和颜料的三原色原色:  也叫"三原色"。即红、黄、蓝三种基本颜色。自然界中的色彩种类繁多变化丰富但这三种颜色却是最基本的原色原色是其他颜色调配不出来的。除白色外把三原色相互混合可以调和出其他种颜色。  根据三原色的特性做出相应的色彩搭配有最迅速最有力最强烈的传达视觉信息效果。对比色是人的视觉感官所产生的一种生理现象是视网膜对色彩的平衡作用。指在色相环上相距度到度之间的两种颜色称为对比色。  在色相环中每一个颜色对面(度对角)的颜色,称为"对比色(互补色)"把对比色放在一起,会给人强烈的排斥感若混合在一起,会调出浑浊的颜色如:红与绿,蓝与橙,黄与紫互为对比色。  也可以这样定义对比色:两种可以明显区分的色彩叫对比色。包括色相对比、明度对比、饱和度对比、冷暖对比、补色对比、色彩和消色的对比等。是构成明显色彩效果的重要手段也是赋予色彩以表现力的重要方法。其表现形式又有同时对比和相继对比之分。比如黄和蓝、紫和绿、红和青任何色彩和黑、白、灰深色和浅色冷色和暖色亮色和暗色都是对比色关系。明度也叫亮度指颜色的深浅、明暗程度没有色相和饱和度的区别。不同的颜色反射的光量强弱不一因而会产生不同程度的明暗。非色彩的黒、灰、白较能形象的表达这一特质。黄色分析:  选取了主色调黄色为示例。我们看到RGB数值中RG呈现最高值时HSB数值中的SB也呈现最高值页面呈现最高纯度亮度纯黄色。因此黄色在三原色中也是亮度最高的颜色。  结论:  HSB中SB呈现的数值越高饱和度明度越高页面色彩强烈艳丽由于黄色是亮度最高的颜色这一特性也给人视觉产生强烈刺激的状态对视觉刺激是迅速的、警戒、醒目的效果但不易于长时间观看。红色分析:  我们看到RGB中R的数值是混合了G、B因此红色的纯度轻微降低颜色稍偏深红。HSB数值中S显示的饱和度为B为因此颜色还是较为饱和明亮。  结论:  主色R数值较高的时候由于混合了G、B少许颜色饱和度明度稍微降低视觉刺激减弱红色特性显得较沉稳。但由于红色是最温暖最有视觉冲击力的颜色特性该网页整体看来仍然厚重而热烈的表达了主题。纯度(Chroma):  也叫S饱和度指色彩的鲜艳程度。原色最纯颜色的混合越多则纯度逐渐减低。如某一鲜亮的颜色加入了白色或者黑色使得它的纯度低颜色趋于柔和、沉稳。纯度例图纯度分析:  上图网页中选取了主要的两种色系为组合。运用HBS数值模式更易于理解分析该网页的纯度情况。  我们看到蓝色S数值呈现%具有相当高的饱和度B明度为玫瑰色S饱和度数值为B明度为%。当饱和度和明度同时呈最高值时色彩对视觉的刺激强度到达最高状态。由于蓝色的明度稍低饱和度较高而玫瑰色的明度较高该颜色纯度随之加强因此玫瑰色相对蓝色对人的视觉刺激更强烈。结论:  HSB模式中S(饱和度)和B(亮度明度)呈现的数值越高饱和度明度越高页面色彩强烈艳丽对视觉刺激是迅速的醒目的效果但不易于长时间的观看。以上两种颜色的S数值接近是强烈的状态。H显示的度是代表在色轮表里某个角度所呈现的色相状态相对于SB来说意义不大。在HSB模式中H(hues)表示色相S(saturation)表示饱和度B(brightness)表示亮度。在色轮上度角内相邻接的色统称为类似色例如红-红橙-橙黄-黄绿-绿青-青紫-紫等均为类似色类似色由于色相对比不强给人有色感平静、调和的感觉因此在配色中常应用。也许在你的计算机里看起来相当好的网页在另一个不同平台上看起来可能就会变形走样。所以要避免特殊字体。、PSD格式(Photoshop格式)  Adobe公司开发的图像处理软件Photoshop中自建的标准文件格式就是PSD格式在该软件所支持的各种格式中PSD格式存取速度比其它格式快很多功能也很强大。由于Photoshop软件越来越广泛地应用所以这个格式也逐步流行起来。PSD格式是Photoshop的专用格式里面可以存放图层、通道、遮罩等多种设计草稿。这个格式只用于原图存储方便于修改之用。  、BMP位图格式  最典型的应用BMP格式的程序就是Windows的画笔。文件几乎不压缩占用磁盘空间较大它的颜色存储格式有位、位、位及位该格式是当今应用比较广泛的一种格式。但缺点是该格式文件比较大所以只能应用在单机上不受网络欢迎。  、GIF格式  该图形格式却在Internet上被广泛地应用原因主要是种颜色已经较能满足主页图形需要而且文件较小适合网络环境传输和使用。可以存储动画属性。  、JPEG格式  可以用不同的压缩比例对这种文件压缩其压缩技术十分先进对图像质量影响不大因此可以用最少的磁盘空间得到较好的图像质量。由于它优异的性能所以应用非常广泛而在Internet上它更是主流图形格式。  、PNG格式  PNG(PortableNetworkGraphics)是一种新兴的网络图形格式结合了GIF和JPEG的优点具有存储形式丰富的特点。PNG最大色深为bit采用无损压缩方案存储。:在制作图片时单张图片不要超过KB每个网页的图片总量不要超过KB(一般情况)。据统计分析每页不超过KB图片的网页其下载速度是可以让人接受的。所有的图片都必须“减肥”为小图片(×)一般可以控制在KB以内动画控制在KB以内较大的图片可以分割成小图片。ps中的网页设计工具可以帮助我们设计和优化单个网页图形或整个页面布局。通过使用切片工具可将图形或页面划分为若干相互紧密衔接的部分并对每个部分应用不同的压缩和交互设置。【存储为Web和设备所用格式】对话框可让我们在存储为一些网页兼容的格式之前预览不同的优化设置并调整颜色调板、透明度和品质设置。当然对图像切割的最大好处就是提高图像的下载速度减轻网络的负担。另外分多块下载的图像在视觉上也会给观众以“进行中”的感觉在心理上给人以下载速度快的错觉。虽然在网络上很多图片都进行了切割但在正常显示状态下我们完全不能直接看出哪些图片被切割过而哪些是完整的。因此切片无疑是一种巧妙的、“鱼与熊掌兼得”的解决方案。要确定哪些图片被切割过可以在网页中的文本区域往图片区域拖曳如果图片分小块变暗变蓝则该图片是被切割过的如图所示。切片使用HTML表格或CSS层将图像划分为若干较小的图像这些图像可在网页上重新组合成完整的图像。通过划分图像我们可以指定不同的URL链接以创建页面导航或使用其自身的优化设置对图像的每个部分进行压缩。而在ps中提供了“切片工具”和“切片选择工具”两种实现切割图像的工具切片最重要的是区分出网页中哪些是图像区域而哪些是文本区域并创建图文并茂的网站界面。使用“切片工具”的方法和使用选区类似拖曳出希望切片的区域即可除对于有些切片本身就位于一个独立的图层那么就更容易创建切片。首先选择该图层绘制的任何切片都将自动出现在文档窗口中选取选项栏中的样式设置正常在我们拖动的同时来确定切片比例按CtrlR先调出标尺!为了做到精确的等分我们不采用直接从标尺上拖曳的方式来建立参考线而采用:视图>>>新建参考线在对话框中准确输入参考线的位置这时可以把文档放大以便参考线更准确基于图层的切片与图层的像素内容相关联因此移动切片、组合切片、划分切片、调整切片大小和对齐切片的唯一方法是编辑相应的图层将自动切片和基于图层的切片转换为用户切片:图像中的所有自动切片都链接在一起并共享相同的优化设置。如果要为自动切片设置不同的优化设置则必须将其提升为用户切片。使用切片选择工具选择一个或多个要转换的切片。单击选项栏中的【提升】。【切片选择工具】是在我们使用【切片工具】创建切片后用来更精确的调整和划分切片用的我们可以选择某个部分的切片利用控制句柄来调整它的大小也可以利用选项栏中的【划分】按钮来从一个切片中划分出多个切片。调整切片大小对切片大小调整方法有两种一种通过切片的控制点进行自由调整另一种通过双击切片在选项对话框中进行调整。如图所示:选择切片通过使用切片选择工具对图片进行单击选择按住【shift】键可选择多个切片。移动切片选择切片后按住鼠标左键不放进行移动组合切片选择要组合的切片点击鼠标右键选择【组合切片】选项。一种通过切片的控制点进行自由调整另一种通过双击切片在选项对话框中进行调整。更改切片的堆栈顺序选择切片通过选项栏中的堆叠顺序选项进行更改更改切片的堆栈顺序选择切片通过选项栏中的堆叠顺序选项进行更改。对齐切片选择切片通过选项栏的对齐选项按钮进行对齐分布切片选择切片通过选项栏中分布按钮进行分布删除切片选择【视图】【清除切片】进行删除。如想删除某一个切片可单击鼠标右键选择【删除】。锁定切片选择【视图】【锁定切片】切片最重要的是区分出网页中哪些是图像区域哪些是文本区域并创建图文并茂的网站界面切片前,先要仔细对设计进行分析,考虑要因设计制宜切片时,可不断放大缩小设计观察精准度,可以根据辅助线进行切片切片后,要对导出的切片进行审核是否符合要求,比如大小颜色图片质量透明背景与否等,如果不合适,要重新对切片进行优化输出或者重新切片。、输出背景观察背景:如果是单一颜色的,则不需要切片,网页制作的时候设置背景RGB即可如果是有规律的图片,那么按最小单位切一条几个像素的切片,单独优化输出,制作时不是插入图片而是作为背景图片可以横向平铺达到设计效果。(为什么不是全部切片完了再输出呢,因为,背景图片上一般还会叠加其他的图片,如LOGO,就要输出透明背景的前景图片有时切片会有重叠现象,所以采用分别输出的方法能达到比较好的效果。)、前景图片(包括网站标识,特殊字体的标题,导航,中英文切换的文字连接,特殊的小图标特殊的边角)观察背景上的网站标识:如果直接插入切片输出会连带背景图案一起输出,那样以后制作也面的时候可能标识部分的图和背景对接不好产生错位切片的时候隐藏背景单独优化输出如果一张网页里面有重复用到的一张图,只需要切一个一次就可以了、线如果是直角的单色的边框,可以表格边框设置,就不需要切片如果是不规则角(圆角,图案),可以单单切下框的角,然后观察剩余的线:按照如切片背景图案的方法进行切片、切片命名切片单独输出,可以按照其用途重新命名,如背景可以为MAINBGGIF,网站标识为LOGOGIF等,切记不要用中文命名,那样在制作的时候插入图片的图片名可能就是一大串乱码切片保存首页和内容页的切片可以放在同一个站点下的IMAGE文件夹下面,但是如果素材图片多时,最好另起一个文件夹单独保存,以便制作和修改的方便FW切片导出时设置为"只要切片输出",如果按照"HTML和图像"输出会有很多的废代码,所以手动设置布局比较理想按网页的结构和图片的特点进行切片(一)根据颜色范围来切:如果一个区域中颜色对比的范围不是很大的就只有几种颜色这样的话就应该单独的把他切出来如果一个区域中就一种颜色,写代码的时候就可以直接用背景色来表示。颜色过多的话也没有关系很多时候都要用到渐变的效果应该把切片数量切的多一些尽量把单个切片控制在一个颜色范围的轮廓内。其次网页切片要点(二)切片大小:把网页的切片切的越小越好这是有道理的。切片越小的话可以加快网页下载图片的速度让多个图片同时下载而不是只下载一个大图片所以切片大小要根据需要来切标志LOGO等主要部分尽量切在一个切片内防止显示遇到特殊情况时显示一部分圆角表格部分要根据显示区域的大小来切控制好边缘和边有时候切出来的切片并不是直接插入到DW了事而需要在DW中编辑比如有的图片应该设置成背景图片网页切片要点(三)切片区域无整性:保证完整的一部分在一个切片内例如某区域的标题文字以后修改时方便网页切片要点(四)导出类型:颜色单一过渡少的应该导出为GIF颜色过渡比较多颜色丰富的应该导出为JPG有动画的部分应该导出为GIF动画。网页切片要点(五)保留源文件:即使页面作好了也要保留带切片层的源文件说不上哪天要改某一个部分例如文字什么的直接修改单独导出所用的切片就可以了切图技巧主要有几下几点属性均匀的区域适合分为一个切片均匀主要是指颜色和形状都没有变化或者在X或在Y方向上没有变化。属性渐变的区域适合分为一个切片渐变有两种表现形式颜色渐变形状渐变根据原图的内容布局确定整体的切分策略即切分要有分块的思想要在想象中将整个布局看成是一个两个table然后在具体到每个table去考虑里面应该如何切。、切片是生成表格的依据切片的过程要先总体后局部即先把网页整体切分成几个大部分再细切其中的小部分。、对于渐变的效果或圆角等图片特殊效果需要在页面中表现出来的要单独切出来、在DW中进行编辑时少用图片如果能用背景颜色代替的就使用背景颜色能使用图案的也尽可能使用图案平铺来形成背景、图片应该是平均切而不是大一块小一块的以免图片出现速度不平衡切图切的好不好在我们打开这个站点时候看到图片出来的先后顺序和速度是可以发觉的。网页元素是否齐全放置位置是否合理网页颜色的配置是否协调导航条是否齐全以及与网页是否协调弄清楚是模仿设计还是创意设计切片划分是否合理

VIP尊享8折文档

用户评价(0)

关闭

新课改视野下建构高中语文教学实验成果报告(32KB)

抱歉,积分不足下载失败,请稍后再试!

提示

试读已结束,如需要继续阅读或者下载,敬请购买!

文档小程序码

使用微信“扫一扫”扫码寻找文档

1

打开微信

2

扫描小程序码

3

发布寻找信息

4

等待寻找结果

我知道了
评分:

/94

Photoshop网页设计

¥30.0

会员价¥24.0

VIP

在线
客服

免费
邮箱

爱问共享资料服务号

扫描关注领取更多福利