Ps快捷切图psd文件及将psd内容转化为CSS样式工具（PxCook）

2024-03-29 01:51:23

Ps快捷切图psd文件及PxCook提取CSS样式

一、 Ps快捷切图Assistor-PS和PxCook工具

在编写网页代码时，一般都会选择背景透明的图片，任务比较繁忙不想麻烦UI设计师给我们截图，我们可以通过psd文件自己解决。
一种方式可以通过ps快捷工具Assistor-PS
1.用ps打开psd文件，选择你要裁剪的图标

2.上述裁剪区域选好，打开工具Assistor-PS，点击图层裁剪在ps导出为web格式保存即可

一种方式可以通过PxCook工具，该工具主要是为了提取CSS样式
1.pxCook可通过http://www.fancynode.com.cn/pxcook下载，安装之前需要安装Adobe AIR，官网有提示
2.安装PxCook工具，创建项目（web项目）打开psd文件，选择相应的块进行裁剪
3.在裁剪前需要远程连接ps，ps中通过编辑》远程连接打开界面，配置对应用户密码；PxCook选择对应的块，点击裁剪区域，会让你根据上述ps配置密码进行连接

输入与ps对应的密码选择切所选的图层即可

二、PxCook工具提取样式

1.用PxCook打开相应的psd文件，选择对应的块，为了减少标注或者吸取色系，可通过该工具一键提取如图所示：

2.通过上述选取，在右侧可以看到其对应的宽高、颜色、字体等CSS样式属性，在代码编写时整体复制即可，从而减少工作量，提高开发效率

Ps快捷切图psd文件及将psd内容转化为CSS样式工具（PxCook）相关推荐

ps快速切图，文件命名图片自动导出
ps版本有区别 1,编辑->首选项->增效工具->勾选启用生成器 2,文件->生成->勾选图像资源 3,随后重命名图层/组为xxx.png名称,将会自动生成相应图片到文件 ...
ps 快速切图
× 前端实战系列之---两种快速切图的方法今天给大家分享一下我自己在前端工作中的一些切图小技巧,虽然好的UI会给我们把图切好,但是他们切的图不一定百分之百符合我们的需求,所以还是自己动手丰衣足食嘛, ...
【前端】PS图层切图
PS有很多的切图方式,例如:图层切图.切片切图.PS插件切图等.PS切图是前端人员的必备技能之一. 准备工作首先用PS打开PSD文件,打开后如下图所示接下来对PSD图片稍作调整,选择缩放工具选择 ...
前端工程师必备的PS技能——切图篇
Photoshop界面设置移动工具快捷键--v 注意自动选择选项智能参考线--视图->显示标尺--Ctrl+R 窗口->信息(面板选项中,第二种颜色信息模式为RGB颜色,标尺单位为像 ...
php 切图,ps怎么切图
ps怎么切图? 将准备好的详情页置入PS画布中(或随意一张图片置入画布中) 选择工具栏中的"切片工具",然后鼠标移动到画布中的时候,就会显示一个刀片的形状,而且会有数字显示切片个数 ...
还在一张张切图？PS快速切图新技能助你解放双手
什么?你还在一张张处理??? 切图和标注一直是多数设计师最耗时且最不愿意做的事情,PS快速切图新技能,教你解放双手,快上车. 本文纲要规则切图不规则切图快速批量切图快速批量切出不同平台各种尺寸 ...
psd文件生产html,PSD文件切图制作html全过程记录
PSD文件切图制作html全过程记录最后效果图: 新建文件夹开始时,在您的计算机中创建一个文件夹.我把它命名为zmool.再在文件夹中创建新文件夹images,放网站的所有图像.接下来打开代码编辑 ...
ps切图后 JAVA开发_photoshop操作之前端PS操作切图和合并sprite
今天给大家介绍一下关于前端相关PS操作之切图和合并sprite,首先给那些已经学习完HTML/CSS基础知识,想模仿做一个静态页面,但缺少对ps了解的新手同学,那么下面我们一起来看一下吧. 一.准备工 ...
利用PS自动切图、支持svg且支持icoMoon——再也不用四处去转格式了
今天想导出svg格式的图片支持webFont,结果AI打不开了,文件好像损坏了,于是就想办法在PS里面导出. 网上搜索到一篇文章,腾讯的 http://isux.tencent.com/ps-phot ...
ps如何切图成html页面,PhotoShop切片工具切割图片转成网页格式教程
PhotoShop中:切片工具是该软件自带的一个平面图片制作工具.切片工具:将一个完整的网页切割许多小片,以便上传.是将我们设计的网页设计稿切成一片一片的,或一个表格一个表格的,这样我们可以对每一张进 ...

最新文章

热门文章