网页设计技巧及切图规范

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