首页 > 代码库 > 页面制作学习笔记:D2.Photoshop切图

页面制作学习笔记:D2.Photoshop切图

一、什么是切图?

  切图就是从网页设计稿中切出网页素材,比如一些小的按钮、小的图片、页面的LOGO、网页的背景图片等。

  然后就是页面编码,引入图片资源

  • 在HTML里通过 img 标签引入图片资源
<img src="images/avatar.jpg" alt="头像">

 

  • 在CSS里面通过background属性引入图片资源
.icon{    background-image:url(../images/avtar.jpg);    background-position:0 0 ;}

 二、PS相关知识

  1. 将单位与标尺设置为“像素”
  2. 在PS中与切图相关的面板,与切图相关一般情况下打开5个面板,工具面板、选项面板、图层面板这三个面板默认打开,还需要打开信息面板、和历史记录面板,所有面板都在“窗口”菜单中打开、关闭。
  3. 设置好常用的面板,可以将当前的工作区保存下来,在窗口→工作区→新建工作区
  4. 工具面板:常用工具;选项面板:选择的当前工具的选项;信息面板:颜色信息、位置信息、尺寸信息;图层面板:对图层进行操作;历史记录面板:对当前文件操作的所有历史记录,可以回退到任意历史记录

三、与切图相关的几个工具

  1. 移动工具:选择图层、移动图层;点击选择工具→选项面板→“自动选择”打勾→选择“图层”
  2. 矩形选框工具:选出一个矩形框,在信息面板中查看尺寸信息
  3. 魔棒工具:抠出不规则图形,容差:设置取样时的一个范围;
  4. 裁剪工具+切片工具:裁剪工具:裁剪画布;
  5. 缩放工具:Ctrl++放大;Ctrl+-缩小;Ctrl+1:100%大小;Alt+鼠标滚轮
  6. 取色器:取色
  7. 撤消上一步操作:Ctrl+Z;重复执行撤消操作:Ctrl+Alt+Z;

四、辅助视图

  1. 辅助视图在“视图”菜单下开启
  2. 一般情况下开启三个:“对齐”、“标尺”(快捷键 Ctrl+R)、“参考线”(快捷键 Crtl+;)(要显示参考线,需同时勾选“显示额外内容”)

五、其它内容

  Sprite的补充说明:可以通过搜索CSS sripte或者图片精灵等关键字来了解更多,推荐阅读:《谈谈CSS Sprites(css精灵)》

页面制作学习笔记:D2.Photoshop切图