この記事はアピリッツの技術ブログ「DoRuby」から移行した記事です。情報が古い可能性がありますのでご注意ください。
はじめまして、デザイナー(多分)のみゃです。
Dorubyのデザイン担当しておきながら、記事の投稿は初めてです。
ここではエンジニアの方向けのデザインについて書きたいと思います。
こんなボタンが作れます。
※画像が多いので数回に分けます。
私が普段使っているのはPhotoshopなのですが、
社内のPCならとりあえず入っていそうなPowerPointで ボタン素材を作る方法を解説していきます。
ここで使うPowerPointのバージョンは2007です。
以前のバージョンには無い機能があったり、画面などが違うかも知れません。 ご了承下さいませ。
PowerPointを起動し、ファイルを新規作成したら、 メニューのホームからレイアウトをクリック。
「白紙」のテーマを選択。 メニューから挿入→図形より 角丸四角形を選択し、
作りたいサイズくらいの四角形を描きます。
(本当はサイズ指定して作ることができればいいのですが…)
角丸四角形が描けたら、角の丸みの調整をします。
黄色い◆を左右に動かすと、角の丸みが変化します。
(角の丸が大きいほど子供っぽく優しい印象になります)
角丸の調整ができたら、図形の上で右クリック。図形の書式設定を選択します。
左メニューの線の色を選択し、濃い目のグレーに設定します。
(同系の濃い色か濃いグレーが無難ですが、好きな色に設定して下さい)
次に塗りつぶしを選択し、リストよりグラデーションを選択。
グラデーションの分岐点にそれぞれ色を指定します。
リスト内の分岐点1～3に以下の指定します。
【分岐点1】分岐点-0%、色-薄い色 例:R237.G242.B249
【分岐点2】分岐点-50%、色-分岐点1の色より少し濃い色 例:R142.G180.B227
【分岐点3】分岐点-54%、色-分岐点2の色よりはっきりわかる濃い色 例:R85.G142.B213
最後に分岐点の追加をクリックし、分岐点4に以下の指定をします。
【分岐点4】分岐点-100%、色-分岐点3の色より少し明るく、鮮やかな色 例:R82.G184.B216
これでキモとなるグラデーションの完成です。
文字だと色の表現が伝わりにくいですが、分岐点1～2で明るい色のグラデーション、
分岐点3～4で暗い色から鮮やかな色へのグラデーションになっていて、
分岐点2と3の色の差がはっきりしているのがポイントです。
connpass
Peatix
Wantedly
デザインチームnote