吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

【Photoshop拡張機能】canvasにcircleを配置する

2013年5月23日 / category : jsx

Photoshopの拡張パネル「CirclesPanel」を作成しました。
今回は実験的ということで、photoshopで生成したシェイプ画像をjavascriptを使用してcanvasタグに描画する、という拡張パネルです。

【使い方】
1.CirclesPanelフォルダを下記のフォルダに追加する。
windowsの場合(CS6)
→ Program Files/Adobe/Adobe Photoshop CS6 (64 Bit)/Plug-ins/Panels
macの場合(CS6)
→ Applications/Adobe Photoshop CS6/Plug-ins/Panels

2.PhotoshopCS6を起動する。
3.「ウィンドウ」→「エクステンション」→「CirclesPanel」を選択、CirclesPanelパネルが開く

4.新規でファイルを開く。(canvasのサイズがドキュメントサイズになります。)
配置される円の最大半径を指定し、パネル内の「create」ボタンをクリックする。

5.jsファイルが書き出されるので、下記にアップしている「circlesCanvas.js」に上書き保存する。
テンプレートフォルダ → html-template.zip
circlesCanvas.jsまでのパス → /html-template/js/circlesCanvas.js
パネル内にhtmlのサンプルコードが書き出されるので、必要であれば、htmlファイルに貼る。
/html-template/index.html と同じ内容になっています。


6./html-template/index.htmlをブラウザで確認する。
canvasで円をそのまま描画するとあまりきれいではないので、若干加工しているので、photoshopを見栄えが全く同じではありません。

7.円の配置、色、サイズはランダムになっています。
描画のやり直しをする際は、ファイルを閉じてから、もしくは生成されたすべてのレイヤーを削除してから再度「create」ボタンを押してください。



【Download】
http://tsudoi.org/photoshop/Plug-ins/Panels/CirclesPanel.zip
http://tsudoi.org/photoshop/Plug-ins/Panels/CirclesPanel/html-template.zip


【備考】
CS6での検証しかしておりません。使用中に不具合などがあれば、ご連絡ください。
mail : tsudoi@aru-inc.co.jp