网页设计技巧及切图规范

照片处理技巧网页图片处理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像素）.L4调节色像/饱和度（CTRL+U）(0,+12,0).5加些锐化，在降低透明度打造朦胧中的鲜艳(风景，生态类)打造朦胧中的鲜艳(风景，生态类)1打开图片，复制背景层两次2对复制背景层一进行高斯模糊（半径4~6），将复制背景层二的模式改为强光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接着，滤镜---渲染---云彩.3CTRL+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-3