未分類

便利!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. Photoshop

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

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

  2. デザイン

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

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

  3. Photoshop

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

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

  4. 未分類

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

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

  5. 未分類

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

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

コメント

  • コメント (0)

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

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

CAPTCHA


最近の記事

instagramもやっています

facebook更新中!

スポンサー

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

  1. Photoshop

    Photoshop の水彩画ブラシで描いた植物イラストのご紹介
  2. マーケティング

    コンテンツマーケティングにおける有益な記事とは?ブログ運営3年目の私の最適解
  3. illustration

    簡単!Illustratorでキラキラ星を作る方法
  4. Photoshop

    点線もかける!Photoshopでラインを引く方法を新たに発見(ストローク機能)…
  5. Photoshop

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