概要

の PNG 画像を SVG ファイルと ImageMagick で作った。

なぜ SVG ファイルを使ったか

L枠のサイズを自分で試行錯誤したかった。
ニコニ･コモンズなどで作品はたくさんある。だが、試行錯誤するには探すのが手間だった。
Adobe Illustrator で作成も行った。だが、試行錯誤という点でGUI操作は手間だった。Illustrator の操作に習熟していないのもある。
単純な矩形の組み合わせなので ImageMagick の convert コマンドでも画像の作成は可能。だが、枠線など考えると操作が煩雑になりそうだった。

テキストファイルの SVG ファイルがいいのではないかと考えた。

参考
- タグ検索: biimシステム - ニコニ･コモンズ

やったこと

SVG ファイルを用意
ImageMagick で SVG ファイルを PNG ファイルに変換

SVG ファイルを用意

1600_900.svg という名前で以下の内容の SVG ファイルを作成。

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="layer1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    x="0px" y="0px" viewBox="0 0 1920 1080" style="enable-background:new 0 0 1920 1080;"
    xml:space="preserve">
<g>
    <rect x="0" width="1600" height="900" fill="#1e2e4b" stroke="#e0cead" stroke-width="10"/>
</g>
<g>
    <rect x="1600" width="320" height="900" fill="#1e2e4b" stroke="#e0cead" stroke-width="10"/>
</g>
<g>
    <rect x="0" y="900" width="1920" height="180" fill="#1e2e4b" stroke="#e0cead" stroke-width="10"/>
</g>
</svg>

ざっくり説明

svg の viewBox に画像のサイズを指定
rect 3つで左上、右上、下部の矩形を枠付きで作成

ImageMagick で SVG ファイルを PNG ファイルに変換

単純な SVG ファイル => PNG ファイル変換は convert のみでできた。

convert 1600_900.svg 1600_900.png

これで画像が作成できた。

補足など

画像のサイズについて

通常利用されるの動画やスライドのアスペクト比は 4:3、16:9 で、今回の画像は 16:9 の解像度
1920x1080 で作成した。
内部枠のサイズは 16:9 の 1600x900 で作成した。

試行錯誤した主なサイズは以下です。

1280x720	1440x810	1600x900

色の選択について

色の選択について、白黒だと味気ないから「配色パターン」で検索してみて、いろいろなカラーパレットツールがあると知った。

以下のサイトを利用した。

スクリプト化

SVG ファイル単体だと画像や色を試行錯誤するのがかなり手間だったのでスクリプトの引数で SVG ファイルを作成できるようにした。以下がリポジトリと実行例です。

ruby main.rb --input template.svg.erb --main_width 1600 --main_height 900 --background_color "#1e2e4b" --line_color "#e0cead" --output 1600_900.svg
convert 1600_900.svg 1600_900.png

当初予定していた試行錯誤がやりやすくなった。

その他コメント

SVG、テンプレートを作るのに便利そう。
背景画像とかパターンとかを入れることできそう。
ブラウザでできるようにできそう。

動画用L枠（いわゆるbiimシステム）をSVGファイルとImageMagickで作ってみた

概要