WEBCRE8.jpウェブクリ8.jp

webデザイナーによる、デザインとwebを楽しむ情報ブログ

調べる。

備忘録としてwebやデザインについて調べたり
新しく知ったことなどを書き残していくカテゴリです。

[Photoshop]極座標フィルタでできるクリエイティブ表現色々

この記事は約17分ぐらいで読めます

円グラフやドーナツも直線にしてくれそうですねw
使いどころの分かりにくいPhotoshopの機能シリーズ。極座標フィルタって皆さん何に使ってますか?大味なフィルタのイメージと違い、意外と小技にも使えるヤツなんです。

極座標フィルタ使ってますか?

極座標フィルタとは?と聞かれるとPhotoshoperは多分いわゆる「小さな惑星画像」が浮かぶんじゃないかなと思います。アレは面白いですよねー。

How To Make Your Own Mini Planet In Photoshop

海外では流行ってるみたいな表現をチラチラと見ますけど、どうなんでしょうねw でも専用のアプリまであるみたいですよ。

TinyWorld: 撮った写真をその場で小さな地球に加工する面白惑星写真メーカー!

極座標とは何をするフィルタなのか

このフィルタ、使ってみてもイマイチどういう計算でこうなっているのか分かりにくくないですか?(私だけですかねw 無学なので><)

二つのモードの挙動を確認してみましょう!

極座標を直交座標に

まずは500px×500pxのこういう画像を用意します。

それぞれの頂点と中点、正方形の中心に点を打ち、名前を付ける

それぞれの頂点と中点、正方形の中心に点を打ち、名前を付ける

そしてフィルタをかけてみる。

どこがどのように変化しているのかわかりますか?

どこがどのように変化しているのかわかりますか?

解説しましょう。まず点A,B,CはEの場所に来ており、辺ACは消滅してます。そして辺GIは弧を描きながら引き延ばされ、点G、IはBの位置にあります。辺AGとCIは重なってますね。

どこがどう変形したのか記号と色で分かると思います

どこがどう変形したのか記号と色で分かると思います

ちなみに円形にして余った四辺付近(赤線で囲んだ部分)は円のきわのピクセルが引き延ばされています。

このことから少なくともPhotoshop的には、この「極座標を直交座標に」フィルタは画像を円形に引き延ばす機能であると考えられますね。もっと言えば平面画像を円形ではなく半球型に投影したものにしているんですが、これはややこしいので後述します。

直交座標を極座標に

同じく500px×500pxの画像を用意しフィルタをかけます。

すごく理解し難い形になりますw

すごく理解し難い形になりますw

…なんか全然分からない変化をしてますねw

キャンバスはそのままで画像を300×300に縮小する

キャンバスはそのままで画像を300×300に縮小する

次に画像をキャンバス自体より元画像を小さく(300px×300px)してみた状態でフィルタをかけてみます。

色と位置関係で柔軟に見てみてくださいw

色と位置関係で柔軟に見てみてくださいw

選択範囲を基準に計算に従って展開しています

選択範囲を基準に計算に従って展開しています

これでちょっと意味が分かりますかね。中心Eが引き延ばされ、辺ACになっています。そして点EとBを結ぶラインから分割され、曲げたアコーディオンをもとに戻すように辺AGとCIになります。点A,C,G,Iは画面(選択範囲)外にはじき出されます。

ここまでは元画像が正方形だからちょっと変な感じになってますけど、元々ドーナツ型の画像を使えば「直交座標を極座標に」フィルタは円形を直線に(または半球型を平面に、後述)戻すような働きをすることがわかると思います。

円グラフやドーナツも直線にしてくれそうですねw

円グラフやドーナツも直線にしてくれそうですねw

仕組みが分かったところで

それではこれを具体的に何に使うのか作例を出していきます。

以下、ここでは基本的にまず500px×500pxのキャンバスを用意します。そうではないものも、極座標フィルタを使うときは適用範囲を正方形で選択して使います。そうでないとキレイな形が出ません。

それと、これもお約束として「極座標を直交座標に」を使うときはなるべく左辺と右辺の色を同じにしましょう。繋ぎ目が自然になります

極座標フィルタで出来ること 集中線

先日Twitterでちょっと流行った「強いられているんだっ!」みたいな感じの集中線を作ることが出来ます。

iconDecotter | デコられているんだッ!(集中線)

  1. キャンバスの下辺に接するように適当な長さの線を描く
  2. 極座標→直交座標を極座標に
「直交座標を極座標に」で集中線を作る

「直交座標を極座標に」で集中線を作る

線を増やすことでもっと目の細かい集中線にしたり、線を太めにすると日の出っぽい画像(サンバースト)が作れたりします。

「直交座標を極座標に」でサンバーストを作る

