便利すぎ!Bootstrapベースのデザインカンプ作成がびっくりするほど簡単にできてしまうPhotoshopの機能拡張 -Bootcomp

Bootstrapベースのデザインカンプを作成する時にめちゃくちゃ便利で、大幅な時短にもなるPhotoshop CC2015対応の機能拡張を紹介します。

OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。

サイトのキャプチャ

Bootcomp

Bootcompの特徴

Bootcompは日本人作者様がつくられた安心の日本語対応で、無料で利用できます。

サイトのキャプチャ

Bootstrapのグリッドや基本的なコンポーネントは1クリックで利用でき、オリジナルの画像やテキストなども自由に配置することができます。

ちなみに、下記の状態はボタンを1クリックしただけです。

Photoshopのキャプチャ

幅930pxのグリッドを生成

あとは、ここから画像や見出しやボタンなどを1クリックで配置できます。ダミー画像やダミーテキストにも対応しています。

Bootcompのインストール

Bootcompのダウンロード

ダウンロードはページの下の方「Download」からです。

サイトのキャプチャ

ダウンロード -Bootcomp

Bootcompのインストール

  1. ダウンロードした「bootcomp-1_0.zip」を解凍します。
  2. 「bootcomp-1_0」フォルダの「Bootcomp.csh」をダブルクリック。
  3. 「bootcomp-1_0」フォルダの「Bootcomp」フォルダを移動します。
    OS X: \ライブラリ\Application Support\Adobe\CEP\extensions
    Windows: C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions
  4. Photoshopを再起動。
  5. Photoshopのメニュー「ウインドウ - エクステンション」から「Bootcomp」を起動します。
Photoshopのキャプチャ

Bootcompを起動したとこ

Bootcompの使い方

使い方も簡単で、Bootcompのパネルのボタンをクリックしていくだけで、どんどん作成することができます。

サイトのキャプチャ

各ブレイクポイント(xs,sm,md,lg)に対応したグリッドがすべて1クリックで作成でき、オリジナルの画像やテキスト、ダミーの画像やテキスト、ボタンなどのエレメントも簡単に1クリックで利用できます。

使い方をまとめた動画も公開されています。

Bootcomp デモ

top of page

©2017 coliss