前端工程师技能之photoshop巧用(从效果图到雪碧图)3——切图篇

【哪些是需要切出来的】
  [1]修饰性的(一般用在background属性)
    [注意]修饰性图片一般保存为png24(IE6不支持半透明)和png8格式
    [a]图标、logo
    [b]有特殊效果的按钮、文字等(如果设计师设计的字体不太常见的话,把文字当图片来切出来)
    [c]非纯色的背景

  [2]内容性的(一般用在img标签)
    [注意]内容性图片一般是服务器的数据,一般不用切图,只用<img>占位即可
    [a]Banner、广告图片
    [b]文章中的配图
    [c]内容性图片颜色较丰富,一般存为JPG格式,且需要一定的压缩

【切图步骤】
  【1】隐藏文字只留背景(若文字上有特殊效果,无法用代码写出,则把文字和背景一起切出来)
    【1.1】若文字为独立图层,则隐藏文字图片
      【a】找到文字图层
      【b】去掉眼睛图标

    【1.2】若文字和背景合并,平铺背景覆盖文字
      【1.2.1】若背景是可以拉伸的,用矩形选框工具在背景上画一个小的矩形框,用自由变换工具(ctrl+t)拉伸背景,将文字覆盖,然后双击或按回车键

      【1.2.2】若背景有纹理,不可以拉伸,用矩形选框工具在背景上画一个小的矩形框,用移动工具【v】+alt来复制当前图层,一次次地按下方向键或用鼠标移动(鼠标移动时,按住shift键时可以保证图层按照直线移动),最终将文字全部覆盖为止

  【2】移动工具选中所需图层(ctrl+点击图层的矩形区域),出现蚂蚁线

  【3】合并图层(ctrl+e)(可选):勾选自动选择,然后将需要的多个图层合并

  【4】复制图层(ctrl+c) ->新建文件(ctrl+n),并按确定 -> 粘贴图层(ctrl+v)

【实战】

  【切png8】png8不支持半透明,所以需要带背景切
    【1】合并可见图层(shift+ctrl+e)
    【2】矩形选框工具选择一个大的区域
    【3】魔棒工具去除多余部分(从选区中减去:按住alt)

  【切不规则小图标】:切法和png8的切法类似
    [注意]选择镂空小图标时,一定要取消[连续]

  【切可平铺背景】
    【1】用矩形选框工具选取一块区域
    【2】复制粘贴到新文件中(平铺内容充满文件的宽(x轴)或高(y轴))
      [a]若沿x轴平铺,则铺满x轴
      [b]若沿y轴平铺,则铺满y轴

  【切片工具一刀切】:适用于可以一刀切的活动页
    【1】拉参考线
    【2】选择切片工具
    【3】点击基于参考线的切片按钮
    【4】从切片工具切换到切片选择工具(在同一个按钮下)
    【5】双击切片,更改需要的名称
    【6】保存(全选切片,不可用ctrl+a,只能拖动矩形框来选中所有的切片,选中后颜色变亮,然后统一设置存储格式)

时间: 2024-11-25 01:41:03

前端工程师技能之photoshop巧用(从效果图到雪碧图)3——切图篇的相关文章

前端工程师技能之photoshop巧用(从效果图到雪碧图)目录

前端工程师技能之photoshop巧用(从效果图到雪碧图)1——准备篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)2——测量篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)3——切图篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)4——优化篇 前端工程师技能之photoshop巧用(从效果图到雪碧图)5——理论篇

前端工程师技能之photoshop巧用(从效果图到雪碧图)1——准备篇

[项目流程] 需求分析(市场) > 项目原型(产品) > 出设计图(UI) >页面相关(前端) > 数据相关(后端) > 测试 -> 上线 [photoshop的作用]:给网页提供图片素材 [html] <img>标签 <img src="img/xx.jpg" > [css] background属性 icon{background: url(../img/xx.jpg);} [photoshop的初始化设置] [1]首选项

