ここから本文です。

ホーム > 出演者・セッション

出演者・セッション

今回のテーマは「Webで使う Illustrator と Photoshop」。
書籍『10倍ラクするIllustrator仕事術』『Webデザインの現場ですぐに役立つ Photoshop仕事術』の著者のひとり、鷹野さんからWeb制作に役立つIllustrator と Photoshopの使いどころをじっくりと学びます。

マルチデバイス対応時代に見直したい
WebでのIllustrator活用

PCだけでなく、スマートフォン/タブレットでの閲覧を視野に入れると、「PhotoshopやFireworksでカンプを作成。スライスして切り出してコーディング」という定番フローでは立ちゆきません。
Androidの断片化問題や高密度化への対応には「脱ビットマップ」がキーワード。CSS3、Web Fontsはもちろん、SVG、アイコンフォントを活用するために、Web制作の現場でIllustratorの活用の重要度が増しています。
IllustratorをWeb制作で活用する上での使いこなしポイントやハマリポイントをあますところなくお伝えします。

  • ピクセルベースの作業を行う上ときのチェックリスト (エッジがぼやけるのは、なぜ?) (「ピクセルグリッドに整合」は使うべき?)
  • Web向けの画像書き出しの使い分け (「Web用に保存」、「書き出し」、「別名で保存」、スクリプトはどう使い分ける?)
  • Layer Exporterを使った画像書き出し(PNG/SVG/JPEG) (Photoshopの画像アセットみたいなのないの?) (スライスが面倒すぎる)
  • Web制作で活用したい機能 (テキストに応じて変形するボタン、ライブカラー、9スライス)
  • Specctrを活用しよう (カンプの指示、もっとラクできない?)
  • アイコンフォント活用のテクニック (Alfred+Powerpack、[字形]パネル)
  • CSS書き出し機能、実際使える?
  • グリッドレイアウトとワイヤーフレームを超速に行うテクニック (+wireMagic)

 

Webデザインの現場ですぐに役立つ
Photoshop仕事術

日々お使いのPhotoshop、実はなにげに進化しています。 たとえば、面倒な画像の切り出しも、Photoshop CC以降ではスライス作業を行わずにレイヤーごとに自動で書き出せます。
単なる機能説明でなく、「このような場面でこう活用すると役立つポイント」、そのときに起こりがちなミスやバグっぽい挙動。そしてその回避方法など、現場目線での活用方法をご紹介します。

  • [イメージ]メニューの[色調補正]はもう使いません。では、どうやって色調補正を行うの?
  • 「ものさしツールで角度補正、切り抜きツールでトリミング」は、セットで行うと早い。使うツールは?
  • トリミングした後に、画像をちょっとだけ移動したい。そんなときに設定しておきたいオプションは?
  • ふさふさ髪の毛を2分で切り抜くには?
  • ポートレート(縦長)とランドスケープ(横長)の画像が混在しているとき、1回のアクションで長辺を同じピクセル数で書き出すには?
  • 撮影した写真の余白が足りないとき、撮り直しせずに背景を広げるには?
  • テキストや画像、スタイルなどを共通で使う複数サイズのバナー画像。短時間で効率的に作成するフローは?
  • メイングラフィックの領域内に、クリッピングマスクを使わずに素材を重ねていくには?
  • ページごとにPSDを作成する場合、ロゴやグローバルナビゲーション、フッターなどの共通要素を一括更新できるように管理するには?
  • 各ページに配置するグローバルナビゲーションを、一元管理しつつ、ページごとにカテゴリのカラーを変更できるようにするには?

鷹野 雅弘(たかの・まさひろ)

株式会社スイッチ 

鷹野 雅弘

2005年からCSS Niteを主宰。日本全国、および海外に展開し、420回を越える関連イベントを通して、のべ5万名を超える方が参加している。

DTP制作者向けの情報サイトDTP Transitを2005年から継続している。

テクニカルライターとして20冊以上の著書を持ち、総販売数は14万部を超える。主な著書に『10倍ラクするIllustrator仕事術(増強改訂版)』(共著、技術評論社)、『よくわかるDreamweaverの教科書』(共著、マイナビ)、企画編集を行った書籍に『現場のプロから学ぶXHTML+CSS』(マイナビ)など。

ご協賛

  • 一般社団法人日本Webソリューションデザイン協会[JWSDA]
  • Webクリエイター能力認定試験
  • WACAウェブ解析士認定講座
  • ウェブ担当者通信
  • 株式会社クリーク・アンド・リバー社