モバイルアプリケーション用の自動アイコンサイズ変更、またはInkscape + bashによる生活の簡素化

この記事のソリューションは、OSXユーザー向けに書かれています。 しかし、他の一般的なオペレーティングシステムに適応するのは非常に簡単です。



すべては重要なタスクから始まりました。Webサービスとモバイルアプリケーションが作成されると、必然的に、そのアイコンを表示可能またはあまり表示できないアイコンにする必要があります。 ただし、XcodeでiOSアプリケーションの作成を開始すると、アイコンが1つだけでなく、約12個の異なるサイズが必要であることがすぐにわかります。 それらの一部を次に示します。



そして今、注意:このリストのほとんどすべてのアイテムには、デバイスのタイプとiOSのバージョンに応じて、独自のサイズもあります。 WebおよびiOSアプリのアイコンの詳細な仕様はこちらです。



解決策「額」-それぞれの場合に、サイズを変更し、独自の一意の名前でファイルに保存します。 さて、この手順にはすでに約30分を費やしました。 しかし、アイコン内の何かを変更したいという奇妙な欲求が時々あります。 そして、そのような欲求は何度か発生する可能性があります。



現在、アイコン処理の各反復では、サイズ変更と再保存が必要になります。



猿の仕事をすることは知性に苦しむ人にとって良い考えではないと思われ始めた瞬間に、おそらくあなたはインターネットで解決策を探し始め、この記事に出くわすでしょう。



さまざまな形式、サイズ、およびアイコンの目的を示すさまざまなプレフィックスを使用して、アイコンのサイズを変更して保存するプロセスを完全に自動化できることがわかりました。



これに必要なもの:



Inkscapeは、すべての一般的なOSで利用可能な無料のベクターエディターです。 この場合の魅力は、コマンドラインを使用してInkscapeを制御できることです。 bashスクリプトは、プロセスを自動化するのに役立ちます。



準備段階



開始するには、bashスクリプトを準備します。



#!/bin/bash INK=/Applications/Inkscape.app/Contents/Resources/bin/inkscape if [[ -z "$1" ]] then echo "SVG file needed." exit; fi BASE=`basename "$1" .svg` SVG="$1" # favicon tmpl 16pt $INK -z -C -e "favicon.ico" -f $SVG -w 16 -h 16 # iPhone Spotlight iOS5,6 Settings iOS and iPad 5-7 29pt $INK -z -C -e "$BASE-29.png" -f $SVG -w 29 -h 29 $INK -z -C -e "$BASE-29@2x.png" -f $SVG -w 58 -h 58 # iPhone Spotlight iOS7 40pt $INK -z -C -e "$BASE-40@2x.png" -f $SVG -w 80 -h 80 # iPhone App iOS 5,6 57pt $INK -z -C -e "$BASE-57.png" -f $SVG -w 57 -h 57 $INK -z -C -e "$BASE-57@2x.png" -f $SVG -w 114 -h 114 # iPad Spotlight iOS 7 40pt $INK -z -C -e "$BASE-40.png" -f $SVG -w 40 -h 40 # iPad Spotlight iOS 5,6 50pt $INK -z -C -e "$BASE-50.png" -f $SVG -w 50 -h 50 $INK -z -C -e "$BASE-50@2x.png" -f $SVG -w 100 -h 100 # iPad App iOS 5,6 72pt $INK -z -C -e "$BASE-72.png" -f $SVG -w 72 -h 72 $INK -z -C -e "$BASE-72@2x.png" -f $SVG -w 144 -h 144 # iPad App iOS 7,8 60pt $INK -z -C -e "$BASE-60@2x.png" -f $SVG -w 120 -h 120 $INK -z -C -e "$BASE-60@3x.png" -f $SVG -w 180 -h 180 #iTunes Artwork $INK -z -C -e "$BASE-512.png" -f $SVG -w 512 -h 512 $INK -z -C -e "$BASE-1024.png" -f $SVG -w 1024 -h 1024 cp "$BASE-512.png" iTunesArtwork.png cp "$BASE-1024.png" iTunesArtwork@2x.png
      
      





スクリプトは、さまざまな目的のためにアイコンのサイズ変更を記述するブロックに分割されます。





この場合、bashスクリプトは何をしますか? inkscapeターミナルを起動し、ソースファイルを取得し、サイズを変更して、BASE(定数部分)とアイコンのサイズを示すプレフィックスで構成される名前で保存します。 したがって、スクリプトで指定されているすべてのディメンションに対して。 他のアイコンサイズまたは最終ファイルの名前が必要な場合は、bashスクリプトを編集できます。



次に、同じxCodeを使用して、rezise.shファイルを作成し、bashスクリプトをそのファイルにコピーして、svg形式のアイコンのソースと同じディレクトリにファイルを保存します。



打ち上げ段階



1. terminal.appを開きます。

2.ターミナルで、標準コマンドcd +ディレクトリへのパスを使用して、ソースとスクリプトがあるディレクトリに移動します。

3.ターミナルで、次のコマンドを実行します。
 ./resize.sh icon.svg
      
      





出来上がり! しばらくすると、適切なサイズと適切な名前のソースとともに、一連のアイコンがフォルダーに表示されました。

ソースを変更してコマンドを再実行すると、ファイルは上書きされます。 そのため、アイコンデザインを自由に試すことができます。



実際、それがすべてです。



解決策は、ある英語のサイトで私が探していて、私によって少し修正されました。 そこからresize.shをダウンロードすることもできます。



時間を無駄にしないでください。



All Articles