みなさんこんにちは、mayukouです。
webサイトをデザインする時に、ボタンは欠かせない要素ですね。
特に、ランディングページやECサイトなどによく使われます。
今回は、そんなボタンの作り方の記事をまとめてみました。
スポンサードリンク
Photoshopでボタンを作る方法
ついつい押したくなる!立体的なボタンのデザインをPhotoshopで作る方法
これはSchooで紹介されていたボタンの作り方です。Photoshopのレイヤースタイルで
ちょっとしたグラデーションや、縁取りをかけます。
https://web-design-cafe.com/archives/655
ちょっと洒落てる!Photoshopで作る、白いシャドーが入った押したくなるボタンの簡単な作り方
最近は、こちらの方が感じがいいので多用しています。
webサイトの雰囲気がシャドー(影)の1pxで引き締まります。
https://web-design-cafe.com/archives/991
Illustratorでの作成方法
webデザインのトレンド!文字によって変形するゴーストボタンをイラレで作る方法
1、2年前からよくみる、ゴーストボタンの作り方です。
線を個別に描かなくてもIllustratorのアピアランスツールで
線が文字量に沿って自在に形が変わります。
https://web-design-cafe.com/archives/1036
webデザインに活用するゴーストボタンを作るときの文字をセンタリングする方法
上記のゴーストボタンの追記の記事です。囲み線の中心から文字が微妙にずれる問題を解決してくれます。
https://web-design-cafe.com/archives/1186
最後に
いかがでしたか?ボタンの作り方をまとめてみました。ぜひwebサイト制作に参考にされてください。
投稿者プロフィール

-
Webデザイナー修行中のmayukouです。webデザインのお仕事を始めてなんとか約6年が経ちました。とにかく技術を高めようと思っています。仕事で得た知識やお役立ち情報をご紹介いたします。宜しくお願いします。水彩画を勉強中です。趣味は音楽鑑賞(洋楽)、料理、読書、ブログです。
詳しくはこちら
最新の投稿
- 2022.05.20jQueryfullpage.jsで全画面表示&スクロールを実現できます。その方法をご紹介
- 2022.03.27デザイン【制作実績】店舗の壁画を描きました。壁画の描き方をご紹介
- 2022.02.23デザイン人は色で判断している!?ブランディングにおける色彩設計の基本
- 2022.02.23CSSデバイスに合わせて全画面表示したいときは、CSSのheight:100vhを使おう。
この記事へのコメントはありません。