前端切图

准备工作

1、设置:
首选项-》单位与标尺-》像素
窗口-》面板-》选项、工具、信息(F8)、图层(F7)、历史记录
<strong>移动工具选项面板-》自动选择-》图层</strong>

2、辅助视图:视图-》对齐、标尺Ctrl+R、显示->参考线Ctrl+;(需勾选显示额外内容)

3、保存工作区:工作区-》新建工作区

4、常用工具:移动工具 矩形选框工具 魔棒工具 裁剪工具+切片工具 缩放工具 取色器

5、常用操作:
撤销:Ctrl+z 连续撤销:Ctrl+alt+z 回退N:历史记录
魔棒工具:容差(颜色选取范围) 消除锯齿(使边缘光滑) 连续(选择范围是否连续)
缩放:Ctrl+ Ctrl- Ctrl+1(100%) alt+滚轮(Mac option+滚轮)
矩形选框:添加到选区(按住Shift)从选区减去(按住Alt)与选区交叉(按住Shift+Alt)
切片工具:适用于可以一刀切的活动页

获取信息

取色获取颜色信息、测量获取尺寸信息
1、尺寸信息:
测量什么?宽高、边距、边框、定位、文字大小、行高、背景图位置
工具:矩形选框+信息面板(活用矩形选框快捷键进行选框锁定)
示例:测量字体与行高:字体选择-选项面板-最右边图标;从选区减去获取选区;添加到选区获取超屏幕元素宽高信息
注意:画布尽可能大以减少误差

2、颜色信息:
取什么色?边框色、背景色、文字色
工具:拾色器+吸管工具
示例:获取文本颜色(文字选项区),如果文字叠加了特殊效果需要用取色器;取色器确定是否渐变;魔棒工具确定是否线性渐变

切图

1、切什么?
修饰性:图标、logo、有特殊效果的按钮文字等、非纯色的背景 保存:PNG24(IE6不支持半透明)、PNG8
内容性:banner、广告图片、文章中的配图 保存:一般存为JPG

2、怎么切?
PNG24: 1、移动工具选中所需图层(按住Ctrl多选) 2、右键合并图层(Ctrl+E) 3、右键复制图层到新文件或直接拖动支已有文件(新建Ctrl+N)
PNG8(带背景切): 1、合并(可见)图层(Shift+Ctrl+E) 2、矩形选框工具选择内容 3、魔棒工具去除多余部分(从选区中减去:按住Alt)
可平铺背景的切图:1、用矩形选框工具选取一块区域 2、复制粘贴到新文件中
使用切片工具:1、拉参考线 2、选择切片工具 3、点击“基于参考线的切片”按钮 4、选择切片选择工具,双击切片更改名称 5、保存-文件-》存储为Web所用格式-》全选切片-》统一设置存储格式

步骤

1、隐藏文字只留背景
若文字为独立图层、隐藏文字图层
若文字和背景合并,平铺背景覆盖文字(矩形选框工具、自由变换Ctrl+T/使用移动工具+Alt)

2、切图

3、保存
存储所需内容:复制、新建、粘贴(Ctrl+C Ctrl+N Ctrl+V)
存储为Web所用格式(Alt+Shift+Ctrl+S)
保存类型:
图片色彩丰富并且无透明要求(JPG并选择合适品质)
图片色彩不太丰富时无论有无透明度要求(PNG8)
图片有半透明要求(PNG24)
为保证图片质量(保留一份PSD,在PSD上修改)Why?1、PSD保留了图层有利于后期维护 2、压缩后图片上基础上修改会丢失很多像素点

4、维护和修改
A、继续放更多图片-更改画布大小(图像-》画布大小-》更改尺寸、定位左上角;选区工具+裁剪)
B、移动图标-若为独立图层,使用移动工具拖动;else 用选区工具选中图标区域,移动工具拖动;Ctrl+X Ctrl+V可以将同一图层元素分开
C、修改PNG8点图片。需更改颜色模式为:RGB颜色(默认为索引颜色更改过程会丢失颜色信息)图像-》模式-》RGB颜色

5、图片优化与合并
为什么要拼图?减少网络请求、提升网页加载速度(加载速度、浏览器请求数量限制、用户体验)
如何?
A、大小与质量
平衡与取舍;压缩工具:无损(minimage) 有损(TinyPng)
B、合并(排列、分类)
图片之间必须保留空隙(可维护性与容错性)
图片排列方式(横向、纵向)
分类:同属于一个模块的合并(后期维护与请求);大小相近的合并(节省空间);色彩相近的合并(减小大小);综上合并
合并推荐:只本页的图片合并(减少请求);有状态的图标合并(利于操作)
浏览器兼容方案:IE6不支持PNG24半透明(存两份spirit.png 24 spirit_ie.png 8);CSS3&切图(高级CSS3,低级图片+Hack;高级CSS3,低级无特效)

问题

1、如何新建参考线?
Ctrl+R打开标尺,从标尺上下(右)拉即可生成参考线

2、如何删除参考线?
切换到移动工具,鼠标指针放到参考线上,当变成上下箭头,中间夹着参考线的时候,拖动参考线到标尺上,松手后,参考线就删除了

以上笔记根据网易前端微专业课程。
记得以前有跟着课程练习一下的,前几天自己切了下图发现全忘了,于是记下这些笔记供以后查阅。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容