Category Archives: 设计软件

一款高效的spritesheets工具 TexturePacker

  CSS Sprites 是一种高效的前端图片处理方式,在对付众多琐碎的细小图片时通过背景定位的方式加载,可以大幅减少HTTP的请求次数,对于提高页面载入速度有着显著作用。

  例如谷歌雅虎美国在线都在旗下众多产品页面中使用这种图片处理方式,我在一些琐碎图标或者一些悬浮效果上也使用这种方式,不过以往发现的一些 CSS Sprites 辅助工具多是线上产品,一直没有找到一款合适的桌面工具。TexturePacker 不只是专门处理 CSS 的 Sprites 工具,还有很多其他功能,支持多种格式的导入与输入,支持三大桌面系統,总之使得 spritesheets 变得更简单制作效率也更高。

官方主页:http://www.codeandweb.com/
教程指南:http://www.codeandweb.com/texturepacker/tutorials
帮助文档:http://www.codeandweb.com/texturepacker/documentation

spritesheet_in_20_s

  使用起来非常简单,直接将需要的图片拖入,软件会按尺寸自动排列,然后选择输出css文件,工具会智能写好每张图的CSS样式和背景定位,并连同合并后的大图自动生成到指定位置,前端设计师要做的就是直接在HTML和CSS里引入,其他工作就全部交给这个工具智能解决了。

两点提示:
1. 图片之间留够足够的空间,这些可以在软件里调整,为了避免出现不必要的背景;
2. 源图片文件素材命名应规范,软件会按文件名自动相应的class命名,避免自己看不懂生成后的css无法找到需要的图片;

  CSS Sprites 既有优点也有缺点,例如测量需要精准,图片较多时计算定位位置也很头疼,我曾在下面提到的那篇台湾博客教学文章里看到作者最后提到“我認識許多設計師,大多數設計師數學好像不太好,對於太邏輯的東西也有點排斥”,正中下怀我就是属于这类人,所以这款工具作为桌面助手使用极大解决了这个阻碍。

  还有重要一点,软件可以免费使用也可以注册使用,如果只用上面提到的功能,免费版已经足够了,同时来自德国的开发者非常厚道,使用者可以申请免费的注册码,只要符合几个条件,你写自己的博客,博客是游戏或软件或前端开发相关方向的内容(作者还诙谐的提到FaceBook, Twitter, Weibo不算博客除非你有100000个朋友,新浪微博也出现了看来来自中国的申请非常多)我比较幸运恰好几个条件基本都符合,从这里提交申请后十分钟就收到注册码了。

补充

  分享一篇相关实用文章:
  使用 CSS Sprites 設計網頁但不用 background-image 的技巧
  多一种思路,里面也有提到IE6下PNG透明背景问题,我觉得当下众多解决方案中,最强悍的还是DD_belatedPNG,下次再做介绍。

下载 TexturePacker

Adobe Creative Cloud 全系列产品官方下载链接

Adobe CC

  Adobe新一代云创作系列软件 Adobe Creative Cloud 已经推出,虽然主打云概念,但对“正版化”似乎不构成影响,已有神奇的axxxxx.xxl或者其他一些patcher仍可以离线运行,现将Adobe CC系列软件安装包的官方下载链接地址汇总,可以直接下载或者使用下载工具(如果无法直接下载,请登录自己的 adobe.com 账户,在官网下载频道任意选择一个产品试用版下载并取消,即可正常下载以下产品安装包)

注:以下产品为Win平台多国语言版,安装界面下可以选择“试用版”进行安装,至于其后步骤可以科学上网,另外Bridge这个东东奥多比终于不再捆绑安装了,如果有需要可以单独下载。

Photoshop CC

http://trials3.adobe.com/AdobeProducts/PHSP/14/win32/Photoshop_14_LS20.exe
http://trials3.adobe.com/AdobeProducts/PHSP/14/win32/Photoshop_14_LS20.7z

Dreamweaver CC

http://trials3.adobe.com/AdobeProducts/DRWV/13/win32/Dreamweaver_13_LS20.exe

Acrobat CC

http://trials3.adobe.com/AdobeProducts/APRO/11/win32/Acrobat_11_0_0_CCM_MUI.exe
http://trials3.adobe.com/AdobeProducts/APRO/11/win32/Acrobat_11_0_0_CCM_MUI.7z

Flash CC

http://trials3.adobe.com/AdobeProducts/FLPR/13/win64/Flash_Professional_13_LS20.exe

Fireworks CC

