南アフリカワールドカップのロゴで使用されていたフォントはSaf Free Fontでした。「Saf」はSouth Africaの略でしょうか？僕はカチッとしたフォントが好きですが、このフォントはいい意味で荒々しくてアフリカって感じがしますね。読みやすいのでとても良い書体だと思います。

Download: http://fontfabric.com/saf-free-font/

たとえば「ちぇるくま」はIKEAのサイトをモチーフに作られています。

そして「つぶくま」は「TED×Tokyo」をベースにしています。ほとんど面影は無いですけどバナーを置き方は参考にしました。

パクリとモチーフの境界線はどのへんまで許されるかってのは微妙です。ただ、そっくりそのまま使うってのは作ってる側としても気がひけるもんでしょう。0から作り出すよりも「こんな感じのページ」ってハッキリ言われた方がイメージが共有できるのは確かですが、そのサイトのどこを使うのか。色なのか、配置なのか、ロゴの形なのか。

ベースにオリジナルをいかに上手く混ぜ合せるかが鍵ですかね。まったく違う物を一緒に混ぜてもうまく溶け込まないもんです。ただ作ってる最中はそれに気づかないことが多かったりします。翌日見ると「なんじゃこれは！？」って思うわけですよ、本当に。

何も無いところからページを生み出すことは簡単ではありません。しかし古紙が映った1枚の写真さえあればホームページのメニューを作る事はそれほど難しい作業ではありません。

この写真を使ってメニューを作ってみましょう。しかし、この写真のままでは使えません。クイック選択ツールで古紙の部分だけを切り取りましょう。

切り取った古紙にドロップシャドウをつけると立体的に見えます。あまり影を強くすると不自然に浮き上がってしまうので注意してください。

次にメニュー部分の台紙を作ります。上の端をそのままコピーすると切り口が同じになるので下の端を「多角形選択ツール」で選びましょう。

選択できたら右クリックで「選択範囲をコピーしたレイヤー」を選びましょう。これで囲んだ部分がレイヤーとした新たに作成されました。「選択範囲をカットしたレイヤー」を選んでしまうと元の画像が切り取られてしまうので注意してください。

移動ツールで任意の場所まで持っていきましょう。細かい場所は後で調整するので適当な場所で構いません。

下端のボロボロになった部分を出したいので180°回転させましょう。

最後にレイヤーの順番を入れ替えて台紙の下にメニューが表示されるように設定します。これで一つの手順が終わりです。

あとは同じ行程を繰り返して、上から文字を打ち込めば終わりです。お疲れ様でした！