WEB業界で働く人や興味がある人に役立つ情報サイト“qam(カム)”

もの

2018/02/16

Photoshopでポップ&クールなフラッシュを描いてみよう!

投稿者: もの
カテゴリー: デザイン >Photoshop

今回は、Photoshopでフラッシュを作る方法をご紹介します。
マニアックな効果をつけるともっと本格的なものができるのですが、今回のものは、バナーなどでも使えそうな軽めのものになります。

ベースを作る

まずは、ベースの色を塗ります。あとで変更もできますが、最初に何かしら色を敷いておくと作りやすいです。

そうしたら、細長い三角形のシェイプを作ります。お好みではありますが、縦に細長いほうが仕上がりが良いようです。

そして、この三角形を円に並べます。中心(下のパス)を固定して三角形を回転させながら増やしていくのですが、180度から割り切れる角度で回転していくと綺麗に並びます。
今回は、10度ずつ傾けています。

三角形の量産ができたら、画面からはみだすように拡大して、端が見えないようにします。
この時点でフラッシュとしても使えそうですね。

効果をつける

上の状態でもデザインに入れられますが、もう少し効果をつけてみます。

三角形シェイプのレイヤーの下に、適度な大きさの円シェイプを作ります。

その円シェイプの「塗り」の不透明度を0%にして、見えない状態にします。そして、レイヤー効果の「グラデーション」を「円形」にかけます。

グラデーションは、中心に向かうにつれて【白0%→白100%】にかけます。開始、終了位置はお好みです。

するとフラッシュの中心が光っているようになり、よりフラッシュが引き立つようになりました。このほうが迫力が出ますね。

グラデーションをかけなければポップな感じに、かけると少しクールになります。また、最初に作る三角形の太さを変えると雰囲気も違ってくるので、いろいろ試してみてくださいね。

コーディング業務のご依頼、ご相談の詳細についてはこちらから

最後までお読みいただき、ありがとうございました。

よろしければシェアしていただければ幸いです。

  • このエントリーをはてなブックマークに追加

関連記事

よろしければこちらの記事もお読みください。

WEB業界ならqam!qam(カム)はWEB業界で働く人や興味がある人に役立つ情報サイトです。
マーケティングやデザイン、マークアップ(コーディング)、プログラム、トレンドなどの情報をqamライター陣が執筆。噛めば噛むほど(読めば読むほど)制作・開発や運営・運用、業界知識やノウハウを学ぶことができます。

トップへ