你的位置:首页 > 网页设计

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


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

 

【photoshop的作用】:给网页提供图片素材
  [html] <img>标签 <img src="img/xx.jpg" alt="">
  [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