これは面白い!Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block

PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。

外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。

サイトのキャプチャ

HTML Block

HTML Blockの特徴

HTML Blockは、Photoshop CC2015 for OS Xのみ対応で、Webkitエンジンを利用してHTMLとCSSのコードでエレメントを作成できます。

↓左パネルがエディタに見えるかもしれませんが、Photoshop上でのHTML Blockです。

サイトのキャプチャ

コードでPSD上にエレメントを作成

使い方としては、さまざまなアイデアがあります。

サイトのキャプチャ

Google FontsなどのWebフォントを利用することができます。

サイトのキャプチャ

Photoshopでのテキストはブラウザでのレンダリングとは異なります。HTML Blockを利用すると、ブラウザのレンダリングを得ることができます。

サイトのキャプチャ

img要素を使うことで、インターネット上の画像を配置することができます。

サイトのキャプチャ

外部スタイルシートにも対応しています。CDNで配布されているBootstrapや自分で作成したCSSなどもそのまま利用できます。

サイトのキャプチャ

サイズ変更可能な要素にも対応、自動的に再レンダリングします。

サイトのキャプチャ

ラジオボタンやチェックボックス、入力フィールドなど、OS Xのネイティブな要素を簡単に利用できます。

HTML Blockのダウンロードとインストール

下記ページにアクセスし、「Free Download」からファイルをダウンロードします。

サイトのキャプチャ

HTML Block

ダウンロードしたファイルを解凍し、インストーラパッケージをダブルクリックしてインストールしてください。
あとは、Photoshopの「ウインドウ - エクステンション」から「HTML Block」を起動します。

Photoshopのキャプチャ

HTML Blockのパネル

HTML Blockの使い方

使い方は、簡単です。

HTML Blockの使い方
  1. シェイプを作成します。
    どんなサイズでも構いません。
  2. HTML Blockのパネル内に、コードを記述します。
  3. 「Render Now」をクリックすると、コードがシェイプ上に反映されます。

作成した要素は、後からコードを修正することも可能です。

top of page

©2017 coliss