昨日、css nite Fukuokaに初めて参加してきました。

福岡では三年ぶりの開催ということで、キャンセル待ちでしたが、繰り上げとなり参加できた良かった！

それでは、忘れないうちに印象に残ったことや使えそうだと思う点をメモしておきます。

css nite とは？

Swwwitch（スイッチ）の鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。

今回のテーマは、「Illustrator、イラストレーター特集」です。

私は、一時期はFireworkが便利で使用していましたが、最近はwebデザインもバナーもランディングページももっぱらIllustratorで作っています。イラスト制作もWeb制作もIllustratorが熱い・・・！？

css nite fukuoka vol.5 詳細

 

Illustratorでイラストを描こう！キャラクター制作テクニック（廣まさきさん）

イラストの下書きは、乗算モードでレイヤーの一番上に配置

下書きのラフは、乗算モードにしてロックをかけ、画像の透明度は薄めにする。一番上のレイヤーにすることで、線が透けて見えたまま、色を塗ることができる。これ、知らなかったー！下書きを一番下にしていつも描いてました。

内側描画モード

影など、影を付けたい物体の輪郭に沿って色を重ねたい場合、はみ出ること無く影を付けることができます。今までは、クリッピングマスクでしなきゃいけなかったことが、ボタン一つでできちゃうという、優れものです。CS5から対応の機能だそうです。

ちなみに、影は乗算モードにして、透明度を調節するといい感じに表現できるそうです。

 

ライブペイントツール

この機能、知ってはいましたが使いこなせず。今度から使えそうです。ライブペイントで色を塗った後、拡張することで普通のオブジェクトになる、みたいです。

 

エンベロープで、模様をラッピングする

キャラクターの服に、自分で作った模様を当て込みたい場合。エンベロープを使用するとできます。「エンベロープ」→「最前面のオブジェクトで作成」を選択です。

 

背景を重ねて、質感を出す

テクスチャー素材を二枚ぐらい配置して焼き込みカラーにすると、質感が浮き上がっていい感じに見えます。

 

ちなみに、髪の毛など線を正確に描かないと行けない部分は、ペンタブを使ってベジェ曲線で描かれるそうです。

ペンで自分の手で描くよりも無駄なアンカーポイントが生まれず、ピンポイントに描けるそうです。

 

もっと詳しく知りたい方は…

今回ご紹介したことも含めてイラストの解説が書かれた廣先生の本です。

イラストレーターを使ってイラストを本格的に描きたい方はオススメかも！

 

 

LINEスタンプ制作の過程（ハラダユーイチさん）

 

「がんばれクリエイター君」など個性あふれるスタンプができるまでを、体験談を交えて解説されました。

台湾やインドネシア、タイなどからも購入があるそうです。

LINEはワールドワイドなのですね。すごいです。

なので、イラストの中に台詞を入れなかったことが、海外にも使われやすくなると言われていました。

逆に台詞を入れると、インパクトあるわかりやすいものになるということです。

 

LINEスタンプで万人受けするのは、

かわいい動物キャラ
ゆるキャラ
ネタもの

だそうです。

 

さらに芸術センス＋お笑いのセンスが問われるかも？？ということでした。

 

ハラダさんのブログでもラインスタンプの作り方が解説されています。

 

 

ナストマキャラクターのできるまで（カネウチカズコさん）

かわいいナストマキャラは、ブログで漫画の連載をされていたものを、

スタンプ化されました。

 

FacebookでナストマキャラのLINEスタンプに必要なシチュエーションを募り、

制作されたそうです。

自分の作ったスタンプがいろんな人の手に渡り、

新たな命を吹き込むことは感動もの！だそうです。いいですねー！

 

 

Webで使うIllustrator、使いどころと“はまり”ポイント（鷹野 雅弘さん）

鷹野さんのプレゼンは、webやイラレ情報てんこ盛りでした。

中でも印象に残ったことを記しておきます。

 

Phone + Tablet = Phablet（ファブレット）という考え方

次期iPhone は、サイズが大きくなるという話があるように

スマートフォンは、大きくなろうとしているのに対し、

ipad mini やnexus 7 など、タブレットは最小化しつつあるため、

スマートフォンとタブレットがお互い近づいているという考え方です。

 

脱ビットマップ

これからは、svgやwebフォント、CSS3を使う時代。

Svgは、最近注目されている画像フォーマット。ベクターデータのため拡大しても画像が荒れないため、retina やスマホ・タブレットなど高解像度画面に対応できます。

このSVGは、imgタグやbackground プロパティで使用できますが、

IE6,7,8に対応していません。そのため、スマートフォンサイトでは、問題ありませんが、PCサイトに対応するには<object>配置する必要があります。

 

Illustratorの便利機能

オブジェクトを再配色

共通する色を一括で変更できたり、グラデーションの色合いを保ちながら色相を変更できたり。CCの機能かと思いきや、CS3あたりからあるみたいです。これは、すごい機能です！

鷹野さんの記事があります。↓

カラーバリエーションを作る以外にも、Illustratorのライブカラーは最強

LIGのブログにも↓

Illustratorの「オブジェクトの再配色」を使ってカラーバリエーションを作る方法

 

PhotoshopCCでスライスソフトslicyのような、レイヤーごとにスライスしてくれる機能が付きましたが、Illustratorでも無料プラグインをインストールすれば使えるようになるとのこと。

プラグイン名は、Illustrator Layer Exporterです。

 

Illustratorは、書き出すとにじみやすい？

Illustrator の「表示」メニュー→「ピクセルプレビュー」でモニターと同じようなビットマップのような表示が可能です。

1ピクセルの調整のずれや、ベクターからビットマップ化にしたときのにじみ具合など表示を確認できます。

 

Font Awesome

webフォント。これは、要チェック。

 

グラフィックスタイルのWiremagicが有料ですが便利だそうです。

 

Illustratorの機能の解説が掲載されている鷹野さんのサイトDTP Transitも要チェック。

 

960girdの話が出てきて、これ勉強しなきゃ—と思いました。

色々、書くことがありすぎて、別記事にしたが良いかもと思ってきました。

まだまだあるんですが…

まだ足りない部分は追記か別記事にします。うろ覚えな部分もあって恐縮ですが・・・

 

最後に

福岡や東京で第一線で活躍されている方々のお話だったので、最新の技術がわかってよかったし、明日から使えそうなツールもわかって良かったです。

今度macを買うときは、adobe CC入れようかな。CCがうらやましくなりました。つい最近２、３日前に新しいAdobe CC 2014年版が出たようですね。紹介されていましたが、新しいCCソフトの起動画面はライオンの顔でインパクトありましたね。

皆さんのプレゼン素敵でしたが、鷹野さんのスライドはすごい！動きもスムーズでデザインされてて参考になりました。Keynoteか〜〜。