その他

2022.07.20

【第1回】Photoshopでテキストの一部の色を変える方法!<初心者向け>

初めまして!H.Abeです。

私はスピカデザインのデザイナーとしてwebページのデザインをしたり、ロゴを作ったりしています。

突然ですが、デザインを作成している中で「なんだか野暮ったいなあ…」「もう少しインパクトが欲しいんだけれどどこをどうしたらいいんだろう…」と頭を抱えた経験はありませんか?

(私はしょっちゅうあります…笑)

そんなときに試してみる価値あり!?な小技を3回に分けてご紹介します!

今回は画像のような、テキストの一部の色を変える方法をご紹介していきます!

これからご紹介する方法は、途中で「やっぱりここの色を変えたい!」となった時にパッと変えられる方法なので便利です。

動画はこちら

動画でも解説しています!ぜひご覧ください!

<手順1>テキストを入力する

ベースとなる色で任意のテキストを入力します。

今回は水色×ピンクの配色なので水色をベースカラーに設定しました。

<手順2>テキストレイヤーの上に長方形ツールで四角形を作成する

長方形ツールはベースカラー以外の色を設定します。

今回はベースカラーが水色なのでピンクを塗りの色に設定して四角形を作成しました。

<手順3>テキストレイヤーに長方形レイヤーのクリッピングマスクをかける

長方形レイヤーの上で右クリックをすると画像のようなメニューが出るので、「クリッピングマスクを作成」を選択すると…

長方形レイヤーに画像のような矢印マークが表示されました!こちらがクリッピングマスクがかかっている状態になります。

クリッピングマスクが正常かかると一部分の色変更ができます!

途中から色を変更したくなった場合

「やっぱりピンクのところをオレンジにしたいな〜」となった場合も、以下の手順で簡単に色変更が可能です。

①長方形レイヤーを選択する

②プロパティウィンドウ>アピアランス>塗り から色変更をする

<おまけ>慣れるとこんなことができます

長方形ツールだけでなく、様々なツールを使うとこんなこともできます!

まとめ

応用として長方形レイヤーにグラデーションをかけたり、パターンをかけてもベタ塗りとは異なった表現が可能です。

是非、色々試してみてください!

この記事をシェアする

関連記事

  • 2024.03.22

    Webデザインにおけるアニメーションについて考えてみた〜実例編〜

    その他

  • 2024.03.12

    Webデザインにおけるアニメーションについて考えてみた〜メリット・デメリット編〜

    その他

  • 2024.02.02

    Webデザインにおけるアニメーションについて考えてみた〜目的編〜

    その他

おすすめ記事

  • 2021.12.21

    エラーでよく見るHTTPステータスコードとは?

    その他

  • 2021.04.07

    【CSS】背景色のみを透過する方法

    その他

  • 2020.11.07

    Codepen(コードペン)をWordPress記事内に埋め込む方法【コード紹介に便利】

    その他

TAG

×