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

【Photoshop拡張機能】Positionを取得する

2013年4月20日 / category : jsx, lab

Photoshopの拡張パネル「PositionPanel」を作成しました。
CSSでpositionのabsoluteによるコーディングがよくあります。その際、デザインデータの該当の要素の座標を調べるのが若干面倒です。
そこで、その座標を簡単に取得し、パネル内でスタイルシート用に値を出力できるようにしました。

【使い方】
1.PositionPanelフォルダを下記のフォルダに追加する。
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.「ウィンドウ」→「エクステンション」→「PositionPanel」を選択、PositionPanelパネルが開く


4.デザインファイルを開く


5.基準点となる箇所を選択範囲で設定し、「基準点を設定」ボタンをクリック、基準点が設定されます。
※選択範囲の左上が基準点の座標となります。


6.基準点からの座標(top、left)を知りたいオブジェクトの左上に選択範囲を設定すると、パネル内に基準点からの座標と、スタイルシート用のテキストが表示されます。


【Download】
http://tsudoi.org/photoshop/Plug-ins/Panels/PositionPanel.zip
【備考】
CS6での検証しかしておりません。。。検証が不十分です。使用中に不具合などがあれば、ご連絡ください。
mail : tsudoi@aru-inc.co.jp