実践Webデザインスキル - 第4章 Lesson4

第3回:Webサイトに背景画像を設定する方法

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

クロスのテクスチャをパターン化して、Webサイトの背景画像として設定しましょう。



この動画で学べること

・パターンの背景にする方法



パターン素材をダウンロードしよう

今回は、Webサイトの背景にパターン画像を適応させますが、まず最初にパターン画像をダウンロードし、自分でPhotoshopにインストールしてみましょう。
ダウンロードしたいのは、こちらのサイトです。



ーーーーーーーーーーーーーーーーーーーーーーーーダウンロードする素材ーーーーーーーーーーーーーーーーーーーーーーーー


http://free-texture.net/etc-textures/canvas-patter...


ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー



URLをクリックして、ページが表示されたら「Download」を押します。
ダウンロードしたフォルダの中に、拡張子が「.pat」のファイルがありますのでダブルクリックします。
これで、Photoshopへのインストールが完了し、パターン素材を使うことができるようになっています。




パターンの背景にして、オーガニック風にしよう

ではここからはインストールしたパターン素材使って、オーガニックな雰囲気のある背景を作っていきたいと思います。
レイヤーパネルの一番上のレイヤーを選択し、ショートカットキー
[Mac] command ⌘+A
[Windows] Ctrl +A
でカンバス全てを選択した状態にします。




次に、レイヤーパネルの下のアイコンから、パターンを選択します。
パターンの詳細を設定するボックスが表示されたらから、背景にするパターンを選び、比率を30%にします。
これで、背景が指定したパターンになります。
パターンを使うときは、必ず不透明度を下げて自然に見えるようにしましょう。
背景が透けて色が白くなってしまうので、背景を少し黄色がかった色に変更すると、見本と同じような背景が完成です。