「直交座標を極座標に」でサンバーストを作る

サンバーストの作り方はつい先日Illustratorでやる方法がウェビメモさんの記事、Illustrator備忘録:放射状ストライプの簡単な作り方とそれをPhotoshopのカスタムシェイプに登録する方法 | ウェビメモで紹介されているのを見かけました。イラレの方法と違ってこっちはピクセルベースなので、実際に使うときはなるべく大きめに作りましょう★

極座標フィルタで出来ること スターバースト

集中線の逆、スターバーストです。やっている事は集中線と同じで、要は加工する前の線がどこからどこまで伸びているかで違いが出るだけです。とにかく「直交座標を極座標に」では元画像の上辺が中心、下辺が外側に来ることを覚えてください。

  1. キャンバスの上辺に接するように適当な長さの櫛状の模様を描く
  2. 極座標→直交座標を極座標に
「直交座標を極座標に」でスターバーストを作る

「直交座標を極座標に」でスターバーストを作る

中心にのドットが密集した辺りに模様のようなドットが目立つので、実用的には中心をブラシでぼかしたり、実例のように上辺に接した部分を塗りつぶしておけば自然な輝きのグラデーションも作れます。実例では風フィルタやぼかし(移動)を使って簡単に作っています。

極座標は、当然外側に行くにつれて線が太くなります。遠近感と言うか迫ってる感も出るのでこれでいいんですけど、ペンで均一な太さの線をを引いたように書くことはできないですね。その方がいいのなら多分普通に描くしかないです…。

多色の放射上の線から作ったバースト画像

多色の放射上の線から作ったバースト画像

ラインの目を細かくしたり、色を使い分けるとこんな風にキレイなバーストイメージも作れますよ。ちょうどよくそれっぽいマルイのサイトのスパークリングセールのバナーを見て自作してみたものです。ただ色んな太さの縦縞画像を用意して、真ん中にベースカラーの大きめのブラシをチョンと置いて、横長に引き延ばしただけです。

マルイスパークリングセールのバナー

マルイスパークリングセールのバナー

極座標フィルタで出来ること 小さな惑星

冒頭で紹介したPhotoshop加工が好きな人にはおなじみのヤツですね。無理矢理それっぽくしてはくれますけど、細かい整合性の取れていない部分は気にしないか、どうしても気になるならスタンプツールとか変形で自力でキレイにしましょうw

  1. 普通の横長の写真を縦横比を固定せずに正方形に変形させる
  2. 変形→180度回転
  3. 極座標→直交座標を極座標に
極座標フィルタで作ったパリ、モンパルナス星

極座標フィルタで作ったパリ、モンパルナス星

極座標フィルタで作った油絵の黄昏星

極座標フィルタで作った油絵の黄昏星

これでOK、簡単ですね★回転させずにフィルタを適用すると中心に空を戴く地下世界のような感じにもなりますね。鍾乳洞の写真とかあれば凄そう!

素材に使う写真はちゃんと地面がキャンパスに並行で、かつパノラマのように横長であればある程キレイになります。手前側が運河や海、草むらや道路等平坦な地平が拡がっている写真を使う事もかっこよく仕上がる素材の条件になります。

極座標フィルタで出来ること シャボン玉・球体

それっぽい写り込みをした球やシャボン玉をサクッと作ることが出来ます。この二つは写り込んでいる感じと透明度なんかの違いで作り方は殆ど一緒。

  1. 写真を用意する
  2. 正方形の選択範囲を作り、その形で背景を複製
  3. 極座標→極座標を直交座標に
  4. 変形→垂直に反転
  5. このレイヤのオブジェクトの選択範囲を読み込み、下に1ピクセル移動
  6. 極座標→直交座標を極座標に
ぱくたそで拾った沖縄の海です

ぱくたそで拾った沖縄の海です

正方形の選択範囲を切り抜いて別レイヤに

正方形の選択範囲を切り抜いて別レイヤに

「極座標を直交座標に」で選択範囲内のみを変形

「極座標を直交座標に」で選択範囲内のみを変形

選択範囲内下辺に一ピクセル隙間を作る

選択範囲内下辺に一ピクセル隙間を作る

「直交座標を極座標に」を適用して完成。お好みの加工をしましょう

「直交座標を極座標に」を適用して完成。お好みの加工をしましょう

上に残った縦1ピクセルの部分は後で取り除きます。なぜこうするかと言うと、選択範囲内の下端までピクセルが埋まっていると最後の極座標をかけたとき正方形に下端のピクセルを敷き詰めてしまうので、選択範囲を画像から1ピクセルずらせば引き伸ばされるはずの下辺のピクセルがないため空白になり、キレイな円形が出来るのです。ただエッジのアンチエイリアスが荒いので、それが嫌なら普通にずらさずにフィルタをかけた後、エッジをぼかした円形の選択範囲で切り抜きましょう。

