zoukankan      html  css  js  c++  java
  • web切图的几个快捷键及总结

     

    自由的控制视图系列

    • 自由的浏览图片:按住空格后,鼠标拖动
    • 自由的缩放图片:按住alt+滚轮
    • 切换到实际像素(100%):Ctrl + 1
    • 工作区类型切换:Tab


    控制内容系列

    • 通过画面上点选一个图层:Alt + 鼠标右键
    • 在画面上拖动一个图层:V 切换到移动模式 鼠标拖动
    • 复制拖动一个图层:移动模式下 Alt+拖动
    • 删除一个图层:选中要删除的图层 按下 Delete
    • 合并多个图层:选中要合并的图层 按下 Ctrl+E
    • 选区内填充颜色:Alt+Delete (前景色) Ctrl+Delete(背景色)
    • 缩放当前选择图层:Ctrl+T(自由变换模式)


    实用工具系列

    • 画一个选区:点击M进入选区模式 , 鼠标拖画
    • 放弃选区:Ctrl+D
    • 吸管工具:点击I进入吸管模式,点选画面颜色
    • 文字工具:点击T进入文字模式,点选画面的文字或者创建新文本
    • 切片工具:点击C进入切片模式(旧版本会有不同)
    • 快速隐藏其他图层:alt+小眼睛

    • ctr+r标尺

    切图之前的思路分析

    拿PSD效果图后,首先应该对这张效果图进行分析,在切图层面上,主要分析三点哪些图片是单独的,比如Logo和banner部分

    哪些图片是需要平铺的,比如导航部分的背景*

    哪些图片是需要CSS sprite
    比如一些列表前面的icon小图标

    图片的格式
    logo统一切成png透明度(颜色较少的都用png)

    看透明度情况使用png8png24

    一般情况下临时图
    、ad
    、banner
    图用jpg格式,色彩丰富的、大图切成jpg

    颜色较少的都用png,用png8还是png24需看图片具体透明底情况,半透明的切成png24

    在保证图片的画质情况下,图片的大小越小越好

    尺寸小的,色彩不丰富的和背景透明的切成gif或者png8的

    (注:IE6不支持PNG24透明度图片,需做兼容处理或切成PNG8)
    *
    【PNG-8和PNG-24的区别】png8有1位的布尔透明通道(要么完全透明,要么完全不透明)png24则有8位(256阶)的布尔透明通道(所谓半透明)**

    png-8gif有一些相似之处,模式都是索引颜色,只支持像素级的纯透明,不支持 alpha 透明。

    (注:我们通常说的“IE6不支持 PNG 透明”,是指不支持 PNG-24 的透明。但是 IE6 支持 PNG-8 的透明,就像支持gif的透明一样)
    切图的一些小技巧
    Ctrl+N
    新建一个透明背景图层(大小识图层比例而定,比裁剪的图层大就行)

    shift
    +鼠标左键点击图层可选中多个图层进行操作

    Ctrl
    +鼠标左键选中需要裁剪的图层移至第1步中新建好的透明背景图层当中,再按ctrl+shift+E
    进行合并可视图层。

    Ctrl
    +鼠标左键点击右边图层栏的选区视图,选中需要裁剪的图层选区,再按快捷键[Alt+I+R
    (裁切)或Alt+I+P
    (裁剪)]进行裁剪

    裁剪完成后ctrl+shift+alt+s
    进行保存为web可用格式

  • 相关阅读:
    【Auto.js images.matchTemplate() 函数的特点】
    Jquery动态bind绑定已有函数,函数自动执行的问题解决方法
    浅谈javascript的运行机制
    Git
    下拉框的点击事件
    点击其他区域菜单消失
    Chrome 中的 JavaScript 断点设置和调试技巧
    前端编辑工具有感
    我的jsonp跨域问题
    浅谈Json和jsonp
  • 原文地址:https://www.cnblogs.com/zhanghaoxiaoan/p/7401402.html
Copyright © 2011-2022 走看看