未分類

便利!IllustratorやPhotoshopを使ったボタンの作り方記事まとめ


みなさんこんにちは、mayukouです。
webサイトをデザインする時に、ボタンは欠かせない要素ですね。
特に、ランディングページやECサイトなどによく使われます。

今回は、そんなボタンの作り方の記事をまとめてみました。

スポンサードリンク

Photoshopでボタンを作る方法

icatch-btn

ついつい押したくなる!立体的なボタンのデザインをPhotoshopで作る方法

これはSchooで紹介されていたボタンの作り方です。Photoshopのレイヤースタイルで

ちょっとしたグラデーションや、縁取りをかけます。

https://web-design-cafe.com/archives/655

 

20-icatch-btn

ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタンの簡単な作り方

最近は、こちらの方が感じがいいので多用しています。

webサイトの雰囲気がシャドー(影)の1pxで引き締まります。

https://web-design-cafe.com/archives/991

 

Illustratorでの作成方法

31-ghostbtn

webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法

1、2年前からよくみる、ゴーストボタンの作り方です。

線を個別に描かなくてもIllustratorのアピアランスツールで
線が文字量に沿って自在に形が変わります。

https://web-design-cafe.com/archives/1036

 

169-icatch

webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法

上記のゴーストボタンの追記の記事です。囲み線の中心から文字が微妙にずれる問題を解決してくれます。

https://web-design-cafe.com/archives/1186

 

最後に

いかがでしたか?ボタンの作り方をまとめてみました。ぜひwebサイト制作に参考にされてください。

投稿者プロフィール

mayukou
mayukou
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら

Twitterをフォローしていただくと、最新情報を見逃しません♫

関連記事

  1. 未分類

    wordpress初期化してしまいました。

    ブログゼロから再スタートです。…

  2. デザイン

    webデザインのトレンドを取り入れよう!デザインの参考になるリソース 〜日本編〜

    みなさんこんにちは、mayukouです。10月も半ばを過ぎましたが…

  3. 未分類

    モバイルフレンドリー!フラットデザインなwordpressテーマ ACCIOに変更しました

    こんにちは、mayukouです。このブログを始めて、1年半ほど経ち…

  4. Photoshop

    Photoshopでかすれたスタンプ風表現をする方法 その2

    みなさんこんにちは、mayukouです。今回は、うちのブログでも人気の…

  5. Photoshop

    表現の幅が広がる!photoshopのパスでラインを引く方法

    味のあるイラストを描きたい時に。Illustratorでラインを描…

コメント

  • コメント (0)

  • トラックバックは利用できません。

  1. この記事へのコメントはありません。

CAPTCHA


メルマガを購読する

Web Design Cafeの メルマガを購読する

更新情報や、お知らせ、お得情報をゆる〜く配信(月1程度)。


最近の記事

instagramもやっています

facebook更新中!

スポンサー

こんなサイトも作ってます。

  1. Mac

    仕事のBGMに!Apple Music始めてみました。使用感をご紹介
  2. 写真

    現像で素人感からプロっぽく!Macの写真アプリが素敵
  3. CSS

    レスポンシブ対応!CSSで二重線のボーダーボックスを作る方法
  4. indesign

    デザイン

    Indesignを使って、冊子を作りました!
  5. Mac

    フットワーク軽くなりそう♩Air Podsを買いました!
PAGE TOP