Photoshopで簡単にボタンを制作する方法

こんにちは。アメリカのドラマ「The Mentalist」にハマりつつも、土日はブログ用のデザインと収録をしているベーシックのグラフィック・デザインーの大竹です。

Mentalistの主人公のように、仕事にも世間にも少し斜めに構えるような姿勢に憧れます。


さて、前回に続く簡単シリーズ第二弾。今回は上記のデザインような「ボタン」をPhotoshopで制作してきます。そんなのHTML5とCSS3で作れるよ、というエンジニアさんは飛ばしてください。

脱線しますが、CSS3のプロパティと値の記述方法が、ベンダープレフィックスごとにたまに違うのを、どうにかして欲しいと思うのは僕だけでしょうか?gradientなんて本当にめんどくさい!

ボタンの色変えも塗り絵のように楽しくできるPhotoshop

HTML5とCSS3でもボタンは作れますが、色替えが面倒だったり、自由な装飾にも限定されてしまう部分があります。とはいえPhotoshopでボタンを作るのも難しそうだなと思うエンジニアさんもいるのではないでしょうか?

そこで今回はPhotoshopを使って、5分でできる簡単ボタン制作を動画で解説しています。

あまり難しい言葉は使わないように意識しましたが、わからない単語や説明がありましたらメッセージに残してください。後日、改めて解説します。また今回も、作成に使用したデータ・素材は以下よりダウンロードできます。赤いボタン以外にも緑や青のボタンもありますのでご参考ください。

素材ファイルダウンロード

Feed

最新記事

開発フローを独自進化させ続けている開発チームの話

こんにちは CTO の [@zaru](https://twitter.com/zaru) です。 スクラム開発をしている開発チームが、開発フローを独自進化させていて、それが良い取り組みだったので紹介しようと思います。 #...

235650?v=4
zaru
2017年11月20日

退職者を招いたLTイベントを開催した

こんにちは、ベーシック CTO [@zaru](https://twitter.com/zaru) です。 ベーシック開発部では毎月月末の金曜日にTGIFと称して、 ~~飲み会 + アナログゲームなイベント~~ 技術 LT 大会...

235650?v=4
zaru
2017年10月12日

山形ラボ、TGIFはじめました

こんにちは。株式会社ベーシック山形ラボの長谷川です。 いろんなところで書いたりなんだりしてますが、弊社には山形に「山形ラボ」というリモート拠点がありまして、そこで4人のエンジニアが働いております。 今回は その山形ラボで、...

10917612?v=4
roki1801
2017年10月10日