最後のレッスンでは、Photoshop を使用して Web デザインをゼロからレイアウトし、モックアップする方法を見ていきます。
ビデオ コンポーネントを必要とする Photoshop レッスンがあったとしたら、それはこのレッスンです。このレッスンでは、図形ツールとテキスト ツールを使用して Web サイトのデザインを最初から作成する方法を見ていきます。これらの概念はどれも実際に書き出すことができないため、このレッスンに付属するテキストはほとんどありません。ほとんどのツールについては前のレッスンですでに学習しているため、このレッスンではそれらを使用してサイトを作成する方法を説明するだけです。ただし、新たに議論しなければならないことがいくつかあり、それらについては以下で説明します。
ビデオに従って進みたい場合、または Photoshop で最終製品がどのように見えるかを確認したい場合は、次のことができます。ここからサイトデザインファイルとアセットをダウンロードしてください。これは、物事がどのように機能するかを調べて確認するための良い方法です。ファイルは Photoshop CS5 で作成されているため、表示するには Photoshop CS5 が必要です。
ガイドの使用
ガイドは、Photoshop の小さな青い水平線と垂直線で、キャンバス上での位置を揃えるのに役立ちます。ルーラーをオンにして (Mac では Command + R、Windows では Control + R)、ルーラーをクリックして、線をページ上にドラッグすることで作成できます。作成したガイドを後で調整するには、ツールバーの上部にある移動ツール (キーボードの V) を使用します。
形状の作成
以前に図形の作成について説明しましたが、ここでは、図形がレイアウトにとって特に重要であることがわかります。これらは (ラスターではなく) ベクター画像であるため、ピクセル化されることなくサイズを変更できます。これは、レイアウトするときに非常に役立ちますが、後で変更を加えたい場合もあります。ベクターベースにできないもの (写真など) を除き、モックアップ内のすべてをベクターベースにしておいたほうがよい場合がほとんどです。
組織
ウェブサイトのモックアップを整理することは非常に重要です。膨大な量のレイヤーを作成することになるため、できるだけ頻繁にそれらのレイヤーに名前を付けてグループ化する必要があります。レイヤーの整理に力を入れればかけるほど、後でデザインをナビゲートするのが容易になります。これは、後でデザインを入手する可能性のある開発者にとって特に役立ちます。彼らが元素を調べて探さなければならないとしたら、彼らの生活はさらに困難になるでしょう。怒っている開発者は不快です (私も開発者の一人で、何人かと一緒に仕事をしたことがあります)。きちんと整理された文書を提供して、良好な関係をスタートさせましょう。それはあなた自身の利益にもなりますので、誰もが得をします。
Web用に保存
あなたが開発者であるかどうかに関係なく、誰かがあなたのデザインで使用される画像の Web 対応バージョンを作成する必要があります。最近では、CSS と JavaScript を使用して多くのエフェクトやスタイルを作成できるため、あまり多くのことを心配する必要はありません。たとえば、永続的なロゴがある場合は、それを Web 用に保存する必要があります。これにはさまざまな方法がありますが、最も簡単な方法は、グラフィックを保持するレイヤーをコピーし、それを新しいドキュメントに貼り付けて、Web 用に保存プロセスを開始することです。 [ファイル] メニューに [Web とデバイス用に保存...] があります。これを開くと、指定した設定を使用して圧縮された後のグラフィックがどのように表示されるかを示す大きな新しいウィンドウが表示されます。グラフィックに応じて、通常は「JPEG - High」または「PNG 24」が適切な選択となります。グラフィックの色とトーンが非常にシンプルな場合、または透明な背景が必要な場合は、24 ビット PNG ファイルが最適な形式です。より複雑なグラフィックの場合は、通常、「JPEG - 高」が最適な設定です。望む結果が得られるまで圧縮量やその他の設定をいじることもできますが、そのプリセットに固執することで十分な効果が得られます。 「保存」をクリックすると、ファイルに名前を付けることができます。 Web 用に安全な名前を付けるかどうかを心配する必要はありません。 Photoshop が行ってくれる便利な機能の 1 つは、スペースの代わりにハイフンを追加することで、完了時に Web セーフなファイル名が得られることです。
これで Photoshop の基礎シリーズは終了です。明日は少し要約してから追加のリソースを提供しますが、これでレッスンはすべて終了です。おめでとうございます! Photoshop を使い始めて、写真をより良くしたり、クールな絵を描いたり、自分の作品を紹介するための Web サイトを作成したりできると幸いです。
