未分類

便利!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テーマ ACCIOに変更しました

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

  2. Photoshop

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

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

  3. 未分類

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

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

  4. デザイン

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

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

  5. Photoshop

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


メルマガを購読する

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

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


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Illustrator

    助かった!Illustratorが重たい時の対処方法
  2. デザイン

    Adobe CCを導入しました。使ってみて感じたメリットとデメリットとは?
  3. ブログ

    webデザイナー4年目!その間に身につけたスキル
  4. Web Design

    WordPressでポートフォリオサイトをリニューアルしました。wordpres…
  5. CSS

    一手間でおしゃれに。CSSでマテリアルデザイン風のボタンを作る方法
PAGE TOP