强大的PS设计导出插件,APP图标一键生成

 联系我们     |      2019-11-29 08:57

iOS APPLogo大器晚成键生成

乘势工作年限的渐长,发觉越来越懒,对于烦琐的作业,总想少干点,就像是前天聊到的应用软件Logo这些事,往常的做法只是是二种,一是让UI程序猿提供具有尺寸的Logo,二是UI工程师给出三个大图标,自个儿裁减,方法少年老成可谓是害己又害人,尽管开拓者的职业量少,但借使Logo调节,苦了UI技术员,又累了开垦者(要协和替换Logo);方法二,那可是够累,展开PS,调解图像大小,保存,调节图像大小,保存…,几日前可谓终于忍无可忍,决定写一个剧本ios-icon-generator,上面简要介绍下.

本能源由 伯乐在线 - 凝枫 整理

条件预备

它是八个shell脚本,能够在MACOSX的bash直接运维,它依据于强盛的ImageMagick,由此在利用它早前,请先安装ImageMagick

sudo brew install ImageMagick

lom599乐百家手机 1

安装

git clone https://github.com/smallmuou/ios-icon-generator
cd ios-icon-generator
chmod 777 ios-icon-generator.sh

render.ly是风流洒脱款强大的PS设计导出插件,首要帮衬UI荧屏可替换,以致生龙活虎键提取web字体和财富作用。又快又好用的插件哪个地方找?

运行

StarnetdeMacBook-Pro:ios-icon-generator starnet$ ./ios-icon-generator.sh ~/Downloads/1024.png ~/output
[INFO] Generate iTunesArtwork.png ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon-Small.png ...
[INFO] Generate [email protected] ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon-Small-40.png ...
[INFO] Generate [email protected] ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon-60.png ...
[INFO] Generate [email protected] ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon-76.png ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon.png ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon-72.png ...
[INFO] Generate [email protected] ...
[INFO] Generate Icon-Small-50.png ...
[INFO] Generate [email protected] ...
[INFO] Generate Done.

查阅录制介绍

结果

StarnetdeMacBook-Pro:ios-icon-generator starnet$ ls -l ~/output/
total 288
-rw-r--r--  1 starnet  staff   1921 May 18 17:45 Icon-60.png
-rw-r--r--  1 starnet  staff   4723 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   6954 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   2210 May 18 17:45 Icon-72.png
-rw-r--r--  1 starnet  staff   5565 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   2184 May 18 17:45 Icon-76.png
-rw-r--r--  1 starnet  staff   5856 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   1437 May 18 17:45 Icon-Small-40.png
-rw-r--r--  1 starnet  staff   3267 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   4723 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   1674 May 18 17:45 Icon-Small-50.png
-rw-r--r--  1 starnet  staff   3992 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   1168 May 18 17:45 Icon-Small.png
-rw-r--r--  1 starnet  staff   1786 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   2393 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff   1828 May 18 17:45 Icon.png
-rw-r--r--  1 starnet  staff   4491 May 18 17:45 [email protected]
-rw-r--r--  1 starnet  staff  19995 May 18 17:45 iTunesArtwork.png
-rw-r--r--  1 starnet  staff  30653 May 18 17:45 [email protected]

百家了乐八大技巧 , 

综述

该脚本使用起来相当的轻便,要求的相恋的人招待使用.

APPLogo少年老成键生成 随着工作年限的渐长,发觉越来越懒,对于繁杂的作业,总想少干点,就方今天谈到的APPLogo这些事,往常的做法只是是两...

UI效果图片存款和储蓄

lom599乐百家手机 2

首先,大家把操作变得要命粗略。Photoshop CC 二零一五中,只要您愿意,各种最外层图层组或画板都能被导出为贰个独立的UI效果图片。

附带,大家把效果变得非常苍劲。在分组名前增添「&lom599乐百家手机 ,」,就可以分别导出UI效果图片。
还应该有,你可以制造全局组件,它能冒出在每七个UI效果图片中。

 

原型设计

本功能将要临蓐

render.ly能帮你还要在四个设施上实时测量检验呈现效果,让您的设计各个像素尽显风度。你只需在iOS或Android平台下载APP,分分钟创制本地原型。

 

字体

lom599乐百家手机 3

不无的矢量Logo都能以web字体的体制导出,下方是图标及相应代码,只需复制粘贴就可以,可用于网址、iOS或Android 应用程式使用。你再也无须为了满意各个平台须求,导出成吨的Logo版本了!

 

使用指南

底工运用

lom599乐百家手机 4

把每一个最外层组或PS画板都在说是二个单独的UI荧屏;
你可以使用前缀来整合治理你的设计稿;
您还是能运用遮罩来决定输出成分或UI荧屏的大小尺寸。

「&」

lom599乐百家手机 5

【绿框】加多“&”作为图层名前缀,可创设一个供替换的UI荧屏组,导出的时候将会独家产生输出各自的展现效果。举例:该示例图可转换:home.jpg、home-place.jpg及home-questions.jpg。

【蓝框】未加“&”的图层将做为共有成分,在具备出口图片中体现。