design ボタンをつくってみよう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

ボタンをつくってみよう

WEBデザイン|2018年10月30日

2018年10月30日
  • このエントリーをはてなブックマークに追加

Photoshopとデザインの実践課題を初めていきましょう。

Photoshopやデザインへの慣れは、練習あるのみです。
とにかく、たくさんの作品を作り、作業を繰り返すことで慣れていく。
それ以外に、デザインが上達する方法はありません。

まず手始めにボタンを作ってみましょう。

ボタンはどんなWEBサイトでも使うデザインパーツです。
お問合せや購入につなぐパーツであり、重要な役割を担っています。
色や形1つで、お問合せおよび購入の結果が大きく変わることもあります。

今回は、そんなボタンを2種類、作ってみましょう。

1つは昔ながらのボタン。
もう1つが、今風のフラットなボタンです。
2つのボタンを作り、ボタンの作成に慣れましょう。

作り方の解説

まずは、ボタンの作り方について、動画を見ましょう。
今回は2つのボタンパーツの動画をご用意しました。
一度、動画通りにボタンを作ってみてください。

まずは、昔ながらのボタンから。

そして、もう1つが今風のフラットなボタンです。

いかがでしょうか?
ゆっくり、動画を確認しながら進めてみてください。

注意点として、Photoshopの設定によっては操作が異なることもあります。
例えば、あるはずのツールがないといったことも設定次第でおこります。
そんな時は、見つけられなかった機能や表示方法について調べてみてください。

また、Photoshopで何かを作る時、作り方は1ではありません。
別の方法で同じ表現を実現できることもあります。
工夫して「出来ない」を乗り越えてみましょう。

今回のミッション

では、ウォーミングアップはここまでで、ミッションに入りましょう。
今回のミッションは、下記のボタンを再現することです。
先程の模写で使った方法を応用して、下記のボタンを作ってみてください。

使うツールや方法に、そこまで大きな違いはありません。
もちろん、どちらも、これまで練習した方法で実現できます。

なお「購入する」の「買い物アイコン」はフリー素材です。
http://icooon-mono.com/ から使わせていただきました。
フリーでアイコンがたくさん使えるサイトです。

このようにフリー素材を駆使できるのも、デザイナーとしてのスキルです。

使える素材は徹底的に使い倒し、デザインを効率化していきましょう。
今回作ったボタンパーツもテンプレートとして使えると良いですね。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

ウエヤマ ショウタ

BASE.91とWORKROOM@セブ立ちあげました。誰もが「独学」でプロになれる仕組みを作る。現役WEBデザイナーでエンジニア。起業好き。IT留学事業を売却後、シリコンバレーで起業を学び、起業家&クリエイター育成活動開始。経験をシェアしてます。独学で収益化したスキル : デザイン、プログラミング、起業、マーケ、英語

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら