28DesignWorks*28デザインワークス

Twitterを使い始めて4ヶ月ほど経ちました。
ハッキングなど色々ありましたが、使い方にもスッカリ慣れてきました。

「フォロワーさんも増えてきたしイメチェンして、もっとオリジナリティを出そう！」と思い、Twitter画面の背景画像（壁紙）を制作することにしました。
これまでは1度カーボン模様のテクスチャーを使ったものの、基本デフォルト状態で使ってきました。

制作の資料になるものを探したり、フリーで配布されてるTwitter用背景画像を見てみましたが、自作となるとidea*ideaさんの『Twitterの背景画像を自作する方法・・・』という記事がシンプルで良かったです。

今回制作する背景画像には、うちらしい画像という事でカーボン製品の画像と店名ロゴ・URLを表示することにしました。
シンプルにこの3点をレイアウトしてモダンっぽいのを目指します。

っで、ブラウザーのウィンドーサイズは人によってマチマチで難しいのですが、制作する背景画像の大きさはidea*ideaさんの記事どおり、2048×1707pixにしました。

一般的に大きなモニターサイズというと1280×1024pixや1024×768pixだと思いますが、このサイズだとプロが使っている大きなモニターもカバーでき、ほとんどのモニターをカバー出来ると思います。

でも、中にはノートパソコンなど、小さいモニターを使っている人もいるので、そのことも考えて素材のレイアウトを決めなくてはいけません。

Twitterからの決め事はファイルサイズが800k以下、ファイル形式がGIF・JPEG・PNGのいずれか、とあるだけです。
あまり高解像度な画像は注意が必要ですね。

Twitter画面の仕様はタイムラインと右側のサイドバーを足した横幅は765pixで、ウィンドーのセンター表示されます。
あと、上部にあるTwitterロゴとメニューの高さ方向の位置は一定です。

この位置を調べ、帯を上部に配置してメニューとタイムラインを区別するデザインも考えたのですが、今回使うカーボン製品の画像サイズは4000×3000pixで、1280pix幅以下に縮小するとシックリする事が解ったので、作り込まず、単純に配置するだけにしました。

カーボン製品の画像を1280pix幅にしておけば、よっぽど大きな画面で見ない限り、右側のサイドバーの内側で画像が切れてしまうことはないのでOKとしました。

一応、右側のサイドバーの辺りでカーボン画像が切れても見苦しくないよう、背景画像の右側と下側はサイドバーと同じ雰囲気の色にしました。

結構大きな画像を作ることになるので、カメラで撮った画像を使う場合は、ある程度考えて撮影しておくのが良さそうですね。