ラップアラウンドで巻き戻す(body背景画像)

参照:http://d.hatena.ne.jp/web-0818/20160306/p1

完成図

f:id:paris1204:20160217111550p:plain

 

昨日の授業で製作した背景画像の作り方をまとめます。基本的には上記参照記事と内容は同じです。

 

途中で切れている連続するイメージはその先を想像できるので1つの大きな表示より良い。
ゲシュタルトの法則)みたいなので上の連続性を思わせるような画像を作りcssでbackground-imageに設定しrepeat-yします。

 

 

 

 

 

①作りたい画像の幅と高さを設定してphotoshop新規画面で開く。

②楕円形選択ツールを選択し、オプションバーのスタイルで固定を選びます。幅高さとも同じにして真円を描き上下左右ボタンで場所を調整し、色をペーストします。

f:id:paris1204:20160217112229p:plain

③長方形ツールで丸の中心から左側に長方形を描き同じ色にします。

④新規レイヤーを作成し①〜③の作業を別の色をつけてします。この時、丸が初めに描いたものより内側になるようにすること。

f:id:paris1204:20160217112720p:plain

f:id:paris1204:20160217112814p:plain

*二枚あるうちの1つのレイヤーの色を変更したいときは希望レイヤーをctrl + クリックしサムネイル表示(破線で囲まれている状態)し別の色で塗りつぶします。

f:id:paris1204:20160217113151p:plain

⑤レイヤーを結合します。フィルター→その他→スクロールで内側にしたい分の数値を入力し、プレビュー表示でよければokをおして完成です。

f:id:paris1204:20160217111550p:plain