レイアウトの現在の状況はおおよそ次のようになるはずです：
これまでにロゴと上部メニューを挿入しました。次に、ナビゲーションのちょうど下に表示されるやや大きなグラフィックを使用します。
新しいレイヤーを作成する原則は、前のチュートリアルで既に説明されています。そのため、ここでは別のことをご紹介します。上部メニューの直下に大きな画像が表示されます。結果は次のようになります：
画像を挿入する場合は、適切なサイズである必要があります。必要に応じて編集してください。次に、ファイル＞開くをクリックして画像を選択します。選択した画像はその後新しいウィンドウで表示されます。画像をコピーするには、Ctrl+Cを押します。これにより、正しいサイズの新しいレイヤーとして画像をすぐに挿入できます。その後、編集＞貼り付け先＞新しいレイヤーをクリックして、このレイヤーには画像の寸法が自動的に適用され、簡単に適切な位置に移動できます。この方法で、レイアウトに挿入したいすべての画像を取り込み、配置できます。
後で実際に表示される場所にテキストを挿入してください。設計段階では通常、ダミーテキストを使用します。
ですので、今こそ座って、乱雑に"テスト、テスト、テスト"と書く前に、http://www.blindtextgenerator.de/をご参照いただくことをお勧めします。
そこでは、さまざまな種類のダミーテキストを自動的に生成できます。そのテキストは、コピー＆ペーストで簡単にデザイン草案に取り込むことができます。関連して、http://dummyimage.com/もお勧めします。このサイトでは、任意のサイズのダミー画像を生成することができます。これらのダミー画像は、まだ作成されていない元のグラフィックのプレースホルダーとして使用できます。
透明なレイヤーの問題
テキストを挿入すると、見出しや段落などの複数の要素から構成されます。したがって、関連するテキストをそれぞれ独自のレイヤーにまとめることをお勧めします。それにより、これらのテキストをまとめて移動できます。レイヤー＞新規レイヤーをクリックしてください。その後、レイヤーに適切なサイズと背景色を割り当ててください。通常は透明な背景を設定する必要があります。しかしそれには問題があり、透明なレイヤーを移動しにくいことがあります。しばしば、子レイヤーを誤って選択してしまうことがあります。この問題は、ツールボックスの設定が重要です。そこで移動ツールを有効にします。下部のウィンドウ領域でアクティブレイヤーを移動オプションを有効にしてください。
このようにして、透明なレイヤーを任意の位置に移動できます。
要素の切り抜き
レイアウトに満足している場合は、それを実際のHTMLウェブページとして実装する必要があります。この段階でのスライシング、つまり切り抜きが重要になります。このスライシングとは、後でHTMLとCSSを使用して再び組み立てられる、レイアウトの部品に分割することです。個別に表示する必要のある要素すべてを切り抜く必要があります。これには、もともと個別であるすべての画像要素は含まれません。まず、要素の切り抜き方法をご紹介します。該当する要素の周囲にガイドラインを引いてください。ガイドラインは最終的に切り口となります。したがって、適切に設定するように注意してください。
次に、希望する領域を選択し、Ctrl+Shift+Cキーを押します。（これはGIMPおよびPhotoshopの両方に適用される）。次に新しいファイルを作成してください。Photoshopでは、ファイルはすぐに正しいサイズになります。GIMPでは、これが簡単ではないかもしれません。こちらでは、適切な寸法のファイルを作成してください。これを終えるには、クリップボードから内容をCtrl+Vで貼り付けます。
次に、カットツールを使用します。切り抜きたいエリアを定義し、その後Returnキーを押します。イメージは指定した領域に切り取られます。ファイル＞名前を付けて保存をして画像を保存できます。
多くのウェブページにとって重要なスタイル要素は、グラデーションです。この例のレイアウトでも、グラデーションが使用されています。グラデーションをスライスするには、該当するグラデーションの狭い領域を選択します。実際には、幅が1ピクセルの領域を設定するだけで十分です。高さは要素の実際の高さに一致する必要があります。後でCSSを使って、この画像を水平に繰り返して要素全体を埋めるようにすることができます。もちろん、より幅広い選択肢も可能です。ただし、ページのパフォーマンスが低下する可能性があります。グラデーションの場合は、幅を1ピクセルとします。
Ctrl+Shift+Cで、1ピクセル幅のグラフィックをコピーしてクリップボードに貼り付け、新しい画像として挿入します。画像を適切な領域に配置した後、保存してください。
以上で、スライシングの基本原則が明確になりました。つまり、後でWebサイトになるものは、レイアウトから切り抜くものです。既にあるページ要素が切り取る必要がない場合は、スライシングを経ずにそのまま使用します。
以下は、結果のイメージです：後でWebサイトに配置するためのすべてのグラフィックが用意されています。これには、ロゴ、背景、グラデーションなどが含まれます。グラデーションについて言及したところで、CSS3で簡単に作成できることは十分に認識しています。ただし、まだすべてのブラウザでサポートされていないため、グラデーションの実装にグラフィックを使用しています。
