チュートリアル：AdobePhotoshopを使用してWebページをレイアウトする方法

コードを入力したり触れたりすることなく、Webページをデザインし、完全にシンプルで機能的な方法で作業するためのさまざまなツールがあります。 それらは無数にあり、アプリケーションによって提案されています（アドビのDreamweaver 例）またはWixなどのオンラインプラットフォームから直接。 ただし、Webデザイナーにとっては、手動の手順を知っていることが不可欠です。 HTML5とCSSは、Webサイトとランディングページのレイアウトの基本的な柱です。

ただし、予想よりも頻繁に、Indesignや Adobe Photoshop レイアウト作業を補完し、完璧な仕上がりにします。 今日は、この広範なチュートリアルで、AdobePhotoshopを使用してWebページをレイアウトする方法を説明します。 この最初の部分では、Photoshopから開発される作業にとどまりますが、将来の記事では、この作業をHTMLコードに直接適用して機能させる方法を説明します。

ワイヤーフレームの設計から始めます

Webページのレイアウトとデザインから始めるには、基本的な要素が何であるかを定義することから始めることが非常に重要です。これがスケルトンです。 この構造は、すべてのコンテンツ（テキストまたはマルチメディア）を保持するためのサポートとして機能します。 私たちのページを構成する各セクションを定義することにより、完全な正確さでそれらに取り組むことができ、可能な限り成功する視覚的なデザインを提供することができます。

ウェブサイトに寸法がある場合は、ウェブサイトの寸法を考慮することが非常に重要です。 ボックスまたは全幅。 ボックス化されたWebページは小さなコンテナ内にあるため、その周囲にスペースが表示されます。 それどころか、フルウィットウェブは、ページを複製するデバイスの画面全体を占めます。 あるモダリティと別のモダリティのどちらを選択するかは、単に文体的な質問に答えるだけでなく、私たちが取り組んでいるプロジェクトのニーズにも依存します。 この例ではボックスモードで作業するため、ブラウザーによって提供されるすべてのスペースを占有することはありません。

ワイヤーフレームを作成するには、最初にAdobe Photoshopアプリケーションを入力して、ページに必要なサイズを含める必要があります。 この例では、ページの幅は1280ピクセルになります。 ただし、サイズの問題は、最終的な宛先またはページを複製するデバイスによって異なる場合があります。 ウェブデザインが機能的かつ効率的であるためには、それが必要であることは間違いありません 反応する そしてそれは市場に出回っているすべてのデバイスに適応しなければなりません。 ただし、この場合は、デスクトップコンピューターで再現するプロトタイプの作成に取り組みます。 それでも、レスポンシブの問題については後で説明します。今のところ、この例で使用する画面サイズの階層を次に示します。 この場合、Adobe Photoshopでランディングページのレイアウトを作成してから、HTML5とCSS3に移行することに注意してください。 この小さな練習の目的は、Photoshopで作成されたデザインを、ユーザーの動きに反応する使いやすくインタラクティブなWebデザインに変換することです。

携帯電話の測定

iPhone 4および4S：320 x 480

iPhone 5および5S：320 x 568

iPhone 6：375 x 667

iPhone 6以降：414 x 736

Nexus 4：384 x 598

Nexus 5：360 x 598

Galaxy S3、S4、S5：360 x 640

HTC One：360 x 640

タブレットの測定

iPadのすべてのモデルとiPadMini：1024 x 768

Galaxy Tab 2および3（7.0インチ）：600 x 1024

Galaxy Tab 2および3（10.1インチ）：800 x 1280

Nexus 7：603 x 966

Nexus 10：800 x 1280

Microsoft Surface W8 RT：768 x 1366

Microsoft Surface W8 Pro：720 x 1280

デスクトップコンピュータの測定

小さな画面（ネットブックなどで使用）：1024 x 600

ミディアムスクリーン：1280 x 720/1280 x 800

大画面：幅が1400ピクセルを超える場合、例：1400 x900または1600x1200。

Webモックアップ内で要素の配布とセクションの割り当てを開始するには、比率を考慮して、読みやすくメロディックな仕上がりにすることが非常に重要です。 トップメニューの[表示]にあるルールとガイドのオプションを使用することが不可欠です。 比例的かつ正確に作業するには、パーセンテージから作業するのが最善です。 表示メニューをクリックし、次にオプション«新しいガイド»をクリックして、部門のモダリティを選択します。 この場合、25％でXNUMXつの垂直分割を行い、それらを参照として使用して、画像をフッターに配置し、ロゴの画像をヘッダーに配置します。

