ぶっこ抜きエクステンション

デザインパーツを1クリックでぶっこ抜き

当ブログで公開しているぶっこ抜きスクリプトとぶっこ抜いてリンクスクリプトをパネルから利用できるようにエクステンション化させました。

機能を簡単に説明します。Webサイト制作の場合ヘッダーやナビゲーションなどを別ファイル化させたい場合があるかと思います。そのような時にレイヤーパネル上でレイヤーグループを選択してぶっこ抜きボタンをクリックするだけで別ファイルに抜き出すことができます。ぶっこ抜いてリンクの方は別ファイルに抜き出し、さらに元のファイルとリンクした状態で保存することができます。

動作確認：Mac OS ｜Photoshop CC 2014,CC 2015

ぶっこ抜きエクステンションのインストール方法について

ぶっこ抜きエクステンションをダウンロード

DOWNLOAD

  1. ダウンロードしたzipファイルを解凍します。
  2. 解凍されたフォルダ「Bukkonuki」を下記ディレクトリに移動します。
    【Mac OS】 Library/Application Support/Adobe/CEP/extensions
    ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。
  3. Photoshopを再起動します。
  4. メニュー[ウインドウ]/[エクステンション]/[ぶっこ抜き]を選択します。

    以上で「ぶっこ抜き」パネルが表示されて利用できる状態になります。

今後も新しいエクステンションの制作を計画しているのでお楽しみに！

CC 2014まで使っていたエクステンションをCC 2015でも使う裏技

dearps
PhotoshopにエクステンションをインストールするためにはAdobe Extension Managerを使う必要がありました。
しかしExtension Managerはすでに開発を終了していてPhotoshop CC 2015ユーザーはAdobe Add-onsというサイトから公開されているエクステンションをインストールしなければならなくなりました。
エクステンションの作者がAdobe Add-onsに公開していない場合使用することができなくなってしまいました。

しかし過去のエクステンションファイル「.zxp」を使用してCC 2015でもエクステンションを動かすことのできる方法があります。

今回は「Font Awesome PS」というエクステンションのインストールを例に手順を解説します。
Font Awesome PSはFont Awesomeのアイコンをシェイプとして利用できるエクステンションです。このエクステンションも大変便利ですが本日時点ではAdobe Add-onsには公開されていません。

①まずはじめにFont Awesome PSのサイトからエクステンションのデータをダウンロードします。

②ダウンロードしたファイルを解凍すると「FontAwesomePS_1.1.0.zxp」というファイルがあるのでStuffIt Expanderなどの解凍アプリでさらに解凍します。(自分の環境ではMac標準の解凍アプリではエラーになってしまったのでStuffIt Expanderを使用しました。)

③解凍できたらそのフォルダを丸ごと下記ディレクトリに移動します。
【Windows】 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
【Mac OS】 Library/Application Support/Adobe/CEP/extensions
Mac OSのライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。

④Photoshopを再起動します。

⑤メニュー[ウインドウ]/[エクステンション]/[Font Awesome PS]を選択します。 これで「Font Awesome PS」パネルが表示され使用できる状態になります。

今回紹介した方法はあくまで裏技でありAdobeはAdobe Add-onsでのインストールを推奨しているのでこの方法は自己責任でお試しください。

位置を変えずに行揃えを変更｜エクステンション

テキストの行揃えを変更すると通常位置が変更されてしまいますが今回紹介するエクステンションを使用すれば位置を変更することなく行揃えを変更することができます。

動作確認：
Mac OS ｜Photoshop CC 2014〜
Windows｜Photoshop CC 2015

行揃えエクステンションのインストール方法について

行揃えエクステンションをダウンロード

DOWNLOAD

  1. ダウンロードしたzipファイルを解凍します。
  2. 解凍されたフォルダ「textalign」を下記ディレクトリに移動します。
    【Windows】 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
    【Mac OS】 Library/Application Support/Adobe/CEP/extensions

    ライブラリ(Library)は通常表示されないのでaltキーを押しながらFinderメニュー/移動を開くと下記画像のようにライブラリが表示されます。
  3. Photoshopを再起動します。
  4. メニュー[ウインドウ]/[エクステンション]/[行揃え｜位置固定]を選択します。
    以上で「行揃え｜位置固定」パネルが表示されて利用できる状態になります。

Bootstrap × Photoshop 「Bootcomp」エクステンション

kv

Bootstrapを使用するWebサイトのカンプ制作を高速化させるエクステンンション

Photoshop CC 2015に「Bootcomp」エクステンションを導入すればBootstrapの使用を前提としたサイトのデザインカンプ制作にかける時間を大幅に短縮することができます。
特設サイトを用意したのでそちらをご覧ください。

Bootcomp

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の設定は完了です。

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

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

縦長Webページをデザインする際に役立つPhotoshopの小技3つ

近年スマートフォンの普及によりシングルページの案件が増えて縦長のWebページをデザインすることが多くなりました。カンバスサイズの高さが5,000pxを超えることも多々あります。そうなると作業をする上で余計に手間がかかってしまうことがあります。それを少しでも解消できる小技を今回紹介させていただきます。

1.画像配置の位置指定

通常はPhotoshopで「埋め込みを配置」や「リンクを配置」をすると表示領域の中心に配置されます。

しかし狙ったところに配置したい場合があります。そういうときはカンバス上の配置したい位置に選択範囲を作成して「埋め込みを配置」や「リンクを配置」をすると選択範囲の中心に画像を配置することができます。

2.快適に表示位置を変更する

縦長のWebページをデザインしているときページ上部から下部に表示を移動したい場合、拡大縮小やスクロールをするなど手間がかかります。そんな時は「H」キーをクリックしたままカンバス上をドラッグしてみてください。快適に表示を移動することができます。