前端工程师技能之photoshop巧用(从效果图到雪碧图)2——测量篇

[需要测量的信息] [1]尺寸信息 -> 测量(矩形选框工具+信息面板)  [注意]测量时,画布放得尽可能大 [a]宽度.高度 [b]内边距.外边距 [c]边框 [d]定位 [e]文字大小 [f]行高 [g]背景图位置 [2]颜色信息 -> 取色(取色器) [a]边框色 [b]背景色 [c]文字色 [实战] [1]测量图片宽高 [1.1]测量普通图片宽高:先用矩形选框工具选择一个大的区域,然后再按住alt键,减去多余的部分 [1.2]测量超过1屏的大区域的宽高:先用矩形选框工具在最左边画一个小

前端工程师技能之photoshop巧用(从效果图到雪碧图)5——理论篇

[css sprite] [定义]css sprite是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中 [优点] [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) [缺点] [1]提高开发成本 [2]提高维护成本 [补充](浏览器对并行网络请求有个数限制) http1.1(持久保持) http1.0(短暂保持) IE6.7 2 4 IE8  6 6 firefox 6    6 chrome  6

前端工程师技能之photoshop巧用(从效果图到雪碧图)4——优化篇

[新建]把需要的内容拖到新的文件里,或者复制粘贴到新的文件里.背景内容要选择透明 [补充]图片各种格式及特点 jpg:不支持透明半透明,所有空白区域填充白色(高清图) gif:支持透明,不支持半透明(小图标,支持动画) png8:支持透明,不支持半透明(小图标,不支持动画) png24:支持透明,也支持半透明(半透明的图片) [保存]:为保证图片质量,保留一份psd,在psd文件上进行修改.保存其他类型的图片时会对图片进行一定的压缩,如果不在psd上,而是在其他类型的图片上进行修改并保存,会导致

前端工程师技能之photoshop巧用系列第五篇——雪碧图

显示目录 目录 [1]定义 [2]应用场景 [3]合并[4]实现[5]维护 前面的话 前面已经介绍过,描述性图片最终要合并为雪碧图.本文是photoshop巧用系列第五篇--雪碧图 定义 css雪碧图(sprite)是一种网页图片应用处理方式,它允许将一个页面涉及到的所有零星图片都包含到一张大图中.使用雪碧图的处理方式可以实现两个优点: [1]减少http请求次数 [2]减少图片大小,提升网页加载速度 (多张图片加载速度小于拼合成的图片的加载速度) 凡事都不完美,实现优点的同时也带来了缺点,即提

前端工程师技能之photoshop巧用系列扩展篇——自动切图

× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文将详细介绍photoshop的这个新功能 初始设置 当然首先还是要进行一些首选项设置 [1]在编辑 -> 首选项 -> 增效工具中,选中启用生成器 [2]重启photoshop,在文件 -> 生成中,点击图像资源在文件 -> 生成中,点击图像资源 [注意]只有在photoshop中有文

photoshop cc 2014 下载安装及汉化资源及切图简要使用教程

这是百度经验上一个pscc 2014 版本的下载安装汉化教程,亲测有效: http://jingyan.baidu.com/article/647f0115bce3847f2148a80c.html 慕课网上有一个关于该版本如何使用的一个简单的视频教程,并且包含了关于方便web前端的使用的一些方法也特别实用,建议顺便看一下: http://www.imooc.com/view/506 附-关于该版本快捷键和视频教程中关于切图的一些问题: 快捷键https://www.douban.com/not

关于前端Retina 屏幕兼容和基于Retina 屏幕兼容的雪碧图技巧

由于苹果电脑的普及,所以Retina 屏幕兼容越来越重要,在普通屏幕上正常的背景,在Retina 屏幕上都会发虚. 首先新建一个scss文件,起名为utils.scss ,在文件中写入下面代码: /* Retina 屏幕兼容 */@mixin ratio(){ @media only screen and (-webkit-min-device-pixel-ratio: 1.5){ @content; } @media only screen and (min--moz-device-pixel