はじめてでもできる!Twitter壁紙作成入門
Twitterのページ全面を使用したパターンは、Webページの背景画像と同じだ。ひとつの基本パターンを作成して水平、垂直もしくは縦横に繰り返し表示して意図したイメージを表現する。ブラウザのウィンドウサイズにあまり影響されないので、表現の幅も広い。ここでは、MdNのデザイン素材サイト「ナノハナ」を例に、タイルパターンの最も簡単な作成方法を解説する。
(※画像処理はAdobe Photoshop CS4を使用)
まず最初に壁紙の素材を準備する。ペイントソフトで絵を描く、デジカメで撮った写真を素材にする、素材集から選ぶ等、さまざまな方法があるので、自由に選択してほしい。本記事では、「ナノハナ」のイラスト素材から選ぶ【1】。紹介するサンプルは、手描きのイラストをコラージュして壁紙を作成する【2】。
【1】
【2】
背景に繰り返し表示するタイルパターンの大きさを決める。チェックパターンなどの模様なら小さな画像になるが、今回はイラストを組み合わせるので、少々大きめのサイズに設定(400×400pxの正方形にした)【3】。パターンのつなぎ目を確認しながらコラージュできるように、同サイズの領域を左右上下に広げる。[カンバスサイズ]で幅と高さに「1200」を入力して[OK]をクリックする【4】。これで、基本のタイルパターンが9つ並ぶ。[定規]を表示して、(基本パターンの境界がわかるように)ガイドを設定しておく【5】。
【3】
【4】
【5】
用意した素材を中央のパターン領域(400×400px)にコラージュしていく【6-1】。原寸表示にして配置作業を進める。パターンがスムーズにつながるように、素材の位置を調整する【6-2】。回転ツールなどを使って、不規則なパターンにすると賑やかで楽しいイメージになる。
【6-1】
【6-2】
素材のコラージュが完了したら、タイルパターンを完成させる。1つのパターンにまとめるテクニックは、いくつか紹介されているが、ここでは最も単純な方法で進める。まず、画像を4つ複製し、それぞれ400×400pxのサイズに切り取っていく(縮小ではないので注意してほしい)【7】。[カンバスサイズ]の[基準位置]を、中央、上、右、下、左の順にそれぞれ切り取る【8】。そして、中央のパターン画像に上下左右4つの画像をコピー&ペーストし、(レイヤーの描画モードを)[乗算]に設定していけば完成だ【9】。
【7】
【8】
【9】
最後は、書き出しと壁紙の設定である。書き出すときは、GIFもしくは、JPEG、PNGのいずれかを選択するが、データサイズに注意しなければならない(壁紙は800KB以内)【10】。書き出しが完了したら、Twitterにログインして、メニューバーの[設定]をクリック。[デザイン]タブをクリックして、背景画像を変更する。パターン画像のファイルを選択したら、忘れずに[背景画像をタイルする]をチェックしておく【11】。[保存する]をクリックして、完成である。ブラウザのウィンドウを広げたり、狭めて見栄えをチェックしておこう【12】。
【10】
【11】
【12】
紹介したサンプルのように、独自のイラストや写真を使って作成すればオリジナリティのあるデザインを表現できる。このページのサンプルで使用したイラストは、下記のサイトから入手できる。
MdNのかわいいイラスト素材ナノハナ
http://www.sozai-nanohana.jp/
また、ネットで公開されている壁紙を使う方法もある。以下に、ブラウザ上で編集できるパターン作成ツールを記載したので参考にしてほしい。
Tiled backgrounds designer
http://www.bgpatterns.com/
PatternCooler
http://www.patterncooler.com/index.php
Background Image Maker
http://lab.rails2u.com/bgmaker/
Dotted Background Generator
http://www.pixelknete.de/dotter/
PatternWall
http://patternwall.com/
Repper
http://repper.studioludens.com/
(※画像処理はAdobe Photoshop CS4を使用)
壁紙の素材を準備する
まず最初に壁紙の素材を準備する。ペイントソフトで絵を描く、デジカメで撮った写真を素材にする、素材集から選ぶ等、さまざまな方法があるので、自由に選択してほしい。本記事では、「ナノハナ」のイラスト素材から選ぶ【1】。紹介するサンプルは、手描きのイラストをコラージュして壁紙を作成する【2】。
【1】
【2】
タイルパターンの大きさを決める
背景に繰り返し表示するタイルパターンの大きさを決める。チェックパターンなどの模様なら小さな画像になるが、今回はイラストを組み合わせるので、少々大きめのサイズに設定(400×400pxの正方形にした)【3】。パターンのつなぎ目を確認しながらコラージュできるように、同サイズの領域を左右上下に広げる。[カンバスサイズ]で幅と高さに「1200」を入力して[OK]をクリックする【4】。これで、基本のタイルパターンが9つ並ぶ。[定規]を表示して、(基本パターンの境界がわかるように)ガイドを設定しておく【5】。
【3】
【4】
【5】
素材をレイアウトする
用意した素材を中央のパターン領域(400×400px)にコラージュしていく【6-1】。原寸表示にして配置作業を進める。パターンがスムーズにつながるように、素材の位置を調整する【6-2】。回転ツールなどを使って、不規則なパターンにすると賑やかで楽しいイメージになる。
【6-1】
【6-2】
タイルパターンを完成させる
素材のコラージュが完了したら、タイルパターンを完成させる。1つのパターンにまとめるテクニックは、いくつか紹介されているが、ここでは最も単純な方法で進める。まず、画像を4つ複製し、それぞれ400×400pxのサイズに切り取っていく(縮小ではないので注意してほしい)【7】。[カンバスサイズ]の[基準位置]を、中央、上、右、下、左の順にそれぞれ切り取る【8】。そして、中央のパターン画像に上下左右4つの画像をコピー&ペーストし、(レイヤーの描画モードを)[乗算]に設定していけば完成だ【9】。
【7】
【8】
【9】
画像を書き出して、壁紙として設定する
最後は、書き出しと壁紙の設定である。書き出すときは、GIFもしくは、JPEG、PNGのいずれかを選択するが、データサイズに注意しなければならない(壁紙は800KB以内)【10】。書き出しが完了したら、Twitterにログインして、メニューバーの[設定]をクリック。[デザイン]タブをクリックして、背景画像を変更する。パターン画像のファイルを選択したら、忘れずに[背景画像をタイルする]をチェックしておく【11】。[保存する]をクリックして、完成である。ブラウザのウィンドウを広げたり、狭めて見栄えをチェックしておこう【12】。
【10】
【11】
【12】
紹介したサンプルのように、独自のイラストや写真を使って作成すればオリジナリティのあるデザインを表現できる。このページのサンプルで使用したイラストは、下記のサイトから入手できる。
MdNのかわいいイラスト素材ナノハナ
http://www.sozai-nanohana.jp/
また、ネットで公開されている壁紙を使う方法もある。以下に、ブラウザ上で編集できるパターン作成ツールを記載したので参考にしてほしい。
Tiled backgrounds designer
http://www.bgpatterns.com/
PatternCooler
http://www.patterncooler.com/index.php
Background Image Maker
http://lab.rails2u.com/bgmaker/
Dotted Background Generator
http://www.pixelknete.de/dotter/
PatternWall
http://patternwall.com/
Repper
http://repper.studioludens.com/