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最新的版本新增了自动切图功能,本文 ...
随机推荐
- mysql 查询a表在b表中不存在的记录
select * from tbl_user a where(select count(1) as cnt from tbl_order b where a.phone=b.phone)=0
- PictureService
package me.zhengjie.tools.service; import me.zhengjie.tools.domain.Picture; import org.springframewo ...
- poj 1463树形dp 树的最小覆盖
#include<iostream> #include<cstdio> #include<cstring> #include<algorithm> #i ...
- springboot系列教程导学篇
spring boot2.0系列教程学习之导学篇 springboot 2.0深度学习系列教程. Spring Boot 虽然凯哥从2015年年初开始就接触了spring boot.但是在之后的公司中 ...
- JS创建数组的三种方法
1 常规方式 创建数组并给数组元素赋值 var myCars = new Array(); myCars[0] = "Saab"; myCars[1] = "Vo ...
- [LC] 22. Generate Parentheses
Given n pairs of parentheses, write a function to generate all combinations of well-formed parenthes ...
- Linux正则表达式及扩展的正则表达式
基本正则表达式: 扩展的正则表达式:
- windows下redis的配置和jedis api的最基本的使用
redis的安装直接跳过 1.注册redis服务 在DOM窗口下,进入redis的安装目录(可以先进入安装目录,然后shift+右键,选择在此处打开powershell窗口), 输入命令: redis ...
- Django环境的搭建以及最简示例
一.环境的搭建 先安装pip yum install python-pip 安装失败: 安装epel扩展源 yum install epel-release 在安装pip 再利用pip安装django ...
- 全文检索ElasticSearch的简单使用笔记
工具:kibana GET _search { "query": { "match_all": {} } } #创建索引结构 PUT sku { "m ...