Home > Illustration > スクリーンキャプチャツール＋CSSでPhotoshop上のイラストを鏡像表示する

スクリーンキャプチャツール＋CSSでPhotoshop上のイラストを鏡像表示する

2011-01-27 (Thu) 10:38
Illustration , Misc

イラストのゆがみを確認するには、鏡像反転してみてみるのが一番。
というわけで、Comicstudio等には標準装備されている、画像の非加工鏡像表示機能ですが、Photoshopにはこれがなく、わざわざ画像を鏡像反転して確認していました。序盤ならいいんですけど、レイヤー数が多くなってくると、これがまた重くて待たされて、辛いんですよね…。

Vectorとかに画面の鏡像表示ツールあるかな、と思っていたら、これがほとんど無い。あっても非常に重くて、最後にはPhotoshopを巻き込んで落ちてしまいました。

何かいい方法がないかな？と探していたら、どうやらCSSとスクリーンキャプチャツールの組み合わせで実現出来るようです。

用意するもの

スクリーンキャプチャツール: 一定時間ごとに、キャプチャ画像をひとつのファイルに上書き保存し続ける事が出来るタイプのもの。; 自分は当初Capture STAFFを使っていました。保存がちょっと重めなので、他に探してみるといいかも。
ブラウザ: 今回のCSSは、とりあえずFirefox上での動作確認のみ行っています。

実際のやりかた

１：htmlファイルを用意する

以下のソースをテキストエディタに貼り付け、.htmlファイルとして保存してください。hoge.htmlみたいな。

<html>
<head>
<meta http-equiv=&quot;refresh&quot; content=&quot;10&quot;>
<title>reverse</title>
<style type=&quot;text/css&quot;>
body {
-wekit-transform: scale(-1, 1);
-moz-transform: scale(-1, 1);
-o-transform: scale(-1, 1);
}
</style>
</head>
<body>
<img src=&quot;Image.jpg&quot;>
</body>
</html>

解説と、編集が必要なところ。

<meta http-equiv=&quot;refresh&quot; content=&quot;10&quot;>

数字はリロード間隔(秒)です。任意で変更してください。ファイル保存に時間がかかるツールの場合は間隔を長めに取るといいかも。

<img src=&quot;Image.jpg&quot;>

キャプチャした画像のファイル名はここに。

キャプチャツールの設定

キャプチャした画像がひとつの画像に上書き保存されるように
htmlと同じディレクトリに保存されるように
htmlに記入したファイル名で保存されるように

設定します。スクリーンショットはCapture STAFF Lightのものです。

まずはイメージ保存ディレクトリを、htmlを保存したところと同じところに。
イメージ名も、htmlで指定したものと同じものになるように。
<br clear="both">

このツールは繰り返し出来る回数に上限があるので、繰り返しの回数は出来るだけ大きく、保存に時間がかかるので、間隔は長めにとってあります。
<br clear="both">

キャプチャツールを起動し、htmlをブラウザで開く

反転表示したい部分のキャプチャを開始したら、htmlをブラウザで開きます。指定した秒数ごとに自動で反転表示してくれますヽ(・ω・)ﾉブラウザのメニューが邪魔だ！という人や、広く見たい！という人は、F11キーを押してみたり、CSSを工夫して単体の窓になるようにしてみるといいかも。

おまけ

画像を反転して保存する機能のついたキャプチャツールなら、ブラウザの機能のみで完結させることも出来ます。キャプチャした画像を開いておいて、firefoxの場合は、ブラウザ上の何もない位置で右クリックすると…

ほら、これこれ。
<br clear="both">
photoshop上でアクションを組んで、スクリーンショットを反転→上書き保存するのもありかもしれません。でもこれは、photoshop上のリソースは使わない、という当初の目的に反しちゃいますが。

謝辞

以下の皆様の協力＆記事でできましたヽ(・ω・)ﾉ
有難うございます！

霜蛙氏
ヒヨリさん
<a href="http://blog.marimo-net.org/">水無月真弥さん</a>
<a href="http://twitter.com/#!/rikuo">@rikuoさん</a>: (画像を左右反転するBookmarkletの記事を参考にさせていただきました！)
junsub777さん: (画面の表示を鏡像にするソフト、反転表示（ミラー表示）する良いソフトの両記事をきっかけに上の方法が出来ました！)

Home > Illustration > スクリーンキャプチャツール＋CSSでPhotoshop上のイラストを鏡像表示する

Categories

Archives

Search

works & cover art

Feeds

Page Top