こんなPhotoshopエクステンションが欲しかった!Bootcompが便利すぎる

2016年05月12日
follow us in feedly

Bootstrap便利ですね。

レスポンシブWEBデザインでサイト制作を行う場合には、このCSSフレームワークをコアで使っています。

今はインブラウザデザインという言葉があるように、コーディングしながらブラウザ上でデザインした方が効率が良い場面も多く、デザインをコンポーネントとしてて提供してくれているCSSフレームワークは大変便利です。

しかし、クライアントにデザインを確認してもらいながら制作を進めるWEBデザイナーにとっては、デザインカンプを無くして、インブラウザデザインだけで対応することはなかなか難しく、工夫が必要になります。

これまでは複数をツールを組み合わせて対応していたのですが、Bootstrapをベースにしたデザインカンプ制作に便利なオール・イン・ワンのPhotoshop拡張機能が出ました。

Bootcomp

Bootcomp

PhotoshopCC 2015のエクステンションです。

説明にはこう書かれています。

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

いいですね。

インストール手順

次の公式サイトからBootcompのzipファイルをダウンロードします。

 Bootcomp

download

ダウンロードしたzipファイルを解凍したら、フォルダ内の「Bootcomp.csh」をダブルクリックします。

csh

Photoshopが自動で起動しますが気にせず次へ。

photoshop起動

先ほど解凍したフォルダに「Bootcomp」フォルダがあるので、Mac OSは Library/Application Support/Adobe/CEP/extensions へ。Windowsなら C:\Program Files\Adobe\Adobe Photoshop CC 2015\Required\CEP\extensions へ移動します。

finder

先ほど自動起動したPhotoshopを再起動して、ウインドウのエクステンションからBootcompを選択します。

ex

機能紹介

Bootstrapのグリッドシステムに対応したガイドを含めたフォーマット作成から見出し・ボタン作成&挿入がワンクリックで可能です。

kinou

詳しくは使い方を簡単にまとめた次の動画が分かりやすいです。

こんな便利な拡張機能が無料で利用できるとは。感謝です。

follow us in feedly

関連記事

福岡でホームページ制作を依頼するなら【ハブワークス】

ホームページ制作・リニューアル・スマートフォンサイト制作・ECサイト制作は福岡のハブワークスまでお気軽にどうぞ。WEBサイト制作後の修正・更新・SEO対策もお任せください。リーズナブルな料金設定でサービスをご提供いたします。

webサイト制作・修正に関するお問合せ・ご相談・お見積りはお気軽にどうぞ