inkscapeを使ってSVGのマンガ風イラストを描きました。 描いては微調整、描いては微調整を繰り返して2ヶ月あまり、絵心のまったく無い私でもそれなりの絵になりました。 さすがinkscape。
「スーツは素人が描いてもそれっぽくなりそう」という理由で女子アナウンサーを描いてみました。 結果、「スーツを着た普通の女性」になってしまったような...
そりゃそうか。 胸元にあるピンマイクだけがアナウンサー要素です。 それだけじゃなんなので、適当なセリフを付けてごまかしてみたり。 まともにイラストを描いて公開するのは初めてなので質についてはカンベンしてください。
bloggerにSVGを上げられないのでインラインSVGで投稿します。 閲覧できるブラウザが限られているので注意。 firefox3.6.8でhtml5を有効にして確認しました。 firefoxがない場合、ie以外のブラウザを使っている人は
- htmlソースからSVGタグの中身をコピー
- テキストエディタにペースト
- 適当なファイル名、拡張子SVG、UTF-8で保存
のようにすれば見れるはず。 開発中のfirefox4やie9でインラインSVGを見れるらしいですが未確認。
まずはpngのプレビュー版。
インラインSVG版はこちらです。
inkscapeで作ってプレーンSVGで出力。 コード中のいらなそうな要素をテキストエディタで消しています。 読めない環境があったらごめんなさい。
使う人がいるかは分かりませんが、pngとsvgの両方とも加工や再配布はOKとします。 ライセンスは...面倒だから適当に、NYSDLでいいや。
この絵を編集する場合、inkscapeがあると便利です。 inkscapeが面倒な人でもセリフを書き換えるだけならテキストエディタでできます。 一番最後の方にあるtextタグ(id="spoken_text")の中身を編集すればOK。 ただ、文字サイズが合わないときは調整が面倒です。 そのときはやはりinkscapeなどの編集ソフトを用意した方がいいでしょう。
spoken_textのスタイル属性には「font-family:MS PGothic」の記述があります。 これが無いとwin版inkscapeで読んだときに文字化けしてしまった。 と言うわけで、win版以外の編集ソフトで読み込むと文字化けしてしまうかも。 文字化けしたときはブラウザで表示確認しながらテキストの書き換えをしてください。
SVGを編集してpngにエクスポートするときの注意。 描いた内容によっては、エクスポートしたとき透明色が全て真っ黒になってしまうことがあります。 原因は未確認。 とりあえず透明色やグラデーションを使わなかったら大丈夫なようですが原因の切り分けはしていません。 この絵はほとんどパスのベタ塗りで描いているので大丈夫。 この絵を編集するとき、オブジェクトの属性を変えるとやはり真っ黒になるかもしれないので気をつけましょう。 その場合は「ブラウザに表示して画面キャプチャ」などでラスター画像にします。
次はこの絵を描いたときのメモを投稿しようかな?
でお買い物
