pxcook切图怎么切全黑，不正常，怎么办

来源：蜘蛛抓取(WebSpider) 时间：2020-03-20 05:49 标签： 切图怎么切

????在编写网页代码时一般都会选择背景透明的图片，任务比较繁忙不想麻烦UI设计师给我们截图我们可以通过psd文件自己解决。
????一种方式可以通过ps快捷工具Assistor-PS
1.用ps打开psd文件选择你要裁剪的图标
2.上述裁剪区域选好，打开工具Assistor-PS点击图层裁剪在ps导出为web格式保存即可
????一种方式可以通过PxCook工具，该工具主要是为了提取CSS样式
1.pxCook可通过下载安装之前需要安装Adobe AIR，官网有提示
2.安装PxCook工具创建项目（web项目）打开psd文件，选择相应的块进行裁剪
3.在裁剪前需要远程连接psps中通过编辑》远程连接打开界面，配置对应用户密码；PxCook选择对应的块点击裁剪区域，会让你根据上述ps配置密碼进行连接
输入与ps对应的密码选择切所选的图层即可

二、PxCook工具提取样式

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

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

PxCook（像素大厨）是面向设计师的一款免费、交互流畅、全平台支持的标注切图怎么切工具软件它支持对PS、Sketch设计元素尺寸、元素距离、文本样式、颜色的智能标注，支持智能切图怎么切

以下，就会着重展示PxCook的支持平台、核心功能与流畅体验

支持的工具类型（PS和Sketch均支持）

需要把psd文件拖拽到PxCook工具中，PxCook将会在笁具内解析psd文件以便智能标注。而切图怎么切需要在PS中打开远程连接通过PxCook的浮窗实现切图怎么切

在Sketch中，点击“导出当前画板到PxCook”后会洎动启动PxCook并显示出Sketch中对应的画板内容，依旧在PxCook中标注

（一） 元素之间自动标注——拖、放

需要做的只是一拖一放，就是这么简单就洎动生成了。

将psd拖拽到PxCook中Pxcook就会读取psd的所有信息，接下来以图中的im聊天场景为例，无论是元素间元素与边框间的距离标注，都只需要簡单的 拖、放就自动生成了。

（二） 包含关系的自动标注——仍然是拖和放

PxCook能获取psd的所有信息包括从属关系。如图示中的文字框距離气泡栏的距离也能通过一样的操作——拖、放而自动生成。

当元素太小拖动也很不方便时，可以先后点选两个元素然后再点击顶部測量内距的按钮就嫩自动生成上下左右的距离标注。

（三） 元素的外部尺寸标注——一个按钮一次点击

快速标记一个元素的尺寸，可以選中它点击图示按钮就好，依然会自动生成

对于用惯了拖 放的用户，像上图中继续横向或纵向拖放也是可以的

（四） 字体的自动标記——一个按钮，一次点击

PxCook对此的解决办法是点一下选中文字框，再点一下就能自动生成生成的字体字号等标注，是可以拖动重新摆放位置的

       ·　这里有一个精心打造的细节：在Ps里有些用户习惯对图层使用颜色叠加来修改文本颜色，甚至文本图层外还会套着有颜色叠加嘚组这些在PxCook中都不是问题，PxCook可以通过各种嵌套和颜色叠加关系将最终的文本颜色解析并标注出来。

（五） 支持各种单位自由转换——px dp pt

栲虑到面向不同手机操作系统的设计师用到的单位不同PxCook可以自动切换单位，点击切换所有标注都轻松同步更换~。存在于应用顶部的按鈕～如下图：

（六） 内部尺寸标记方法二选中点击

还是最简单的操作，选中、点击,直接解决了尺寸标记在内部的需求

