CA MOBILE TECH BLOG

株式会社シーエー・モバイルのエンジニア・デザイナーの活動を綴るブログです

株式会社シーエー・モバイルの技術広報による、
技術に特化したブログです。
エンジニアとデザイナーの活動や思想を綴ってゆきます。

【脱・素人感】グラフィックの質をグッと高めるワンポイントテク

f:id:cam-engineer:20181002115530j:plain アイドルのモバイルサイト・グッズなどのデザインを担当しているデザイナーの曽根です。

00年前に新卒でシーエー・モバイルに入社した頃、私はweb未経験でPhotoshopもよくわからず、画像1つまともに作れませんでした。

入社当時に作ったバナーを探してみたら、もう色々突っ込みどころが多すぎて大変です。。。

f:id:cam-engineer:20181001174448j:plain
▲ 入社当時に作成したバナー(※ ガラケー用)

まず、初心者の皆さん、デザイナーを目指している皆さん。今でこそ大規模案件のメインデザインを担当したり、偉そうに色々と監修などさせていただいている私ですが、私は最初こんなでした。

だから大丈夫です。頑張りましょう!

さて、デザイナーにはそれぞれ得意な分野やこだわりのテクニックがあると思いますが、私にもそれなりにお得意のテクニックがあります。

そう、それは「キラキラ」や「ラメ」や「白(色)」の使い方です!光の表現のバリエーションですね!

f:id:cam-engineer:20181002115332j:plain
▲(左)キラキラ素材と(右)ラメ素材

「キラキラ」は、文字通り、要素をキラキラ輝かせて魅力的に見せるもので、バナーや背景画像の効果に使ったり、空いたスペースを埋めたり、かなり使う頻度が多いですよね。

一方、ラメは使う頻度は少ないかもしれないですが、空間全体を輝かせたりする時に便利ですね。

「白」も効果的に使うことで、光を綺麗に表現することができるのでよく使います。

ただ!侮るなかれ、これらのキラキラ画像とラメ画像。

使い勝手は良いですが、使い方を間違えると、すごくダサく見えたり、素人臭がプンプン出てしまいます・・・。

ということで!「キラキラ」と「ラメ」と「白」をプロっぽく使うための、ワンポイントテクニックをご紹介しますー!

ご存知でしたら一緒にドヤりましょう!

デザイナーだけでなく、ディレクターの皆さんなど、普段ちょこっとした画像を作る機会のある人にもオススメです!


【もくじ】

1. よくあるキラキラ素材の上手な使い方


まずは基本編!

キラキラはただ置くだけだと単調で、ちょっとイケてない感じです。

f:id:cam-engineer:20181001175025p:plain
▲ただ配置しただけだと、なんだかイケてない。

これをまず!大きさをランダムにして配置するだけで素人感が消えます。

ラインをイメージして流れるように配置するとさらに良いです。

f:id:cam-engineer:20181001175122p:plain
▲この画像だと右上から左下へのラインを意識している感じです!

空間も大事です。あえてキラキラを配置しないエリアも大きく取ってください。

角度も揃えるか、ある程度ルール付けしておくと良いです。

結構大げさに大きさを変えちゃって大丈夫です。不規則な配置って動きが出ていいですよね~


さらに!もっと華やかなキラキラにしたい場合!

上記キラキラパーツの中央(クロスしている部分)に、ぼんやりと白い丸のぼかしを入れます。

丸ブラシでポンっと乗せるだけでも良いです。

f:id:cam-engineer:20181001175438p:plain
▲クロスの中央にぼかしを入れただけで、こんなにキラキラ!
f:id:cam-engineer:20181001175555j:plain
▲上記で使ったブラシのPS設定はこんな感じ

盛れます。輝きます。簡単ですね!

白や色付きの光彩をほんのちょっぴり付けてもいいです。

スクリーンやオーバーレイなどのレイヤー効果を使うとなじみます。


