CSS3Psのインストール方法【Photoshopプラグイン】

Photoshopの便利なプラグイン(エクステンション)【CSS3Ps】を自分のパソコンにインストールする方法を紹介します。

CSS3PsとはPhotoshopで作ったシェイプデータをCSSデータとして吐き出せるエクステンションのこと。

例えばシェイプでつくったボタンを作った時に、ボタンをぽちっとおして少し待てば該当データをCSSで吐き出せる&さらにコピーできるのでコーディングスピードが爆速的に上がります。

仕事でWEBデザインを請け負うデザイナーはこのように効率が上がるツールなどは無料のものから時に有料のものまで広く使って作業スピードを上げています。

 

さて、そんなCSS3Ps、本家が英語のサイトなのでインストール方法があまり日本語で紹介されていません。

私は最新のPhotoshopCCを使っているので、なおさら数年前の情報だとちょっと違うんだけど合ってんの……?となりました。

英語の本家サイトを読みながら、うまくインストールが完了できたので、だれかの参考になれれば幸いです。

(以前、別記事であまり日本語で紹介されていないフリーソフトのダウンロード方法を紹介したら複数の方からありがとう!いわれて嬉しかったので味をしめたというw)

 

では紹介していきましょう。

ざっくりいうと、以下の手順でPhotoshop上で利用できるようになります。

  1. 本家サイトからzipデータをダウンロードして解凍する
  2. 解凍したフォルダを後述する場所に丸っと放り込む
  3. 放り込んだ中から「index.html」ファイルをブラウザで開く
  4. Photoshopを再起動する
  5. 画面上部のメニューバーから「ウィンドウ>エクステンション」までマウスカーソルをもっていって”CSS3Ps”が表示されていればOK

では、詳しく説明していきます。

【AD】

1.本家サイトからzipデータをダウンロードして解凍する

私は最新のPhotoshop CCを使っていたので、

Download for Adobe Photoshop CC 2015 (see instalation instruction)

というものをダウンロードしました。

本家ダウンロードページへはこちらからジャンプできます

2.解凍したフォルダを指定箇所へ移動させる

解凍したフォルダをそのまま以下の置き場へ移動させます。

C:\Program Files\Common Files\Adobe\CEP\extensions\

プログラムファイルズへの到達方法は、

  • エクスプローラー(フォルダのアイコンをしているやつ)を開く
  • 左側のメニューからPCを選ぶ
  • デバイスとドライブのカテゴリからwindows(C:)をクリック
  • Program Filesまで到達できるよ!

ここで私は詰まったんです。

「え、AdobeのフォルダにCEPっていうフォルダないんやけど……作って大丈夫?」

結論からいうと、新しいフォルダ作成&名前の変更で大丈夫でした。

人によってCEPフォルダが存在している人、いない人がいるようで、フォルダがない人は自分で作って名前をCEPに変更して解凍した先ほどのフォルダを放り込んでくださいな

3.index.htmlファイルを開く

先ほど移動したフォルダの中に「index.html」というファイルがあるのでそれをブラウザで開きましょう。

C:\Program Files\Common Files\Adobe\CEP\extensions\CSS3Ps\index.html

ダブルクリックすると、あなたが通常つかっているブラウザが起動して以下のスクリーンショットのようなページが表示されるはず。

一応、HTMLファイルのソースコードをちらっとみると、jsがいくつか動くように記述されていたので、これで動くようになるようです。

4.Photoshopを再起動する

もしPhotoshopを起動していれば、一度終了して、再度起動させてくださいな。

5.メニューバーからCSS3Psが追加されているか確認する

Photoshopの画面上部にファイルやら編集やらのメニュー表示があると思うのでクリック、

さらに表示されたメニュー内容からウィンドウを選び、さらにエクステンションを選びます。(マウスをもってく感じ)

すると、CSS3PSという項目が追加されましたとさ。めでたしめでたし。

 

CSS3Psは無料で使えるのもありがたいです。

実際使いこなすのはがっつりWEB案件に携わってからになるかもですが、あると便利なプラグインでした。

関連記事

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

PAGE TOP