これは面白い！Photoshopで高性能なHTML/CSSエディタが使えるようになるプラグイン -HTML Block
Post on:2015年9月10日
sponsors
PhotoshopのPSD上に、HTMLとCSSのコードでエレメントを作成できるPhotoshopのプラグインを紹介します。
外部スタイルシートにも対応した高性能で、Bootstrapのエレメントをといった使い方もできます。
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」からファイルをダウンロードします。
ダウンロードしたファイルを解凍し、インストーラパッケージをダブルクリックしてインストールしてください。
あとは、Photoshopの「ウインドウ - エクステンション」から「HTML Block」を起動します。
HTML Blockのパネル
HTML Blockの使い方
使い方は、簡単です。
- シェイプを作成します。
どんなサイズでも構いません。 - HTML Blockのパネル内に、コードを記述します。
- 「Render Now」をクリックすると、コードがシェイプ上に反映されます。
作成した要素は、後からコードを修正することも可能です。
sponsors
