こんにちは。アメリカのドラマ「The Mentalist」にハマりつつも、土日はブログ用のデザインと収録をしているベーシックのグラフィック・デザインーの大竹です。
Mentalistの主人公のように、仕事にも世間にも少し斜めに構えるような姿勢に憧れます。
さて、前回に続く簡単シリーズ第二弾。今回は上記のデザインような「ボタン」をPhotoshopで制作してきます。そんなのHTML5とCSS3で作れるよ、というエンジニアさんは飛ばしてください。
脱線しますが、CSS3のプロパティと値の記述方法が、ベンダープレフィックスごとにたまに違うのを、どうにかして欲しいと思うのは僕だけでしょうか？gradientなんて本当にめんどくさい！
ボタンの色変えも塗り絵のように楽しくできるPhotoshop
HTML5とCSS3でもボタンは作れますが、色替えが面倒だったり、自由な装飾にも限定されてしまう部分があります。とはいえPhotoshopでボタンを作るのも難しそうだなと思うエンジニアさんもいるのではないでしょうか？
そこで今回はPhotoshopを使って、5分でできる簡単ボタン制作を動画で解説しています。
あまり難しい言葉は使わないように意識しましたが、わからない単語や説明がありましたらメッセージに残してください。後日、改めて解説します。また今回も、作成に使用したデータ・素材は以下よりダウンロードできます。赤いボタン以外にも緑や青のボタンもありますのでご参考ください。