N-takデザインブログ

WEBで培った作品や技術を公開しています。

便利なテンプレート。これ一個あればフェイスブックもtwitterもyoutubeのカバー写真がおしゃれに!

今日はphotoshopのテンプレートのご紹介です。

 

きっかけはお客様からのご相談でした。

で、早速作ってみたのがこちらです。

f:id:r4m0khksticiibypvp4k:20140120144533p:plain

 

 

カバー写真とアイコンが一体になっています。

こうすることで、ちょっとした差をつけることができますね。

 

引用元

こいつは便利!FacebookやTwitterの最新のレイアウト用のPSD素材がすぐに利用できるPhotoshopの機能拡張 -Social Kit | コリス

 

無料で使えますので嬉しい限りです。

テンプレートがダウンロードできるサイトはこちら

Social Kit - Free Photoshop plugin with social templates

f:id:r4m0khksticiibypvp4k:20140120144849p:plain

 

 

 

 

ここからがリファレンスです。

(1)facebook

 ここで注意したいのが、このテンプレは『ファンページ』であるということです。個人のカバーやアバターのパターンはまた別途異なります。個人のページが欲しい方はこちらから→

Facebookのタイムラインを作る際に便利なPhotoshopテンプレート:phpspot開発日誌

  また、photoshopは必須です。

 

 ①ダウンロードすると『socialkit-1.0.0.exe』の実行ファイルが入手されます。

 ②クリックするとインストール画面が立ち上がるのでインストールしてください。

 

 ③インストールが完了したら、Photoshopを立ち上げます。

 

 ④ウィンドウでエクステンションの中に『socialkit』というコマンドがでていればインストールは成功しています。

 

f:id:r4m0khksticiibypvp4k:20140120150353p:plain

 ⑤次にこのキットをクリックすると以下の画面が表示されますので、facebookを押しプルダウンメニューの中から『Profile』を選択します。

f:id:r4m0khksticiibypvp4k:20140120150557p:plain

 ⑥テンプレートが立ち上がります。

f:id:r4m0khksticiibypvp4k:20140120150740p:plain

 ⑦デザインしたいようにしてください。

 

 

 

ここでポイント
実はこのままスライスしてもfacebookアバター(アイコン)部の画像はアップロードできません。180px以上ないとアップロードできません、とfacebookに言われてしまいます。なので画像解像度を1.125倍する必要があります。

 

 ⑧ 後は、スライスしていきます。

  カバー:W:958px  H:353px

  アバター:W:180px H:180px

 

 ⑨ご自身のフェイスブックにアップロードしてください。

 

完成例

f:id:r4m0khksticiibypvp4k:20140120144533p:plain

 

 

 

 如何でしたか?まだ、twetterなどは使っていないのでなんともですが要領は同じかと思います。

 

お読みいただきありがとうございました。

 

 追記

スマホからフェイスブックを閲覧した場合は、一体デザインになりません

(人●´ω`●)ごめんしゃい