私たちを占める各エリアを指定するコードがあります モデル そしてそれらのそれぞれが持つ機能。 たとえば、画像が占める領域を示すために、一種の十字のある長方形を作成します。 特定の領域に動画を含めたいことを示すために、コンテナ内に再生記号を含めます。 この最初の例では、画像のみを処理します。上のキャプチャでは、次の領域を確認できます。 ロゴ 当社のウェブサイトから。

これが私たちの最終結果になります ワイヤーフレーム。 ご覧のとおり、ロゴが表示される画像で構成されるヘッダーに分割されています。このヘッダーは、XNUMXつのタブ、検索エンジン、検索ボックスのXNUMXつのボタンを伴うホームページへのリンクとして機能します。 さらに、すでに本文内に、分割バーで構成されるサイドバーと、Webサイトに掲載されるコンテンツのタイプを分類する一連のカテゴリが含まれています。 私たちのサイトに存在するエントリを含む番号付きの別のセクション、そして最後に私たちのサイトで最も代表的なメタタグまたはラベルのリスト。

含まれるセクションによって定義されるコンテンツ領域内 自己管理可能なコンテンツ、記事の内容を見つけます。 この場合、パンくずまたはパンくず（これは、当社のWebサイトの有機的な構造、記事の見出し、メタデータ、テキストの本文としての段落を示し、その中に画像が含まれます。

フッターとして、ページの他の領域へのリンクとして機能するXNUMXつの画像を含めました。 ここには、ロゴやその他の興味深いセクションを含めることができます。 実際には、この領域はより プリフッター、フッター自体は使用ポリシー、法的通知、著作権で少し下がるので。

ページの基本構造またはスケルトンを定義したら、次のレベルに進む必要があります。 これは、当社のWebサイトの各領域の実際のデザインで構成されます。 つまり、これらの各領域に、最終的にWebサイトに挿入されるコンテンツを「入力」し始めます。 ワイヤーフレームで作業する前にこれらの要素を設計しないことをお勧めします。この順序で行うと、後で比率を変更する必要が生じる可能性が非常に高いためです。 画像が歪むリスクがあります 各要素の設計をやり直す必要があり、時間の無駄になるか、結果の品質が低下します。

この場合、当社のウェブサイトのデザインは非常にシンプルになります。 を使用します マテリアルデザインの指針、この慣行を例示するためにGoogleロゴを使用するためです。 このチュートリアルの目的は技術的な知識を説明することであるため、この場合の美的結果は関係ありません。 ご覧のとおり、私たちは少しずつ、私たちの計画で以前に決定したすべての領域でスペースを埋めてきました。 ただし、最後の最後に小さな変更を加えました。 お気づきかもしれませんが、ロゴのサイズを大幅に縮小し、上部のメニューと完全に接続する下部ヘッダー領域に分割線を含めました。 この場合、リソースバンクのボタンと資料を使用しました。 デザイナーとして、自分でデザインすることができます（特に、ブランドイメージやロゴで表示されるものと非常によく似た強壮剤を表示する場合は、このオプションをお勧めします）。

この例をレイアウトするために、XNUMXつの異なるレベルで作業することを覚えておくことが重要です。 一方ではオブジェクトに取り組み、他方ではウェブサイトの外観に取り組みます。 つまり、一方では私たちのウェブサイトの骨組みであり、他方ではすべてで このスケルトンがサポートするフローティング要素。 サイドバーが占める領域、プリフッター、ヘッダーとボディを分割する分割バーなど、まったく浮かない領域があることに気付くでしょう。

構造1、2、3、および4は、 背景 私たちのウェブページの、したがって、実際には、Adobe Photoshopからそのようにエクスポートする必要はありませんが、それは可能ですが、必要ではありません。 それになると フラットカラー （フラットデザインとマテリアルデザインの重要な機能のXNUMXつであり、CSSスタイルシートを使用してコードを介して完全に適用できます）。 ただし、残りの要素は、後でHTMLコードに挿入できるように保存する必要があります。 この小さな図では、ページの背景に属する領域も再現しているため、サイトの最終的な外観がどのようになるかが明確にわかります。

ご存知のように、Adobe Photoshopでこのスキームを作成する意味は、各要素の実際の寸法を取得し、各要素の配置と構造を明確にすることです。 もちろん、テキストコンテンツは、プロセスのこのフェーズでは必要ないため、場所がありません。 コードエディタから提供。 また、このプラクティスでは、ボタンと静的要素を操作することにも注意する必要がありますが、通常、これらはBootstrapなどのフレームワークから、またはJqueryから直接適用されます。

