関連サイト
本書の関連ページが用意されています。
内容紹介
「リサイズに柔軟に対応できる」「書き出し時に解像度を自由にコントロールできる」などマルチデバイス時代に最適なベクターデータを「効率的に作る」ためのプロの考え方を徹底解説!「デバイスに合わせてアイテムを150%拡大したい」「Webだけでなく紙媒体でも使えるものにしたい」「Sketch 3の使いどころは?」「SVGのことをちゃんと勉強したい」そんな人のバイブルになるのが、この本です。Illustratorで制作に取りかかる前の準備・設定から、「ピクトグラム」「ロゴデザイン」「Webデザイン」のワークフロー、グラフィックデータを効率よく書き出す方法までを丁寧に解説。また、注目されはじめた「Sketch 3」や「SVG」についても説明します。
書誌情報
- 著者: あわゆき, 窪木博士, 三階ラボ(長藤寛和、宮澤聖二), 松田直樹
- 発行日: 2015-05-22 (紙書籍版発行日: 2015-05-22)
- 最終更新日: 2015-05-22
- バージョン: 1.0.0
- ページ数: 272ページ(PDF版換算)
- 対応フォーマット: PDF, EPUB
- 出版社: インプレス
対象読者
デザイナーのほか、ディレクターやプロデューサーも含むWeb制作者
著者について
あわゆき
Chapter 1、Chapter 3(3-4)担当。東京での制作会社勤務を経て、2009年から関西でフリーランスとして活動中のWebデザイナー兼イラストレーター。 Twitterのプロフィール画像を気分や時事ネタに合わせて次々と変える「アイコン芸」をきっかけにIllustrator愛に目覚め、デザインツールも宗旨替えした発展途上イラレラヴァー。LINEクリエイターズスタンプ「寿司ゆき」も大好評発売中。著書に『LINEスタンプ つくり方&売り方手帖』(玄光社/共著)。
窪木博士
Chapter 5担当。岡山県在住。パッケージ・グラフィック(DTP)デザインを経て、現在は地元SIerにてWebやエンタープライズ系システムのUIデザインに携わる。設計からグラフィック・マークアップをこなしながら、セミナー主催や登壇なども。著書に『現場で必ず使われている CSSデザインのメソッド』(MdN/共著)、『プロとして恥ずかしくない 新・WEBデザインの大原則』(MdN/共著)、Sketch 3の電子書籍『Sketch 3の基本。』がある。
三階ラボ(長藤寛和、宮澤聖二)
Chapter 2、Chapter 3(3-1~3-3)、Chapter 4担当。長藤寛和(ながふじ・かんわ)と宮澤聖二(みやざわ・せいじ)による、作業効率を追求するデザイン制作会社。グラフィックデザイン、ユーザーインターフェースデザイン、キャラクターデザイン、CI/VI、パッケージデザイン、モーショングラフィックデザイン、Webデザイン、アートディレクションなどの業務を行っている。ビジュアルデザイン部分のすべてをIllustratorで作成するイラレオタクな二人組。
松田直樹
Chapter 6担当。ゲーム業界にて企画開発に従事した後、Web業界に転身。 2011年より株式会社まぼろしにCCOとして参加。ゲーム業界で培った企画力を生かしつつ、デザイン・マークアップ・プログラム、書籍の執筆や講演といった業務を幅広く担当。また、日本史の歴史系ライティング活動も行っている。主な著書に『これからのWebサイト設計の新しい教科書 CSSフレームワークでつくるマルチデバイス対応サイトの考え方と実装』(MdN/共著)がある。
目次
はじめに
目次
第1章 マルチデバイス時代のベクターデータのススメ
1-1 マルチデバイスとグラフィック 1-2 Illustratorの特徴
第2章 制作準備と気を付けるポイント
2-1 制作準備 2-2 作業中に気を付けること
第3章 修正に強いIllustratorデザインワークフロー
3-1 ピクトグラムデザインのワークフロー 3-2 ロゴデザインのワークフロー 3-3 可変幅のカード型Webデザインのワークフロー 3-4 プロモーション系Webデザインのワークフロー
第4章 Illustratorからの素材の書き出し
4-1 素材を効率よく書き出すには
第5章 新世代デザインツール「Sketch 3」の魅力
5-1 Sketchの魅力 5-2 Sketchの使い方 5-3 他のアプリとデータをやり取りする 5-4 プラグインでSketchをもっと便利に 5-5 Sketchと連携するアプリ&サービス
第6章 ベクターフォーマット「SVG」を使いこなす
6-1 SVG(Scalable Vector Graphics)とは 6-2 SVGの基礎 6-3 SVGの効果・装飾 6-4 IllustratorとSVG 6-5 HTML内でのSVGの表示 6-6 SVGならではの効果的な使い方