确定需求

刚入门前端的小伙伴经过一个阶段的学习,已经准备小试牛刀了。但看到设计师给出的psd图,又头疼了,天啊撸,怎么办,我不会切图啊。今天我就带领小白学习傻瓜式切图。包学包会。( ̄▽ ̄)"

所需软件

PxCook(像素大厨):可以对设计图进行标注。从而可以更方便的进行开发。这里我们使用的是它的插件完成切图。

PxCook与ps连接

使用photoshop打开你的psd图,通过编辑->增效工具->开启远程连接的支持。勾选"启用远程连接",输入密码,点击确定。(记住这一步的密码,之后要用)
打开PxCook软件,点击右上角的切图图标。如下图所示。

会弹出弹窗,如下图所示。

输入刚刚在ps界面输入的密码。点击开始使用。如果出现下面的界面,恭喜你,连接成功啦!这就表示你可以开始切图。

切图步骤

选择你要切的图层,点击切所选图层按钮 在弹出层上面的路径上就可以找到所有切的图片。
纸上得来终觉浅,我们来实际操作下把~
使用ps打开一张psd文件,按照如下操作,稍等片刻,就可以在路径下找到切好的图了。

小技巧:如果要把很多图层一起切,可以新建组,把要切的图层放到组里面,选中组,点击切所选图层按钮即可。

是不是很简单,学会了不妨点个赞。

PxCook+photoshop实现傻瓜式切图(推荐小白使用)的更多相关文章

  1. photoshop 切片工具进行切图

    1.使用切片工具切图 2.存储为web所用格式 3.选择图片格式 4.只保存切片(选择所有用户切片)  5.查看:

  2. PxCook 像素大厨 标注切图,一起搞定!专注设计本质

    http://www.fancynode.com.cn/pxcook

  3. iOS - 如何切图适配各种机型

    关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...

  4. 前端PS常用切图技巧

    前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就 ...

  5. 教你用canvas打造一个炫酷的碎片切图效果

    前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...

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

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

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

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

  8. 前端工程师技能之photoshop巧用系列第三篇——切图篇

    × 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...

  9. 前端工程师技能之photoshop巧用系列扩展篇——自动切图

    × 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...

随机推荐

  1. USACO 2009 Open 干草塔 Tower of Hay(贪心+单调队列优化DP)

    https://ac.nowcoder.com/acm/contest/1072/B Description 为了调整电灯亮度,贝西要用干草包堆出一座塔,然后爬到牛棚顶去把灯泡换掉.干草包会从传送带上 ...

  2. Z变换解差分方程的思考

    问题描述 今日碰到一道差分方程的题目,如下 [ y(n + 2) - cfrac{7}{10}y(n + 1) + cfrac{1}{10}y(n) = 7x(n+2) -2 x(n + 1) ] 已 ...

  3. 吴裕雄--天生自然C语言开发:位域

    struct { unsigned int widthValidated; unsigned int heightValidated; } status; struct { unsigned ; un ...

  4. Listening-lecture|主旨题|术语解释|举例原则|Crash course 哔哩哔哩

    Listening-lecture: Major topic: SP1---detail---detail---detail SP2---detail---detail---detail Crash ...

  5. C++类和对象到底是什么意思?

    C++ 是一门面向对象的编程语言,理解 C++,首先要理解类(Class)和对象(Object)这两个概念. C++ 中的类(Class)可以看做C语言中结构体(Struct)的升级版.结构体是一种构 ...

  6. ORs-5-OR Subgenomes Variation among Birds, Sea Turtle and Alligator

    OR Subgenomes Variation among Birds, Sea Turtle and Alligator 由 该图数据计算每种鸟的relative percentage,得到下图: ...

  7. 在CentOS安装CMake (CentOS7 64位适用)

    在CentOS安装CMake 转自:http://www.cnblogs.com/mophee/archive/2013/03/19/2969456.html 一.环境描述 1.系统:CentOS 6 ...

  8. getHibernateTemplate()的find用法大全

    一.find(String queryString); 示例:this.getHibernateTemplate().find("from bean.User"); 返回所有Use ...

  9. PHP--foreach的问题

    <?php echo "<pre>"; $data = ['a', 'b', 'c']; foreach($data as $key => $val){ $ ...

  10. linux上hosts文件如何配置

    linux上hosts文件如何配置 一.什么是host Hosts是一个没有扩展名的系统文件,其基本作用就是将一些常用的网址域名与其对应的IP地址建立一个关联“数据库”,当用户在浏览器中输入一个需要登 ...