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

写真を使って作業する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ここでは、AdobeIllustratorで作成するレイアウトの中で写真を取り扱う方法について、ご説明していきます。
講師:
09:53

字幕

このレッスンでは Adobe Illustrator で作成する レイアウトの中で写真を取り扱う方法について ご説明していきます Adobe Illustrator はベクターデータを扱う アプリケーションですが 同時にファイル内でラスター画像 つまり写真のデータを扱うことも可能です もちろんラスター画像を扱うのに 最適なアプリケーションは 例えば Photoshop のようなものですが それでも Illustrator で レイアウトを作成する際には 写真を使う機会は頻繁にあります ということでここまで作成した ページレイアウトの中に 写真を配置していく手順を見て行きましょう このサンプルサイトは おもちゃのロボットを販売するサイトです ですから商品であるおもちゃの写真を ページ内に配置していきたいと思います ダウンロードできるサンプルファイルの中に chapter09 というフォルダがあります この中に Assets というフォルダが 入っておりまして この「ロボット写真」というフォルダの中に 今から配置しようとする写真が 準備されていますのでご利用下さい では Illustrator のファイルの方に戻ります 写真を配置するためには まずレイヤーパネルで「コンテント (content) 」 のレイヤーを アクティブにしておきます この後メニューバーのファイルから 「配置」を選択します 先ほどご紹介した Assets の中のロボット写真 こちらを開きます 複数の写真を同時に 配置することができますので 3つ― Shift キーを押しながら 3つの写真のデータを選択します そしてリンクにチェックが 付いた状態で配置をします この時リンクのチェックが付いていないと 写真データを Illustrator の中に 埋め込んでしまうことになります 「埋め込み」をしてしまいますと 元の写真ファイルのデータが 非常に重かった時に Illustrator のファイルが 肥大化してしまいますので できればリンクで扱うのをおすすめします 右下の「配置」をクリックすると マウスカーソルに写真の サムネイルが付いてきます クリックを3回すると 今選択した3つの写真が それぞれ配置されます では今配置した写真を整列していきましょう ズームツールで写真のところを少し拡大します 選択ツールを使って背景の枠と 一番左の写真を同時に選択します コントロールパネルの ドロップダウンメニューから 「選択範囲に整列」 今選んでいるものの中で整列をさせる こちらのオプションを選びます そして「水平方向左に整列」をクリックします 次は背景の四角形と一番右の写真 こちらを選択して今度は 「水平方向右に整列」させます 次にこの写真をこの枠から少し離したいので 移動させましょう Mac の方はメニューバーの Illustrator から「環境設定」 Windows の方は「編集」から 「環境設定」を開いて下さい そして「一般」を選択します 一般のキー入力 こちらの項目はキーボートの上下左右のキーを 一度押したときに 一度に動く距離を指定することができます ここでは 20 ピクセルにしておきましょう 単位のピクセルは自動でつきますので ただ 20 と半角英数で 入力をしておけば大丈夫です そして「OK」をクリックします 一番左の写真を選択してキーボートの 右向きの矢印キーを2回押します 一度押すと 20 ピクセルですので 2回押して 40 ピクセル移動しました 一番右の写真も同様に選択して左に2回 40 ピクセル内側に整列させました ではこの3つの写真を今度は上で揃えましょう 3つとも写真を選んでコントロールパネルの 「整列」をクリックした後に 「垂直方向上に整列」 これで上辺が揃いました その後3行目の「等間隔に分布」 こちらの「水平方向等間隔に分布」を 選択すると今度はこちらの間隔が揃います これで3枚の写真が正確に揃いましたので 一応少し下に下げておきます 手のひらツールをダブルクリックして 全体表示にします 写真を6枚入れたいので この3枚の写真を複製して もう一段下に入れておきましょう キーボードの option キーまたは Alt キーを押しながら この3枚の写真を同時にドラッグします この時キーボードの Shift キーも足して 下方向に引っ張りますと 移動が垂直方向に制限されます option または Alt キー そして Shift キー2つを同時に押しながら 下方向にドラッグします マウスを先に離して後からキーを離すと 3枚の写真を完全に複製することができました これで6枚の写真をレイアウトが できたことになります ではこの後に上の部分に メインの画像を入れていきましょう もう一度配置をします メニューバーの「ファイル」から「配置」 今度は お配りしている素材のフォルダの中から メイングラフィック .psd を配置しておきます 同様にクリックをすると写真が配置されます 今までに配置した写真は JPEG 形式でしたけれども こちらのメインの画像は 文字を入れてあることもあって .psd の形式のまま配置をしてしまいました 大きな写真は Photshop でサイズを リサイズしたり編集してから Illustrator の中に配置をした方が ファイルサイズが増大しないので 取り回しがしやすくなります もちろん Jpeg に書き出してから 配置しても構いませんけれども この後もしかすると このメイングラフィックの中の文字を直して と言われる場合もありえますのでここでは psd のまま配置してしまっています それではこのメイングラフィックの 位置を合わせましょう ズームツールで拡大して選択ツールで 背景の四角形と Shift キーを押しながら メイングラフィックの写真両方を選択します 「左に整列」と「上に整列」をクリックして 手のひらツールをダブルクリックします このベージュの領域にはぴったり はまりましたけれどもひとつ問題があります ロゴマークが下に潜ってしまいました このロゴマークを上に出すためには レイヤーパネルを使います レイヤーパネルを開いて 「コンテント」のレイヤーを開きましょう 見づらいのでレイヤーパネルを 外して大きくしておきます ロゴマークは今選択しているこちらにあります これをドラッグ&ドロップして メイングラフィックより上に入れてしまいます これで上下の重なり順が変わりました ここまでの作業で写真の配置が完了致しました 最近の Web サイト制作では 角丸やドロップシャドウなど 多くのものが CSS を使って 表現できるようになってきていますが 大きめの写真に関しては画像ファイルとして 切り出し コーディングをすることがほとんどです ですので Adobe Illustrator の中で写真を レイアウトする方法は 是非覚えておくと良いでしょう

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

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

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

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

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

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