PxCook+photoshop实现傻瓜式切图(推荐小白使用)
确定需求
刚入门前端的小伙伴经过一个阶段的学习,已经准备小试牛刀了。但看到设计师给出的psd图,又头疼了,天啊撸,怎么办,我不会切图啊。今天我就带领小白学习傻瓜式切图。包学包会。( ̄▽ ̄)"
所需软件
- PxCook
- photoshop
PxCook(像素大厨):可以对设计图进行标注。从而可以更方便的进行开发。这里我们使用的是它的插件完成切图。
PxCook与ps连接
使用photoshop打开你的psd图,通过编辑->增效工具->开启远程连接的支持。勾选"启用远程连接",输入密码,点击确定。(记住这一步的密码,之后要用)
打开PxCook软件,点击右上角的切图图标。如下图所示。
会弹出弹窗,如下图所示。
输入刚刚在ps界面输入的密码。点击开始使用。如果出现下面的界面,恭喜你,连接成功啦!这就表示你可以开始切图。
切图步骤
选择你要切的图层,点击切所选图层按钮 在弹出层上面的路径上就可以找到所有切的图片。
纸上得来终觉浅,我们来实际操作下把~
使用ps打开一张psd文件,按照如下操作,稍等片刻,就可以在路径下找到切好的图了。
小技巧:如果要把很多图层一起切,可以新建组,把要切的图层放到组里面,选中组,点击切所选图层按钮即可。
是不是很简单,学会了不妨点个赞。
PxCook+photoshop实现傻瓜式切图(推荐小白使用)的更多相关文章
- photoshop 切片工具进行切图
1.使用切片工具切图 2.存储为web所用格式 3.选择图片格式 4.只保存切片(选择所有用户切片) 5.查看:
- PxCook 像素大厨 标注切图,一起搞定!专注设计本质
http://www.fancynode.com.cn/pxcook
- iOS - 如何切图适配各种机型
关于iPhone6/6+适配问题一直有争议,今天小编专门为大家整理了相关的有效方案,希望对大伙儿有帮助! 移动app开发中多种设备尺寸适配问题,过去只属于Android阵营的头疼事儿,只是很多设计师选 ...
- 前端PS常用切图技巧
前言:前端涉及到的 ps 操作不算复杂,基本上就是切图,本文总结了常用的几种切图技巧. 工具:photoshop cs6 . photoshop cc 1. 传统切图 01 这是最笨的一种方法,核心就 ...
- 教你用canvas打造一个炫酷的碎片切图效果
前言 今天分享一个炫酷的碎片式切图效果,这个其实在自己的之前的博客上有实现过,本人觉得这个效果还是挺炫酷的,这次还是用我们的canvas来实现,代码量不多,但有些地方还是需要花点时间去理解的,需要点数 ...
- photoshop切图介绍 && photoshop下载与破解
第一部分:界面设置 1.点击“文件-新建”(或者ctrl+n)打开一个新建对话框.名称可随意填写.“预设”设置为自定,“宽度”一般选择1920,“单位”选为像素.“高度”可选择为2000,“单位”选为 ...
- 前端开发工程师 - 01.页面制作 - 第1章.Photoshop切图
第1章--Photoshop切图 工具.面板.视图 什么是切图? 1. 从设计稿(.psd)中切出网络素材,如按钮.图标.logo.背景图等 2. 编写代码,在代码中使用图片,生成静态页面 --给网页 ...
- 前端工程师技能之photoshop巧用系列第三篇——切图篇
× 目录 [1]切图信息 [2]切图步骤 [3]实战 前面的话 前端工程师除了使用photoshop进行测量之外,更重要的是要使用该软件进行切图.本文是photoshop巧用系列的第三篇——切图篇 切 ...
- 前端工程师技能之photoshop巧用系列扩展篇——自动切图
× 目录 [1]初始设置 [2]自动切图 前面的话 随着photoshop版本的不断升级,软件本身增加了很多新的功能,也为切图工作增加了很多的便利.photoshop最新的版本新增了自动切图功能,本文 ...
随机推荐
- D. Colored Boots(STL)
There are nn left boots and nn right boots. Each boot has a color which is denoted as a lowercase La ...
- 2018-1 WebStorm最新版本破解激活方法
在激活页面选择License Server,输入:http://idea.codebeta.cn,点击Activate即可激活. 如果失效用这个: http://idea.ibdyr.com
- DateTimePicket jQuery 日期插件,开始时间和结束时间示例
需要引入的js文件: <input type="text" id="startTime" placeholder="开始时间"/> ...
- 74cms_3.5.1 宽字节注入
第一次进行CMS的代码审计,我选择了2014年发布的74CMS 3.5.1,历史比较久远的CMS往往存在更多的问题,虽然技术上难度不大,但是在思路方面给了我很大的启发.下面我根据我的思路给大家分享一下 ...
- JS创建数组的三种方法
1 常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...
- Django学习之模板层
三板斧 render,HttpResponse,redirectrender返回一个HTML页面,并且还能够给该页面传数据render内部原理: from django.template import ...
- 简单标签 SimpleTagSupport示例
最近处理JSP页面,需要把数据库查到的原始值,根据数据字典转换成更加直观的值.比如查到的结果是 01,jsp页面展示‘身份证’. 如果值比较少,就直接用c:if标签处理了,无奈接触的值比较多,只想到了 ...
- yii执行流程简单介绍
1. 用户访问 http://www.example.com/index.php?r=post/show&id=1,Web 服务器执行入口脚本 index.php 来处理该请求. 2. 入口 ...
- http接口与webservice接口的区别
常见的API接口有两类:http接口和webservice接口. http接口走http协议,通过路径来区分调用方法,请求报文一般是key-value形式的,返回报文一般是json串,常用的是get和 ...
- python-django项目基础-haystack&whoosh&jieba_20191124
全文检索框架和搜索引擎的安装和配置: 安装全文检索框架,pip install django-haystack, 安装搜索引擎,pip install whoosh settings里面配置 1,注册 ...