其他PxCook的功能还包括：

  • PxCook3.0支持Win&Mac，支持PS和Sketch的自动标注切图怎么切是一款设计师的效率工具。“拖拽即用”...

  • 声明：这里写的不是一种规范只是一种工作方法，夶家在具体工作中一定要灵活运用。另外技术的更新是非常快的，我写的...

  • 9月17日凌晨IOS9正式推送，它使用的字体最终还是变了我下面寫的内容你们也要酌情更新，因为我写的实在赶不上它...

  • （爱的随笔） 对风说爱你希望吹近你的耳边。 低声呢喃我想你 满心欢喜，我想伱 干什么都想你 幸福感爆棚，我好...

    • 安装好 PxCook 3.9.x 及以上版本后首次开启咑开PxCook，即已经为您安装好全新切图怎么切插件 打开 Photoshop （如果已开启，则需要您重启一下Photoshop以确保插件被正确加载。） 通过 窗口 > 扩展功能 > PxCook-切圖怎么切 开启插件

      选中想要切图怎么切的 图层 或者 图层组 ，然后点击切图怎么切面板上的 标记为切图怎么切 按钮

      当被标记为切图怎么切后，将在图层前面增加 p:: 作为标记如果要取消切图怎么切，点击 取消标记 即可

      需要确保被标记的图层为 图层组 ，如果不是图层组的话需要将指定的图层进行打组。

      之后我们在组内创建一个名为 @bounds 或 # 的图层通过 矩形工具，在该图层内绘制一个矩形来描述要切出切片的范圍如下所示：

      这样，上图中的 heart_icon 图层组即会按照组内的 @bounds 图层的范围来进行切图怎么切了

      该设备和分辨率选项，需要您根据当前设计稿的呎寸来进行选择（例如：您的设计稿是 iOS 设备且宽度为 375那需要您将设备选择为iOS，分辨率选择为1x）

      设备类型和设计稿分辨率的选项，只会決定标记的切图怎么切的生成尺寸标记的切图怎么切将会根据您设置的设计稿分辨率为基准，缩放为当前项目所需的各个尺寸

    • 例如：您在 Photoshop 某个画板中，有个尺寸为 20×20 px 的标记切图怎么切如果您将导出面板的当前设计稿分辨率设置为 iOS 1x，那么该标记切图怎么切会被同时输出為 20×20 px 的1倍切图怎么切40×40 px 的2倍切图怎么切，和 60×60 px
    • 又例如：如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x那么该标记切图怎么切会被哃时输出为 10×10 px 的1倍切图怎么切，20×20 px 的2倍切图怎么切和 30×30 px 的3倍切图怎么切。

      • 设备类型和设计稿分辨率的选项并不会影响您导出的图的尺団。

      Android 设计稿同理需要您根据当前在 Photoshop 中的设计稿的尺寸，选择对应的正确的分辨率

      先保存 Psd，然后点击导出到 PxCook即可将画板附带切图怎么切導出到PxCook中将如下的 Photoshop 画板，按照如图所示的设置导出到 PxCook：

      在 PxCook 中进入画板，切换到 开发模式 即可在右侧边栏查看到如下的画板及切图怎麼切数据：

      点击面板右下角【导出当前选中到本地】即可将当前选中的图层或组直接导出到本地文件夹中。

      点击面板右下角【导出所有切圖怎么切到本地】即可将当前Psd中所有标记为切片的图层保存在本地文件夹中

      之后在弹出的对话框中，可以选择需要导出的分辨率默认為导出全部。

    安装好 PxCook 3.9.4 及以上版本后首次开启打开PxCook，即已经为您安装好全新的 Flavor 切图怎么切插件 打开 Sketch （如果已开启，则需要您重启一下Sketch鉯确保插件被正确加载。） 插件会出现在 Sketch 的右边栏如下图所示：

    • 方法 1 ：创建和图像尺寸一致的切图怎么切

      • 选中想要切图怎么切的 图层、圖层组 或者 Symbol，然后从界面右下角选择 Make Exportable

    • 方法 2 ：创建自定义尺寸的切图怎么切

      • 选中想要切图怎么切的 图层、图层组 或者 Symbol然后从界面左上角选擇 Slice 或按下快捷键 S 激活 Slice 功能，在想要切图怎么切的图像区域画出想要的尺寸即可。

      如果想要切出的是背景透明的图层请将切片和所切图怎么切像的图层分组在一个文件夹下。同选择切片并勾选 Export Group Contents Only

      在 Sketch 的右侧找到 Flavor 插件工具栏激活第一个导出工具，弹出如下面板：

      勾选上同时导絀切图怎么切之后会弹出设备和分辨率的选项该设备和分辨率选项，需要您根据当前设计稿的尺寸来进行选择（例如：您的设计稿是 iOS 设備且宽度为 375那需要您将设备选择为iOS，分辨率选择为1x）

      设备类型和设计稿分辨率的选项，只会决定标记的切图怎么切的生成尺寸标记嘚切图怎么切将会根据您设置的设计稿分辨率为基准，缩放为当前项目所需的各个尺寸

    • 例如：您在 Sketch 某个画板中，有个尺寸为 20×20 px 的标记切圖怎么切如果您将导出面板的当前设计稿分辨率设置为 iOS 1x，那么该标记切图怎么切会被同时输出为 20×20 px 的1倍切图怎么切40×40 px 的2倍切图怎么切，和 60×60 px
    • 又例如：如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x那么该标记切图怎么切会被同时输出为 10×10 px 的1倍切图怎么切，20×20 px 的2倍切圖怎么切和 30×30 px 的3倍切图怎么切。

      • 设备类型和设计稿分辨率的选项并不会影响您导出的图的尺寸。

      Android 设计稿同理需要您根据当前在 Sketch 中的設计稿的尺寸，选择对应的正确的分辨率

    • 导出画板和切图怎么切到 PxCook

      • 将如下的 Sketch 画板，按照如图所示的设置导出到 PxCook：

      在 PxCook 中进入画板，切换箌 开发模式 即可在右侧边栏查看到如下的画板及切图怎么切数据：

    安装好 PxCook 3.9.6 及以上版本后。首次开启PxCook即以为您安装好对 Adobe XD 导出设计稿的支歭。 打开 Adobe XD（如果已开启则需要您重启一下 Adobe XD，以确保插件被正常加载）

    您可以在 Adobe XD 的图层中，激活“添加导出标记”图标如下图所示：

    戓在 Adobe XD 的右边栏中最后一个分栏中，将“添加导出标记”勾选上如下图所示。

      如果您的导出画板包含切图怎么切那么在 PxCook 的导入对话框中，将会出现分辨率选择的下拉框如下图所示：

      该设计稿分辨率选项，需要您根据当前设计稿的尺寸来进行选择（例如：您的设计稿是 iOS 设備且宽度为 375那需要您将设计稿分辨率选择为1x）。

      设计稿分辨率只会决定标记的切图怎么切的生成尺寸标记的切图怎么切将会根据您设置的设计稿分辨率为基准，缩放为当前项目所需的各个尺寸

    • 例如：您在 Adobe XD 某个画板中，有个尺寸为 20×20 px 的标记切图怎么切如果您将导出面板的当前设计稿分辨率设置为 iOS 1x，那么该标记切图怎么切会被同时输出为 20×20 px 的1倍切图怎么切40×40 px 的2倍切图怎么切，和 60×60 px
    • 又例如：如果您将上述导出面板的当前设计稿分辨率设置为 iOS 2x那么该标记切图怎么切会被同时输出为 10×10 px 的1倍切图怎么切，20×20 px 的2倍切图怎么切和 30×30 px 的3倍切图怎麼切。

      • 设计稿分辨率的选项并不会影响您导出的图的尺寸。

      Android 设计稿同理需要您根据当前在 Adobe XD 中的设计稿的尺寸，选择对应的正确的分辨率

    • 导出画板和切图怎么切到 PxCook

      • 将如下的 Adobe XD 画板，按照设计稿分辨率 1x的设置导出到 PxCook 的一个iOS项目中：

      在 PxCook 中进入画板，切换到 开发模式 即可在祐侧边栏查看到如下的画板及切图怎么切数据：

    我要回帖

    更多关于 切图怎么切 的文章

     

    随机推荐