見出しで使えそうなデザイン

コーポレートサイトなどでよく使われていそうな見出しのデザインをPhotoshopを使って作成してみます。今回は、主にグラデーションとパターンを使って作ってみたいと思います。

見出しデザインその1

まずは、土台となる見出しバーを作ります。色はグレー系で線形のグラデーションを角度0度で適用します。

見出し土台デザイン

バーの上部に幅3pxでボーダーを引きます。

見出しバーデザイン

左側に円形シェイプを作り、塗りなしで境界線外側3pxを適用します。
そして、右側の半分ぐらいで新規レイヤーを作り、パターンオーバーレイでドット柄を作り、不透明度を50%にします。

見出しバー パターン装飾

最後に、土台のレイヤーにドロップシャドウを下側につければ完成です。

見出しバー完成

見出しデザインその2

今度は、色を青系にして線形グラデーションを角度90度で適用します。

見出しバー土台デザイン

次に楕円形のシェイプを適当に3つぐらい並べます。ここでは、左側の楕円から白の不透明度10%、黒の不透明度10%、白の不透明度20%で重ねています。

見出しバー装飾デザイン

そしたら、楕円のレイヤーをグループフォルダにまとめて、そこに土台と同じ大きさのマスクをかけます。

見出しバー マスク処理

最後に文字を入れたら完成です。

見出し完成

その他の記事
Photoshopを使って金屏風を作成
CSSのみで作る見出しデザイン
【Photoshop】白黒写真の一部をカラーにする方法
Googleの日本語対応Webフォント
Bootstrapのナビゲーションバーの使い方

TOP