PXCOOk像素大厨怎么用 PXCOOk使用教程
&&PXCOOk像素大厨怎么用 PXCOOk使用教程
PXCOOk像素大厨怎么用 PXCOOk使用教程
11:41:07来源：编辑：
PXCOOk像素大厨是一款非常好用的UI设计软件，它可以让你在作图的过程中解决透明图，尺寸，标尺，等一系列问题，那么像素大厨怎么用？让小编来告诉你把。
PXCOOk像素大厨切图教程：
每一个psd文件都可以直接拖入PxCook，并切换到切图模式查看结果
将你想输出的图层或图层组以.png或.jpg为后缀的名称命名之后，该图层或图层组就可以被PxCook软件识别了。
PxCook目前的渲染引擎暂时还无法支持图层效果以及遮罩等，所以我们推荐您将有特效的图层或多个图层转化为智能对象，以便渲染引擎能够更好的识别您的Psd文档。
修改切图尺寸
如果你想要输出的切片跟图层实际尺寸不一致。只要将您的图层打成图层组，在组内创建一个新的图层，绘制一个您想要输出尺寸的矩形，并将图层的名称改为@bounds。PxCook便会将此图层组按照@bounds的尺寸进行切割了。
Retina双尺寸输出
当你采用2x或3x设计时，在想要输出的图层后面添加@2x或@3x，如demo@2x.png。可以在输出原尺寸切片的同时，再输出一张缩小相应比例的小尺寸图，并为图加上@1x的后缀。
关键词： PXCOOk
热门游戏开服表UI设计素材-Sketch素材下载频道 & Sketch中国社区& 切片
你可以使用Sketch中的切片工具定义一块导出区域，然后将它输出为一个单独的文件。一个Sketch文档允许存在你想要的任何数量的切片，每一个切片区域都可以导出为独立的文件。
切片作为独立图层
在Sketch中，切片被当做一个独立的图层存在。这种做法有很多好处，比如你可以把所有切片图层和需要导出的内容图层打组，这样当你移动这个组的时候，切片也会随之移动。
如果你暂时不需要让切片图层打扰到你的工作，那么你可以在图层列表最下方点击“小刀”按钮把他们隐藏。
要添加切片，执行菜单命令Iner&Slice，或者使用快捷工具栏上的切片图标。接着在画布的任何位置绘制切片区域即可。当进入切片工具状态的时候，你也可以直接单击图层，这个时候Sketch将会自动紧贴这个图层边缘绘制一个切片区域。
每个切片可以独立命名，这个名字会用于你导出的图片文件名。
你可以使用这个小技巧让命名更便捷：在为切片命名的时候，使用 /
符号会为切片文件建立一个文件夹存放。举个例子：如果将切片命名为“foo/bar.png”,那么导出的时候，Sketch会新建一个名为“foo”的文件夹，然后在这个文件夹里创建一个“bar.png”的图片文件。
你可以为一个单独的切片导出多个适应不同分辨率和精度设备的素材。比如我们为iOS做设计，你可能会经常需要输出2X和3X的图片。使用切片工具会让一切变得简单。只需点击属性检查器底部的“+”按钮，即可添加多个输出尺寸。
每种尺寸的输出方案都可以自定义缩放数值，文件格式和后缀名。大部分情况下，我们必须使用后缀名来区分同一个切片的不同大小的输出文件，因此我们有必要加入后缀。默认情况下，依据iOS命名规则，第二个输出文件将会被加上“@2x”的后缀。
只导出组内容
当我们在属性检查器中选择“”仅仅导出组内容（ Export Group Contents Only）“”选项的时候，此时切片将不会导出画布上的所有内容，取而代之的是，切片将仅仅导出它所存在的组中的内容。使用这种导出方式，任何干扰内容都可以被忽略掉，这点非常方便。
属性检查器中的导出预览界面会为白色和浅色内容显示为透明。当然，你也可以选择在切片中包含背景颜色。
移除透明区域
切片选项中还有一项为“移除透明区域（Trim）”。当此选项打开后，导出的切片的透明像素区域将会被从图片区域中移除。
比如：我们设定一个切片为30X40大小，但是这个切片中有内容的部分仅仅为15×15像素。此时，我们不用费力去将切片区域缩放到精确匹配这15×15像素的部分，只需要简单打开“Trim”选项，Sketch在导出的时候将会移除透明的部分，最终我们的图片仅仅是15×15那么大的内容区域。
要更快速了解导出切片功能，你可以在这里。互联网从业者一名。
&&&|&Powered by
由于HTML5和微信内置浏览器的火爆，移动端H5网页越发流行。在设计制作移动端网页的时候，你是否疑惑，这种网站设计稿应该做成的多少屏宽，是否应该跟手机的分辨率一致，还是应该按照iPhone的分辨率来设计（注意H5网页区别于APP，APP的设计稿直接按照手机分辨率来设计）？那么对于现在2K屏幕的手机，应该如何制作设计稿和前端稿呢？
由于文章篇幅原因，结论先行：
1、像素是没有宽高的（不要被Photoshop中的像素格欺骗），它只代表一个采样的色值。
2、任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，此时的ppi对于图片来说时没有任何意义，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有ppi的意义，被打印出来才可以描述这张图片有多高多宽。
3、平时制作H5页面时设计原型时，产品经理出的原型稿建议屏宽为320px，用这个尺寸一是为了浏览方便（现在很多手机的屏宽达到1440px，用这个尺寸去模拟显然不现实），二是以iPhone5s为标准的手机屏宽较小，进行内容排版布局时屏宽应该向下兼容。
4、制作设计稿时，设计师应该把原型稿上的所有尺寸进行2倍处理。这样设计稿在移动设备上预览便可保证清晰。而前端切片时，按照现在流行的做法，可以直接使用原型稿上的尺寸，也就是设计稿上的1/2。
5、一般情况下，H5页面设计稿做成640x1136px是最为稳妥的尺寸，在812px高度处增加一条安全线，重要内容在此线之上（网上有些文章说安全线是960px处，个人认为不太准确）。既保证了在移动设备上显示清晰，也保证了素材的最小尺寸。推荐前端攻城狮使用，这里的图片压缩还是相当好用，可以节省用户不少带宽。
-------------------------------------------------------------------分割线---------------------------------------------------------------------
作为本次文章系列的“上”部，将解决一些基本概念：像素（pixel）、ppi、分辨率、物理像素（physical pixel）、CSS像素、设备独立像素（deviceindependent pixel）等等。
像素（pixel）（）
为图像显示的基本单位，表示“图像元素”之意。每个这样的信息元素不是一个点或者一个方块，而是一个抽象的采样。仔细处理的话，一幅图像中的像素可以在任何尺度上看起来都不像分离的点或者方块；但是在很多情况下，它们采用点或者方块显示。
这一段是出自维基百科的解释。其实很多会Photoshop的人都有一个误区：认为像素是一个宽高相等的小方块，并且的像素都是“那么大”，但是不知道这个宽高的具体数字。
像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
先可以跳过这个话题，介绍ppi概念，像素没有大小就好理解了。
PPI的复杂之处在于如果他所属的上下文环境不同，意义也会完全不一样。&当我们在谈论显示设备的PPI时，它代指的屏幕的像素密度；当我们在谈论和图片相关时，我们谈论的是打印时的分辨率或者打印机的打印精度。这里我们主要描述的前一种情况。
PPI全称为Pixel Per Inch，译为每英寸像素取值，更确切的说法应该是像素密度，也就是衡量单位物理面积内拥有像素值的情况。
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图1
中的七张图，假设图片尺寸都为1x1寸，那么 PPI 分别为 1、2、5、10、20、50、100 。在同一物理尺寸内，随着像素数的增大，图像细节越多， PPI 增大，图像越清晰，像素所占空间相对越小。
因此，从讨论像素大小的角度来说，图①中各个方框像素的宽度（单位为英寸）分别为：1、1/2、1/5、1/10、1/20、1/50、1/100。像素在每个不同ppi下大小都不同，因此讨论像素的大小也就变得无意义了。像素是没有大小的。像素是一个抽象概念，它是一个相对单位。
像素描述的是图像在某一点的颜色值。一般来说，一个像素只能描述一种颜色值。
在photoshop中分别建立两个文档：①800x600px，72ppi，②800x600px，300ppi。那么这两个文档在PS或者生成图片时，显示的视觉效果是完全一样的，因为宽高的像素点数是完全一样的，在设备上渲染出来的效果图是一致的。当你把文档②中的任意图层复制到文档①中，从视觉上发现图层不会变大或者缩小。只有把这两个文档作为图片1:1打印出来时，才会发现72ppi的图片要大于300ppi的图片（注意ppi的含义），前者宽（高）大约是后者的4.16（300/72）倍。
任何图片作为数据信息被保存在存储盘中时，只有宽高像素数是有意义的，ppi对于图片来说时没有任何意义的，也并不能描述这个图片有多少英寸的宽度或者高度，而只有在被打印出来后才有他的意义。
分辨率泛指显示系统对细节的分辨能力。能显示图像都能叫显示系统，比如显示器，投影仪，照片。
分辨率常用的单位有：dpi（点每英寸）、lpi（线每英寸）和ppi（像素每英寸）。从单位来看，分辨率是一个比值，与物理单位的比值。
日常所说的“这张图片的尺寸（或分辨率）是100x100像素”，一般都是在描述数字图片，这样的描述只是说明了图片文件包含多少个像素。比如图1中的七张图，我们习惯于说，第1张图的分辨率是1x1像素，第5张图的分辨率是20x20像素，其实只是说明了图片的像素数而已。
Retina显示屏
这是一种显示技术，可以将把更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度，这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
最先使用retina屏幕是iphone 4，屏幕分辨率为960 * 640（326ppi）。
对比如下两幅图，可以清晰地看出是否 Retina 屏的显示差异：&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图2& iPhone 3GS
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图3& iPhone 4
两代iPhone 的物理尺寸（屏幕宽高有多少英寸）是一样的，从上图可以看出，iphone 4的显示效果要明显好于iphone 3GS，虽然 iPhone 4 分辨率提高了，但它不同于普通的电脑显示器那样为了显示更多的内容，而是提升显示相同内容时的画面精细程度。这种提升方式是靠提升单位面积屏幕的像素数量，即像素密度来提升分辨率，这样做的主要目的是为了提高屏幕显示画面的精细程度。以第三代 MacBook Pro with Retina Display为例，&工作时显卡渲染出的个像素每四个一组，输出原来屏幕的一个像素显示的大小区域内的图像。这样一来，用户所看到的图标与文字的大小与原来的分辨率显示屏相同，但精细度是原来的4倍。
注意：在桌面显示器中，我们调整了显示分辨率，比如从 800 * 600 调整到 1024 * 768 时，屏幕的文字图标会变小，显示的内容更多了。但 Retina 显示方式不会产生这样的问题，或者说，&Retina&显示技术解决的是显示画面精细程度的问题，而不是解决显示内容容量的问题。
设备独立像素
为什么是“每四个一组”？而且要让这四个一组来显示“原来屏幕的一个像素”？这大概就是 Retina 显示技术的一种表现吧。而这“每四个一组”的“大像素”，可以被称作“设备独立像素”， device independent pixel ，或者 density-independentpixel ，它可以是系统中的一个点，这个点代表一个可以由程序使用的虚拟像素，然后由相关系统转换为物理像素。
“设备独立像素”也有人称为“CSS像素”，一种形象的说法，更倾向于表明与 CSS 中尺寸的对应。
设备独立像素与物理像素的对应关系，可以这样看：
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&图4
类似的每四个一组的对应关系，也许正是 Retina 显示技术所做的。
作为Web开发者，我们接触的更多的是用于控制元素样式的样式单位像素。这里的像素我们称之为CSS像素。
CSS像素有什么特别的地方？我们可以借用中的这个例子：
假设我们用PC浏览器打开一个页面，浏览器此时的宽度为800px，页面上同时有一个400px宽的块级元素容器。很明显此时块状容器应该占页面的一半。
但如果我们把页面放大（通过“Ctrl键”加上“+号键”），放大为200%，也就是原来的两倍。此时块状容器则横向占满了整个浏览器。
吊诡的是此时我们既没有调整浏览器窗口大小，也没有改变块状元素的css宽度，但是它看上去却变大了一倍——这是因为我们把CSS像素放大为了原来的两倍。
CSS像素与屏幕像素1：1同样大小时：
&&&&&&&&&&&&&&&&图5
CSS像素(黑色边框)开始被拉伸，此时1个CSS像素大于1个屏幕像素
&&&&&&&&&&&&&&&&图6
也就是说默认情况下一个CSS像素应该是等于一个物理像素的宽度的，但是浏览器的放大操作让一个CSS像素等于了两个设备像素宽度。在后面你会看到更复杂的情况，在高PPI的设备上，CSS像素甚至在默认状态下就相当于多个物理像素的尺寸。
从上面的例子可以看出，CSS像素从来都只是一个相对值。
设备像素比（DevicePixelRatio）
设备像素比=设备物理像素/设备独立像素
设备像素比在 js 中可以通过 devicePixelRatio 的参数取得（需要页面的 viewport 设置为 content=”width=device-width”&此处为前端布局知识，较为专业，笔者也只是意会，无法说清楚，请自行百度）
iPhone 4 的设备像素比为2，线长（横向、纵向、对角线）上的物理像素数与设备独立像素数的对应关系即为2。
根据这个对应关系，一般可以通过屏幕的物理分辨率和设备像素比确定设备独立像素数。
那么在我们做移动端网站时，将viewport设置了content=”width=device-width”，设备独立像素也就等于CSS像素。
历史问题屏宽320px
经常在做移动端网站时，我们会听到一些人说原型稿屏宽做成320px，设计稿做2倍640px，网上也有很多文章说这样说，H5网页的设计稿做成2倍普通屏分辨率就行了。
这是一个历史遗留问题，这里提到的屏宽，更确切的说，是将viewport设置为width=device-width时的宽度，习惯称这个宽度为屏宽，也就是设备独立像素的宽度。笔者从其他文章中找到了一些答案。（原型图屏宽是320px是为了满足原型软件在1：1比例显示上适当，二是为了保证早期iphone320px屏宽的显示需求）
“其实这个属性值很有意思，字面意应该是 viewport 宽度等于设备宽度，但在实际中不同的浏览器都给出了个定值：320px；这个值还是源于 Apple ，因为早期 iPhone 的分辨率为 320px*480px ，大量为 iPhone 量身定制的网站都设置了 viewport:width=device-width ，并且按照宽度 320px 来设计制作，所以其他浏览器加入 viewport 支持时为了兼容性也将 device-width 定义为了 320px 。”
那么到了后来的iPhone4的屏幕是960x640px，几乎所有人都知道Retina显示屏，所有方向上的像素都成了原来的2倍。而设备独立像素的屏宽还是保持着320px。其它智能手机早期的分辨率基本上也使用了大致相同的屏幕尺寸与分辨率，因此才有了 320px 这个不约而同的约定。
当然，如果把 viewport 的 width 属性设置为一个定值，比如 320、 480、 700 等等，那 viewport 的宽度即为设定的宽度。此时，设备独立像素宽度，也即所设定的宽度，而物理像素与设备独立像素的比值，则不再是最初始的设备像素比值了（比如 iPhone 4 中的2）。
现在的智能手机屏幕尺吋多样，分辨率有很多种，相应地，设备像素比也不一致，有1、1.5、2、2.25、3等等，而在一般情况下（指 viewport 设置为 width=device-width 时）的设备独立像素宽度，也不再只是 320px 了，还有 360px 、 400px等等。&这是从&统计的大部分手机独立像素数据。&
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&表1
若设备像素比是N，就表示该手机屏幕上的N个物理像素来显示一个CSS像素。
本文对已移动端网站涉及到的一些概念进行了较为基础的解释，在下一篇中，会介绍H5网页在做设计稿以及前端布局时的最为省力的方法。
参考文章↓
热度 ( 82 )
很喜欢此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
转载了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
转载了此文字
推荐了此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
很喜欢此文字
转载了此文字
很喜欢此文字
推荐了此文字
转载了此文字
很喜欢此文字
很喜欢此文字
很喜欢此文字
转载了此文字
推荐了此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
很喜欢此文字
推荐了此文字
转载了此文字
很喜欢此文字
推荐了此文字
很喜欢此文字
转载了此文字
转载了此文字
很喜欢此文字
转载了此文字
很喜欢此文字
转载了此文字温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！&&|&&
LOFTER精选
网易考拉推荐
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
&编辑-&首选项-&常规-&标尺设置
阅读(1736)|
用微信&&“扫一扫”
将文章分享到朋友圈。
用易信&&“扫一扫”
将文章分享到朋友圈。
历史上的今天
在LOFTER的更多文章
loftPermalink:'',
id:'fks_',
blogTitle:'ps查看尺寸像素-切片选项',
blogAbstract:'234&编辑-&首选项-&常规-&标尺设置',
blogTag:'',
blogUrl:'blog/static/4',
isPublished:1,
istop:false,
modifyTime:5,
publishTime:4,
permalink:'blog/static/4',
commentCount:0,
mainCommentCount:0,
recommendCount:0,
bsrk:-100,
publisherId:0,
recomBlogHome:false,
currentRecomBlog:false,
attachmentsFileIds:[],
groupInfo:{},
friendstatus:'none',
followstatus:'unFollow',
pubSucc:'',
visitorProvince:'',
visitorCity:'',
visitorNewUser:false,
postAddInfo:{},
mset:'000',
remindgoodnightblog:false,
isBlackVisitor:false,
isShowYodaoAd:false,
hostIntro:'',
hmcon:'0',
selfRecomBlogCount:'0',
lofter_single:''
{list a as x}
{if x.moveFrom=='wap'}
{elseif x.moveFrom=='iphone'}
{elseif x.moveFrom=='android'}
{elseif x.moveFrom=='mobile'}
${a.selfIntro|escape}{if great260}${suplement}{/if}
{list a as x}
推荐过这篇日志的人：
{list a as x}
{if !!b&&b.length>0}
他们还推荐了：
{list b as y}
转载记录：
{list d as x}
{list a as x}
{list a as x}
{list a as x}
{list a as x}
{if x_index>4}{break}{/if}
${fn2(x.publishTime,'yyyy-MM-dd HH:mm:ss')}
{list a as x}
{if !!(blogDetail.preBlogPermalink)}
{if !!(blogDetail.nextBlogPermalink)}
{list a as x}
{if defined('newslist')&&newslist.length>0}
{list newslist as x}
{if x_index>7}{break}{/if}
{list a as x}
{var first_option =}
{list x.voteDetailList as voteToOption}
{if voteToOption==1}
{if first_option==false},{/if}&&“${b[voteToOption_index]}”&&
{if (x.role!="-1") },“我是${c[x.role]}”&&{/if}
&&&&&&&&${fn1(x.voteTime)}
{if x.userName==''}{/if}
网易公司版权所有&&
{list x.l as y}
{if defined('wl')}
{list wl as x}{/list}PS中使用切片工具 在切图的过程中如何得知所切图片的像素大小呢 就像是fireworks里会自动显示长宽图像一样_百度知道
PS中使用切片工具 在切图的过程中如何得知所切图片的像素大小呢 就像是fireworks里会自动显示长宽图像一样
fireworks里的切图它会自动的显示出你所切的那一部分的长宽像素 PS中如何自动显示那个长宽像素呢
我有更好的答案
选择“切片选取工具”-选择切片-单击切片选项，里面有“尺寸”，显示了切片的大小。
采纳率：28%
首先按 K。执行切图，
接着按 shift+k 双击 刚刚那个切图的框子。
为您推荐：
其他类似问题
您可能关注的内容
切片工具的相关知识
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。