前端切图技巧汇总

部署PS环境

  • 下载PS cs6 Extended 64位 正版破解版
  • 视图/显示/智能参考线以及视图/字符,这两个都要选上
  • 窗口/信息;窗口/字符,两个打开,其他的多余的可不需要,将前面的勾取消
  • 点击信息面板那一个小三角,打开面板选项/标尺单位:像素;两个像素模式:RGB颜色和WEB颜色;文档尺寸选上,然后确定
  • 编辑/首选项/单位与标尺【标尺:像素;文字:像素,其他默认不用改动】这样的做的好处:在PS里打开一个网页,随便点击哪个图片或者某个字符,就可以知道详细的信息
  • 窗口/工作区/新建工作区/名称:web切图,后两个选上,然后点击存储,这样就可以保存下来,防止丢失了。右上角可以更换,窗口-工作区可以复位。这样就可以储存基本布局和快捷键
  • 右边区域需要的窗口有:图层、历史记录、信息、字符。单位全部改成像素

技巧篇

  • 使用markman进行psd设计稿的标注
  • PS切图尽量使用图层切图。图层切图步骤:首先在图层查找到需要提出来的组(快速选择用ctrl+选择单击),然后对着组右键合并组,然后对着组ctrl+单击,选中图像,这时候psd里会出现虚线,然后ctrl+c复制,文件新建(必须先复制图层,再新建,这样就会默认有图层的尺寸),直接确认,然后ctrl+v粘贴,将另一个多余的图层删去,然后保存。无法合并的图层一般需要栅格化文字或栅格化图层后才能合并
  • 给新建的透明背景添加背景颜色方便移位(如果没有则在右下角垃圾桶图左边的地方有一个新增图层)方法:一个是选中图层后,单击图层选项卡,选择新建填充图层,纯色,然后选择颜色;第二个是选定好左边菜单栏右下角的颜色,然后选中图层,按快捷键ctrl + backspace进行填充对应颜色
  • 如何进行多个图层选中,不用一个一个点:先在需要选中多个图层的附近按着V,点击鼠标看看有没有图层移动,如果有移动的话就点一下图层窗口的锁定。然后在用方框选中后,再用移动工具移动,会发现几个图层都会同时移动了
  • 使用切片工具后,点击ctrl+shift+alt+s弹出保存框,将区域缩放到最小,然后鼠标按着选中区域,这时候再点击右上角的输出格式,就能够全部切片都按照这个格式切出去了,如果是一个个不同的需要点击对应切片,在选中格式即可
  • 有矢量智能对象(AI弄的),需要分割一个个图片,需要对其右键,选择栅格化图层,然后使用选择工具选中在剪切黏贴,这样就可以像其他图层一样使用了
  • 字体图层也需要栅格化后才能合并图层
  • 将一个图层的颜色全部换成想要的颜色:在图层上按着alt+鼠标往上移,建立副本图层,图层选项卡双击图层空隙,选中颜色叠加,改变颜色后隐藏以前的图层即可换颜色
  • 快捷键alt + 滚轮可以放大缩小图像