WEBCRE8.jpウェブクリ8.jp

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

考える。

WEBCRE8.jpによるweb制作やデザインについての考察を
書き綴っていくカテゴリです。

[Photoshop]ピクセルベースパターンの基礎的な使い方と注意点

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

ドット絵は簡単で楽しいです☆
ピクセルベースのパターンをよく使うので、ちょっと使い方の解説をしてみます。初歩的なことですけどw

前回の記事[ダウンロード]商用無料、108個のピクセルベースパターン素材作りましたでピクセルベースのパターン素材を配布してみました。webcre8自身もよく使うのでまた配布しようかなーとも思うんですけど、ついでなので「ドットが出る?良くないんじゃないの?」と言うような、あまりPhotoshoでドットワークをしない人に向けて軽く解説をしたいと思います。

ピクセルベースとは

ドット絵は簡単で楽しいです☆

ドット絵は簡単で楽しいです☆

ピクセルベースという言い方をしていますが、ベクターベースかピクセルベースかで言えばPhotoshopのパターンは元々ピクセル表現しか出来ないです。ここで言っているピクセルベースと言うのは「あえてドット感を出したドット絵的なもの」を指しています。

こういう画像の利点としては、拡大・縮小に強いと言う事です。ドットが出ているのに拡縮に強いと言うのは、元々アンチエイリアス的な処理を施さないため、拡大しても「ドットが出てしまっている」と言うより「わざと出している」狙った表現として使えるからです。ドットとドットの『きわ』にはもう何もないのでエッジの効いた感じも出ます。

アンチエイリアスのかかった画像とかかっていない画像の拡大と縮小

アンチエイリアスのかかった画像とかかっていない画像の拡大と縮小

もちろんグラデーションやアンチエイリアスを使いキレイに表現されたものの方が合う場合もありますから、これは使い分けです。ニーズがあれば、今回制作したもののシャープなバージョンも作ってみても良いかもです。その場合は使いやすいように何サイズか作らないといけないので、パターンにするよりシェイプファイルとして制作する(それかイラレのパターンにする)方がいいかも知れないですね。

塗りつぶしとパターンオーバーレイ、テクスチャ

パターンを使う用途には「塗りつぶし」、「パターンオーバーレイ」、「ベベルとエンボス」の「テクスチャ」があります。あとフィルタの置き換えの元ファイルにも使えますね。よく使うのは塗りつぶしかパターンオーバーレイだと思います。残り二つはそれだけで記事になるほどややこしいので割愛。というかドットパターンには向かない。

塗りつぶしで使うパターンとパターンオーバーレイは一見同じような機能に見えますが、塗りつぶしはそのレイヤーに直接描画されるもので、パターンオーバーレイはあくまでそのエレメントに『被せている模様』です。例えばエレメントを拡大した場合、塗りつぶしたものは一緒に拡大されますが、オーバーレイではそのエレメントの形状だけが大きくなり、被せたパターンはそのままのサイズです。

塗りつぶして拡大したものとオーバーレイして拡大したもの

塗りつぶして拡大したものとオーバーレイして拡大したもの

使い分けとしては、塗りつぶしはそこにそのパターンを使う事が確定したときのみ使いましょう。と言うより他のスタイルを使わないなら殆どオーバーレイのみを使う様にしていても構いません。デザインの段階ではスタイルのオーバーレイ、模様が決まっていてサイズを調整する段階では塗りつぶすか統合しましょう。webcre8の場合は使い回しや後の修正を考えて殆どパターンオーバーレイにしています。

画像補間方式をニアレストネイバー法で整数倍にする

今回制作したものはその柄の最小単位と言える状態で使っていますから、基本的には拡大しかしないはずです。その場合、一度パターンで塗りつぶしたり統合したものを拡大する時は2倍、3倍と言う様に整数倍にしてください。そうしないと規則正しく並んだドットが割り切れず、少しずつずれます。

市松模様を150%に拡大したものと200%にしたもの

市松模様を150%に拡大したものと200%にしたもの

加えて、普段は「バイキュービック法(の多分「滑らか」かな)」に設定されているPhotoshopの画像補間方式を「ニアレストネイバー法」に設定してください。

[Photoshop]新環境で真っ先に設定しているショートカットでも触れていますが、これは通常ならば拡大縮小時に画像の輪郭を滑らかにすることで拡大を自然にするバイキュービック法が、エッジの利いたドットのを逆に荒れさせてしまうからです。

バイキュービックで拡大して輪郭をごまかしたラインとベクターのライン

バイキュービックで拡大して輪郭をごまかしたラインとベクターのライン

もちろん、あえてそのように使いドットらしさをなくすこともできるわけですが、それなら最初から小さいドット絵を拡大せずに、使うつもりのサイズで制作したほうがいいわけです。ありモノでやる場合もあるとは思いますが、中途半端な印象は否めません。

そのまま使わない

Photoshopの、というよりソフトの持つプリセット機能のほとんどに言えることではありますが、こうしてダウンロードしたり、用意されていた素材をそのまま使わないことです。

Photoshopを覚えたての人はワンクリックで様々な表現が出来ることに感動を覚え(当然私もそうでした)、またソフトが用意してくれているという安心感からか、プリセット機能を何もいじらずに使いがちです。でもその表現は、Photoshopを使えば全く同じ表現が誰にでも出来てしまいます。またその表現は、あなたが制作する前に思い浮かべていた完成図と寸分違わず同じ濃さ、形、色味、大きさではなかったはずです。

デザインが苦手な人も分かる「デザインは全て意味がある」6つの要素

ツールに自分の発想を合わせず、あなたの発想をツールで具現化するのです。面倒くさがらずにスライダをいじったりしてみてくださいね。きっともっといいものが出来ます。

とはいえ、ピクセルパターンは等倍で使うモノなので、工夫と言えば色、不透明度、何倍にするか、程度のものです。サイズはパターンとして使うなら大きくても2、3倍程度が普通でしょう。背景にするなら限りなく薄く、レイヤースタイルとして使うなら上からカラーオーバーレイやグラデーションオーバーレイを描画モードか不透明度をいじって被せる感じで使うでしょう。ワンポイントで違うモチーフを乗せたり、違うパターンを被せたりもアリですね。

終わりに

わざわざ記事を分けて書くほどの話題でもないのですけど、なんとなく分けてみましたw 知っている人にとっては当たり前のことではあるんですけど、込み入った機能でもあるので、これを機会にドット打ちでパターンを作ったりすることを試してみてもらえると嬉しいですね★

早速ドットパターンを使ってみるならこの記事をどーぞ!

[ダウンロード]商用無料、108個のピクセルベースパターン素材作りました