実践Webデザインスキル - 第2章 Lesson3

押したくなるダウンロードボタンの作り方

   

テクノロジーとクリエイティブのプロを目指す人のためのオンラインスクール
月額2500円で500以上のレッスンが受けられます

このスキルのデータをダウンロード: Windows Mac

今回は、「押したくなるダウンロードボタン」をデザインしていきましょう。



この動画で学べること

・押したくなるボタンの作り方



ボタンの背景を作っていこう

まず、角丸長方形ツールで、背景の形を決めていきます。
今回は、半径5pxの角丸の四角形を作成していきましょう。
ボタンにはグラデーションをかけ、見本と同じように少し濃い青で1pxの境界線を作成していきます。
また、ボタンの背景にドロップシャドウと光彩(内側)のレイヤースタイルをかけて立体感のあるボタンにしていきましょう。
これで、ボタンの背景の完成です。




ボタンの文字を作っていこう

では次に、文字の部分の作成に入っていいきます。
まず、文字の位置を決めるため、ガイドを作成していきます。
ガイドができたら、ツールバーからテキストツールに切り替えます。
「DOWNLOAD」とうち、文字の大きさ、フォント、位置などを調整しましょう。
今回の見本のボタンには、文字にもドロップシャドウや境界線のレイヤースタイルがかかっているので、同じようにデザインしていきます。




丸いボタンを作ろう

楕円形ツールで丸い背景を作っていきます。
塗りや線の設定をし、レイヤースタイルをかけていきましょう。
レイヤースタイルを見本と同じようにかけられるようになると、デザインスキルが一気に上がっていきます。
最初は少し難しいですが、慣れれば大丈夫ですので頑張ってください。