まだ終わりません!上記のキラキラを、さらに盛りたい時は火の粉作戦です。

白い丸をさらに細かくした粒を、キラキラパーツの周りに散りばめましょう。

f:id:cam-engineer:20181001175716j:plain
▲動きや余韻が生まれます!

これを一通りヘビロテ素材として登録しておくと便利ですね!

まあ・・・完成された素材集のものをそのまま使えば早いんですけど、そこにちょっと一手間加えてアレンジすることで、素材集のクオリティの上に行けるというわけです!

ここまでのキラキラのテクニックは、花びらや葉っぱ、羽など他の物体を散らしたりする際にも応用できます。

ちなみに、キラキラ感をつけたい場合、背景にはあらかじめグラデーションなど色や明るさに変化があるものを配置しておくのがオススメ です!


2. 火の粉作戦で画像を華やかに!

その1のキラキラ画像で最後の“盛り”に使った「火の粉」。

細かい粒々を散りばめたものを配置する手法なのですが、これがまた使い勝手がイイので、別章立ててご紹介します。

f:id:cam-engineer:20181001175917p:plain
 

これです!!!これ、万能です。

場合によっては、これを使うだけで、変に空いてしまって扱いに困るスペースも埋められたり、綺麗な雰囲気を出せたりします。

どんな画像でもこれを入れるだけで余韻や動きが出ます!


火の粉を入れていない時と入れた時の画像をいくつか載せます。

f:id:cam-engineer:20181001180037j:plain
▲(左)火の粉ありと(右)火の粉なし

こんな感じなんですが・・・わかりますでしょうか・・・。右上と右下あたりに入れています。


フレームにも火の粉投入!

f:id:cam-engineer:20181001180331j:plain
▲(左)火の粉ありと(右)火の粉なし

はい!綺麗になりますね!

困った時の火の粉。迷ったらとりあえずこれを使うとデザインが進みます。

[水]や[空気]などの自然を表現する時にも使えます。

適宜、光彩などを追加したり、色を変えたりして遊ぶと良いでしょう。


f:id:cam-engineer:20181001180504j:plain
▲火の粉に光彩とフィルターを適用

色々応用して遊ぶと、こんな仕上がりにもできます!


また、このように火の粉を大胆に大きく配置しても良いです。

f:id:cam-engineer:20181001180544p:plain
▲大きく拡大してぼかし&透明度等を調整

(フリー素材使えばいいじゃんなんて言わないでください!自分で作れてこそフリー素材使うべし。)

形は丸ではなくても良いです!四角や多角形など、ふりかけのような形のものでも代用できます!


3. メタルな素材をさらにメタリックに!

メタルなものをさらに光らせたい場合や、グラデーションだけじゃちょっと印象地味かな・・・っていう時ありますよね。

例えばこのボタンの金のフレームをもっとメタリックにする場合。

f:id:cam-engineer:20181001180702p:plain
▲これでもメタリックな印象ではありますが・・・

グラデーションで綺麗に仕上げるだけでもいいんですが・・

ここでも、白い丸が登場!

白い丸を少しぼかしてフレームの適当な場所にクリッピングマスクで置くと・・・

f:id:cam-engineer:20181001180855p:plain
▲左上と右下にちょんちょん、と・・・

ほら!さらに派手に光って見えます!

[スクリーン]や[覆い焼きカラー]で重ねるとなじみます!


ちなみに、金などのグラデーションの部分は、同じグラデーションをそのままコピーして[オーバーレイ]で重ねるだけで、輝き度が増します。

f:id:cam-engineer:20181001180946j:plain
▲(左)元の画像 を、(右)グラデーションを[オーバーレイ]で重ねてみた

これもすぐできて便利ですよ。明るさやコントラスト調整をするより早いです。

ちょっとノイズを入れるとさらにギラギラになります。


4. ベタ塗りイラストに簡単に光沢を付ける

