Photoshop CC 2015 エクステンション

Bootstrap × Photoshop

Bootcomp

10倍ラクするデザインカンプ制作

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

もちろんBootstrap以外の案件でも強力な力を発揮するエクセステンションなのでぜひお試しください。

[ Photoshop CC 2017 対応 ]

ダウンロードする

フォーマット作成

Bootstrapのデザインカンプを制作スタートする際に、まずグリットレイアウトのガイドを作成するなど事前準備に時間がかかっていました。 Bootcompを使えば1クリックでデザインに必要なフォーマットが瞬時に作成されるのですぐにデザイン作業をスタートさせることができます。

画像挿入もワンストップ

画像サイズのシェイプを作成してクリックするだけで最適な方法で画像挿入からレイアウトまでワンストップで行うことができます。挿入する画像がまだ未定の場合は画像挿入をキャンセルすれば自動でダミー画像が挿入されます。

コンポーネントを挿入

見出しやボタンなど頻繁に使用するコンポーネントを1クリックで挿入することができます。 これによりワイヤーフレームなどもあっという間に作成することがでます。

こちらの動画で使用しているバージョンはBootstrap 1.0です。Bootstrap 2.0のアップデート内容と合わせてご覧ください。

機能解説

Bootcompは無駄を省いたシンプルな機能となっています。しかしその機能はデザインカンプの制作作業を強力にバックアップします。ここではBootcompの機能をかんたんに解説します。

フォーマット作成

Boorstrapの各ブレイクポイント(xs,sm,md,lg)ごとに最適なフォーマットを1クリックで作成することができます。

選択範囲を
シェイプに変換

選択範囲を作成してボタンをクリックすると選択範囲がシェイプに変換されます。

IMG-BOX
(画像挿入)

シェイプを作成して1クリックするだけで最適な方法で画像挿入からレイアウトまで1ステップで行うことができます。

パーツを複製

パーツを選択した状態でボタンをクリックすれば指定した数だけガターサイズ分間を空けて複製することができます。

Place img
(画像挿入)

大量の画像を1クリックで自動配置します。挿入エリアに合わせて画像を自動でリサイズするので驚くほど手間が省けます。
使用方法についてはDearpsの記事にて解説しています。

マージン移動

右方向と下方向にあらかじめ用意されたピクセル数を1クリックで移動することができます。

文章挿入

見出しや文章を1クリックで挿入することができます。Bootcompの行揃え機能は標準機能とは違い位置を保持したまま行揃えを変更することができます。

ボタン挿入

Bootstrapの標準コンポーネントのボタン4サイズを1クリックで挿入することができます。

ダミーテキスト

ダミーテキストをクリップボードにコピーすることができます。10文字と100文字があります。

グリッドガイド表示

グリッドガイド(薄赤色の帯表示)の表示・非表示を切り替えます。

導入方法

  1. ダウンロードしたBootcompのzipファイルを解凍します。
  2. 解凍されたフォルダ内のBootcomp.cshをダブルクリックしてPhotoshopに読み込みます。
  3. 次に同じ階層にあるBootcompフォルダを下記ディレクトリに移動します。
    【Windows】 C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
    【Mac OS】 Library/Application Support/Adobe/CEP/extensions
    CEPフォルダがない場合はCEPフォルダとextensionsフォルダを作成して試してみてください。
  4. Photoshopを再起動します。
  5. メニュー[ウインドウ]/[エクステンション]/[Bootcomp]を選択します。 以上で「Bootcomp」が表示され使用できる状態になります。

※不具合の原因になるため「自動ネストレイヤー」のチェックボックスは必ず外してご利用ください。アートボードツールを選択した状態で表示されるオプションバーのをクリック。自動ネストレイヤーのチェックをはずします。

使用方法

Bootcompの使用方法はとてもかんたんです。使用方法を2分の動画にまとめました。

こちらの動画で使用しているバージョンはBootstrap 1.0です。Bootstrap 2.0のアップデート内容と合わせてご覧ください。

Bootcomp 2.0 アップデート内容

Bootcomp 2.0でアップデートされた新機能の解説ムービーです。

ダウンロード

Download Bootcomp 2.1 

変更履歴:
Photoshop CC 2017に対応(2016.11.3)
Bootcomp 2.0を公開(2016.8.8)
Photoshop CC 2015.5に対応 (2016.8.2)
XSサイズのフォーマットをiPhone 6のサイズに変更 (2016.6.13)

動作確認:Mac OS X Yosemite,Windows 7 共にPhotoshop CC 2015.5

万が一このページで公開されている機能を使用したことによって不具合が生じても制作者は一切責任を負いません。 個人利用、商用利用問わず自由に使用することができますが、著作権はDearpsに帰属しています。

過去のバージョン:
Download Bootcomp 2.0
Download Bootcomp 1.2
Download Bootcomp 1.1
Download Bootcomp 1.0

三浦 将

作者:
三浦 将 (Derario Creative)
Twitter

Dearps|Photoshop Tips Blog

共著:
Webデザインの現場ですぐに役立つ Photoshop仕事術
10倍ラクするPhotoshop仕事術

PAGE TOP