使用大图+脚本，生成各种size的app icon和图片素材
招聘信息：
本文是投稿文章，作者：技术渔场美术UI在公司是宝贵的资源，集各种项目宠爱于一身。为了努力完成好老板的进度需求，不给UI添麻烦。程序员开始忙活了。在iOS里面，我们使用image assert来管理素材和app icon。为什么呢？因为方便，按照image assert要求的尺寸拖进去就好了。Image Assert方便适配各种大小的屏幕什么？UI只给你大图，压缩啥的自己搞。What the f**k！胸中无限感慨，我们是光荣伟大的Coder！come on！1.缩放图片到指定尺寸用过PS么？用过美图秀秀么？好吧，没有我也不勉强你，估计你也不会美颜、磨皮、消下巴、变大眼睛、美白吧！用的很熟练，你也不用看这篇东东了。来吧，在Mac下给你一个神器sips，一个命令行工具，哈哈！sips这玩意是命令行处理图片大小的，可以方便的用来修改图片的各种尺寸。button按钮素材如果一个图片button.png为256*256的，压成@2x和@1x的话，按照2/3、1/3来压缩得到171*171 和 &85*85的素材。那么sips命令就是这样使用（在shell命令行里）cp&button.png&button@3x.png
sips&-z&171&171&button.png&--out&button@2x.png
sips&-z&85&85&button.png&--out&button.png这样输出，在当前文件夹下，你可以得到获得 button.png\button@2x.png \buttong@3x.png三个素材图片了，把它们拖到image assert里面来管理吧。在iOS界面Storyboard中可以直接使用button图片，配合AutoLayout自动适配不同尺寸设备。button assertPS：sips命令各种参数不熟悉的，可以在命令行里自行输入sips –help进行学习。2.获取图片尺寸，等比例缩放图片上面我们是预先知道了图片的宽和高，然后自己进行了宽和高乘以2/3、1/3的处理，但是如果图片素材很多，你总不可能一个一个的搞几天啊，这不科学。我们是光荣伟大的Coder乜！嗯嗯，sips会给我们答案的，使用下面两行命令分别获取图片素材的宽和高：sips&-g&pixelHeight&button.png&|&awk&-F:&'{print&$2}'
sips&-g&pixelWidth&button.png&|&awk&-F:&'{print&$2}'请实际将这两行代码运行一下，看看是否得到预期结果。sips输出宽高，然后awk命令把值提取出来。具体的参数含义请查一下手册。接下来，我们需要地方来存储这两个变量，并计算出它们乘以2/3、1/3的结果。因此，我们来写个Shell脚本程序吧！Shell脚本，你就理解能把命令行程序打包组合执行的这么一个东东吧。在Shell里面定义一个函数，命名为ScalePicScalePic&()&{
&&&&#&1&获取图片的高和宽
&&&&imageHeight=`sips&-g&pixelHeight&$1&|&awk&-F:&'{print&$2}'`
&&&&imageWidth=`sips&-g&pixelWidth&$1&|&awk&-F:&'{print&$2}'`
&&&&height=`echo&$imageHeight`
&&&&width=`echo&$imageWidth`
&&&&#&2&获取压缩2/3和1/3后的尺寸
&&&&height2x=$(($height*2/3))
&&&&width2x=$(($width*2/3))
&&&&height1x=$(($height/3))
&&&&width1x=$(($width/3))
&&&&#&3&存放输入文件名，并生成@2x和@3x后缀文件名
&&&&imageFile=$1
&&&&fileName2x=${imageFile/\.png/@2x\.png}
&&&&fileName3x=${imageFile/\.png/@3x\.png}
&&&&#&4&拷贝并进行压缩
&&&&cp&$1&$fileName3x
&&&&sips&-z&$height2x&$width2x&$1&--out&$fileName2x
&&&&sips&-z&$height1x&$width1x&$1
}接下来我们如何在Shell脚本里面调用这个函数呢？我们首先来确定一下我们可爱尊贵的UI MM&GG给我们素材。都统统放在了一个文件夹里，有11.png、112.png 等感人肺腑的命名文件命名，好了。我们默默的把文件名改好。打开命令行，进入跟这个文件夹一级的文件夹，将Shell脚本放入。Shell脚本是这个样子滴：#!/bin/sh
#&0&进入素材文件夹
#&1&遍历当前文件夹下的所有文件，即所有图片素材了。
for&file&in&./*
&&&&#&2&获取图片的文件名，并生成&“文件名.imageset”文件夹，方便下一步处理
&&&&imageFile=$(basename&$file)
&&&&imageDir=${imageFile/\.png/\.imageset}
&&&&mkdir&$imageDir
&&&&#&3&将图片拷贝入“文件名.imageset”文件夹，并进入该文件夹
&&&&cp&$imageFile&$imageDir/
&&&&cd&$imageDir
&&&&#&4&执行ScalePic函数，将图片文件名作为参数。最后处理完后，退回上一级目录
&&&&ScalePic&$imageFile
cd&..大家可以试着运行一下Shell脚本，脚本名字imagesetGenerator.sh，素材图片的文件夹为imageiphone，命令行下执行脚本：./imagesetGenerator.sh&imageiphone哇塞！一瞬间，所有的大小尺寸的图片都生成了，并在各自的文件夹下了！wonderful！3.真的要手动把所有图片拖入到ImageSet里面吗？手动生成了所有图片素材后，你以为工作就结束了吗？试试将所有的素材拖入到ImageSet里面吧，工作是痛苦而乏味的。我们能这样弱吗？答案明显是NO，我们是光荣伟大的Coder乜！首先，在Xcode里面右键，打开一个ImageSet文件夹。右键打开ImageSet如下图所示，ImageSet文件夹都是以“.imageset”结尾的，里面包含三个图像素材和一个“Contents.json”文件。ImageSet文件夹结构我们打开“Contents.json”文件，里面的结构如下：{
&&"images"&:&[
&&&&&&"idiom"&:&"universal",
&&&&&&"scale"&:&"1x",
&&&&&&"filename"&:&"btn_close.png"
&&&&&&"idiom"&:&"universal",
&&&&&&"scale"&:&"2x",
&&&&&&"filename"&:&"btn_close@2x.png"
&&&&&&"idiom"&:&"universal",
&&&&&&"scale"&:&"3x",
&&&&&&"filename"&:&"btn_close@3x.png"
&&"info"&:&{
&&&&&"version"&:&1,
&&&&&"author"&:&"xcode"
}这是一个以JSON格式表述的素材管理格式。这个JSON文件的内容很容易看懂的，基本上就是1x，2x和3x对应的图像文件名。因此我们就要生成这样的一个Contents.json文件，并放入相应的有各种图像素材的imageset文件夹里。好，回到我们现在的工作阶段。上一步2的脚本里面，我们已经把图像的素材放入了.iamgeset文件夹里了，我们现在就差一个Contents.json描述文件了。继续搞起！contents&()&{
&&&&imageFile=$1
&&&&renameFile2x=${imageFile/\.png/@2x\.png}
&&&&renameFile3x=${imageFile/\.png/@3x\.png}
&&&&echo&{&&>>&Contents.json
&&&&echo&"&&\"images\""&:&[>>&Contents.json
&&&&echo&"&&&"{>>&Contents.json
&&&&echo&"&&&&&&\"idiom\""&:&"\"universal\"",>>&Contents.json
&&&&echo&"&&&&&&\"scale\""&:&"\"1x\"",>>&Contents.json
&&&&echo&"&&&&&&\"filename\""&:&"\"$imageFile\"">>&Contents.json
&&&&echo&"&&&"},>>&Contents.json
&&&&echo&"&&&"{>>&Contents.json
&&&&echo&"&&&&&&\"idiom\""&:&"\"universal\"",>>&Contents.json
&&&&echo&"&&&&&&\"scale\""&:&"\"2x\"",>>&Contents.json
&&&&echo&"&&&&&&\"filename\""&:&"\"$renameFile2x\"">>&Contents.json
&&&&echo&"&&&"},>>&Contents.json
&&&&echo&"&&&"{>>&Contents.json
&&&&echo&"&&&&&&\"idiom\""&:&"\"universal\"",>>&Contents.json
&&&&echo&"&&&&&&\"scale\""&:&"\"3x\"",>>&Contents.json
&&&&echo&"&&&&&&\"filename\""&:&"\"$renameFile3x\"">>&Contents.json
&&&&echo&"&&&"}>>&Contents.json
&&&&echo&"&"],>>&Contents.json
&&&&echo&"&&\"info\""&:&{>>&Contents.json
&&&&echo&"&&&&&\"version\""&:&1,>>&Contents.json
&&&&echo&"&&&&&\"author\""&:&"\"xcode\"">>&Contents.json
&&&&echo&"&"}>>&Contents.json
&&&&echo&}>>&Contents.json
}contents函数，暴力的echo文本到Contents.json文件中去。好了，最后的完成态的脚本应该是这个样子滴：#!/bin/sh
#&0&进入需要处理的素材文件夹
#&1&遍历当前文件夹下的所有文件，即所有图片素材了。
for&file&in&./*
&&&&#&2&获取图片的文件名，并生成&“文件名.imageset”文件夹，方便下一步处理
&&&&imageFile=$(basename&$file)
&&&&imageDir=${imageFile/\.png/\.imageset}
&&&&mkdir&$imageDir
&&&&#&3&将图片拷贝入“文件名.imageset”文件夹，并进入该文件夹
&&&&cp&$imageFile&$imageDir/
&&&&cd&$imageDir
&&&&#&4&执行ScalePic函数，将图片文件名作为参数。
&&&&#&&&执行Contents函数，生成描述文件Contents.json
&&&&#&&&最后处理完后，退回上一级目录
&&&&ScalePic&$imageFile
&&&&Contents&$imageFile
cd&..执行后，得到所需要的文件素材，拖入XCode工程的Assets.xcassets文件夹中，就可以在项目中自动识别出来了。完成的脚本在GitHub上，可以点击获取。调用过程如下：原始图像生成ImageSet图像过程4.彩蛋，AppIcon也能这么干！ImageSet里面AppIcon里面需要匹配的尺寸更多，我们当然也可以轻松的解决。脚本在下面了，怎么用和理解当成作业留给大家了。#!/bin/sh
IconWithSize()&{
&&&&#-Z&等比例按照给定尺寸缩放最长边。
&&&&sips&-Z&$1&icon.png&--out&icon_$1x$1.png
for&size&in&&29&40&50&57&58&60&72&76&80&87&100&114&120&144&152&180
&&&&IconWithSize&$size
done希望大家能够利用工具简化一切操作！我们是光荣伟大的Coder！
微信扫一扫
订阅每日移动开发及APP推广热点资讯公众号：CocoaChina
您还没有登录！请或
点击量16272点击量10875点击量8664点击量8017点击量7488点击量7063点击量6588点击量6497点击量5716
&2016 Chukong Technologies,Inc.
京公网安备89&保持登录状态
如果您尚未注册，请进行注册。如果您忘记密码，请找回密码。
摄影师请进行登陆。
登录中 请稍候... ...
下载全景APP阅读(205552)胡紫薇说，男人和女人在对待“性”的问题上最大的区别是：男人需要一个地方，而女人需要一个理由。这也是A片和情色电影最大的区别。
胡紫薇说，性的诱人之处在于可以高潮迭起。性的可怕之处在于没有回头路。性是一个
阅读(202834)【导读】在各种文明形态中，汉文明是最注重家庭的，“家国天下”，家事虽小，却是“国”和“天下”的基本构成元素，无家不成国。中国人的伦理观念以家庭为基础建立，而这也是中国人家庭观念较重的原因之一。 “家”首
阅读(202921)麻脐｜广东一带的一种街边小吃，类似油糍。（广州的同事也不知道是什么，有人知道吗？）
补衫｜补衫的人一般会一张板凳一个人坐在街边，随意挂个牌，写上“补衫”或“逢衣”，就坐等生意上门；脚边放一个箩子，里面放
阅读(209618) , 08:00 am
美剧《生活大爆炸》里面有一句经典的台词：Science is my lady
想必Leonard不会无故这么说的。看完下面神奇的经典GIF集合说不定会和他一样爱上科学:P(表乱来哦)
2. 雪花的形成
阅读(203872)我是你流浪过的一个地方。
其实活着还真是件美好的事，不在于风景多美多壮观，而是在于遇见了谁，被温暖了一下，然后希望有一天自己也成为一个小太阳，去温暖别人。
最想结婚的那个人不一定是最爱你的那个人，还可能
阅读(203449).....................................................................................................................................................................................................微信图文素材库_微信图文素材_微信图文素材模板 - 上海青年网
当前位置： >
微信图文素材库
【导读】微信图文素材库，微信图文素材，微信图文素材模板。微信公众平台群发图文消息分析。微信背景…来自遥琅的图片分享。微信如何群发图文信息。微信公众平台多图文消息与单图文消息的区别。微信公众平台素材编辑与自动回复图文教程。微信系统微博营销微信营销矢量素材。微信购买彩票图文教程多图。微信公众平台如何添加多图文消息素材。微信开店图文教程。网页素材网页模板psd|网页素材。...
微信公众平台群发图文消息分析图片
微信背景…来自遥琅的图片分享图片
微信如何群发图文信息图片
微信公众平台多图文消息与单图文消息的区别图片
微信公众平台素材编辑与自动回复图文教程图片
微信系统微博营销微信营销矢量素材图片
微信购买彩票图文教程多图图片
微信公众平台如何添加多图文消息素材图片
微信开店图文教程图片
网页素材网页模板psd|网页素材图片
微信活动源文件图片
微信送礼促销页面psd分层素材模板下载图片编号:图片
微信公众平台图文消息编辑图片
微信公众平台新增用户管理图片
微信背景…来自catl的图片分享图片
微信界面图片图片
收到一条图文微信第图片
微信公众平台增加数据统计功能图片
关键词:微信墙素材下载图片
甘肃高台网官方微信平台图文信息页面图片
微信公众平台如何上传视频图文图片
微信宣传单素材下载微信宣传单模板下载图片
微信公众平台矢量素材图片
微信图片psd素材免费下载千图网www58piccom图片
实战:如何提高微信订阅号的图文转化率图片如何同步图文素材到微信公众号后台 - 帮助中心 - 西瓜公众号助手
如何同步图文素材到微信公众号后台
为了提高编辑文章的效率，我们推出的同步图文列表到微信公众号后台的功能。从此告别繁琐的复制粘贴操作，接下来给大家详细介绍如何使用该功能。一、设置“我运营的公众号”1.&点击公众号管理中“我运营的公众号”菜单，点击添加我运营的公众号。2. 从您的公众号中任意选择一篇微信文章网址。3. 添加完成后可进行素材模板配置，设置该公众号通用的引导关注签名及原文阅读内容模板，后期可在编辑内容时直接插入该模板内容，无须再每篇文章都单独编辑。二、合成图文列表1. 进入“我的素材库”，点击列表中“加入图文生成器”按钮将你选择好的文章加入到图文生成器。（如果素材库中没有任何文章，请先到素材收集模块下选择你要的文章并加入素材库）2. 文章添加完后，在图文生成器界面点击“生成图文素材”并按提示选择该图文指定的公众号即可。三、编辑及同步图文到公众号1. 点击“我的图文”菜单，进入到页面后即可看到刚才生成的图文列表2. 点击编辑图标，进入编辑界面，即可对内容进行编辑以及一键插入签名引导等内容。3. 编辑完成后点击“同步到公众号后台”，系统将会自动将文章同步到生成该图文时指定的公众号的微信后台。至此，图文素材已同步完成。请登录微信公众号后台对该图文素材进行查看群发以及二次编辑等操作。
关注西瓜微信公众号