┏ ┓
_____ _____ _____ ______ _______ _____
|\ \ / /| ___|\ \ | \/ \ ___|\ \
| \ \ / / | / /\ \ / /\ \ / /\ \
| \____\/ / /| | | | / /\ / /\ || | |____|
\ | / / / | |__| | / /\ \_/ / / /|| | ____
\|___/ / / | .--. || | \|_|/ / / || | | |
/ / / | | | || | | | || | |_, |
/____/ / |____| |____||\____\ |____| /|\ ___\___/ /|
| | / | | | || | | | | / | | /____ / |
|____|/ |____| |____| \|____| |____|/ \|___| | /
|____|/
┗ ┛
YAMG - Yet Another Media Generator
Linux
nice-pkg-manager install imagemagick phantomjs librsvg ruby
gem install yamg
OSX
brew install imagemagick phantomjs librsvg ruby
gem install yamg
Trouble with phantomjs gem? Use NPM to install PhantomJS:
npm -g install phantomjs
- Find best version (size) to use from icons folder.
- Shrinks binaries from the closest or greater size version.
- Raster SVG to PNG with exact size and dpi.
- Splash screen/banner generation with gravity.
- Works with iOS/Android/Other mobile with Phonegap or Cordova.
- Exports icons and splashes for stores and social networks.
- Creates multi-layered .ico files.
- Screenshots for stores and advertising.
First time
yamg init
The config file yamg.yml will be created on the folder.
From now on to recompile everything when needed:
yamg
An example folder /art of a project:
art
├── icons
│ ├── icon16.png
│ ├── icon32.png
│ └── icon512.svg
├── media
│ └── logo.svg
└─── splash
├── center.png
├── north.png
└── southeast.png
From the yamg.yml file you may configure differents source paths.
Also configure every export location you need (check #Support)
Your main icon(s) may be SVG or PNG. Or both: SVG is always the best choice, it will be rasterized and not resized. Except will be with really small (16x16, 32x32, 64x64@2x) icons: A canvas for you to bring joy to the world with your pixel art skills.
Multiple sizes: Just save your files with the size in pixels first, example: In the 'icons/' folder: '16-icon.png', '32-icon.png', '512-icon.png'. YAMG will choose the best size for the case, and don't touch the icon if sizes are a match.
It's ok to (or if you) have only one png icon, make it >512px.
You may still use best size match: Just have you folder: '16-icon.svg', '256-icon.svg', and problably not many other sizes: The SVG will be rasterized in the correct size needed.
YAMG will automatically find the best version and combine: 16px, 32px and 48px into a .ico for the web. Also check out #HTML to meta tags for all this.
Up to 9 images may be placed in a splash. It's not patch 9, think gravity: images will be pulled towards. Note: The center splash image must be named 'center'.
Just save you files with the names: 'north', 'northeast', 'south'... Gravity will put em in the correct place, with a lil padding.
Addional media. There's also media generator for app stores.
To generate default screenshots (stores and whatnot) provide the url:
screenshot:
url: 'localhost:7000'
Custom screenshots (notice the plural):
screenshots:
another-one:
url: 'github.com'
size: [1280, 720] # W x H
scroll: 100 # Optional
dpi: 2 # Optional, 2 for HiDPI
Note: Waiting for a pull-request on screencap for hidpi.
icon:
path: 'folder/'
round: true # defaults to false
splash:
path: 'folder/'
background: #rgb
screenshot:
path: 'url://'Custom location:
some-project:
icon: [32, 64, 128]
Note: For Apple Store make sure to add round false if your default is true:
compile:
apple:
rounded: false
- iOS Project
- OSX Project
- Android Project
- Windows Project
- Cordova (res/*)
- Phonegap (www/res)
- App Store
- Play Store
- Web (Any framework: rails, sinatra, js...)
- Write your own (really easy, fork and change yml)
Meta tags in HTML:
https://github.com/joshbuchea/HEAD
<link rel="apple-touch-icon" sizes="57x57" href="/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="/manifest.json">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta name="theme-color" content="#ffffff">Meta tags in HAML:
%link{href: "/apple-touch-icon-57x57.png", rel: "apple-touch-icon", sizes: "57x57"}/
%link{href: "/apple-touch-icon-60x60.png", rel: "apple-touch-icon", sizes: "60x60"}/
%link{href: "/apple-touch-icon-72x72.png", rel: "apple-touch-icon", sizes: "72x72"}/
%link{href: "/apple-touch-icon-76x76.png", rel: "apple-touch-icon", sizes: "76x76"}/
%link{href: "/apple-touch-icon-114x114.png", rel: "apple-touch-icon", sizes: "114x114"}/
%link{href: "/apple-touch-icon-120x120.png", rel: "apple-touch-icon", sizes: "120x120"}/
%link{href: "/apple-touch-icon-144x144.png", rel: "apple-touch-icon", sizes: "144x144"}/
%link{href: "/apple-touch-icon-152x152.png", rel: "apple-touch-icon", sizes: "152x152"}/
%link{href: "/apple-touch-icon-180x180.png", rel: "apple-touch-icon", sizes: "180x180"}/
%link{href: "/favicon-32x32.png", rel: "icon", sizes: "32x32", type: "image/png"}/
%link{href: "/android-chrome-192x192.png", rel: "icon", sizes: "192x192", type: "image/png"}/
%link{href: "/favicon-96x96.png", rel: "icon", sizes: "96x96", type: "image/png"}/
%link{href: "/favicon-16x16.png", rel: "icon", sizes: "16x16", type: "image/png"}/
%link{href: "/manifest.json", rel: "manifest"}/
%meta{content: "#da532c", name: "msapplication-TileColor"}/
%meta{content: "/mstile-144x144.png", name: "msapplication-TileImage"}/
%meta{content: "#ffffff", name: "theme-color"}/RSVG - Impossible without https://github.com/svg/svgo
Real Favicon Generator - Perfect, but I wanted it automated (behold YAMG). http://realfavicongenerator.net https://github.com/audreyr/favicon-cheat-sheet https://epicfavicongenerator.com/
Media is a logo, icon + name.
Don't forget to add to your config.xml:
https://cordova.apache.org/docs/en/latest/config_ref/images.html
You may generate assets for both, but the difference is:
Phonegap (www/res) assets are used only on Phonegap Build.
To build locally use Cordova assets (platforms/<platform>/*)
If you're working with cordova, add some Ruby to it: