HTML
CSS
photoshop
ポエム

PhotoShopでコーディングに挑戦する パート1

More than 1 year has passed since last update.

自分でもこのタイトルをつけていてよくわからない感じがしますが、最近のPhotoShopってすごいですよねという実験メモ的な。

PhotoShopCC(2017.1)起動。

適当にレイヤースタイルで装飾したテキストやら、マウスで描いた絵やらをレイヤーごとにつくってみる。

image.png

テキストを出力してみよう

1.CSSをコピー

テキストのレイヤーを右クリックするとこんなメニューが出てくる。
image.png

『CSSをコピー』をクリックしてみる。CSSがコピー出来ている、はず。
ほいでDreamWeaverで適当にhtmlファイルを作り、<style>内にctrl+vをしてみると…

image.png

レイヤー名がクラス名になって、レイヤー順がz-indexになって出力されているだと!?
これは感動しました……しかも絶対位置まで……いやこれすごい……

2.SVGをコピー

とまあ、CSSだけではどうしようもないので、今度は中身も出力できないかと。

image.png

『SVGをコピー』をクリックしてみる。テキストデータだしいけるかな?
HTMLに貼り付けてみましたが、うーむ。SVGはさっぱりわからない……。

image.png

さて、ブラウザでチェックしてみます。

出力結果

image.png

えっいやこれ画像じゃない?
と思ったんですが、ブラウザ出力のスクショなんですよ…!
テキスト系はかなり忠実に出力できるみたいですね!

絵は出力できるのか?

ということで、今度はこちらのネコの絵が描かれているレイヤーを同じ手順で出力してみます。

1.CSSをコピー

image.png

これは誰が何と言おうとネコですよ。

2.SVGをコピー

image.png

出力結果

先ほどのhtmlファイルに張り付けて、ブラウザで表示してみました。

image.png

位置こそズレてはいますが、ほぼほぼ完ぺきに再現されていますね……!!

まさかマウスで描いたこんなヨボヨボな線まで再現できるとは…!

テキストやボタン系であれば実用に耐えられるのではないかと思いました。
しかしやはり出力されたCSS自体の数値などは小数点まで算出されてしまったりするので、そこは人力での調整が必要になるかな~という気もします。
コーディングルールとかもあればなおさらという感じでもありますが、上手く使いこなしてPhotoshopだけでコーディング出来るようになれるのでしょうか?