标签:广告 必须 3.1 保留 网络 banner 多个 记录 网络请求
操作对象:专业的UI设计师设计的网站视觉稿;
把视觉设计师提供的设计稿转化为需要的各种.png/.jpg文件的过程;
给网页提供图片素材,在HTML中使用的img,在CSS中使用的background;
photoshopCC在13年推出
在Photoshop的首选相中的设置:把标尺和文字的单位改成像素;
辅助视图:
在“视图”菜单下开启:对齐、标尺(Ctrl+R)、显示参考线(Ctrl+;需要勾选显示额外内容)
拓展阅读:谈谈CSS精灵、CSS sprite;
下载腾讯龟哥的CSS sprite样式生成工具,在Github上;
css sprite
打开视觉稿,获取信息(尺寸信息和颜色信息)
所有的数字都是需要测量获取的
- 宽度、高度
- 内边距、外边距
- 边框
- 定位
- 文字大小
- 行高
- 背景图片位置
背景文字中的行高,用矩形选框工具;
与选取交叉:按住shift+alt;
注:添加到选区的巧用,在测量大的选区的大小时,可以在两边各画一个小的矩形!!!
所有的颜色都需要用取色
边框色
背景色
文字色
工具:拾色器&吸管工具
取色器的巧用:
- 确定背景颜色是否为纯色?用拾色器
- 确定背景颜色是否为线性渐变?在容差较低的情况下用魔棒工具
那些图是需要切出来的?
图片的保存类型:
切图的具体步骤:
独立图层的文字,则隐藏文字图层
若文字和背景合并,平铺背景覆盖文字;
若为单独图层:则用1、3步骤;
若为分布在多个图层上则需要第二步,合并图层。
保存为PNG8:
切片工具
保存所需要的文件:
独立图层,可以直接拖拽到新的文件里面,或者使用三组快捷键,新的文件要背景设置透明;
非独立图层,要先合并可见图层,然后用三个快捷键;
保存类型:
如果想要改变图标的位置、加个新的图标、删除一个图标、删除空白画布,该如何操作?
使用背景图片代码:
为什么要使用sprite拼图?意在减少网络请求,提升网页加载速度;
图片优化合并的方案:图片的大小与质量、合并时的排列方式和分类;
图片的大小与质量:
要在图片的大小与质量之间进行取舍?两种压缩工具:有损的和无损的;
合并之排列:
图片之间必须保留间隙;
合并之分类:
合并的推荐:
浏览器兼容考虑:
标签:广告 必须 3.1 保留 网络 banner 多个 记录 网络请求
原文地址:https://www.cnblogs.com/luwanlin/p/10049850.html