PSD

OGP画像作成を効率化

OGP画像の作成を効率化させるPSDフォーマット

OGP(Open Graph Protocol) とは、このWebページの説明をSNS上で表示させるために用意された仕様です。OGPを設定しておくとSNS上で「いいね!」やシェアをされた際にあらかじめ指定した画像、タイトル、ページの説明、URLを表示させることが可能です。OGPを設定していない場合は自動でページから情報を取得して表示されるので思い通りの表示にならないことが多いです。
下記画像はOGPを設定していない場合(上)としている場合(下)の表示の違いになります。

どちらがいいかは一目瞭然です。OGP設定前のサムネイルは小さいし中途半端な位置で切り抜かれてしまっています。「いいね!」や「シェア」を増やしたい場合は必ず設定しておきたいですね。今回は簡単にサイトにOGPの設定をできるようにPSDフォーマットを作成したのでご紹介させていただきます。

まずはPSDデータ(1.1MB)をダウンロードしてください。

DOWNLOAD

OGP画像作成〜OGP設定手順

OGP画像を作成する

(1)ダウンロードした「ogp.psd」を開いてレイヤーパネルで「ogp.png」をダブルクリックしてスマートオブジェクトを編集します。

(2)OGP画像をデザインします。(サイズは推奨サイズの1200px × 630pxです)
完成したら上書き保存をしてスマートオブジェクトを閉じてください。

(3)元のファイルに戻って左下の表示イメージを確認します。縮小されて文字などが見にくくなったりしていないか確認します。

(4)レイヤーパネルで「ogp.png」を選択して右クリック。「PNGとしてクイック書き出し」を選択して画像を書き出します。書き出した画像はサーバの任意の場所にアップロードします。

※そのままの画像ファイルだとサイズが大きいので下記サイトのようなファイルサイズ圧縮サービスを利用してファイルサイズを軽くすることをおすすめします。

TinyPNG https://tinypng.com/

htmlを編集する

(1)次にファイル右下のテキストレイヤー(metaタグ)を自分のサイトの情報に編集します。
下記コードには先ほどのサーバにアップしたOGP画像へのパスを入力します。
<meta property=”og:image” content=”http://www.□□□□□□/ogp.png”/>

詳しくはこちらのページで詳細が解説されています。
FacebookのOGP設定方法+参考記事6選|ferret

(2)編集し終えたらソースコードをコピーしてhtmlをテキストエディタなどで開き任意の場所へペーストします。

(3)編集したhtmlファイルをサーバにアップロードしてOGPの設定は完了です。

(4)下記ページでサイトのURLを入力するとプレビューが表示されるので正しく設定ができているか確認しましょう。
Sharing Debugger https://developers.facebook.com/tools/debug/sharing/

以上が「OGP画像作成を効率化」の解説でした。

favicon作成 効率化Tips

Photoshop CC 2015のアートボード機能を利用したfavicon(ファビコン)作成のTipsを紹介します。現在faviconの種類は膨大にありますが必要最低限ということで下記サイズを作成できるようにしています。

  • 16×16 px (IE)
  • 32×32 px (Chrome、Firefox、Safariなど)
  • 48×48 px (Windows デスクトップ)
  • 152×152 px (iOS・Androidのホーム画面)

favicon(ファビコン)作成 Tips

favicon.psdをダウンロード

DOWNLOAD

(1)ダウンロードした「favicon.psd」を開いてください。

(2)レイヤーパネルで最前面のレイヤー「favicon (edit)」のサムネイルをダブルクリックしてスマートオブジェクトを編集します。

(3) ロゴを配置するなどしてfaviconを作成します。

(4)完成したら上書き保存をして閉じます。この時点で全サイズのfaviconにデザインが反映されます。

(5)[ファイル]メニュー/[生成]/[画像アセット]を選択します。すると「favicon.psd」と同一階層に「favicon-assets」フォルダが作成され中に4種類のfaviconが書き出されます。

(5)favicon-16×16.png、favicon-32×32.png、favicon-48×48.pngの3つの画像を「.ico」形式に変換します。(複数の画像をひとつにまとめられる「マルチアイコン」にします。)
Photoshopでは変換することができないので下記サイトを利用します。

半透過マルチアイコンfavicon.icoを作ろう!

①画像ファイル3つを選択します。

②「アイコン作成」をクリック。

③背景色を選択。

④「アイコンをダウンロード」をクリックすると「favicon.ico」が保存されます。

(6)あとは「favicon.ico」、「apple-touch-icon.png」をルートディレクトリにアップロードしてHTML の <head>内に下記コードを記述すれば完成です。

<link rel="icon" href="/favicon.ico"> 
<link rel="apple-touch-icon" href="/apple-touch-icon.png"> 

ブラウザフレームのPSDを利用して簡単にファーストビューを確認するテクニック

今回はブラウザフレームのPSDを利用して簡単にファーストビューを確認するテクニックを紹介します。
(Photoshop CC 2014以降で利用できるテクニックです)
まずはじめに以下リンク先よりブラウザフレームのPSDファイルをダウンロードして下さい。
browser.psdのダウンロードは以下から。

①ファーストビューを確認したいWebサイトのデザインカンプを開きます。

②[ファイル] / [リンクを配置]を選択し先ほどダウンロードした「browser.psd」を配置します。

③配置する際、ドキュメントサイズに合わせて縮小されている可能性があるのでオプションバーを確認し、幅(W)と高さ(H)が100%になっていない場合は100%に変更します。

④配置された「browser.psd」は中心に配置された状態なのでドキュメントの上端に揃えます。選択範囲でドキュメント全体を選択しオプションバーから「上端揃え」をクリックします。

⑤[ウインドウ] / [属性]を選択し属性パネルを表示します。

⑥「browser.psd」は画面解像度ごとにレイヤーカンプを設定しているので属性パネルのプルダウンで切り替える事が出来ます。

⑦属性パネルのプルダウンから確認したい画面解像度を選択します。

⑧デザインカンプにブラウザフレームが表示されました。(IE11のブラウザフレームです)

ご活用いただけると幸いです。

PowerPoint,Keynote用背景

ppt_bg_thum

パワポの背景をフォトショで作成したので公開します。PSDもあるので適宜色味等変更して利用して下さい。一番上の調整レイヤーで色相をいじってもらえば色違いが作成できます。
パワポはフォントをメイリオにして背景を変える一手間で雰囲気がグッとよくなります。

PSDデータのダウンロードは以下から。

レンズフレアのPSDデータ配布(商用可)

top

レンズフレアをフォトショップデータでを配布します。

先日フォトショップでレンズフレアを入れるという記事を書きましたがもっと手っ取り早くレンズフレアを表現したい方の為に色質感調整済みのPSDデータをダウンロードできるように致しました。商用利用も、もちろん可です。
下記よりダウンロードしてください。