ホーム > Expression Blend > 0からはじめるExpression Blend再入門

その37:Inkscapeから素材を作成して、Expression Blendで扱うまで

0からはじめるExpression Blend再入門
蜜葉 優@Silverlight Square & Windows Phone Arch[著], わにちゃん@ExpressionTech.jp[編集]
2012年1月23日 from Atelier:Mitsuba

はじめに

「ねぇねぇ、みつばたん。みつばたん普段素材どやってつくってんのー?あたしアプリつくりたいんだけど素材作るのに苦労しちゃってー。。。」

「ほむほむ、普段はillustratorつかってますよー」

「えーでもあたしそんなお高いのもってないー。なんかフリーでInkscapeっていうの見つけたんやけど、あれじゃだめー?」

「また、えらく懐かしいものを!」

はい、蜜葉もillustratorが手に入るまで、というか高校時代はどっぷりOSSを使ってコンテンツ制作をしていました。なのでInkscapeは昔だいぶ使ってたのです。Blendがなかった頃にはInkscapeでデザインしてPathの値をXAMLに直書きとかしてました。

Inkscapeとはillustratorとおなじく、ベクター形式のファイルを作るドローツールです。DTPのためのソフトウェアですね。OSSで開発されています。

ラスター形式の画像編集ソフトだとGimpが有名ですね。よくPhotoshopと比較されています。

今回はillustratorがない人のためにInkscapeで素材を(しかも簡単に!)作成して、それをExpression Blendで利用するまでをご紹介します。

Inkscapeのダウンロード

まずはInkscapeをダウンロードします。exe形式のインストーラがあるのでそれでいいでしょう。

今回はver 0.48.2を利用しています。

https://inkscape.org/index.php?lang=ja

f:id:c-mitsuba:20120123025651p:image

素材作成

では、素材作成を試してみましょう。

1.Googleなどで適当に素材になりそうなファイルを探します。

WPアプリ開発でよく利用されるシルエット画像を探してみましょう。

この時、ライセンスに気をつけてください。クリエイティブ・コモンズとかあると嬉しいですね。

こんなJPEG画像を使ってみます。写真でもかまいませんが、シルエットがはっきりしてるものほどよいです。

でもってサイズも大きければ大きいほどよいです。

f:id:c-mitsuba:20120123030856j:image

2.画像をペイントなどで必要な部分だけきりとります。これをすると後が楽です。

こんなかんじ。

f:id:c-mitsuba:20120123031108j:image

3.ここまで出来たら、Inkscapeを立ち上げます。さきほど作成した画像を”ファイル->インポート”からインポートします。

f:id:c-mitsuba:20120123032105p:image

とりあえず埋め込みを選択します。

f:id:c-mitsuba:20120123032104p:image

4.読み込めたら、必要であれば適当に拡大します。

f:id:c-mitsuba:20120123033838p:image

5.左のメニューバーから黒矢印をクリックし、画像を選択した状態で”パス->ビットマップをトレース”を選択。

f:id:c-mitsuba:20120123032459p:image

6.プロパティを変えながらプレビューを更新し、うまく出来たらOKをクリックします。

f:id:c-mitsuba:20120123034145p:image

7.作成したパス以外、すべて削除します。

8.”ファイル->名前をつけて保存”から任意の名前でPDFで保存します。

ダイアログ中にXAMLとかありますが罠です。

f:id:c-mitsuba:20120123034432p:image

9.さらにダイアログが出るので、"テキストをパスに変換"にチェックをつけて保存します。(一応)

f:id:c-mitsuba:20120123034609p:image

10.できたPDFファイルの拡張子を.aiに変更します。

f:id:c-mitsuba:20120123034758p:image

11.あとは前に紹介したように、ファイルからAIファイルをインポートします。

f:id:c-mitsuba:20120123035010p:image

12.見事にInkscapeで作成したPathデータがBlendにインポートされました。

インポートするとCanvas->Pathの階層になります。

f:id:c-mitsuba:20120123035007p:image

13.あとはサイズを整えて、Ellipseで囲って、EllipseのStrokeとPathのFillをPhoneContrastBackgroundColorに指定してやれば、あっという間にペンギンアイコンの完成ですね。

Path化するとColorResourceでテーマ対応できるので素敵ですね。

f:id:c-mitsuba:20120123035701p:imagef:id:c-mitsuba:20120123035700p:image

さいごに

illustratorがあれば、ビットマップのデータをもっと綺麗にPathにトレースすることができます。

また、ラスターデータの感覚でPathオブジェクトを消しゴムで編集できるので便利です。

ただまぁ、Inkscapeでもトレース時のプロパティ設定さえうまく指定してやれば、綺麗にPath化されます。

もっとも、Pathぐらい1から引けて当然だろ!っていう方はBlendでもPath引けるので大丈夫ですね!

ぶれんどでなんか疑問あったら@ください。 ブログのネタにします((

このように、画像編集初心者でも、方法さえ知っていればそこそこに素材は作れます。

また、Windows Phone Apps Art GalleryにはWindows Phoneアプリ開発に限定されているもののたくさんの素材があります。

https://msdn.microsoft.com/ja-jp/windowsphone/hh544699

一方で開発者がなかなか手に入らないのが効果音やBGMといったサウンド素材です。

その辺もArt Galleryに出ればいいなー。

次の記事

0からはじめるExpression Blend再入門』最新記事

コメント

▲このページのトップへ