一、什么是切图?

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

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

  • 在HTML里通过 img 标签引入图片资源
<img src="data: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切图基础知识的更多相关文章

  1. 前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图

    第1章--Photoshop切图 工具.面板.视图 什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...

  2. 页面制作部分之PS切图

    页面制作部分之PS切图 <--本标签下,通过页面制作.页面架构.javascript程序设计.DOM编程艺术.产品前端架构五部分来分享总结笔记,总结笔记会陆续分享--> 网页设计在技术层面 ...

  3. 学习笔记:APP切图那点事儿–详细介绍android和ios平台

    学习笔记:APP切图那点事儿–详细介绍android和ios平台 转载自:http://www.woofeng.cn/articles/168.html   版权归原作者所有 作者:亚茹有李 原文地址 ...

  4. 使用Photoshop切图的三种方式

    PhotoShop切图的三种方式 1. 原始切图 (1)选择工具栏中的切片工具 (2)找到要切片的元素,在右侧的图层框中,使元素背景隐藏,然后用切片工具选择需要切片的元素     (3)导出为web常 ...

  5. tensorflow笔记(一)之基础知识

    tensorflow笔记(一)之基础知识 版权声明:本文为博主原创文章,转载请指明转载地址 http://www.cnblogs.com/fydeblog/p/7399701.html 前言 这篇no ...

  6. 《Programming Hive》读书笔记(两)Hive基础知识

    <Programming Hive>读书笔记(两)Hive基础知识 :第一遍读是浏览.建立知识索引,由于有些知识不一定能用到,知道就好.感兴趣的部分能够多研究. 以后用的时候再具体看.并结 ...

  7. php面试笔记(5)-php基础知识-自定义函数及内部函数考点

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而函数相关的考点 ...

  8. php面试笔记(3)-php基础知识-运算符

    本文是根据慕课网Jason老师的课程进行的PHP面试知识点总结和升华,如有侵权请联系我进行删除,email:guoyugygy@163.com 在面试中,考官往往喜欢基础扎实的面试者,而运算符相关的考 ...

  9. photoshop切图

    1.首先需要用photoshop把psd源文件打开,看看源文件的整体布局.源文件是分层的,方便切图的层次. 2.切图的工具叫做"切片",在左侧面板可以看到.右击可以看到" ...

随机推荐

  1. Dva三种方式实现dispatch的Promise回调

    Dva2.0及以上版本 使用官方自带的Promise // 业务组件 e.g: Tags.js dispatch({ type: 'user/add', payload: {}, // 需要传递的信息 ...

  2. Ubuntu 16.04安装httpd

    1.下载httpd源码(当前版本为2.4.37) http://httpd.apache.org/download.cgi 2.解压编译 tar -zxf httpd-2.4.37.tar.gzcd ...

  3. printf打印输出

    int PrintVal = 9;    /*按整型输出,默认右对齐*/    printf("%d\n",PrintVal);    /*按整型输出,补齐4位的宽度,补齐位为空格 ...

  4. selenium 模拟拖动滚动条下拉

    senium做自动化测试的过程中,有的页面需要下拉滚动条才能全部加载完成,否则加载不出来就定位不到想要的元素. 参考链接:http://www.cnblogs.com/landhu/p/5761794 ...

  5. iOS权限申请

    <!-- 相册 --> <key>NSPhotoLibraryUsageDescription</key> <string>App需要您的同意,才能访问 ...

  6. urllib库详解 --Python3

    相关:urllib是python内置的http请求库,本文介绍urllib三个模块:请求模块urllib.request.异常处理模块urllib.error.url解析模块urllib.parse. ...

  7. label标签内含有input元素,点击事件会触发两次

    **label标签内含有input元素,点击事件会触发两次** 如果你的结构是label内写input实现点击文字时候input也有相应.并且,把事件设置在了label上,那么就会执行两次了. //h ...

  8. 通过 txt 文件批量导入需要批量处理的数据的标识字段

    前言 在一些工作中,可能需要对数据库中的一些数据(批量)进行处理(修改或者查询),而数据的来源是你的同事,换句话说就是这批数据不可能通过某些查询条件查出来, 而这批数据又比较多,比如几百.几千甚至几万 ...

  9. 前台ajax请求php后台返回成功却进error方法解决

    最近几天一直都在解决error问题,周末都没能好好过,悲痛万分,想逃走

  10. mysql锁分析相关的几个系统视图

    1.infomation_schema.innodb_lock_waits+-------------------+-------------+------+-----+---------+----- ...