Webページを構成する各要素を作成したら、それらのエクスポートを開始し、HTMLプロジェクトフォルダー内にあるimagesフォルダーに保存します。 スケルトン構成に基づいて元の要素の一部を変更する必要がある可能性が非常に高いため、ワイヤーフレームからのエクスポートに慣れることが重要です。 （たとえば、この場合、元のボタンのサイズ、ロゴ、および下部領域の画像を含む、コンポジションの一部であるほとんどの要素を変更しました）。

アイテムを個別に保存して、アイテムの寸法と正確な方法で保存することを学ぶことが重要です。 エラーは、たとえ最小限であっても、Webサイトの一部であるすべての要素に影響を与える可能性があります。 これらは相互に関連しており、最終的なWebでHTMLから入力できるように、完全なサイズである必要があることに注意してください。 この場合、次の要素を個別に切り取って保存する必要があります。

• 私たちのロゴ。
• すべてのボタン（メインメニューの一部であり、残りのボタン）。
• すべての画像。

私たちは多くの方法でそれを行うことができ、おそらくあなたはあなたにとってより効果的な代替案を見つけるでしょう。 ただし、このタイプのレイアウトを初めて作成する場合は、次のヒントに従うことをお勧めします。

• まず、ワイヤーフレームを含むPSDファイルが配置されているフォルダーに移動し、エクスポートする要素と同じ回数だけ複製する必要があります。 この場合、オリジナルから12個のコピーを作成し、同じフォルダーに保存しました。 次に、各コピーの名前を変更し、それぞれに含まれる要素の名前を割り当てます。 12個のコピーの名前が変更されます：ロゴ、メニューボタン1、メニューボタン2、検索バー、上部ボタン1、上部ボタン2、上部ボタン3、上部ボタン4。残りの1つは、画像2、画像3、名前に変更されます。画像4と画像XNUMX。
• これが完了したら、ロゴ名でファイルを開きます。
• レイヤーパレットに移動して、ロゴを含むレイヤーを見つけます。 次にを押します Ctrl / Cmd そのレイヤーのサムネイルをクリックしている間。 このようにして、ロゴは自動的に選択されます。
• 次のステップは、Photoshopにそのロゴを正確に切り抜いてほしいことを伝えることです。 このためには、キーまたはコマンドからトリミングツールを呼び出すだけで済みます。 C.
• これが完了したら、Enterボタンをクリックしてカットを確認します。
• 次に、一番上の[ファイル]メニューに移動して、[保存方法]をクリックします。 名前を選択します。この場合は「ロゴ」になり、フォーマットを割り当てます。 PNG、ウェブ上で最高の品質を提供するファイルであるため。
• すべてのコピーと要素を使用してプロセスを繰り返します。 トリミングしたら、パレットの残りのレイヤーが 目に見えない または排除されます。 このようにして、透明な背景で各要素を保存できます。

この場合、レイヤーパレットからメニューボタン2を選択しています。 スクリーンショットで、ボタンの制限が自動的に選択されていることがわかります。

Cキーからトリミングツールを選択すると、キャンバスはボタンのサイズにのみ縮小されます。

今こそ、私たちのWebサイトの一部であり、それらを画像フォルダーに含め、後で使用するすべての要素をXNUMXつずつ保存するときです。 コードから呼び出しを行い、レイアウトを続行しますが、これからはコードエディターから呼び出します。

Webページをレイアウトするための多くのツールと代替手段があり、プロセスを完全に直感的にしますが、それを行うことを学ぶことは非常に重要です。 マニュアル。 このようにして、Webページのデザインの背後にある基本事項を学びます。

要約:

1. 設計する 構造 あなたが送信したいコンテンツとあなたがあなたのウェブサイト上に作成しなければならないセクションに特別な注意を払っているウェブサイトの。
2. あなたのスケルトンに取り組むか ワイヤーフレーム コンテンツが表示される領域とその形式を示すAdobePhotoshopから。
3. 以前に開発した対策とブランドに依存して、 デザイン ウェブの表面。 すべての要素（フローティングと固定の両方）が含まれます。 対応するボタン、ロゴ、画像を含めることを忘れないでください。
4. プロジェクトの一部であるすべての要素をXNUMXつずつ切り取ります。 それらが適切な対策を講じており、後で問題を引き起こさないことを確認してください。
5. すべての要素を形式で保存する PNG プロジェクトフォルダ内の画像フォルダ内 HTML.
6. このプロジェクトはWebウィンドウに出力されるため、カラーモードを考慮して適用することが非常に重要であることに注意してください。 RGB.
7. 仕事に取り掛かる前に、尊敬する他のWebページからインスピレーションを得て、チームメンバーとこれについて話し合うことを忘れないでください。 それがクライアントのためのプロジェクトである場合は、 ブリーフィング 可能な限り。