IT仕事

PhotoshopElementsでWebデザイナーが作ったようなキレイなボタンを作るには

投稿日:

PSPについては、
思わず押してみたくなる、いとも簡単なボタンの作り方 | 楽してプロっぽいデザイン | Forty-N-FiveBlog
など、Web上にいろいろ解説があるけども、Elementsについてはあまり情報がないので、以下、自分流の覚書&やり方公開。

●下準備
Deziner Folio» Blog Archive » Ultimate Web 2.0 Layer Styles – Free Download
で予めレイヤースタイルをダウンロードして、かつ読み込んでおく。Elementsの3.0以上ならば読み込みできるはず。

●Elements上の操作
1.シェイプツールで適当な角丸長方形を作る。
2.スタイル・エフェクトのパレットで、先ほどのレイヤー3.スタイルを呼び出して好きなスタイルを適用する。
webbtn1.jpg
ここまでは、超簡単。
これだけでもよいけど、さらにWeb2.0風にするなら、

●仕上げ
4.自動選択ツールで背景の白を選択する。
5.選択を反転する(これでボタンのみが選択されるはず)。
6.新規レイヤーを作成する。
7.楕円形選択ツールでAltキーを押しながらボタン上をドラッグし、下60%くらいの面積を切り抜く。
webbtn2.jpg
8.残った上40%の面積を塗りつぶしツールで白く塗る。
レイヤーパレットで不透明度を20-30%にする。

これで、出来上がり。
webbtn3.jpg

誰かのお役に立ちますように。

-IT仕事

執筆者:

関連記事

Google app scriptの「このアプリはブロックされます」問題にあたった

突然、新規に作成したスプレッドシートでGASのスクリプトを書いて実行しようとすると、「承認が必要です」とのダイアログボックスが表示され、承認操作のあとに、「このアプリはブロックされます」と表示され、ア …

no image

会社のサイトを常時SSL化

会社のショッピングサイト2つのうち、1つを常時SSL化の作業に着手。 まずは、こちらのサイトを参考に、.htaccessを修正。301リダイレクトになるパターンがいいみたい。 httpからhttpsに …

no image

仕事でイライラ。

こちらが要求しているのは、手間のかかることであり、かつ、一円もお金が引き出せないことだ。 それは、理解している。 それでも。 目の前の相手やその先の相手は、君の客ではないのか? 客という意識はないのか …

WooCommerceのメール通知設定「注文保留」は支払方法「銀行振込」において必須

はまった。 先ほどからWooCommerceをテスト環境でテストしている。 困ったことに、支払方法を銀行振込にしたときに限り(クレジットカードと代引きは影響なし)、メールが注文者に送信しなくなった。 …

no image

珍しく、講習会

昨日は珍しく、講習会なんぞに行ってきた。 内容は、SEO。 Webサイトをちゃんとする方法について、講師は丁寧に解説してくれた。 ま、要するに、右脳も左脳も前頭葉も後頭葉も全力でこき使ってください、う …