webデザイン・コーディングに役立つ情報、WordPressカスタムに使えるHTML・CSSコピペ用コード、Canva無料テンプレートなどをご紹介します♩

chiweblogちいウェブログ

Photoshopで文字に柄をつける超簡単な方法

Photoshopで文字に柄をつける

Web系フリーランスのMarieです。

今回は、文字に柄をサクッと乗せる方法です。

Photoshopでバナーやデザインを作成する時に使えると思います。

ぜひ試してみてくださいね。

この記事を書いている人
Marie

Marie

  • フリーランスwebデザイナー&講師
  • 制作会社・インハウスデザイナーを経験し独立
  • オンラインwebデザイン教室ちいウェブ運営
  • 仕事の合間の息抜きに植物を育てています♡
  • スプラ・DIY・将棋がすき
  • 小4・年長の母

テキストに柄をマスクさせる

テキストを書く

まずは、柄を適用させる為のテキストを用意してください。

何でも好きに書いてみてください☆

普通にテキストツールで文字を入力すればOKです。

文字を書く

画像を用意してドラッグする

文字を書いたら、この文字に載せたい柄の画像を用意してください。

ドラッグして、文字レイヤーの上に持ってきます。

画像を文字の上にドラッグ
ドラッグ

ドラッグして、テキストレイヤーの上に、柄画像を配置してください。

柄の画像が上でテキストが下になるように
柄の画像が上でテキストが下になるように

このあと、柄画像を文字にマスクします。

マスクさせる

レイヤーパネルで、柄画像を選択している状態で、optionキー(altキー)をクリックしながら、文字レイヤーにマウスを持っていくと、矢印が出ます。

そのままクリックすると、柄画像を文字にマスクさせることができます。

柄の画像を選択して、好きな位置に移動させれば完了です。

不透明度を下げてもOK

柄が濃すぎたりする場合は、不透明度を触ると良いですね♫

柄の画像レイヤーの「不透明度」を少し下げて、テキスト本来のカラーが見えるようにし、好きな雰囲気に整えてみてください。

パターンを使ったり、写真を使ったりして、アレンジを楽しんでみてください^^

柄文字見本letter

Adobe Photoshopはこちらから↓
月額980円で利用できるよ♩

Adobe

いいなと思ったら
TAPしてね♡↓

コメント

コメントする

CAPTCHA


コメントは承認後に表示されます。

Home Webデザイン デザイン Photoshop Photoshopで文字に柄をつける超簡単な方法

関連記事

更新通知を受け取る

不定期更新の為、
メールにて更新お知らせを
お送りいたしますlove letter

(更新通知以外のメールは
お送りしませんので
ご安心ください)