目次:
ビデオ: 独学でWebデザイン CSS基礎講座 第5回目 ボックスの構造を理解しよう!その1 2024
ページレイアウトでは、Adobe Creative Suite 5のWebページにデザインを作成するためのテキストとイメージ(および他の形式のマルチメディア)が組み込まれています。ページデザインを作成するときは、情報の流れを取り込むために目がどのようにページ上を移動するかなど、人々がレイアウトをどのように表示するか。要素がどのように配置され、どのくらいの空きスペースがそれらを囲むかについても考慮してください。
ページレイアウトの2つの主要な種類は、印刷レイアウトとウェブレイアウトです。どちらのフォーマットでも、同じ要素の多くを扱う必要があります。
<! - 1 - >使用するCreative Suiteプログラムを決定する
ウェブ用のレイアウトを準備し、印刷用に準備することには多くの違いがあります。しかし、あなたは両方のために同じツールの多くを使用し、2つのメディア間で多くの情報が交錯することがわかります。
Webの画像操作はPhotoshopでよく行われます。また、印刷を目的とした画像の操作や修正のための標準プログラムです。 InDesignで[XHTML / Dreamweaverの書き出し]コマンドを使用すると、印刷用のページをデザインしてオンラインにすることもできます。
<! - 2 - >ただし、オンラインで情報を投稿する際には、特定の事項を考慮する必要があります。あなたが印刷のために働いているときには、ナビゲーション、ユーザビリティ、ファイルサイズ、寸法、およびコンピュータ機能はウェブにとって重要な考慮事項です。しかし、解像度、色、およびクロッピング(いくつかの例を挙げれば)は、ウェブの問題ではない印刷物をデザインする人の考慮事項です。
Webページレイアウトを作成するもう1つの方法は、Creative Suiteに含まれているAdobe Fireworksを使用することです。 Fireworksは、Webグラフィックの作成に役立つだけでなく、Web用の優れたプロトタイピングツールを提供します。 Fireworksを使用すると、スタイルを確立したり、マスターページを作成したり、ページにインタラクティビティを適用したりすることができます。ハイパーリンクを含む複数のページプロトタイプを作成することは、Fireworksを使用して同期させることです。
<! - 9 - >印刷用のレイアウトを設計する
印刷用のページレイアウトを設計するときは、使用する用紙のサイズとタイプを考慮する必要があります。場合によっては、レターヘッドを作成し、ページ上の他の要素(メインコンテンツ)がページごとに異なるのに対し、同じ要素を持つレターヘッドを作成します。
書籍のテンプレートとなるページレイアウトを作成し、特定の要素(箇条書きやサイドバーなど)をページ全体でさまざまな方法で繰り返し使用することもできます。ページサイズ、フォントサイズ、および画像の解像度は、印刷時にはすべて重要な考慮事項です。
ページレイアウト用のテンプレート は、一般的な用紙サイズを考慮し、定義された領域にコンテンツをレイアウトするのに役立ちます。たとえば、パンフレットを作成する場合は、ページが折り畳まれる場所と、イメージとテキストを正しい向きに向けるように方向付ける方法について考える必要があります。
多くの種類のテンプレートがオンラインで入手できます。また、無料でダウンロードすることもできます。他のテンプレートはテンプレートに応じて少額の料金で利用できます。
ページをレイアウトするときに考えるべきいくつかの問題を次に示します。
-
可能であれば、グリッドとスナップ・ツー・アライン要素を使用します。ページ上の特定の要素が整列していない場合は、正当な理由があるはずです。
-
目は、ページ上の要素の方向に移動します。例えば、人物の絵がスプレッドの中心から離れている場合、目はその方向に移動します。目がページの重要な要素に移動することを確認します。
-
3分の1のルールに従ってページを3分の1に分割します。あなたのレイアウトの一部は、これらの3つの領域に分類されます。
画面上の画像の解像度は、 per pixel (ppi)で測定されます。これは画面上に1インチ以内のピクセル数を指します。画像の印刷された解像度は、999ドット/インチ(dpi)で測定され、各画素についてインクのドットが印刷される。 dpiが高いほど、画像がより鮮明で詳細が細かく、印刷には非常に重要です。印刷された画像はほとんど常に画面上の画像よりも高い解像度を使用するため、スクリーン上に4 x 4インチ(72 ppi)の画像が1 x 1インチ(300 dpi)未満で印刷されることがあります。