一、什么是切图?

  切图就是从网页设计稿中切出网页素材,比如一些小的按钮、小的图片、页面的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. 解决一次git问题

    由于特殊原因,工作中不能使用sourcetree,今天遇到了一个问题记录一下解决办法,后续还是得好好去廖雪峰大神那里学习一下git的命令行操作呀 You have not concluded your ...

  2. 【Mac】【问题】

    [一]export: `PATH;': not a valid identifier 可能是环境变量配的有问题 一般是~/.bash_profile 多了空格或是多了$符号之类的

  3. 记录一下最近的解决的坑爹bug

    最近解决的bug长得都很别致啊,记录一下 一 :天气插件引用报403 项目里有一个天气插件引用一直报403 后来确定原因是headers里缺少referer源,无法访问资源的服务器,再后来又发现项目引 ...

  4. sourcetree,创建工作流报错:Fatal: Not a gitflow-enabled repo yet. Please run 'git flow init' first.-》解决办法

    1.打开项目下.git/config文件,或者如下图操作: 2.打开config文件以后,删除所有 [gitflow *条目并保存文件 3.关闭并重新打开sourcetree 4.仓库->Git ...

  5. 为wordpress后台登陆添加算术验证码

    对于新建站(个人博客-柠檬https://ninmong.com)的站长来说提高后台的安全性,是一件非常重要的事,添加验证可以起到很好的效果,废话少说,贴代码 //后台登陆数学验证码 function ...

  6. linux运行进程实时监控pidstat详解

  7. Log4Net 常见错误提示(不断更新中)

    1. 无法识别log4中的节点,如:<section>等 解决办法:在configrition中直接申明log4 <configSections><!--必须为第一个节点 ...

  8. 转载aaa

    前言   对于喜欢逛CSDN的人来说,看别人的博客确实能够对自己有不小的提高,有时候看到特别好的博客想转载下载,但是不能一个字一个字的敲了,这时候我们就想快速转载别人的博客,把别人的博客移到自己的空间 ...

  9. ELK原理与介绍

    为什么用到ELK: 一般我们需要进行日志分析场景:直接在日志文件中 grep.awk 就可以获得自己想要的信息.但在规模较大的场景中,此方法效率低下,面临问题包括日志量太大如何归档.文本搜索太慢怎么办 ...

  10. 微信小程序 wx.request

    onLoad: function () { var that = this console.log('https://free-api.heweather.com/s6/weather?locatio ...