QiShare团队

点击蓝字关注我们

奇技指南

本文来自360奇舞团iOS团队QiShare投稿,原文:

https://www.jianshu.com/p/b087ebf6f968

这个App需要xx-xx、xxx-xxx、xxxx-xxxx...尺寸的图标和启动图

好的

有一个地方需要改,请把这些图片都改一下

循环ing...

 前 言 

一个完整的app都需要多种尺寸的图标和启动图。一般情况下,设计师需要根据开发者提供的一套规则,设计出各种尺寸的图标和启动图供开发人员使用。

但最近作者利用业余时间做了个app,因为不希望耽误设计师较多时间,希望能自己来搞定各种尺寸的图标,就只跟设计师要了最大尺寸的图标和启动图各一个。本想着找一下现成的工具,批量生成需要的的图片,但最后没有找到,只好自己使用Photoshop切出了不同尺寸的图片。

这期间还换过一次图标和启动图,作者就重复了切图工作,这花费了大量的时间。于是事后,作者开发了一个mac app——图标&启动图生成器(简称生成器)以提高工作效率。作者用两篇文章分别介绍生成器的使用和实现细节。

本篇文章介绍生成器的功能和使用方式。

01

生成器功能介绍

  1. 根据原图一键生成整套规则的图片;

  2. 支持选择所需要的平台规则;

  3. 支持选择/输入图片导出路径;

  4. 自动打开导出的图片文件夹。

02

生成器支持的平台

截止本篇文章发布,生成器v0.3版本共支持12套平台规则。

  1. iPhone AppIcons(iPhone app 图标规则)

  2. iPhone LaunchImages Portrait(iPhone app 竖屏启动图规则)

  3. iPhone LaunchImages Landscape(iPhone app 横屏启动图规则)

  4. iPad AppIcons(iPad app 图标规则)

  5. iPad LaunchImages Portrait(iPad app 竖屏启动图规则)

  6. iPad LaunchImages Landscape(iPad app 横屏启动图规则)

  7. Mac AppIcons(Mac app 图标规则)

  8. Watch AppIcons(Apple Watch app 图标规则)

  9. CarPlay AppIcons(CarPlay app 图标规则)

  10. Android AppIcons(Android app 常用图标规则)

  11. Android LaunchImages Portrait(Android app 常用竖屏启动图规则)

  12. Android LaunchImages Landscape(Android app 常用横屏启动图规则)

03

生成器界面介绍

在了解了生成器的基础功能后,来看看生成器的界面。如下图。

生成器的界面比较简洁,控件元素按照从上到下、从左到右的顺序分别为:

  1. 图片框(承载源图片)

  2. 平台选择器(供选择平台规则)

  3. 路径按钮(供选择图片导出路径)

  4. 路径文本框(显示选择的路径,支持直接输入路径)

  5. 导出按钮(在目标路径中生成符合所选定的平台规则的图片,并打开路径文件夹)

04

生成器使用步骤

生成器的使用步骤非常简单,这里以此生成器app的图标生成过程为例进行介绍。

1. 准备源图片

此生成器是一个mac app,需要10种尺寸的图标,如下图。

其中,所需要的最大图标的尺寸为1024*1024。作者需要准备好这张最大尺寸的图片,并拖拽到图片框中作为源图片。

2. 选择平台规则

作者需要生成符合mac app图标规则的所有图标图片,所以这里选择Mac AppIcons。

3. 选择导出路径

这时,点击导出按钮已经能够将源图片切成所需要的一套图片了。但在这之前,选择一个合适的图片导出路径,会便于作者管理生成的图片。另外,对文件路径规则比较熟悉的同学可以直接输入路径。

4. 导出图片

点击导出按钮可以在目标路径中生成符合所选定平台规则的图片,并打开这些图片所在的文件夹以供使用。

按照以上4步,可以快速得到所需要的符合各种平台规则图标和启动图。

05

获取app资源

设计师同学可以获取dmg资源:

https://www.jianshu.com/go-wild?ac=2&url=https%3A%2F%2Fapp-home.iot.360.cn%2Fdownload%2Fios_ipa%2Ficongenerator%2Ficongenerator.dmg

开发者同学可以从QiShare的Github中获取工程代码:

https://github.com/QiShare/QiAppIconGenerator

如有问题,欢迎后台留言反馈~

推荐阅读

  • iOS 常用调试方法:LLDB命令

  • iOS 常用调试方法:静态分析

  • iOS 常用调试方法:断点调试

界世的你当不

只做你的肩膀

360官方技术公众号

技术干货|一手资讯|精彩活动

空·

更多精彩内容“阅读原文”

右边给我一朵小花花

