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. jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍

    jquery mobile扁平化设计样式--Jquery mobile Flat UI介绍 这几天开发的web app使用了jquery mobile,jquery mobile自带的样式比较适合做企 ...

  2. 通过jquery来实现文本框和下拉框动态添加效果,能根据自己的需求来自定义最多允许添加数量,实用的jquery动态添加文本框特效

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  3. 把虚拟机中的Linux系统安装到U盘中

    [小技巧] 把虚拟机中的Linux系统安装到U盘中 出于各种需求,很多用户可能经常会在Windows系统中安装虚拟机,然后在虚拟机中安装Linux系统.使用虚拟机的优点是可以同时使用多个系统,而缺点也 ...

  4. Android Phone和Pad UA区别

    很多Android开发者或者网站端都可能会困扰关于如何区分Android phone和Android Pad的ua.确实这个问题很困难,我也曾被困扰了一段时间,后来在Stackoverflow中发现了 ...

  5. C语言之带有返回值的函数

    带有返回值的函数 语法: 类型 函数名(参数列表){ 函数体; return 数据; } 例: int getSum(int num1,int num2){ int sum = num1 + num2 ...

  6. [ios2] 利用钥匙串,在应用里保存用户密码的方法 【转】

    想在应用里保存帐号.密码等信息的话,直接存到 plist 里显然是不负责任的,自己折腾加密既麻烦又不能保证不被反编译破解.实际上苹果 iOS 和 Mac OS X 系统自带了一套敏感信息保存方案:&q ...

  7. 前端MVC学习笔记(四)——NodeJS+MongoDB+AngularJS+Bootstrap书店示例

    这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店 功能:完成前后端分离的图书管理功能 ...

  8. [UWP小白日记-10]程序启动屏(ios解锁既视感)

    讲一下 微软爸爸的开发者大会2016又暴了个表达式动画和Windows.UI.Composition的API,好叼的样子. 官方示例库GitHub 目前是懵逼状态,好复杂.脑细胞已经在地府排队了. ( ...

  9. 微信小程序前置课程:Flex 布局教程(一):语法篇

    原文:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool 网页布局(layout)是CSS的一个重点 ...

  10. C# FTPHelper(搬运)

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...