SHU BLOG

BLOG NEWS ブログ

TITLE

【見出し】「線」だけでデザインをしてみる!25パターンご用意

SHU[シュウ]

1991年生まれ九州の宮崎県育ち
高校卒業後、愛知県で自動車関係の
お仕事に5年間勤め、WEB業界に
転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画
基本インドアです!笑

シュウ
シュウ
今回は「【見出し】デザインについてIllustrator、Photoshop」で作成した
デザインを公開します!

見出しデザインについて

見出しデザインについて

見出しデザインと聞くとHTML、CSSをイメージしませんか?
ですが、HTML、CSSでは文字のサイズ、色、ボーダー線、背景色など限界があります。

今回は線だけでのデザインパターンを25種類ご用意いたしました。
IllustratorやPhotoshopで簡単に作れます。普段、同じようなデザインで困ってる方はぜひ!
最後までご覧ください。

ホームページによっては文字を崩すデザイン、アイコンを使用するデザインなど様々なデザインがあります。
今回はその一部をご紹介いたします。

線を使用した見出しデザインについて

線を使用した見出しデザインについて

線においてもいろんな種類があります。
直線(1本線)、2本の直線(2本線)、点線、破線など様々な線が存在します。

01 文字下に下線を引いてみる

線を使用した見出しデザインについて

02 文字の下に下線(2本線)を引いてみる

文字の下に下線(2本線)を引いてみる

03 文字の左右に線を引いてみる

文字の左右に線を引いてみる

04 文字の左上、右下に線を足してみる

文字の左上、右下に線を足してみる

05 文字の下にギザギザ線を引いてみる

文字の下にギザギザ線を引いてみる

06 文字の下になみなみ線を引いてみる

文字の下になみなみ線を引いてみる

07 文字を直線(2本線)で囲んでみる

文字を直線(2本線)で囲んでみる

08 文字の内側を破線、外側を直線で囲んでみる

文字の内側を破線、外側を直線で囲んでみる

09 文字を直線(2本線)で囲み直線(1本線)を追加してみる

文字を直線(2本線)で囲み直線(1本線)を追加してみる

10 文字を点線で囲んでみる

文字を点線で囲んでみる

11 文字の左に線を追加し強調させてみる

文字の左に線を追加し強調させてみる

12 最初の文字だけを曲線で囲んでみる

最初の文字だけを曲線で囲んでみる

13 最初の左右を曲線で囲んでみる

最初の左右を曲線で囲んでみる

14 文字中央に斜め線を追加してみる

文字中央に斜め線を追加してみる

15 文字毎に直線を追加してみる

文字毎に直線を追加してみる

16 文字の左右に線を引き下線と繋げてみる

文字の左右に線を引き下線と繋げてみる

17 1文字ずつ四角で囲んでみる

1文字ずつ四角で囲んでみる

18 文字に直線でカッコをつけてみる

文字に直線でカッコをつけてみる

19 文字に直線(2本線)でカッコをつけてみる

文字に直線(2本線)でカッコをつけてみる

20 文字に斜めの直線を追加してみる

文字に斜めの直線を追加してみる

21 文字に斜めの直線(2本線)を追加してみる

文字に斜めの直線(2本線)を追加してみる

22 文字に上下に直線を追加してみる

文字に上下に直線を追加してみ

23 文字の左右に矢印を追加してみる

文字の左右に矢印を追加してみる

24 文字の左右にボーダー線を追加してみる

文字の左右にボーダー線を追加してみる

25 文字の上に異なる長さの直線を追加してみる

文字の上に異なる長さの直線を追加してみる

まとめ

今回は25パターンでしたが、線の組み合わせは無限大にあります。
ご自身でいろんなパターンを生み出してください。

結果:デザインも上達し「ロゴデザイン、ホームページデザイン、パッケージデザイン」などいろんな場面で
必す役に立ちます!

POINT
  • HTML、CSSのみでは限界があります。
  • 文字を崩すデザイン、アイコンを使用するデザインなど様々なデザインがあります。
  • 線の太さ、長さを変えるだけでもデザインの見た目は変わります。
  • 線の形(ギザギザ線、なみなみ線、曲線など)を変えるだけでもデザインの見た目は変わります。
  • 線の配置場所を変えるだけでもデザインの見た目は変わります。
  • 線の色を変えるだけでもデザインの見た目は変わります。

今後の見出しデザイン記事の予定内容

予定内容
  • 文字の色を変更してみる
  • 文字(フォント)を変更してみる
  • 文字に+1を足してみる
  • 文字にいろんなアイデアを足してみる
  • 文字で遊んでみる
スポンサーリンク

SHU

1991年生まれ九州の宮崎県育ち高校卒業後、愛知県で自動車関係のお仕事に5年間勤め、WEB業界に転職致しました。
趣味:サッカー観戦、ゲーム、映画、漫画基本インドアです!笑
つくる、しあわせをテーマとして主にWEBに関する様々な情報を発信しています。

関連記事

オススメ記事

月別アーカイブ

Portfolio

page_top