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

标签：

【项目流程】
　　需求分析(市场) > 项目原型(产品) > 出设计图(UI) >页面相关(前端) > 数据相关(后端) > 测试 -> 上线

【photoshop的作用】:给网页提供图片素材
　　[html] <img>标签 <img src="img/xx.jpg" >
　　[css] background属性 icon{background: url(../img/xx.jpg);}

【photoshop的初始化设置】
　　[1]首选项设置【ctrl+k】 编辑 > 首选项 > 单位与标尺 > 把标尺和文字的单位都改成像素

　　[2]面板设置(在窗口菜单下):
　　　　[2.1]工具(可切换两列或单列布局)
　　　　[2.2]选项(与当前选中的工具一一对应)
　　　　[2.3]信息【F8】(颜色、位置、尺寸信息,一般结合矩形选框工具使用)
　　　　[2.4]图层【F10】(图层操作)
　　　　[2.5]历史记录(记录历史操作,常用于回退)

　　[3]辅助视图(在视图菜单下)
　　　　[3.1]对齐【ctrl+shift+;】 开启对齐后,图层移动到另一个图层或参考线或文档边缘时会有自动吸附功能
　　　　[3.2]标尺【ctrl+R】
　　　　[3.3]参考线【ctrl+;】 视图 > 显示 > 参考线
　　　　　　[注意]需勾选显示额外内容,才能看到画布里的参考线和网格

【切图常用工具介绍】
　　[1]移动工具【V】(常用于选择图层及移动图片)
　　　　[注意1]移动工具对应的选项面板上的自动选择一定要勾选上
　　　　[注意2]在选区工具中的选项面板有图层和组两个选项，组一般指的是一个文件夹
　　[2]矩形选框工具【M】(常用于选择一块区域并配合信息面板查看信息)
　　　　[a]添加到选区：shift
　　　　[b]从选区减去: alt
　　　　[c]与选区交叉: shift + alt
　　[3]魔棒工具【W】(抠不规则的图)
　　　　[注意]容差是用来设置颜色取样时的范围,容差为0代表只选取当前的颜色值
　　[4]裁剪工具+切片工具【C】(裁剪图片)
　　[5]缩放工具【Z】(缩放画布)
　　　　[tips]常用于缩放快捷键
　　　　[1]放大:
　　　　　　[a]ctrl+加号
　　　　　　[b]alt+滚轮上滚
　　　　[2]缩小:
　　　　　　[a]ctrl+减号
　　　　　　[b]alt+滚轮下滚
　　　　[3]显示为100%:ctrl+1
　　[6]取色器+吸管工具(取色)
　　[7]文字工具【T】(输入及编辑文字)
　　[8]抓手工具【空格】(移动可视区域)

【其他常用快捷键】
　　[1]单步撤销或前进:ctrl+z
　　[2]连续撤销:ctrl+alt+z
　　[3]回退到某一步:点击历史记录面板上相应的步骤
　　[4]取消选择:ctrl+d
　　[5]变形:ctrl+t
　　[6]保存:ctrl+shift+alt+s
　　[7]合并图层:ctrl+e
　　[8]盖印所见图层:ctrl+shift+e

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

标签：

原文地址：http://www.cnblogs.com/xiaohuochai/p/4770584.html