『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。得意を活かした企画に挑戦中!

Photoshop基本編 020 シェイプツールでボタンを作る(CS5)(20分21秒)

Photoshop 初心者 シェイプツールでボタンを作る(CS5)

図形を描くシェイプツール、色の指定方法、レイヤー、移動ツール、整列、文字の入力などPhotoshopの基本的な機能を確認しながらWeb用のボタンを作成してみました。

初心者の方でも約20分で簡単なお問い合わせボタンが作れるような内容になっています。

概要

  • カラーピッカーの使い方・HSBでの色の指定方法
  • 図形を描くシェイプツール
  • シェイプの拡大・縮小
  • レイヤーの基本操作
  • 移動ツール
  • オブジェクトの整列方法
  • 文字の入力方法
  • PhotoshopでのWeb用のボタンを作る

補足・ポイント

移動ツールを使いこなすコツ

移動ツールを使うときにオプションバーの自動選択のチェックが入っていると、感覚的に移動させることができるので便利ですが、レイヤーがたくさん重なり、複雑になってくると、思ったように選択ができなくなる場合があります。

状況に合わせて、自動選択のチェックのあり、なしを切り替えることをおすすめします。

カラーピッカーの使い方

カラーコードとは、
色の3原色である「赤(R:Red)」「緑(G:Green)」「青(B:Blue)」を00(色が最も弱い)~FF(色が最も強い)までの16進数を使って指定する方法です。
例えば、スタイルシートで赤色は
#ff0000
のように指定します。
HSBでの色の指定方法
HSBは、人が色を見るときに感じることができる「色相=色味」「彩度=色の鮮やかさ」「明度=色の明るさ」という心理的な3つの属性なので調整がしやすいと思います。
例えば、S(彩度)とB(明度)の値を保ったままH(色相)の値だけを変更するだけで、統一感のある配色が簡単にできます。
  • H=色相=色味
  • S=彩度=色の鮮やかさ
  • B=明度=色の明るさ

この記事が気に入ったら
いいね ! しよう

福本 智子

フリーランスWebデザイナー・Webスクール講師。 子育てをしながら、趣味で始めたネットショップからWebを活用したビジネスの楽しさにはまり、Web屋の道を歩む。 Web制作業務に加え【Webデザインを学びながらビジネス力も身につける体験型スクール&コミュニティ】を運営。 フリーランスでWebデザイナーを目指す方々のサポートに注力している。

Pocket
LINEで送る

関連記事

Webデザインの参考書を何冊やっても先に進めない方へ

ログイン

新米クリエイターズ Webメディア部

『自分の仕事は自分でクリエイト』を目指す新米クリエイターたちのアウトプット用Webマガジン。

Web・DTPデザイナー・会社員・アルバイト・ライター・ブロガー・主婦・子育てママ...etc。
現在の肩書きは違えど目指すところは皆「フリーランスのWebデザイナー(クリエイター)」

日々の学びやお役立ち情報をブログで発信・アウトプットをしながらWebの世界でコンテンツを配信する、
Webサイトを運営する、アクセスを集めるってどんなことなのか?を体感していきます。

新米クリエイターならではの気づきや学び、Webデザイナーの腕を磨いていく模様をリアルに感じていただけます!