レポート

CSS nite Fukuoka vol.5行ってきました。Illustratorの使いどころとは??


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

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

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

スポンサードリンク

css nite とは?

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

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

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

css nite fukuoka vol.5 詳細

 

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

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

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

上

内側描画モード

illust-byouga

影など、影を付けたい物体の輪郭に沿って色を重ねたい場合、はみ出ること無く影を付けることができます。今までは、クリッピングマスクでしなきゃいけなかったことが、ボタン一つでできちゃうという、優れものです。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ピクセルの調整のずれや、ベクターからビットマップ化にしたときのにじみ具合など表示を確認できます。

pixel preview

 

Font Awesome

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

 

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

 

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

 

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

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

まだまだあるんですが…

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

 

最後に

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

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

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

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. Web Design

    自分の頭をデザイン脳に!CSS nite fukuoka vol.8に参加しました

    みなさんこんにちは、mayukouです。このあいだ1月に行われたセミ…

  2. ブログ

    webデザイナー4年目!その間に身につけたスキル

    こんにちは、mayukouです。今回は自分の仕事を振り返ってみます…

  3. ブログ

    webの最新情報を学べた!webデザインセミナー「CSS nite fukuoka vol.7」に参…

    みなさんこんにちは、mayukou です^_^知識に投資することって…

  4. illy

    レポート

    うちカフェでホッと一息できる*illyのコーヒー粉が届きました!

    仕事で疲れたとき、休日にホッと一息できたらいいですよね。そんなとき…

  5. 日記

    2017年の振り返りと2018年の目標

    こんにちは、mayukouです。みなさんいかがお過ごしでしょうか?…

  6. Web Design

    CSS nite in FUKUOKA vol.6に行ってきました。

    みなさんこんにちは。今日は福岡はあいにくの雨ですが、いかがお過ごし…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. jQuery

    JQueryで要素を消すスクリプト!ECサイトの注意書きにもオススメ!
  2. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
  3. Web Design

    今後のデザインのトレンドとして注目!コンテンツファーストのサイトをまとめてみた
  4. Web Design

    【有料記事】スキルアップしよう。デザイン力が育つ方法とは。
  5. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法
PAGE TOP