加入收藏 | 最新开课 | 最新资讯
  • 泉州浮桥企业公司办公文
  • 泉州鲤城浮桥金龙街道、
  • 泉州鲤城浮桥、中山公园
  • 泉州浮桥电脑设计培训中
  • 2018高考完了我要学电脑设
  • 泉州鲤城photoshop淘宝详情
  • 平面广告包装ps/cad/cd-201
  • 福建百科教育泉州专业a
  • 泉州浮桥金龙AUTOCAD机械零
  • Win10开机密码忘了?教你破
  • 泉州电脑设计培训班欢迎您来学习!
    泉州电脑培训班 > Photoshop >
    全部课程 专业课程 精品课程 软件课程 职业认证 学历教育 全部课程大集结

    网页前端UI设计PxCook 切图教程

    时间:2017-12-27 19:21   来源:泉州培训班   作者:李老师15905099719   点击: 次 (责任编辑:admin)
    网页前端UI设计PxCook 切图教程

    PxCook的切图功能需要Photoshop软件的支持,请使用官方完整安装版的Photoshop。

    切图功能可以对任意平台的任意尺寸进行无损缩放,如你可以以@1x的设计稿同时输出@1x的原图@2x的二倍图以及@3x的三倍图,Android下同理。

    当打开切图插件的时候,首先弹出的是下图,此时你需要切换到Photoshop中,通过编辑->远程连接,开启远程连接的支持。这里你只需要关注远程连接的密码,以及勾选“启用远程连接”即可。

    点击下载PSD样例

    回到我们的切图工具面板,输入你刚才输入的密码。点击开始使用,等待连接成功即可。

    切图分为两种模式——选择切图和命名切图。我们先来看选择切图。

    按选择切图

    顾名思义是把你在Photoshop中选择的图层或图层组切出来的意思。
    从上到下分为平台设置,尺寸显示,以及保存相关配置。

    我们那iOS平台的切图 为例,如果你当前是以二倍尺寸进行设计的。那你的“设计”可以选择@2x选项,如果你想同时输出1倍2倍3倍三个尺寸的切图,你的“输出”可以把这三个选项全都勾选上。

    修改尺寸中,我们可以限定每个切片的尺寸到一个固定的大小。

    再往下看,如果不勾选“自动保存”,则会将切片分别作为一个新的psd文档打开。如果勾选,则会自动将切片保存到指定的目录。

    如果勾选“保存并关闭”,会在保存切片的同时,关闭有切片生成的psd文档。再下面的“路径选择”和“输出格式”,这里就不做过多介绍了。

    下面说一下设置面板:
    逐层切图:如果勾选则会将所选的每个图层都切成单独的切片。否则,会将你选择的所有图层切到同一个切片中。

    技巧:如果你有图层想按照自己制定的尺寸位置输出。你可以为该图层打个组同时在组内新建一个名为”@bounds”或“#”的图层,然后在其中绘制一个你希望尺寸的矩形。如下图:

    此时会按照“@bounds”的尺寸来切这个选择组。

    按命名切图

    按命名切图是兼容旧版本切图命名的一种方式。命名规则如下:

    切片命名:将你想输出的图层或图层组以.png或.jpg为后缀的名称命名之后,该图层或图层组就可以被PxCook软件识别了。

    修改切图尺寸:如果你想要输出的切片跟图层实际尺寸不一致。只要将你的图层打成图层组,在组内创建一个新的图层,绘制一个你想要输出尺寸的矩形,并将图层的名称改为@bounds。PxCook便会将此图层组按照@bounds的尺寸进行切割了。

    Retina双尺寸输出:当你采用2x或3x设计时,在想要输出的图层后面添加@2x或@3x,如demo@2x.png。可以在输出原尺寸切片的同时,再输出一张缩小相应比例的小尺寸图,并为图加上@1x的后缀。

    单位转换

    单位转换可以在主界面的顶栏进行设置。如下图所示:

    该单位转换功能是作用于所有标注体的,切换的时候会将整个标注文档的单位全都改变。

    Px即Web或PC标注单位。Dp即作为Android的标准单位。Pt作为iOS的标准单位。

    右侧的分辨率,表示你设计稿对应的设备分辨率。拿iOS来距离,如果你是以iPhone6为目标设备而设计的1334px*750px的设计稿。那你右侧的分辨率需要选择@2x。 此时,你设计图中的2px将会以1pt的形式进行显示。

    Android的标注也相同的道理,不再赘述。

    上一篇:APPUI设计师的标注切图的利器—PxCook
    下一篇:常用的拼图软件汇总