PhotoshopでWebデザイン

ピクセル単位で位置を調整する

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
ピクセル単位で場所を奇麗に決めていきます。
講師:
05:56

字幕

配置したプレースホルダをきれいに配置する方法を見ていきたいと思います。今かなりでたらめに配置しています。上が空いていたり、左が空いていたりここもそうですね。この 6 つのプレースホルダもかなりバラバラです。こういう配置をきれいにピクセル単位でパーフェクトに配置していく方法を見ていきたいと思います。まずは一番上のこのヘッダーですね。このプレースホルダを見ていきましょう。選択します。これはドキュメント上の上と左側にぴったりくっつけたいのでこのプレースホルダを選択した後にCtrl/Command 押しながらAでドキュメント全体を選択してこのボタンを押します、「上へ整列」。このボタン、「左へ整列」。簡単にきれいに配置することができました。あとはこの選択を解除します。Ctrl/Command+D ですね。次に、このスライダーを見ていきます。スライダーは実はもうガイドは引いてあるので簡単にピタッと合わせることができます。ただ今回は、きれいにこのヘッダーから30 ピクセル離して置きたいと思います。まずは「長方形」に持ち替えます。適当にクリックして「30×30」の正方形を作成します。少し見やすいように「塗り」を赤にしましょうか。 近づきます。Alt/Option 押しながらマウスのコロコロをこんな感じにドラックホイールをコロコロして近づきます。この正方形をヘッダーの下にぴったりくっつけてガイドを引きます。もうあとは要らないので置いておいてそこに、こうぴったりくっつけます。ではその下も見ていきましょう。スライダーの下にきれいにガイドを引きます。その下ぴったり 30 ピクセル空けてまたガイドを引きます。そこにこの 6 つの動画用のプレースホルダを配置していきます。ガイドがあるのでぴったり簡単に合わせることができます。もしこの 3 つの動画のプレースホルダを均等に並べたい場合はまずこの 3 つを選択します。クリック、Shift を押しながらクリッククリック。この均等に揃えるボタンをポチッと押します。そうするときれいに並んでくれました。またガイドを引きます。30 ピクセル空けてガイドを引きます。ついでにここにも引いておきましょう。そうすることで、二段目三段目があったときに簡単に配置することができます。赤いこの正方形は置いておいて二段目をガイドに沿わせて配置していきます。ではまたガイドを引っ張って正方形を置いて、その分のガイドをとってこのテキストレイヤーを移動していきます。 ガイドがあるのでぴったりくっつきます。少し、はみ出していますよね。この動画のコンテンツ二つ分にしたい場合はテキストレイヤーを選択してCtrl/Command+T自由変形でこんな感じに合わせてあげます。テキストを入れる箱のサイズを簡単に変えることができます。確定する際はEnter を押してあげます。この画像もガイドに沿わせてきれいに配置していきましょう。これもサイズを変えたい場合は選択しておいてCtrl/Command+T できれいにサイズを合わせてあげてEnter で確定します。ガイドを引きます。またきれいに間をとっておきます。もうこれは要らないので、選択してDel/Backspace で削除します。最後はフッターですね。かなり多めに作ってあります。これをこの中に入れていきましょう。フッターのプレースホルダを選択してCtrl/Command+T で自由変形にしてもうガイドとドキュメントがあるのできれいに配置することができます。ぴったり。確定するときは Enter。こんな感じにきれいに配置することができました。ここではピクセル単位でPixel Perfect でこのプレースホルダを配置していく方法を見ました。

PhotoshopでWebデザイン

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

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

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

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

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