1、首先需要用photoshop把psd源文件打开,看看源文件的整体布局。源文件是分层的,方便切图的层次。

2、切图的工具叫做“切片”,在左侧面板可以看到。右击可以看到“切片工具”和“切片选择工具”按钮。

3、用放大镜将所要切的图片部分放大,可以用参考线确定大小,切图是可以沿参考线切。

4、切换到切片工具,沿参考线划出切片,右击可以看到有可以编辑切片的选项,可以设置切片像素大小。

5、切好后就可以单击菜单栏“文件”,选择“存储为web所用格式”选项。

6、选择要存储的切片,然后右上角可以设置图片的格式、质量大小,设置好以后就可以单击保存了。

7、保存需要保存的切片,选择好路径即可,单击保存即完成。打开保存好的图片,如图。

注意事项:

注意保存时最好自己设置路径,settings选项。

photoshop切图的更多相关文章

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

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

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

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

  3. photoshop切图介绍 && photoshop下载与破解

    第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...

  4. photoshop切图介绍

    第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...

  5. 页面制作学习笔记:D2.Photoshop切图基础知识

    一.什么是切图? 切图就是从网页设计稿中切出网页素材,比如一些小的按钮.小的图片.页面的LOGO.网页的背景图片等. 然后就是页面编码,引入图片资源 在HTML里通过 img 标签引入图片资源 < ...

  6. photoshop 切图技巧

    前端切图技巧 手动切图 参考线切图 精准切图 自动切图 原文地址 http://www.cnblogs.com/w-wanglei/p/5598336.html

  7. 前端开发使用Photoshop切图详细步骤

    切图的主要目的是从设计师提供的psd中获取网页制作所要的资源 一.界面设置 1. 新建文件,调整界面大小,背景设置为透明 2. 自动选择,把组切换为图层 3. 添加窗口内容,一共四项:图层.历史纪录. ...

  8. 前端photoshop 切图神器cutterman

    1. 切图真的是就件很费力的事情,接下有给大家提供一个工具,本人觉得还不错 http://www.cutterman.cn/ 请参考这个网站,安装方法也有,很简单,我就不说了,赶紧点连接去注册帐号吧

  9. 一个好用的PHOTOSHOP切图插件(CutterMan插件下载)

    请关注CutterMan官方微博,分享本站点到自己微博中@Cutterman,私信TA,就有啦~~ 下载地址:http://www.cutterman.cn/ 也许你兴冲冲的下载了,然后发现安装不上, ...

随机推荐

  1. Android开发中与服务器交互时,遇到java.io.IOException: Target host must not be null的问题

    当我遇到这个问题的时候,也在网上查找好半天.找到了一个和这个问题很类似的问题——java.lang.IllegalStateException: Target host must not be nul ...

  2. 激活phpstorm10.0.1

    注册时选择“License server”输入“http://idea.lanyus.com/”点击“OK”快速激活JetBrains系列产品

  3. STL迭代器与部分算法学习笔记

    迭代器是类似指针的对象,分为5种,输入,输出,前向,双向和随机访问 输入迭代器(InputIterator) 输入迭代器并不是指某种类型,而是指一系列类型 举例 template<class I ...

  4. 添加第三方类库造成的Undefined symbols for architecture i386:编译错误

    1.原因: 如果是源码编译的话,一般就只某些头文件没有添加到src编译里面.但是对于添加库编译,一般是库的编译路径设置不正确(比如arm的版本.模拟器或者真机的不同版本库引用错误或者重复引用一起编译器 ...

  5. 结构-行为-样式-css&html横纵居中最佳实践

    最近在做手机端的H5项目,有个标题是在一根横线中的,就是水平居中加垂直居中(如图一).这应该是前端开发中经常遇到的一个场景了,做的次数多了就有一些体会,我今天就总结了下这种结构的实现思路:首先,用元素 ...

  6. [ios2] 获取mac地址 等唯一标识

    - (NSString *) macaddress{        int                 mib[6];    size_t              len;    char    ...

  7. 【Java每日一题】20170110

    20170109问题解析请点击今日问题下方的"[Java每日一题]20170110"查看(问题解析在公众号首发,公众号ID:weknow619) package Jan2017; ...

  8. C#Redis列表List

    一.前戏 在Redis中,List类型是按照插入顺序排序的字符串链表.和数据结构中的普通链表一样,我们可以在其头部(left)和尾部(right)添加新的元素.在插入时,如果该键并不存在,Redis将 ...

  9. unity中的委托

    中午在做一个 数据点击然后 想把当前的Gameobject传过去,但是想了好久就是弄不出来. 之后网上看了下委托,抱着试试的心态,结果成功了 委托的定义 private delegate void C ...

  10. find指令参数

    1.name ~ 根目录 . 当前和子目录 name之后跟的是文件名 find . -name "[a-z]*[4-9].log" -print 2.perm perm后面跟的是权 ...