継ぎ目無し背景のコツ
ブログの背景というか、記事画面の両側に、エンドレスなパターンの繰り返し画像をよく見かけます。
あまり工夫の無いものは、繰り返しの継ぎ目がはっきりしていて、タイルを並べてある感じですが、
じっくり見ても、繰り返しに見えず、どこが継ぎ目か、画像の1ユニットがどれくらいの面積なのか
見当がつかないほど、上手く組み合わせてある画像もあります。
今回は、そんな壁紙を自分で作る場合に、シームレスで、しかも繰り返しに見えないようにするコツを
備忘録も兼ねて記録しておきます。
じつは、ブログをもう1つ作ろうと作業中です。
週1回の更新さえ遅れがちなのに、ブログを2つも持つなんて‥。そんなことなら、このブログの更新を
もっと頻繁にしろ、と言われそうですが、理由があるんです。
このブログは、DIYと住空間やデザイン関連の記事をのせていますが、それとまったく関係のない
ジャンルがあって、それが音楽ユニットGoosehouse(グースハウス）関連の記事です。
アクセス解析によると、Goosehouse関連記事は1日200人以上のアクセスがあるんですが、
その方々はDIY記事には目もくれません。逆もまたしかり。
このままGoosehouse記事を増やしても、ブログが分裂してしまうだけなので、UPできないまま
書きためてきた記事が30以上になってしまいました。
その休眠している記事の公開用に、新たにブログを作ろうとしているわけです。
というわけで、ブログの壁紙を新たに作る機会がありました。
さっそく作っていきましょう。試作ユニット1の実寸です。
今回は、キャラクターである、ガチョウ（グース）の赤ちゃんと五線譜をモチーフにします。
ユニットは330×330pixの正方形にしていますが、ユニットは正方形でなくても構いません。
このユニットで気をつけたのは、次の3つだけです。
難しそうなのは、①②の位置合わせと思われがちですが、
位置合わせの微調整は、コツがわかれば難しくはありません。
一番難しいのは、③の偏り無くグースを並べることです。
このパターンが上下左右重なっていくことを忘れないでください。
モチーフの並べ方に特長のある偏りがあると、画像が連続した際に、
人間の目は、一定のパターンが、ある間隔で出現することをすぐ見分けます。
これはヒトの視覚情報処理が、パターンの検出に敏感なためで、
この一定間隔で出現する意図せざるパターンが、
目障りになる場合があるのです。
この場合、グースのバラつきが適当かどうかは、
実際に試してみないとわかりません。
まず①②の位置がズレていないか、チェックします。
フォトショップのスクロール機能を使って、画像の左上端が画面の中央に
来るようスクロールして、連続面にズレがないか見て、あれば修正します。
このスクロールの位置関係が、デザイナーでも混乱する場合があるのですが、
画像端に色違いのラインを加えるとよく解ります。
一応、継ぎ目はツジツマが合っていることを確認したので、連続表示した場合にどう見えるか、
実際に確認します。
ここでは、wordpressのテーマのstyle.cssにbackground-imageとして指定してありますので、
それを直接、上のユニット1を読みこむように書き換え、ブログの画面自体で変化を見ます。
これは、ちょっと失敗です(^Д^;)
まず、グースが斜め一列に並びすぎです。意図せざるパターンの典型です(^Д^;)
それから、相対的にグースが大きすぎて、かわいさが出ていません。
ものすごい鳥の集団が、右から左に移動しているように見えてしまいます。
全部同じ姿勢なのも、迫力が出すぎの原因のようです。
それらの反省をふまえて、ユニット2に修正します。
グースを小さくし、半数に角度を変えた回転を加えて姿勢を多様にしました。
また、連続させた時、意図しない列が出来ないようにグースの位置を修正しました。
ユニット2の連続画像です。ユニット1の時より、すこしはグースのかわいさが出て、
バラツキがより均一になり、壁紙らしくなったと思いますが、いかがでしょうか？
後は、適当に画面にテクスチャーを加えて、これで一応の完成（冒頭のタイトル画像）ですが、
新ブログ本体の記事部分のデザインがまだ出来上がっていないので、それに調和するように、
色味などは修正していく予定です。
さて、イラストに興味をお持ちの皆様、LINEクリエイターズ・スタンプはご存知ですか（ヨナデンの体験記へ）。
現在、ヨナデン・ロクタのスタンプとして、下の『僕が信じてる40の事』という、ちょっと変わったタイトルの
のスタンプが、40個1セット100円で販売中です。
よろしければ、ラインのスタンプストアをのぞいてみてくださいませ。
http://line.me/S/sticker/1000271
以上、最後まで読んでくださってありがとうございました。
 |
『俯瞰（ふかん）図のコツ』 （Webコンテンツのイラストで重宝する俯瞰表現のコツ）
『小物撮影の便利モノ 1 』 （大理石の薄板の背景・DIYのフットスイッチ）
『小物撮影の便利モノ 2 』 （不織布の背景・フォトショップでの修正）
『自宅でYouTube動画を撮る』 （YouTube にUPしたリビングのインテリアなど）
『エヴァ・デザインを楽しむ 1 』 （極太明朝体の活かし方とデザイン・パターン）
『ピンタレストの雑貨ボード』 （画像SNS：ピンタレストのインテリア画像を楽しむ）