3.レイヤーを任意の場所に瞬間移動

パーツを複製して使い回すことがあると思います。複製元のパーツがページの上部にあり使用したい位置がページ下部だとしたら移動に手間がかかります。そのようなときは複製したパーツをレイヤーパネルで選択した状態で、カンバス上の移動したい位置に選択範囲を作成して[レイヤーメニュー]/[レイヤーを選択範囲に整列]/[垂直方向中央]を選択して移動します。

ちょっとした小技を積み重ねることによって大きく作業効率をあげることにつながります。今後も小技を探求していきたいと思います。

Bootcomp 2.0 新機能 「Place img」
大量の画像を1クリックで配置する秘技

▲ デモムービーはこちら

1.シェイプを作成

まず長方形ツールで画像を配置したいサイズでシェイプを作成します。

2.シェイプをIMG-BOXに変換

レイヤーパネルでシェイプを選択した状態でBootcompのIMG−BOXボタン（下図赤枠）をクリック。

画像を選択するダイアログが表示されますがここでは「キャンセル」をクリックします。

ダミー画像が配置されました。

同じような工程を繰り返しBootcompを使ってデザインカンプを仕上げていきます。

3.IMG-BOX内のレイヤーに連番名をつける

IMG-BOX内のダミー画像のレイヤー名にはIMG-BOXのサイズが記載されています。

それを「img1」,「img2」,「img3」…と連番名に変更していきます。

4.配置する画像を用意

PSDデータの保存場所と同じ場所に「img」フォルダを作成して「img1.jpg」,「img2.jpg」,「img3.jpg」…と連番名をつけた画像ファイルを置きます。

あとはBootcompの「Place img」ボタンをクリックするだけ。

はい出来上がり！

Place imgの“いいところ”

Place imgは単に画像を自動配置するだけではなく配置するIMG-BOXのサイズ、形状に合わせて画像を最適なサイズにリサイズしてくれます。

参考に下記のようなサイズも形もバラバラなIMG-BOXに画像を配置してみます。

この写真をつかいます。

Place img!

わかりやすくどのようにリサイズされたか透過させてみました。表示部分がちょうど埋まるようにリサイズされています。

Bootcomp 2.0

いかがでしたでしょうか？

Bootcompをリリースした当初は「Bootstrapの利用を前提としたデザインカンプ制作を効率化させる」というコンセプトで作ったものだったのですが現バージョンからはBootstrap案件でなくてもWebサイト制作、アプリUI制作など さまざまなシーンで使っていただけるエクステンションに育ったかなと思っています。

Bootcompがみなさまの作業効率化の一役になれれば幸いです。

Bootcomp 2.0 特設ページ

グループ化&グループ名を自動で変更するスクリプト

通常レイヤーグループを作成すると「グループ 1」、「グループ 2」のようにグループ名が自動的に設定されてしまいます。

これを放置するとレイヤー管理が煩雑になってしまいます。

今回紹介するスクリプトを使用すればレイヤーグループを作成するために選択したレイヤーの一番上のレイヤー名をグループ名として自動で設定することができます。

スクリプトの利用手順について

グループ化&グループ名を変更スクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「Dearps_グループ化&グループ名を変更.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動してください。

(3)長方形ツールや文字ツールなどで複数レイヤーを作成します。

(4) レイヤーパネルで作成したレイヤーを複数選択します。

(5) [ファイル] / [スクリプト]から「Dearps_グループ化&グループ名を変更」を選択します。
するとグループ化されて自動でグループ名も変更されます。

このスクリプトに対してショートカット「command」+「G」を設定してグループ化のデフォルトとして使用することをおすすめします。

シェイプの縦横比を黄金比に変換するスクリプト

シェイプの高さを自動で調整して縦横比を黄金比にするスクリプトを作成しました。

スクリプトの利用手順について

シェイプの縦横比を黄金比に変更スクリプトをダウンロード

DOWNLOAD

(1) ダウンロードしたzipファイルを解凍して「Dearps_シェイプの縦横比を黄金比に変換.jsx」をPhotoshopのスクリプトフォルダに移動します。
Windows: C:¥Program Files¥Adobe¥Adobe Photoshop□¥プリセット¥スクリプト
MacOS X: /アプリケーション/Adobe Photoshop□/Presets/Scripts

(2)Photoshopを再起動してください。

(3)長方形ツールでシェイプを作成します。

(4) [ファイル] / [スクリプト]から「Dearps_シェイプの縦横比を黄金比に変換」を選択します。

以上でシェイプの縦横比が黄金比に変更されます。

Bootcompと合わせて使えばさらに効率アップ！

Photoshop CC 2017がリリース

Photoshop CC 2017がリリースされました。

新機能につきましては下記リンク先にてご確認ください。
新機能の概要 | Photoshop CC 2017 (Adobe 公式サイト)

Photoshop CC 2017にアップデートする際にそのままだと以前のバージョンが削除されてしまうので注意が必要です。

以前のバージョンを残してPhotoshop CC 2017にアップデートする方法を以下に解説します。

(1) まずはCreative Cloudデスクトップアプリケーションを起動して「Photoshop CC (2017)」のアップデートをクリックします。もし「Photoshop CC (2017)」が表示されない場合はパソコンを再起動します。

(2)「詳細オプション」をクリック。

(3)「以前のバージョンを削除」のチェックボックスをはずす。

(4)「アップデート」ボタンをクリックしてアップデートを開始します。

以上で以前のバージョンを残したままPhotoshop CC 2017がアップデートされます。

BootcompもPhotoshop CC 2017に対応しました！