不会PS如何快速得到自己想要的图片——iOS图标启动图生成器相关推荐

  1. 在线ps怎么快速处理图片?电脑怎么批量图片处理?

    在平时的工作生活中,对于图片处理这件事一定都不陌生,不管是压缩图片大小,或者修改图片宽高.转换图片格式等等,这些是大家在平时都会遇到的问题,这时候就需要用到图片处理软件(https://www.yas ...

  2. 【PS】快速抠图并保存无背景图片

    将图片复制一个图层,原图层删除或者更改为不可见(图层前的小眼睛) 选择-魔棒-工具选中抠图部分 右键选择-反转选择-(选中你将要删除的部分)Ctrl+X 删除 在-图像-中选择-画布大小-可以更改成你 ...

  3. Ps怎么快速抠图白色背景?教你两招轻松搞定!

    遇到白色背景进行抠图时,如何快速抠出想要的图呢,接下来就给大家分享两种操作方法. 第一种:使用魔术橡皮檫工具 ①首先启动打开Photoshop软件,将素材拖拽到ps中打开,也可使用快捷键方式ctrl+ ...

  4. 如何从零基础入门并精通PS?PS如何快速入门?

    本文由:"学设计上兔课网"原创,图片素材来自网络,仅供学习分享 如何从零基础入门并精通PS?PS如何快速入门?ps作为时下最受欢迎的p图软件,经常有同学私信问兔课菌:零基础自学ps ...

  5. PS批量快速修改png图标颜色

    PS批量快速修改png图标颜色 一.背景 制作PPT的时候往往需要把图形填充颜色和图标元素的颜色设置成一样,但是往往找到的图标元素的颜色和想要的不一样,因此就需要修改图标颜色.而一个PPT需要的元素比 ...

  6. 资深老师教你几个PS中快速选中对象方法

    资深老师教你几个PS中快速选中对象方法 知识点1 形状选区工具组 矩形选框工具 矩形选框工具主要用来选择矩形的物体或区域.选中矩形选框工具后直接在画面上拖曳鼠标光标,即可绘制矩形选区,按住Shift ...

  7. 电商设计师必备素材|快速组合自己想要的场景和落版文字

    C4D在电商领域的应用大家应该都不会陌生了,这几年很多有些炫酷的三维页面基本上都是用 这款软件做的,因为上手容易,出效果快,所以受到了很多设计试的青睐. 有没有感到自从C4D火起来之后,只要是店铺做活 ...

  8. PS人物快速换装--纯色换成碎花装

    许久不写技术文章,今日突发奇想写上一文:PS如何快速的换衣服呢??? 首先介绍一种换装术:纯色衣服如何换成碎花的布料色. 看下面素材,我们的目的就是把这个美女的白衣服换成这种碎花纹理衣服. 图片1: ...

  9. ps怎么快速将图片变成黑白 在线PS哪个好用

    PS软件已经是专业修图必不可少的一项工具了,而且功能很齐全,但是有很多人由于没有破解版的PS软件,会导致很多时候会出现在电脑上安装不成功的现象,很是浪费时间和精力,这时候不知道你有没有想到在线PS呢? ...

最新文章

  1. multiple Rational objects
  2. onclick函数的导包问题
  3. flask的日志输出current_app.logger.debug
  4. 3D Object Classification With Point Convolution —— 点云卷积网络
  5. 小米6 twrp_小米6刷上统信 UOS 国产系统,操作流畅但安装需谨慎!
  6. 高并发系统处理之——限流
  7. go结构体初始化_golang中结构体的初始化方法
  8. matlab中for循环的步长
  9. Switch OLED版被玩家吐槽:屏幕大了价格暴涨 性能未升级
  10. 工欲善其事必先利其器,TI-ONE平台“实操手册”在这里!
  11. Executor框架(转载)
  12. [网络安全自学篇] 九十二.《Windows黑客编程技术详解》之病毒启动技术创建进程API、突破SESSION0隔离、内存加载详解(3)
  13. java httpclient 调用webservice_HttpClient调用WebService接口
  14. ARP协议及欺骗原理
  15. 破解软件以及奇奇怪怪的网站集合
  16. 神经网络学习小记录64——Pytorch 图像处理中注意力机制的解析与代码详解
  17. 随笔-学习编程有没有必要做笔记?如何做笔记?
  18. 基于STM32F407格式化SD卡
  19. 【HiFlow】腾讯云场景连接器
  20. Anaconda3安装教程及配置(全)

热门文章

  1. hexo给文章插入图片、进行图片样式控制
  2. java基础(适合零基础)持续更新
  3. 未明学院:有趣or有用,九款人工智能小程序/APP推荐给你
  4. 爱奇艺数据中台建设方案
  5. 数据库RocksDB优化方案
  6. 只需4步,让PDF阅读最优化!
  7. linux bonding 技术
  8. vue元旦倒计时烟花效果
  9. 杂题记录及简要题解(一)
  10. 【总结】羽翼日渐丰满—年终总结