Google+アカウントカバー+アイコン用 FireworksPNGテンプレート

Google+のアカウントカバー+アイコンをつながっているような画像にするのに便利なFireworksPNGテンプレートです。
このテンプレートファイルを使って画像を編集し、書き出すだけで、アカウントカバーとアイコンがつながっているような画像を作る事ができます。
つながっているような画像でなくても、テンプレートとして使用する事が可能です。
フォントはメイリオを使っています。説明書きが書かれているだけですので、フォントが置き換えられても特に問題はありません。
Fireworksで開いて編集する事を前提に作られたファイルですが、PNGファイルですので、レイヤーやスライスは保持されませんが、ほかのグラフィック編集ソフトでも開く事はできると思います。
商用・非商用問わずご自由ににお使いください。報告も不要です。

  • Adobe Fireworks CS5
  • ダウンロード


    ファイルを開く

    googleplus_template.png
    423 KB
    アイコンをクリックするとダウンロードが始まります

    2012/04/14 11:50

    • ガイドレイヤーのスクリーンショットのアルファを調整
    • 説明レイヤーの数字間違いを修正(icon 150*150px → icon 250*250px)

    使い方

    レイヤー

    4つのレイヤーがあります

    Webレイヤースライスが配置されています
    説明文字などを含む説明が配置されています
    ガイド書き出される画像のサイズを調整するためのガイド用オブジェクトが配置されています
    イメージ配置このレイヤーに写真やイラストなど、カバー画像やアイコンに使いたいオブジェクトを配置して調整します

    作成の流れ

    1. 説明レイヤーがとりあえず邪魔なので非表示にします。
    2. イメージ配置レイヤーに、カバー画像やアイコンに使いたい写真やイラストなどの画像を配置します。ロゴやコピーなどを入れてもいいかもしれません。
    3. ガイドレイヤーを頼りに、いい感じに画像が配置できたら、ガイドレイヤーを非表示にし、Webレイヤー(スライス)を表示します。
    4. Webレイヤー(スライス)とイメージ配置レイヤーのオブジェクトを複製して空いている別のところに配置します。場所が無い場合はページ機能やファイルの複製を使って複製するといいでしょう。複製をしたら、片方はアイコンスライスを消してカバースライスとイメージ配置レイヤーのオブジェクトのみに、もう片方はカバースライスを消してアイコンスライスとイメージ配置レイヤーのオブジェクトのみにします。
    5. スライスを書き出します。スライスの書き出し設定はPNG 24に設定してあります。
    6. これで画像が完成です。設定したいGoogle+アカウントのプロフィールページに画像を登録してください。

    作成の流れ 詳細

    3


    ガイドに合わせて使いたい画像を配置します。

    4-1


    ガイドレイヤーを非表示にしてスライスレイヤーを表示。

    4-2


    使いたい画像と一緒にスライスをコピーして、カバー画像とアイコン画像をそれぞれ書き出します。

    5



    こんな感じにカバー画像とアイコン画像が書き出されます