PhotoshopでWebデザイン

ワイヤーフレーム

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ガイドをもとに仮オブジェクトを配置していく。
講師:
04:02

字幕

ではワイヤーフレームを組んでいきましょう。デザインしたこのスケッチを元にこの空白のドキュメントにプレースホルダを置いていきます。「長方形」ツールを持ちます。色はニュートラルなグレーにしましょう。まずはこのヘッダー上から 100 ピクセル分は知っています。このドキュメントは横幅が 1200というのを知っているのでドキュメント上、クリックでまずは横幅「1200」です。「高さ」が「100」で、OKこれを配置します。ここですね。次にスライダーですね。よく見ますよね、ウェブサイトの一番上に画像が切り替わるスライダーが置いてあるあれです。「長方形」ツールでドキュメント上、クリックで「幅」をドキュメントのサイズ「960」としたいと思います。「高さ」を「350」にします。OKこの辺に配置。次が、動画用のサムネイル6 つですね。では「長方形」に持ち替えてクリックここは「300×170」としたいと思います。OK配置します。同じこのシェイプをコピーする場合はAlt/Option を押しながらクリックドラッグで簡単にコピーすることができます。一回マウスを離してもう一回繰り返します。Alt/Option を押しながらクリックドラッグ今度はこの 3 つをコピーしたいので3 つとも選択します。 Alt/Option を押しながらクリックドラッグで簡単に 6 つ分にできました。次は、テキストとイメージですね。「テキスト」ツールに持ち替えてこの辺ですかね。クリックドラッグ、こんな感じにします。この中に何か適当な文字を入れておきたいので「書式」>「LoremIpsum をペースト」これを選択します。これが日本語で言うところのダミーテキストです。適当な文章を入れておいてくれます。少し小さめなので見やすいように「18」にしましょうか。適当に配置します。右側に画像が欲しいですね。また、「長方形」に持ち替えてギューっと四角を描いていきます。最後にフッターですね。これは 300 ピクセル分ともガイドで知っています。「長方形」に持ち替えてドキュメント上をクリック「幅」をドキュメントの「1200」「高さ」を「300」とします。OKぴったりと合わせていきます。簡単にワイヤーフレームを作成することができました。次のビデオではこの今配置したプレースホルダをきれいに Pixel Perfect でぴったり合わせていく方法を見ていきたいと思います。

PhotoshopでWebデザイン

このコースではウェブデザイナーの方を対象に、Photoshopを使ってWebグラフィックやワイヤーフレーム、サイトのモックアップを作成する方法を学習します。具体的には最大効率化するためのカスタムWebワークスペースの作成やカラーリング方法、グラフィクスを最適化する方法を学びます。

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

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

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

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