金属球の場合はそのまま、シャボンの場合はブラシで真ん中あたりを消したり、スタイルで内側に光彩を入れたりするとそれっぽくなるかな。

まあこういうのは先人のフォトショッパー達が作ったHowto系のサイトで結構やり方が書いてありますよね。「Photoshop 極座標」でググれば色んなサイトが出てきます。この記事ではこういう事が出来ます、という紹介に留めました。

極座標フィルタで出来ること 毛筆の丸印

最近ちょっとした「毛筆で描いたような丸印」を作れないかなーと思ってて考えてみた方法です。

  1. 適当なサイズのはねブラシ(まばらなドットのブラシです)で適当に横棒を描く
  2. 極座標→直交座標を極座標に
  3. 変形→自由な形にで歪めたり、ブラシツールで細部を書き足す

最初の横棒を上の方に描くほど筆幅が太くて直径が短い円、下に描くほど細くて直系の大きい○になります。そして線が短いと弧、殆ど端まで伸ばしていると円に近い形になります。

ドットの出る適当なブラシで線を描く

ドットの出るブラシで適当な線を描く

これだけでそれっぽい円が描けます

これだけでそれっぽい円が描けます

微調整が難しいですがワープで整えます

微調整が難しいですがワープで整えます

そのままだと始点と終点が同じ見た目になってしまうので、書き出し側はちょっと書き足して墨だまりの感じを出しましょう。そうして少しランダムな感じに「変形→自由な形に」で歪めればOK★

ブラシでぐりぐりやって違和感を減らします

ブラシでぐりぐりやって違和感を減らします

若干適当ですみませんw

普通に端から端まで描いていれば繋がった円になりますし、その延長で、横縞画像にフィルタをかけるとは同心円になります。線を斜めにすれば渦巻きも作れたり、ちょっと考えればダーツの盤面も作れそうですよね!

極座標フィルタで出来ること 平面地図を球形にする

さてお気づきかも知れませんが、極座標フィルタは「直線を円に」「円を直線に」と言った単純なものではなく、図の球面座標と平面座標を相互に変換するという、小難しい機能です。「平面を立体的な半球状に」「立体的な半球状を平面に」…例えば平べったい世界地図を立体的な地球儀に出来たりもします。多分円筒図法系の地図なら正確ではないにしても、それっぽくはなりそう。

  1. 円筒図法系の地図を用意する
  2. 地図の半球分だけを切り取る
  3. 変形で縦横比をリンクさせずに正方形に変形
  4. このレイヤのオブジェクトを上に1pxずらし、キャンバスを全選択
  5. 極座標→直交座標を極座標に

これで北半球を北極星から見下ろした地球っぽいものが出来ますw 同じように南半球は切り取った後反転してフィルタを適用すればできます。

ミラー図法の世界地図

ミラー図法の世界地図

北半球だけ切り取る。南半球でもイケる

北半球だけ切り取る。南半球でもイケる

キャンパス自体をリサイズする場合はこれで

キャンパス自体をリサイズする場合はこれで

上に1ピクセルずらして全選択

上に1ピクセルずらして全選択

かなり地球儀っぽい画像が完成!

かなり地球儀っぽい画像が完成!

ミラー図法というのは平面地図でよく見るメルカトル図法の北極、南極が見切れてないバージョンとでも思ってください。あんまり詳しくないから間違ってたらすみません。

実際Google Earthの3D画像と比較してみました。

緯度方向の分布が間違ってるぽい

緯度方向の分布が間違ってるぽい

うーん、ダメですねw 極付近の面積が足りないっぽい。それらしい地球にはなりますけど嘘地球になっちゃいますね。他の図法も試してみたんですけどミラー図法の地図が一番マシでした。計算で求められるのかもしれないですけどあんまり数学わかんないし別に必然性ないのでこの辺でヤメときます。夏休みの自由研究なんかに向いてそうな実験ですねw

あと反対に、頑張れば地球の衛星写真とかGoogleEarthを展開して平面地図が作れそう。…ただし一方向からの写真だと半球分しかできないのでこっちの使い道はもっとなさそう。同時に地球を両側から撮った画像なんて普通手に入らないですし…w

なお、この実験に使った地図画像はwikipediaにあったもので、パブリックドメインです。

ファイル:Miller-projection.jpg – Wikipedia

終わりに

いかがだったでしょうか。意外と色んな事に使えると思いませんか?

Photoshopにはまだまだ「良くわからないから避けてたお宝機能」が眠っている筈です。暇なときにでもいじってみてると色々考え付いて面白いですよ!

他にも「もっと他にもこんな使い方があるよ」みたいな話があればコメントで教えてもらえると嬉しいです★