ビデオ: 独学でWebデザイン Photoshop 使い方 第10回目 スライスで分割した画像をWeb用に書き出す(CS6) 2024
Adobe Dreamweaver CS6でWebページの背景を作成するのは楽しく、ほとんどの人が想像するよりも多くの方法で追求することができます。 1つの小さな画像で繰り返しパターンを作成したり、ウォーターマークを作成したり、大きい画像を使用して背景全体を塗りつぶしたりできます。
デフォルトでは、HTML背景は選択したイメージが画面いっぱいになるまで繰り返されます。 CSSのプロパティと連動して、反復動作を制御または排除したり、単一の背景画像に対して正確な位置を設定したりすることもできます。
<! - 1 - >背景にパターンを塗りつぶす場合は、認識可能なエッジのないパターンイメージを作成してください。
背景画像のデフォルトの繰り返しタイリングを利用するには、次の手順に従います。
-
Photoshopで、ファイル→新規を選択して新しい画像を作成します。
-
表示される[新規作成]ダイアログボックスで、画像の幅よりもはるかに広い画像を作成し、RGBを選択して72 dpiを選択し、[OK]をクリックします。
<! - 2 - >たとえば、[幅]テキストフィールドに1000を入力し、[高さ]テキストフィールドに20を入力します。
-
ブレンドを作成する前景色と背景色を選択します。グラデーションツールを使用して画像領域の上から下にShift +ドラッグしてグラデーションの塗りつぶしを作成します。
-
[ファイル]→[Webで保存]を選択し、画像をJPEGファイルとしてサイトのWebコンテンツフォルダに保存してから、画像を閉じます。
-
Dreamweaverで、[変更]→[ページプロパティ]を選択するか、プロパティインスペクタのページプロパティボタンをクリックして、イメージをWebページの背景イメージとして配置します。
[ページプロパティ]ボタンが表示されていない場合は、ページをクリックします。イメージなどの別の要素を選択しないように注意してください。
[ページプロパティ]ダイアログボックスが表示されます。
-
[ページプロパティ]ダイアログボックスで、背景イメージの右側にある[参照]ボタンをクリックします。表示されるウィンドウで、保存した背景イメージの場所に移動し、[OK]をクリックします。
-
[ページのプロパティ]ダイアログボックスに戻り、[OK]をクリックします。
画像が背景に表示され、繰り返され、ページ全体にわたって涼しい背景グラデーションが作成されます。
ユーザーのモニターのサイズと解像度によっては、背景画像が繰り返し表示されることがあります。背景画像を繰り返すと、いくつかの創造的な結果が得られます。
ブラウザで[プレビュー/デバッグ]ボタンをクリックしてデフォルトブラウザでページをプレビューするまでは、背景が表示されないことがあります。