未分類

便利!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. デザイン

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

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

  2. Photoshop

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

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

  3. 未分類

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

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

  4. 未分類

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

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

  5. Photoshop

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Web Design

    クライアントに喜ばれる!集客用ホームページを作る手順
  2. Mac

    仕事が早く終わる!集中力を持続して生産性アップできるPomodoroのアプリがオ…
  3. 日記

    wordpressでコーギーブログ始めました♫
  4. デザイン

    【随時更新】クリスマス&年賀状に使えるイラスト素材を無料配布します♩
  5. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?
PAGE TOP