网页设计技巧及切图规范.pptx

2016/9/30,#,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,照片处理技巧,网页图片处理,1,打开图片,执行色像,/,饱和度（,-40,）降低饱和度。,2,新建一图层，将图层模式改为柔光，用画笔工具将需要润饰的部分画几下，这里可以利用色板方便的提取颜色,3,图片色彩过渡不够柔和，再执行一下滤镜下面的高斯模糊（,+85,）,数码照片后期润饰,数码照片后期润饰,1,打开图片，复制背景层，对背景层的模式改为滤色,2,对背景层的色阶进行调整,处理照片爆光不足,处理照片爆光不足,1,打开图片，新建图层一，设前景色,/,背景色（黑色,/,白色），执行滤镜,-渲染,-,云彩，将图层添加图层蒙版,2,重复执行滤镜,-,渲染,-,云彩，图象,-,调整,-,亮度,/,对比度（,80,，,0,），图层一模式改为滤色,雾化效果,雾化效果,1.,复制一个原图层,(Ctrl+J).,2.,对复制层使用高斯模糊滤镜,(+4.0).,3.,做色彩调整,(+50,0,-64),4.,用边缘模糊的橡皮擦擦去需要清晰的部分,.,5.,适当运用图层混合模式,.,处理朦胧艺术照,处理朦胧艺术照,1,打开图片，复制图层,.,2,将副本层的图层模式该为“滤色”,.,3,使用高斯模糊（,+8.6,像素）,.L,4,调节色像,/,饱和度（,Ctrl+U,）,(0,+12,0).,5加些锐化，在降低透明度,打造朦胧中的鲜艳,(,风景，生态类,),打造朦胧中的鲜艳,(,风景，生态类,),1,打开图片，复制背景层两次,2,对复制背景层一进行高斯模糊（半径,46,），将复制背景层二的模式改为强光,3,新建一图层，添充图案（预先作好并定义的半灰半白的横条纹图案），设置混合模式为正片叠底,个性化艺术照,个性化艺术照,1,打开一张图片，执行图象,-,调整,-,色相,/,饱和度（,+1,，,-58,，,+1,）,.,2,图象,-,调整,-,变化（中间色调，加深黄色，加深红色，加亮）,.,3,复制背景层，执行滤镜,-,纹理,-,颗粒（,9,，,56,，垂直）,.,4,新建一图层，执行滤镜,-,渲染,-,云彩,.,5,再执行图象,-,调整,-,亮度,/,对比度（,+27,，,+100,）,.,6,用魔棒工具，选定图层一中的黑色选区,.,7,关闭图层一的预览，点击复制背景层，将前景色改为暗棕色,.,8,执行选择,-,修改,-,扩展（,5,像素），选择,-,羽化（,5,像素）,9,编辑,-,填充（前景色），选定图层一，用魔棒选取黑色选区,10,关闭背景层和，选定复制背景层，,11,图象,-,画布大小，高度,/,图层一的预览宽度均执行编辑,-,清除,.,增加一厘米，定位（中）,.,12,打开背景层预览，选定背景层，填充前景色（浅棕色）,.,13,选定复制背景层，执行图层,-,图层样式,-,投影,.,（正底叠片，不透明度,45%,，角度,45,，距离,7,，扩展,2%,，大小,10,），合并所有图层,.,烧纸效果的旧照片,烧纸效果的旧照片,1,新建一个文件 按,D,键 填充背景为白色,2,接着，滤镜,-,渲染,-,云彩,.,3 CTRL+M,调整下曲线,(,黑白对比度强,).,4,完成好后的效果再接着 滤镜,-,扭曲,-,玻璃,(,扭曲度,7,，平滑度,3,，纹理,-,画布，缩放,50%).,6,新建一个图层，背景为黑色，另新建一图层，添充白色矩形,.,7,在矩形所在的层上执行滤镜,-,扭曲,-,置换，选择默认的选项。然后找到刚保存的,PSD,文件进行置换即可,.,斑驳效果艺术相框,1,图象,-,调整,-,色阶（,RGB+29,，,1.0,，,+234,）,.,2,执行色相,/,饱和度命令（全图,-14,，,+41,，,-1,）,.,3,继续执行色相,/,饱和度（红色，色相值降低，饱和度增加）,.,4,继续执行色相,/,饱和度（黄色，,-22,，,+45,，,-1,）,.,5,继续执行色相,/,饱和度（绿色，,+15,，,0,，,0,）,.,6,调节亮度,/,对比度（亮度降低,/,对比度增加）,渲染照片气氛（风景）,1,打开图片，执行去色，调整亮度,/,对比度（亮度降低,/,对比度增加）,.,2,复制背景层（,Ctrl+J,），选定背景层，执行滤镜,-,风格,查找边缘，再进行锐化，再将图层模式改为叠加,.,3,新建一图层，填充白色，添加杂色，再进行动感模糊，将图层模式改为正片叠底,.,4,用橡皮工具（不透明度改为,15%,），对高光部分擦拭,.,素描效果,1,打开一副图片，复制背景图层，选定复制图层,1,执行滤镜,-,模糊,-,高斯模糊（,2.0,像素）,2,再次复制背景图层，选定复制图层,2,，执行滤镜,-,素描,-,水彩画笔（,20,，,60,，,80,），将图层混合模式设为变暗,.,3,再次复制背景图层，选定复制图层,3,，将前景色设为红色，执行滤镜,-,素描,-,便条纸（,25,，,7,，,10,），不透明度设为,30%.,4,再次复制背景图层，选定复制图层,4,，将前景色设为黑色，前景色,/,背景色设为黑,/,白，执行滤镜,-,素描,-,影印（,1,，,50,），执行色阶调整（,RGB,157,.0,159,）,填充值,30%.,笔触素描效果的绘制,色彩的平衡,色彩在页面中可以形成很多的效果，通过强烈的对比，可以突出页面的重点。还可以通过色彩调配，达到页面稳重度的改变。一般的情况下，页面上方的颜色总是很重，这样才能压住下面的颜色，如果不采取这种办法，整个页面将显得很不稳重,要使整个页面显得很平衡，应该要有能镇住其他颜色的色彩。,色彩的呼应,一种比较突出的色彩，如果很突兀地放在页面中，无论你是突出重点也好，还是,logo,图标，都给整个页面带来了副作用。在相对称的位置加上该色系,(,对于页面并不醒目,),的色彩来呼应，这样可以弱化这种视觉的冲击。,R,值,B,值,精确到,1,个像素,认真对待图片中,1,个像素的差别 设计，细节,在色彩设计应用中，我们对颜色不同程度的理解，影响到设计页面的表现，熟练地运用色彩搭配，设计时可以事半功倍。一张优秀的设计作品，它的色彩搭配必定和谐得体，令人赏心悦目,设计色彩方法,有主导色彩配色,这是由一种色相构成的统一性配色。即由某一种色相支配、统一画面的配色，如果不是同一种色相，邻近色也可以形成相近的配色效果。当然，也有一些色相差距较大的做法，比如撞色的对比，或者有无色彩的对比,一,.色相差而形成的配色方式,同色系配色,同色系配色是指主色和辅色都在统一色相上，这种配色方法往往会给人页面很一致化的感受。,邻近色 配色,近邻色配色方法比较常见，搭配比同色系稍微丰富，色相柔和过渡看起来也很和谐。,类似色配色,类似色配色也是常用的配色方法，对比不强给人色感平静、调和的感觉。,中差色配色,中差色对比相对突出，色彩对比明快，容易呈现饱和度高的色彩。,对比色配色,主导的对比配色需要精准地控制色彩搭配和面积，其中主导 色会带动页面气氛，产生激烈的心理感受。,中性色配色,用一些中性的色彩作为基调搭配，常应用在信息量大的网站，突出内容，不会 受不必要的色彩干扰。这种过配色比较通用，非常经典。多色搭配下的主导,主色和其他搭配色 之间的关系会更丰富，可能有类似色、中差色、对比色等搭配方式，但其中某种色彩会占主导。,有主导色调配色,这是由同一色调构成的统一性配色。深色调和暗色调等类似色调搭配也可以形成同样的配色效果。即使出现多种 色相，只要保持色调一致，画面也能呈现整体统一性。,二,.,色调调和而形成的配色方式,清澈色调,清澈调子使页面非常和谐，即使是不同色相形同色调的配色能让页面保持较高的协调度。蓝色另页面产生安静冰冷的气氛，茶色让我们想起大地泥 土的厚实，给页面增加了稳定踏实感觉，同时暖和蓝色的冰冷。,互补的色相搭配在一起，通过统一色调的手法，可以缓和色彩之间的对比效果,阴暗色调阴暗的色调渲染场景氛围，通过不同色相的色彩变化丰富信息分类，降低色彩饱和度使各色块协调并融入场景，白色和明亮的青绿色作为信息载体呈现。,多色彩经过统一色调处理，区域间非常协调，也不影响整体页面阴暗气氛表现。,明亮色调,明亮的颜色活泼清晰，热闹的气氛和醒目的卡通形像叙述着一场庆典，但铺满高纯度的色彩，过于刺激，不适宜长时间游览。,饱和度与纯度特性明显的搭配，在达到视觉冲击力的同时，可适当采用对比色或降低明度等方法调和视觉表现。,深暗色调,页面以深暗偏灰色调为主，不同的色彩搭配，像在叙述着不同的故事，白色文字的排版，整个页面显得厚重精致，小区域微渐变增加版面质感。,以低暗色调构成整体画面氛围，小面积明亮部分不会影响整体感觉。,雅白色调,柔和的调子使页面显得明快温暖，就算色彩很多也不会造成视觉 负重。页面的同色调搭配，颜色作为不同模块的信息分类，不抢主体的重点，还能衬托不同类型载体的内容信息。,同色调不同色彩的模块，就算承载着不同的信息内容也能表现很和谐。,同色调配色,这是由同一或 类似色调中的色相变化构成的配色类型，类似主导色调配色。区别在于色调分布平均，没有过深或过浅的模块，色调范围更为严格。,综合运用的情况，整体界面是有主导色调，在布局例如重点图标等是同色调配色灵活运用。,同色深浅搭配,这是由同一色相的色调差构成的配色类型，属于单一色彩配色的一种。与主导色调配色中的同色系配色属于同类技法，在同一色相下的色调不存在色相差异，而是通过不同的色调阶层搭配形成，可以理解为色调配色的一种。,同色深浅配色有着极高的统一性，但有点枯燥。,由于对比色相互对比构成的配色，可以分为互补色或相反色搭配构成的色相对效果，由白色、黑色等明度差异构成的明度对比效果，以及由纯度差异构成的纯度对比效果。,三、对比配色而形成的配色方式,双色对比,色彩间对比视觉冲击强烈，容易吸引用户注意，使用时经常大范围搭配。,不管是整体对比还是局部对比，对比色给人强烈的视觉冲击，结合色彩心理学对品牌传达效果更佳。,三色对比,三色对比色相上更为丰富，通过加强色调重点突出某一种颜色，且在色彩面积上更为讲究。,三色对比中西瓜红作为强调色限定在小面积展现非常关键，面积大小直接影响画面平衡感。,多色对比,多色对比给人丰富饱满的感觉，色彩搭配协调会使页面会非常精致，模块感强烈。,不管是整体对比还是局部对比，对比色给人强烈的视觉冲击，结合色彩心理学对品牌传达效果更佳。,纯度对比,纯度差对比，对比色彩的选择非常多，设计应用范围广泛，可用于一些突出品牌、营销类的场景。,明度对比,明度对比接近生活实际反映，通过环境远近、日照角度等明暗关系，设计趋于真实。,网页切图,网站效果图切图事项,切片存储的格式,1.BMP,：,Windows,系统下的标准位图格式，使用很普遍。其结构简单，未经过压缩，一般图像文件会比较大。它最大的好处就是能被大多数软件“接受“。通用格式,2.JPEG:,也是应用最广泛的图片格式之一，它采用一种特殊的有损压缩算法，将不易被人眼察觉的图像颜色删除，从而达到较大的压缩比（可达到,2:1,甚至,40:1,），所以“身材娇小，容貌姣好”，特别受网络青睐。,3.GIF,：分为静态,GIF,和动画,GIF,两种，支持透明背景图像，适用于多种操作系统，“体型”很小，网上很多小动画都是,GIF,格式。,GIF,是将多幅图像保存为一个图像文件，从而形成动画,所以归根到底,GIF,仍然是图片文件格式。,4.PNG,：（可移植的网络图形）与,JPG,格式类似,网页中有很多图片都是这种格式，压缩比高于,GIF,，支持图像透明，可以利用通道调节图像的透明度。,切图过程中的命名,1.,禁止使用中文命名,2.,无避免使用意义文字符命名,3.,尽量使用语义相近的英文或者英文简写命名,4.,禁止在图片文件名中间加入数字。如果必须使用数字进行描述，请在文件名最后加入数字如需符号，请使用,_,做分割,切图命名规范,菜单,menu,列表,list,图标,icon,弹出层,layer,标签,tab,按钮,btn,背景,bg,线条,line,推广图,banner,提示,tips,图片,pic,页底,footer,容器,wrapper,输入框,textfeild,标题栏,titlebar,状态栏,statusbar,表格,sheet,指示器,indicator,启动器,launcher,底部,bottom,头部,header,内容区域,content,多选,checkbox,单选,radio,提示,tips,切图命名规范,切图的制作方法,1.,利用切片工具分割网页切图,2.,页面里参考线都拉好了，我们可以直接在切片功能里点击基于参考线的切片按钮，并适当给一些需要合并的切片进行组合切片的操作,企业展示网站,3.,切片工具 划分切片 根据自己所要切片的数量来填写数字设置,活动页,3.,用裁剪多余像素的方法去精确地裁切出透明图片,透明渐变,网页背景图片制作,分辨率一般有,1024*768,，,1280*960,，,1280*1024,，,1440*900,1920,*,1080,针对不同的媒体类型定义不同的样式,网页背景图片处理,中间背景，边缘两侧透明渐变，背景色填充,网页背景图片处理,1920,网页宽度,462-462,两侧背景,1000,中间背景宽度,图片尽量平均切，避免大一块，小一块的，以免图片出现速度不平衡,移动端背景图片处理,图片分割,h200px,左右切图,图标的切图保存,面对比较多图标需求切图保存的时候，我们可以采取功能相近的图标有规律放置在一行或几行，同样的方式处理其他的图标，整齐的放置在同一个背景透明的大图片上，便于保存和使用。,切图原则,1.,一个网页切出,20-30,个图，网页的加载速度是不会受太多影响的,2.,图切的大小越小越好,3.,图切的数量越少越好,4.,图片上有大段的长期摆放的文字，尽量以图片形式切出来,网页元素图片处理注意事项,1.,图片只是装饰作用，能用代码表现的效果就尽量不要切图。（圆角，外发光，阴影，透明度 渐变，旋转，透视，等）,2.,切图时要很认真，不要出现过小的图片，比如,1PX,的图片，作为皮肤的除外,3.,设计时可以优先采用可平铺的小图片填充背景,4.,需要交互的地方，有些图片需要图层分割开来切图（特效），大都是,png,的格式保存 比如高光，,tips,5.,用于交互的图层，,ps,中最好用文字或其他颜色的小眼睛标注出来，方便切图使用,_,