http://trials3.adobe.com/AdobeProducts/FWKS/12/win32/Fireworks_12_LS16.exe

Premiere CC

http://trials3.adobe.com/AdobeProducts/PPRO/7/win64/PremierePro_7_LS20.exe
http://trials3.adobe.com/AdobeProducts/PPRO/7/win64/PremierePro_7_LS20.7z

Audition CC

http://trials3.adobe.com/AdobeProducts/AUDT/6/win64/Audition_6_LS20.exe

Lightroom CC

http://trials3.adobe.com/AdobeProducts/LTRM/5/win32/Lightroom_5_CCM_LS11.exe

AfterEffects CC

http://trials3.adobe.com/AdobeProducts/AEFT/12/win64/AfterEffects_12_LS20.exe
http://trials3.adobe.com/AdobeProducts/AEFT/12/win64/AfterEffects_12_LS20.7z

Muse CC

http://trials3.adobe.com/AdobeProducts/MUSE/5/win32/Muse_5_0_CCM_LS23.exe

Illustrator CC

http://trials3.adobe.com/AdobeProducts/ILST/17/win32/Illustrator_17_LS20.exe
http://trials3.adobe.com/AdobeProducts/ILST/17/win32/Illustrator_17_LS20.7z

InDesign CC

http://trials3.adobe.com/AdobeProducts/IDSN/9/win32/InDesign_9_LS20.exe
http://trials3.adobe.com/AdobeProducts/IDSN/9/win32/InDesign_9_LS20.7z

InCopy CC

http://trials3.adobe.com/AdobeProducts/AICY/9/win32/InCopy_9_LS20.exe
http://trials3.adobe.com/AdobeProducts/AICY/9/win32/InCopy_9_LS20.7z

ExtensionManager CC

http://trials3.adobe.com/AdobeProducts/KEMN/7/win32/AdobeExtensionManager_CC_LS20.exe
trials3.adobe.com/AdobeProducts/KEMN/7/win32/AdobeExtensionManager_CC_LS20.7z

Exchange CC

http://trials3.adobe.com/AdobeProducts/AGOR/1/win32/AdobeExchange_1_LS20.exe
http://trials3.adobe.com/AdobeProducts/AGOR/1/win32/AdobeExchange_1_LS20.7z

Bridge CC

http://trials3.adobe.com/AdobeProducts/KBRG/6/win32/Bridge_6_LS20_win32.exe
http://trials3.adobe.com/AdobeProducts/KBRG/6/win32/Bridge_6_LS20_win32.7z

http://trials3.adobe.com/AdobeProducts/KETK/4/win32/AdobeExtendScriptToolkit_4_LS22.exe

http://trials3.adobe.com/AdobeProducts/FLBR/4_7/win32/FlashBuilder_4_7_LS10.exe

http://trials3.adobe.com/AdobeProducts/KCCC/1/win32/CreativeCloudSet-Up.exe

http://trials3.adobe.com/AdobeProducts/EDGE/2/win32/Edge_Animate_2_LS17.exe

http://trials3.adobe.com/AdobeProducts/CODE/1/win32/Edge_Code_preview_4_LREF.7z

http://trials3.adobe.com/AdobeProducts/SHDW/1/win32/Edge_Inspect_1_3_LREFJ.7z

http://trials3.adobe.com/AdobeProducts/RFLW/1/win32/Edge_Reflow_preview_3_LREF.7z

http://trials3.adobe.com/AdobeProducts/PRLD/2/win64/Prelude_2_LS20.exe

http://trials3.adobe.com/AdobeProducts/SPGD/7/win64/SpeedGrade_7_LS20.exe

http://trials3.adobe.com/AdobeProducts/ASCT/1_1/win64/Scout_1_1_LREFJC.7z

http://trials3.adobe.com/AdobeProducts/TAPI/1/win32/TouchApp_1_CCM_WWEFDJ.exe

Update:
关于Adobe产品的语言和地区识别代码,可以从安装包文件名称判断,参考如下:
LS3 - ko-KR / zh-CN / zh-TW
LS4 - da-DK / de-DE / es-ES / es-MX / fi-FI / fr-FR / fr-CA / it-IT / nb-NO / nl-NL / pt-BR / sv-SE
LS6 - cs-CZ / hu-HU / pl-PL / ro-RO / ru-RU / tr-TR / uk-UA
LS7 - English / French / German / Italian / Japanese / Korean / Spanish
LS16 - en-US / en-GB / ja-JP

via mdl