ポップなイラストを描くことも多いですよね。そんな時にも便利なテクニックをひとつ。

ベタ塗りのイラストにさりげなく光沢感を出す場合。

白いラインをパーツの端に1本入れるだけで光沢が出るんです!

f:id:cam-engineer:20181001181246j:plain
▲それぞれ、(左)元の画像 (右)白ラインを追加

こんな感じで1本!これだけでいいんです!


5. 和風パーツを最大限に美しく見せる

よく使いますね。和ガラ。和風デザイン大好きです。凝ったら止まらないです。データの容量との戦いですが・・・。

和風の素材集の素材も綺麗ですよね。

ただ!そのパーツもただそのまま使わず、ひと工夫するとグッッッッと質感が良くなってゴージャスになります。

ここで使うのが、冒頭でも出ていた、ラメのテクスチャです!(ノイズ画像のようなザラザラのテクスチャでも良いです。)

f:id:cam-engineer:20181002115443p:plain
▲ ラメのテクスチャ。どこかで見たことありますね〜

例えば、こういう和風のパーツがあったとします。

f:id:cam-engineer:20181001181538j:plain

このままでも綺麗なんですが、和風パーツのポテンシャルは凄まじく高いので、ただ配置するだけでは素材の良さは活かせません。

そこでまずひと工夫!各パーツにラメが入った境界線を入れると!

f:id:cam-engineer:20181001181652j:plain
▲境界線にラメをオン!

あら!質感が・・・♡

境界線だけではなく、このようなお花などのパーツには、ラメっぽいテクスチャを重ねたりノイズのカスレを入れると、着物の生地みたいに質感が深くなっておすすめです。

f:id:cam-engineer:20181001181818j:plain
▲パーツにテクスチャやノイズを重ねてみる

こんな感じです。やりすぎるとクドくなってしまうので、バランスを見てくださいね!

ラメを駆使すると、最終的にこんな感じに仕上げることができます。

f:id:cam-engineer:20181001181913j:plain
▲柄やラメを幾重にも重ねると、まるで高価な絹織物のよう!

いじり甲斐がありますね!

ラメを使う際、これもまた[スクリーン]などのレイヤー効果の選び方で色々な雰囲気に仕上がります。

思いがけず良い効果が生まれたり、突然ハっとするような色になって画面が華やかになったり。

これだから和風のデザインは楽しいんです!!!

この、和風のパーツをベタ置きしたデザインに(左)、ラメラメ攻撃!(右)

f:id:cam-engineer:20181001182038j:plain
▲(左)元画像 に(右)ラメラメ攻撃かけてみた!

和風デザインの楽しさを知っていただきたいので、さらに載せます。

べたっとしたデザインに、ラメラメ攻撃です!

f:id:cam-engineer:20181001182235j:plain
▲(左)要素同士の馴染みが薄いが(右)ラメで全体がしっくり!

それぞれの好みのもあるのですが、画に重厚感を出したい場合は、これらの方法は非常におすすめです!

こういうキラキラや光の効果ってパッと見ではわからないかもしれませんが、これらのひと手間を入れるかどうかで質感やこなれ感がグッと変わります。

光源がどうのとか、小難しいことは気にしなくて良いです。雰囲気です。初心者の皆さんも安心して使えるテクニックです!

6. おすすめ素材集紹介

最後に、使い勝手やクオリティ面で使いやすい、おすすめ素材集をご紹介します。

●和風素材集 雅 

 - 万能すぎる和風素材集です。師匠たちから引き継ぎました。これ1冊持っていれば安心。


●今の時期にぴったり!ハロウィン素材集



和風のデザインの面白さを語り始めると長くなるので、今回はこのあたりにしておきますが、参考になりましたでしょうか?

皆さんも実は、知らないうちに独自のレシピを身につけていたりすると思うので、時々振り返って見ることをおすすめします。

(デザイナー:曽根)