Hatena::Grouprikuo

ザオ陸

20061027Fri

[]Willustratorインポート機能が激しく便利な件

スーパークリエータd:id:kambaraさん制作Willustrator をこのところよく利用しています。

Willustratorブラウザから利用できるドローツールで、自由にイラストや図が描けるほか、SVGで出力できたり、共有機能などで他のユーザーの描いたものをそのまま使えるなど、面白い仕組みが詰まっているサービスです。私も過去に何度かエントリーに書いており

またイラストも何点か描いたりもしています。


私自身、AdobeIllustrator を使っていることもあって、ドロー系のソフトには慣れているのですが、ただやはりブラウザ上のツールなので細かい部分まで描きこめなくて不満でした。SVG ファイルアップロードできたら便利なのになぁ、と思っていたのですが、既にその機能が追加されてたみたいですね。

そうした機能が追加された、というのは知ってはいたのですけれど、どう使うか、またどの程度のファイルなら大丈夫なのか?という点がよく分からなかったので、これまで利用していませんでした*1


というか、別のイラストから一部だけをコピーはできても ファイルからのインポートはできないと思っていたのですけれども、ms_remix_allさんの画像を見て「あ、ファイルからのインポートできるんだ!」とようやく気がつきました。


これなら Illustrator や他のドローソフトで描いた画像を楽々アップロード、そして共有もできますし、ますます使いやすくなるなーと思った次第。


ま、そういうわけで、Willustrator には SVGファイルアップロードできて便利だよ、というのが今回の結論ですが、その方法がややこしいので、以下解説です。

少し画像が多いので畳んでおきます。


WillustratorSVGファイルアップロード

まずは

Willustrator

http://willustrator.org/

アクセスします。


ユーザー管理には はてな認証APIが使われているため、利用の際に はてなユーザー登録が必要になります。

そして「Create New Image」で新しい画像制作します。



編集画面はこのようなレイアウトになっています。

Flashで作られており、ここでは詳しい説明は割愛しますが、Illustratorのようにハンドルアンカーポイントを使って線が引けるほか、フリーハンドでの描線も可能です。また長方形・楕円系もできますし、線の太さ、色、透明度、重なり、位置、大きさをそれぞれ変更することもできます。


今はイラストを描いたりしないので、それらの機能解説はまたの機会に。



今回、アップロードする SVGファイルは、こちらを使いました。

以前に私が描いて、SVGも公開したものです。ファイルなどはここに置いてあります。

とりあえず、このファイルダウンロードして使っていますが、もちろん手元に SVGファイルがあればそれを利用しても構いません。



それで、そのファイルブラウザで開きます。

IEの場合はプラグインが必要になりますから、Adobe からダウンロードしておいた方がいいでしょう。



そして右クリックから「SVGコピー」を選択



Willustratorの画面に戻り

右のメニューから「Import SVG」を選択します。



すると、ウィンドウが表示されるので

右クリックから「ペースト」を選択します。

そして「Import」をクリック



どーん!これでペースト完了です!



あとは、表示位置が左上なのでちょっと位置を変更してみましょうか。



選択ツールを使って

 

ぴーっと矩形選択。



これで全部選択できたので、ドラッグさせて



まぁこんなところですね。この状態で拡大縮小なんかもできます。


あとは最後に保存で終了です。



というわけでこちらがそれで作成したものです。



というわけで、インポートする手順としてはこんな具合でした。

分ってみればそれほど難しくはなく、むしろ簡単にインポートできるのですが、コピー&ペーストを使うという発想がなかったので、利用していませんでした。これは是非ヘルプに書いて欲しいなぁ。


スーパークリエータのid:kambaraさん、Willustratorのヘルプ更新して欲しい!

と書くとヘルプ更新される……という仕組みはまだありません



インポートの際に気をつけること

SVGファイルコピー&ペーストインポートできるので、既存のドローソフトで描いたものでも自由に共有できるのがメリットなのですが、いくつか注意する点があります。

Willustratorユーザー画像を共有する前提でのサービス、ということもあり Creative Commons に対応しています。詳しくはリンク先を参照して下さい。


もう1点がインポートに失敗する事例

[しなもん]久しぶりにしなもん描いてみたしなもん(途中)

右が元の画像、左がそれを Willustratorインポートしたもの。こうやって比較して見ると分るかと思いますが、胸の部分の表示が崩れています。

どうやら、閉じられていないパスインポートした場合こうなってしまうようなので、その際には注意が必要です。あらかじめドローソフトで処理をしておいたが方がよいですね。

例えばこちらも Wiilustrator にインポートしたイラストですが、パスの処理をしておいたので、ちゃんと表示されています。

カボチャさんその2
ちゃんと処理をしてWillustratorインポートしたもの


それと、インポート後ですが、拡大して見ると結構ガタガタになってしまうのが残念ですね。

普通に表示させているだけなら特に問題はないのですが。



関連リンク




お蔵入り企画

実は「Willustratorで作る年賀状」といったネタ用にイノシシ画像Willustrator で描いていたのですが、インポート機能があるのだったら、単純にインポートすれば良いよなー、ということで、お蔵入り。


ちなみに今までに描いたもの。

イノシシその1


イノシシその2

*1ヘルプにも載ってなかったですし

kambarakambara2006/10/27 03:28うあーすいませんすいません。>ヘルプ
SVGインポートはまだ激しく実験段階で正式な機能になるかは未定です。もちろん機能自体は無くならないですが、インポートのUIはがらっと変えようと思ってます。(と思いつつできてないのですが。。)

kambarakambara2006/10/27 03:39パスが乱れる件、調べてみます。
私自身はIllustratorを持っていなくて、あまりインポートを試しきれていないのでSVGがあるのはありがたいです。

rikuorikuo2006/10/28 00:49> SVGインポートはまだ激しく実験段階
なるほどそうでしたか。UI変更もされるそうですが、コピー&ペーストで画像をインポートできる、というのは慣れていない事もあって、かなり独特な作業で戸惑ったというのが正直な感想です。やってみると面白い機能なんですけれど。
> パスの乱れ
具体的には、オープンなパスで塗りの透明度が100%と指定されてしまうようです。また日記内で触れた「拡大して見ると……」の場合は、ポイントの多い複雑な形状だと起きやすいようですね。それぞれ、インポート前に処理することで対応できそうな感じです。