fresh digitable

めんどくさかったなってことを振り返ったり振り返らなかったりするための記録

マテリアルデザインぽいアイコンをinkscapeで作った

memorandum 俺アプリ

アプリを出すにあたってアイコンを作る必要があったのでinkscape(ver. 0.92.2)でマテリアルデザインっぽいアイコンを作ってみることにした。参考にした動画：

こういうツールをまともに使ったことがなかったので動画を何度も見返したりしてなんとかそれらしい形になった。

初期のお絵かき的模索

最初はあんまり何も考えずにとにかくデフォルメしたアオエリヤケイを描こうとしていた。キャンバスサイズもめちゃくちゃ適当で本当にどうしようもない。最初は本家のアイコンと同じく右を向いている絵を描こうとしていた。

デザインする上で決めたこと

マテリアルデザインのアイコンで抑えておくべきルールは次のページに書いてある。

Icons - Style - Material design guidelines

長さの単位にdpが使われているのだが、これとpxとの関係をどう決めればよいのか分からなかったので、今回はxxxhdpiのフォルダに入っているデフォルトのアイコンのサイズと同じ192x192pxをキャンバスサイズとし、単純にdpをpxに読み替えることにした。キーラインの細かい寸法（角のRとか小さい円の半径）も分からなかったので大体で引いた。edge tintの高さは全部1pxにした。その他、陰影の色の指定のルールなどは上のページに倣った。

アプリアイコンのデザインでポイントとしたのは次の通り。

  • 頭文字のaを使う
  • 背景は緑か青で迷ったけど青だと本家と被りそうだったので緑にした
  • アオエリヤケイのトサカの青をどうしても入れたかった
  • 正方形でまとめるとペンギン感が強くなったのでちょっと縦長にしてヤケイ感が少しでも増すようにした

ざっくりとした手順

  1. キーラインを引く
  2. キーラインの大きい円に合わせて背景の円を置く
  3. aを作る
    • 右上がりのエッジだけ角度を合わせた
  4. aの影(shadow)を作る
    • aをコピーして別のレイヤーに置く
    • 塗りを黒色に変えてぼかす。オブジェクトの面積か何かによってぼかしの度合いが変わるので見た目が揃うように数値を調整する
  5. aの陰(shade)を作る
    • aをコピーして別のレイヤーに置く
    • 塗りを黒色に変えて"エクステンション -> パスから生成 -> モーション"で45度方向に円からはみ出る程度うごかす
    • 背景の円をコピーして陰のレイヤーに置き、"オブジェクト -> クリップ -> 設定"で陰の右下の方を円形にくり抜く
    • くりぬいた陰はいくつかのオブジェクトにわかれているので、パスを統合して一つにまとめる（統合できないオブジェクトができてしまい何度かやり直したので注意）
    • 塗りのグラデーションツールで右下に向かって薄くなるようにしたりレイヤーの透過度を調整したりしていい感じにする
  6. aのedge tintをつける
    • aをコピーして別のレイヤーに置く
    • もう一度コピーして下方向に1pxずらし、クリップする（くちばし以外は下側のedgeしか作っていない。下側のedgeはaに重ならないように置いたら影とかとブレンドされていい感じになったと思う。上側のedgeはaに重ねて置く）
  7. 背景のedge tintをつける
    • aと同じように1pxずらしてクリップしたかったがうまくクリップできなかったので、1px下にずらして色を濃くした円を背景の下レイヤーに差し込んだ
  8. 背景の影を作る
    • 背景をコピーして別のレイヤーに置く
    • aのようにぼかして影を作りたかったのだが同じようにならなかったので、塗りを黒のグラデーションにして背景の下からはみ出すようにする
  9. ラスタライズする
    • AS3Beta2のVector Assetではグラデーションがベタ塗りになってしまったり、陰を円形にクリップしたところをうまく変換できなかったのでそれぞれの画面解像度ごとにラスタライズした（不可視のレイヤーを無視してくれたのはよかった）
    • inkscapeのコマンドラインツールでsvg -> pngしてやると便利*1

    inkscape -f [svgファイルの絶対パス] -w [幅px] -h [高さpx] -e [pngファイルの絶対パス]

雑感

  • 作っている途中で何度かスマホの画面に置いたりして調整したけど、他のアプリアイコンと見比べるとやっぱりなんだかくどい感じがする
    • 背景の上にaを浮かせたのはやりすぎたかな
    • 角を取った方がよかったかも
  • トサカと顎の下の部分のバランスをもっと模索してもよかったかも
  • 背景無しでaに直接色を乗せるなどもっといろんなパターンを試してもよかった
  • オブジェクトのコピー（ctrl + D）が分からなくて毎回似たようなオブジェクトを作って位置と高さと幅の値をコピペしてた

akihito104.hatenablog.com

*1:参考: コマンドラインからinkscape使用する - code snippets