アトリエコハク

アトリエコハク

兵庫県但馬のホームページ制作アトリエ

>
>
  • Photoshop

Photoshopでフラットデザインチックなボタンを作る

スポンサーリンク

フラットデザインライクなちょっとオシャレなボタンを作ってみたいと思います。
こういうボタン。
button

表面を作る


まずは角丸の長方形を作ります。
この長方形がボタンの表面部分になります。
サイズは150px × 50pxで角は5pxで少し丸みを帯びさせます。

making-rectangle

カラーはお好みで。
パステルカラーを使うとフラットデザインっぽいかな。
そしてレイヤー名を「surface」としておきます。(お好きな名前でOK)

making-surface

影を作る


先ほど作った「surface」レイヤーをコピーして、影なので色をグレーっぽい感じに変更。
そして名前を「shadow」に変更。

making-shadow

そして「shadow」レイヤーを「surface」レイヤーの下に移動します。
今こんな感じです。

order-layer

最後に「shadow」レイヤーを下方向に少しずらすと、ボタンのできあがり。

complete

あとはテキストを乗せるとボタンっぽい感じなって完成。

adding-text

記事の背景を作る


ボタンが作れるようになれば、サイズとカラーを変更するだけでブログ記事の背景なんかもできちゃいます。
同じやり方でできるので簡単。

making-article

スポンサーリンク