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

ピクセルプレビューを利用する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、Illustratorからラスター形式の画像を書き出したあとの状態をプレビューできる「ピクセルプレビュー」の機能についてご説明していきます。
講師:
06:56

字幕

このレッスンでは Illustratorから ラスター形式の画像を 書き出した後の状態をプレビューできる 「ピクセルプレビュー」の機能について ご説明していきます Adobe Illustrator は ベクターで描画するアプリケーションですので 開いたグラフィックは 通常 とても描線が美しく はっきりしていることが特徴です 画面を拡大縮小しても その綺麗さは変わりません ちょっと拡大して見てみましょう ズームツールで このように拡大をしていっても エッジの部分は ずっと滑らかなままです しかし Illustrator から JPEG や PNG など ラスター形式で画像を書き出した後は その画像を拡大すると ピクセルのざらつきが 見えてきてしまいます ですので Illustrator の作業中でも 書き出した後に どのような見え方をするのか ということは とても重要です ここで「ピクセルプレビュー」と 「アンチエイリアス」という単語について ご説明しておきたいと思います まず「アンチエイリアス」ですが コンピュータの画面上で 滑らかなエッジを 描画してくれる機能です 下の方で確認してみましょう この部分に着目してください この2つの色が分かれたところ この曲線ですとか 斜めになっている部分が 滑らかに表示されているのが アンチエイリアスの機能です 画面をもう少し拡大して見てみますと 曲線の部分や斜めの部分に 色と色の間に ぼけたような部分が 付いているのが分かります これがあることによって 滑らかに見えてくるわけです この機能がないと エッジがガタガタになってしまいます 試しに アンチエイリアスを オフにしてみましょう 画面を元に戻して 「環境設定」を使って 設定をしていきます Mac の方は「Illustrator」から 「環境設定」「一般」 Windows の方は「編集」から 「環境設定」「一般」を 選んでください キーボードショートカットで Command + K もしくは Ctrl + K を押しても 同じ画面が開きます ここで「アートワークのアンチエイリアス」 このチェックを外してください そして「OK」を押します 曲線ですとか斜めの部分が ガタガタになったことが 分かるかと思います また画面を拡大してみますと よく見えてきますね 曲線 斜めの部分が ぼけた部分がなくなって ガタガタした状態になっています このようにアンチエイリアスの機能が 効いていることによって オブジェクトが滑らかに見える ということが お分かりいただけるかと思います では次に このアンチエイリアスを 元に戻して イラストをどんどん ズームしてみたいと思います 先程と同様に 曲線 斜めの部分も滑らかな状態です しかし冒頭で触れたように Illustrator から書き出した後の ビットマップ画像 ラスター画像は このようにはなりません それをシミュレーションするために 「ピクセルプレビュー」 という機能を使います 使い方ですけれども メニューバーの「表示」から 「ピクセルプレビュー」を選択してください 一気に画面の表示が変わりました この正方形が連なったピクセルに イラストが当てはまった状態に なっていることが分かります 書き出した後に このように見えるよ という状態です では一度 全体表示に戻して ロボットの顔のところを どんどん拡大していって見ましょう 最初はあまりガタつきは 気になりませんけれども これぐらい拡大してくると この曲線の所は特に ガタガタしていることが気になります さらに 真っ直ぐな所を見てください 本来は 真っ直ぐな部分は このようにグレーと白の境目が ピシッと分かれていることが理想的ですけれども 左側の耳を見ると グレーと白の間に ぼんやりした薄いグレーの列が あることが分かります これがどうして こうなっているかと言いますと この描いたロボットのイラストが ピクセルグリッドに 整合されていないからです 少しずれてしまっているので ぼけたような表示になっています これを直すためには 「ピクセルグリッドに整合」 の機能を使います 「変形」パネルを着目してください この「変形」パネルの一番下に 「ピクセルグリッドに整合」 というのがあります 「変形」パネルが出ていない方は メニューバーの「ウィンドウ」から 「変形」を選んでください では次に「選択」ツールを選んで このロボットのイラストを選択します 「変形」パネルの一番下にある 「ピクセルグリッドに整合」に チェックを入れます そうすると一気に 周りにあった ぼやけた部分がなくなって 直線の部分が全て クリアに美しく変化しました このような問題を起こさないためには 新規ドキュメントを作るときに この部分ですね 「詳細」を開いた一番下の部分 「新規オブジェクトを ピクセルグリッドに整合」に チェックを付けておくと クリアなオブジェクトを描くことができます しかし このロボットの画像の場合は 描くときに「ピクセルグリッドに整合」を していなかったので このようにぼけてしまった というわけです とても便利な「ピクセルグリッドに整合」の 機能ですけれども このロボットよりも もっと複雑で 有機的なアートワークの場合は ちょっと注意が必要です パスが複雑なアートワークを 後からピクセルグリッドに整合させると 自分が意図しない変形が 起こる場合もありますので 少し注意をしておいてください 以上 アンチエイリアスと ピクセルプレビューの機能について 実例を交えながら お話ししてきました より精密なグラフィック作成には 欠かせない機能ですので 活用してみてください

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

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

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

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

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

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