Photoshopで1クリックの時代がきた!Webページ用のグリッドも簡単に作成できる便利すぎる無料の機能拡張 -Bootcomp 2.0

Webページやスマホアプリのデザインカンプを作成する時に、大幅な時短になる便利な機能がたくさん詰まったPhotoshop CC2015.5対応の機能拡張を紹介します。
Bootstrapでつくる時はもちろん、それ以外のデザイン作業でも強力な機能を発揮します。

Web制作に携わるすべての人が、入れておいて損はない機能拡張です。

サイトのキャプチャ

Bootcomp

Bootcompの特徴

先日当ブログで紹介したBootcompが昨日、CC2015.5にも対応してアップデートされました。1.0でも便利でしたが、2.0で更に便利になっています!
OS X, Win両対応で、日本語にも完全対応の無料の機能拡張です。

サイトのキャプチャ

Bootcomp

Bootcompは日本人作者様が、日本のWeb制作者向けにつくられた安心の日本語対応です。

サイトのキャプチャ

レイアウトをはじめる際のグリッドやガイドは1クリックで作成でき、基本的なコンポーネントも1クリックで利用できます。もちろん、オリジナルの画像やテキストなども自由に配置することができます。

実際に1クリックで作成したグリッド・ガイドは、下記のようになります。
Boorstrapの各ブレイクポイント(xs,sm,md,lg)ごとに最適なフォーマットを1クリックで作成することができます。

Photoshopのキャプチャ

幅930pxのグリッドを生成

Bootcompのインストール

Bootcompのダウンロード

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

サイトのキャプチャ

ダウンロード -Bootcomp

Bootcompのインストール

  1. ダウンロードした「bootcomp-2_0.zip」を解凍します。
  2. 「bootcomp-2_0」フォルダの「Bootcomp.csh」をダブルクリック。
    ※テキストで開いてしまう場合は、右クリックしてPhotoshopで開きます。
  3. 「bootcomp-2_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クリックで利用できます。

2.0の新機能として、選択したコンポーネントを指定数複製できる「パーツを複製」、大量の画像をエリアに合わせて自動でリサイズして配置できる「画像挿入」、選択範囲をシェイプに変換できる「選択範囲をシェイプに変換」など、さらに便利になりました。

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

Bootcomp デモ

2.0の新機能の動画もどうぞ!
要素を繰り返すのとか、めちゃ簡単です。

Bootcomp 2.0 デモ

top of page

©2017 coliss