PhotoshopでWebデザイン

ウェブページの構造毎にまとめる

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

ぜひご覧ください。

無料で視聴する すべての加入プランを見る
または
デザインがしやすいようにレイヤーをグループ機能をつかって整理整頓していきます。
講師:
03:16

字幕

では、実際に作業をしていきましょう。この動画で使用するファイルはrobot_toys_start です。このファイルをこっちまで持っていきます。これは robot_toys_finishedになっています。まず、Web サイトはページで構成されています。この例でいうとHome のページ、About のページStore のページContact のページです。四つのページがあります。このすべてのページを同じ場所にデザインしてしまうと重なってしまいますよね。Photoshop でデザインする場合はこんな感じでします。各ページをフォルダー分けして例えば、今はこの Home のページを表しているのでHome だけに表示が入っています。もしこの About のページを見たい場合はHome のページを一旦隠してAbout の方の表示を付けます。こんな感じに一ページずつ表示できるようにフォルダー分けします。では、実際のこのスタートアップのページをきれいにフォルダーを作っていきましょう。フォルダーを作る場合は「レイヤー」のパネルの一番下「新規フォルダーの作成」ボタンを押します。全部で四ページ分あったのでもう三つ、四つ分作っておきたいと思います。 では、名前を付けていきましょう。一番上がContent Home でした。次が Content About次が Content Store最後にContent contact ですね。こんな感じに四ページ分ありました。更に Web サイドはページだけではなくて変わることのないこの裏の部分ヘッダーと下の部分フッダーにも分かれます。ヘッダーとフッダーも作りましょう。フォルダーを二つ作成します。片方を Header片方を Footer としましょう。では、順番を並び替えていきます。Header は常に一番上に来るのでこのフォルダーの構造上でも一番上がいいでしょう。Home、About、Store でFooter が一番最後の方がいいでしょう。こんな感じに分けていきます。このページのエナメントは取りあえずこの Content Home に入れておきましょう。このロゴ、ここです.。このロゴはヘッダーの一部なのでHeader に入れておきます。こんな感じにまずはフォルダー分けをしていきます。次のビデオでは、実際にマスターエレメントを配置していきましょう。

PhotoshopでWebデザイン

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

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

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

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

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