Illustratorを使ったWebデザインのテクニック

Web用に新規ドキュメントを作成する

全334コースを10日間無料で

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
AdobeIllustratorを使って実際にWebデザインを作成していく前に、新規ドキュメントを作成する必要があります。このムービーでは、Web用に最適化されたドキュメントの作成方法について、見ていきましょう。
講師:
09:49

字幕

AdobeIllustratorを使って 実際にWebデザインを作成していく前に 新規ドキュメントを 作成する必要があります このレッスンでは Web用の新規ドキュメントを 作成する方法について ご説明していきましょう メニューバーの「ファイル」から 「新規」を選択するか キーボードショートカットを使う方は Macの方はcommand+N Windowsの方はCtrl+Nを押して 新規ドキュメント ダイアログボックスを開きます ここではドキュメントに 名前を付けることができます ブログのデザインについて ご説明する予定ですので 名前の欄にカタカナで “ブログデザイン” と入力をしてください その次の行にはプロファイルの ドロップダウンメニューがあります 印刷物を作成する場合には 「プリント」を選択するのが 最適な設定ですけれども Webデザインの場合は 別の設定にする必要があります ドロップダウンメニューを開いたら 「Web」を選択しましょう プロファイルで「Web」を選択すると サイズの選択肢が変化します 開いて確認してみましょう 640x480 800x600など いくつかのサイズが用意されています この中で本当に 実用的なサイズと言えるのは おしりの2つくらいかなと思います 1024x768と 1280x800 こちらの2つです モバイルやタブレット端末ではなく 最近普通に手に入る PC向けの画面サイズは どんどん大きくなっているからです ここではPCの画面で閲覧する ブログのデザインを 作成していきたいと思います その場合 あらかじめ ここのサイズ欄に用意されている サイズではぴったりフィットしないので オリジナルで作成してみたいと思います このサイズを閉じて 単位が「ピクセル」になっていることを 確認します そして幅の欄に “1280”と入力をしてください “px”をつけなくても Illustratorが 勝手に補完してくれますので 数字だけ半角で入れればOKです 高さの欄には “2000”と入力をします 2000ピクセルの高さは かなり大きいかなと 感じるかもしれないのですが ブログのデザインには ヘッダーですとか 記事の内容ですとか 大きなフッターなど 色々な要素が入りますので これぐらい高めに 見ていた方が良さそうです 次に方向のアイコン こちらが縦位置になっていることを 確認してください 左側の縦長のアイコンが縦位置 右側の横長のアイコンが横位置です 今は縦に長いデザインを 作る必要があるので 左側が選択されて この凹んでいる状態になっているのが 正しい状態です その後 カラーモード こちらが「RGB」になっていることに 着目をしてください そして「PPI」 ピクセル・パー・インチは72 1インチの中に 72ピクセルある設定になっています Illustratorで作業している間は あまり「PPI」を意識する必要は ありませんが 画像を書き出したり ラスタライズする必要があるときは この「72PPI」になるよ という意味です 今はこの設定にしておいて 問題ありません 次に確認したいのは この「詳細」 ここをクリックして開いて 一番下の 「新規オブジェクトを ピクセルグリッドに整合」 ここにチェックを付けるということです ここにチェックを付けておくと 描くオブジェクトがピクセルグリッドに スナップするようになって にじんだ状態になりません さて ここまで設定できたら このドキュメントをテンプレートとして 保存をしてみたいと思います まず「OK」をクリックして 先程の設定通りの ドキュメントを開きます この後 メニューバーの 「ファイル」から 「テンプレートとして保存」 こちらを選択してください そうしますと 「別名で保存」 ダイアログボックスが出てきます 名前の欄には先程入力した “ブログデザイン” 拡張子は“.ait” Adobe Illustrator Template と言う意味の拡張子がつきます 保存するフォルダですけれども あらかじめテンプレートのフォルダが 設定されていますので この中に1つ分類するための 新規フォルダを作りましょう 新規フォルダボタンを押したら 名前を“Webデザイン”にします 「作成」をクリックします 保存場所が「Webデザイン」という 名前のフォルダに変わりました ここで右下の「保存」をクリックします 拡張子「.ait」 「ブログデザイン.ait」として 保存されましたので このまま閉じます こうすることによって 次回からこのサイズのアートボードを テンプレートとして何回でも 利用することができます 次回利用したいときは メニューバーの「ファイル」から 「新規」を選んで 左下の「テンプレート」 ここから先程作成した この「ブログデザイン.ait」を 選んでから「新規」を押します このようにすると先程の設定と 全く同じアートボードの新規ファイルが いつでも作ることができます では これは閉じて もう少し違うサイズのテンプレートも 作っていってみましょう 次は広告バナー用の テンプレートを作ります 広告バナーは指定されたサイズで 作ることが多いので あらかじめ決まったサイズの テンプレートを作っておくと便利です メニューバーの 「ファイル」から「新規」 名前を“広告バナー” と入力をします 幅を“728” 高さを“90”に設定します このようにすると自動的に 方向が横位置になります これで結構ですので「OK」を押します ここまでできたら 先程と同じように このファイルを 「テンプレートとして保存」 「広告バナー.ait」を 「Webデザイン」のフォルダの中に 保存しておきましょう これもこのまま閉じて 次回以降利用します では もう1種類だけ テンプレートを作ってみましょう 今度は新規ドキュメントを作るのに キーボードショートカットで Macの方はcommand+N Windowsの方は Ctrl+Nを押して 新規ドキュメントダイアログボックスを 開きます ここで名前を “ミニバナー”にしてみましょう サイズですけれども “468”の“60”にしてみます そして「OK」をクリック 今 拡大されて表示されていますので キーボードショートカットで command+1 もしくはCtrl+1を押すと 100%の実寸大表示になります 結構小さめのバナーなんですけれども こちらもクライアントさんからの 指定のサイズであれば こういったテンプレートを 用意しておくと 便利に使えるかと思います ではこれも同様に メニューバーの「ファイル」から 「テンプレートとして保存」 同じ「Webデザイン」のフォルダの中に 「ミニバナー.ait」を保存します 次にこれらのバナーですとか ブログデザインを使いたいとき もう一度復習しますけれども メニューバーの 「ファイル」から「新規」 新規ドキュメントダイアログボックスの 左下の「テンプレート」ボタンを押して ご自分が作った これらの 様々なテンプレート 「今日は広告バナーを作る」 と言うときでしたら 「広告バナー.ait」を選んで 「新規」をクリックします 先程指定したサイズの アートボードが もう あらかじめセットされた状態で ドキュメントが作成されました ここまで見てきたように よく使うサイズのテンプレートを あらかじめ用意しておくと クライアントさんなどから サイズを指定されて デザインをする際に 簡単に新規ドキュメントを 準備することができます よくご自分がお使いになる サイズのものを いくつか登録してみてください

Illustratorを使ったWebデザインのテクニック

このコースではIllustratorを使ったWebデザインの方法を学びます。IllustratorをWebデザイン用の設定に変更するところから始め、各種端末向けのドキュメントやユーザーインターフェイスの作成ができるようになるまで順を追って説明します。このコースを見れば、整理されてエレガントなIllustratorドキュメントが制作できるようになるでしょう。

7時間03分 (52 ビデオ)
現在、カスタマーレビューはありません…
 
ソフトウェア・トピック
価格: 3,990
発売日:2015年04月09日

このコースは、「オンデマンド」でご利用可能であり、ダウンロードすることもオンラインで見ることもできます。

ダウンロードすると、オフラインでコースを使用し、豊富なインターフェースをフルに活用できます。複数のデバイスを使用したり、 一度に全コースをダウンロードしたくない場合は、アカントにログインして、ストリーミング・ビデオとしてコースのレッスンを視聴してください。

ビデオトレーニングをお楽しみいただけますように! お問い合わせは、cs-jp@lynda.com宛までご連絡ください。