PhotoshopでWebデザイン

テキストの配置

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
テキスト要素を配置します。
講師:
08:28

字幕

では、テキストを配置していきましょう。「テキストツール」に持ち替えます。今回は、まず HOME のページから編集していきましょう。STORE を隠してHOME を出します。少し拡大します。Alt/Option を押しながらマウスのトラックビルでコロコロしていきます。このグレーのPlaceholder の下に描いていきます。クリックドラッグでこのあたりという風に文字の箱を作ります。「書式」から取りあえずダミーテキストを入れたいので「Lorem Ipsum をペースト」これを押します。一回このレイヤーを「T」のところをダブルクリックしてすべて選択します。Courier New はいいんですが白じゃなくて黒がいいので黒を選択します。大きすぎますね。BODY のテキストなので「12」を使いたいと思います。さらに細かく設定していきましょう。Bold じゃない方がいいですよね。「テキスト」の「文字」のパレットを開きます。Bold から Regular に変えます。Regular にして尚且つ間を自動にします。他は大丈夫そうですね。戻しておきましょう。少し文字数が多いのが気になるのでここから下を消しちゃいましょうか。 こんなもんですかね。設定が出来ました。右側ですね。ここに、最初に Blog というポストを起きたいと思います。またテキストに持ち替えてこのあたりにギューッと箱を描きます。まずはLATEST BLOG POST と最新の BLOG という感じで書いておいてこれを Courier New でBold でサイズは「30」としましょうかね。十分入りますね。その下にBLOG のタイトルRobots are awasomeちょっと大きすぎますね。これは「17」にしましょうか。これぐらいがいいですね。この両方はオレンジの方が合うでしょう。この下に日付ですね。Posted on Nov 01 とこんな感じですかね。これはグレーがいいんじゃないですかね。小さめの「12」を選択します。この下に Blog の本文を黒でほしいですね。また「書式 」>「LoremIpsumをペースト」でも いいんですが一杯きてしまうのがわかっているのでちょっと別のところからこっちから少しもらいます。Ctrl/Command + C でコピーこっちのレイヤーに戻って張り付けます。では少しスタイルを直していきましょう。ちょっとここ空きすぎですね。 この段落を選択して「パラグラフスタイル」「段落スタイル」でここ要らないですね。ここも少し空きすぎですね。では、「12」ぐらいにしましょうか。下との空きを「10」にしましょう。一番上は「10」LATEST BLOG を選択いいでしょうね「10」ぐらいで。少し BLOG の量が多いような気がするのでこの文字列を小さくします。これを一つのかたまりとしてもう一 POST ほしいですね。これで二日分の BLOG POST という感じになっています。じゃ「2」にしようかな。このスタイルを保存しておきましょう。では、「パラグラフスタイル・段落スタイル」を出してここに登録しておきましょう。まずはこれですね。「新規」で「段落スタイル」を作成します。BLOG のスタイルなので「H2」としましょうか。この LATEST BLOG POSTこっちを「H1]にしておきましょう。Courier New で、Bold で「17」であっていますね。OKこれも登録しておきましょう。後で使いまわしたいです。「H1」とします。では OK。この Body も恐らく使いまわすので登録しておきましょう。同様に Body とします。 OKここに返しておきましょう。これで、Home のページの文字の挿入は完了しました。では、ABOUT のページの挿入にいきたいと思います。ではでは、Home のページを隠してABOUT の方にいきましょう。キレイに入っていないですね。これとこれは CONTENT HOME の一部なのでこの二つのレイヤーを選択してHome に移動します。ABOUT のページに移動します。ここにもテキストを書いていきましょう。「文字ツール」に持ち替えてこのあたりからクリックドラッグでキューっと箱を描いていきます。ガイドがあるのでガイドに沿わせていけば楽ですね。ここにまずはタイトルABOUT USその下に、Lorem Ipsum「書式」でペーストですね。文字を持ってきます。ここには「段落スタイル」から「H1」を持っていきます。その下Lorem Ipsum を選択してBody を入れておきます。Bpdy ですね。後はもし量が多い場合はキューっと削ってあげてこんなもんかなという風にデザインをします。こんな感じに簡単にテキストを挿入することができました。次は、動画のプレースホルダーについて見ていきたいと思います。

PhotoshopでWebデザイン

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

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

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

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

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