Fireflyの商用利用は大丈夫？著作権で困らない理由3つと注意点4つ【2026年10月】
Kawai358Re:じぶん再起動ノート
フォトショで文字を円形に｜ワープ2回で作る立体の輪とバナー5ステップ
Kawai358
このページには広告・アフィリエイトリンクを含みます。
お店のポスターや化粧品の広告で、文字が商品のまわりをぐるっと一周しているデザインを見かけませんか。
3Dソフトで作っているように見えますが、Photoshopのワープを2回使うだけで作れます。
この記事では、フォトショで文字を円形に曲げて立体の輪にする方法を、画面つきで順番に紹介します。
最後は、その輪を使って口紅のバナーまで仕上げます。
写真はどちらもAdobe Stockの無料素材です。
案内役の黒猫です。
文字を2枚重ねて、写真をあいだにはさむ。
しくみはそれだけです。
文字を2枚重ねて、写真をあいだにはさむ。
しくみはそれだけです。
架空の商品の作例です。
口紅のまわりの文字の輪を、この記事で作ります。
この記事でわかること
- ワープの「円柱」で、文字を輪のように曲げる手順。
- 写真を2枚の文字ではさんで、輪が写真を通り抜けて見えるようにするコツ。
- 影をつけて、バナーとして仕上げるまでの流れ。
メニュー
スポンサーリンク
お手本の動画と、この記事の進め方
お手本にしたのは、タマケンさんのYouTube動画「【Photoshop】円形の立体文字デザインを作る方法」です。
約3分の動画で、ワープ機能を使って文字を輪の形にする方法が紹介されています。
手順は、動画の話と画面をひとつずつ確かめながら、筆者のMacのPhotoshop 2026で作り直しました。
お手本は黒い背景に白い文字ですが、この記事ではブログの色に合わせて、生成りの背景にセージ色の文字にしています。
写真もAdobe Stockの無料素材に置きかえました。
先に全体の流れを見ておきましょう
| 手順 | やること | ポイント |
|---|---|---|
| 手順1 | 文字を打って、ワープの「円柱」をかける。 | 編集 ＞ 変形 ＞ ワープ。 中心のポイントで幅を調整。 |
| 手順2 | 文字を複製して、もう一度ワープ。 | 上のポイントを上へ引き上げて輪にする。 |
| 手順3 | 下の文字を少し暗い色にする。 | 奥にある感じが出て、立体に見える。 |
| 手順4 | 2枚の文字のあいだに、切り抜いた写真をはさむ。 | 文字の角度とサイズを写真に合わせる。 |
| 手順5 | 上の文字を複製して、影をつける。 | ぼかし（ガウス）＋クリッピングマスク＋不透明度。 |
表は保存しておくと、作業中に見返せます。
準備：写真を用意して、背景を削除しておく
まず、文字の輪の中に置く写真を用意します。
筆者は、Adobe Stockの無料素材から、白い背景の口紅の写真を選びました。
もともと斜めに傾いて写っているので、輪を通すデザインに向いています。
写真をPhotoshopで開いたら、背景を消しておきます。
レイヤーを選ぶと画面に出る「コンテキストタスクバー」か、プロパティパネルの「クイック操作」にある「背景を削除」を押すだけです。
白い背景が消えて、口紅だけが残ります。
背景が白や無地の写真ほど、きれいに切り抜けます。
最初の1枚は、白い背景の写真がおすすめです。
最初の1枚は、白い背景の写真がおすすめです。
手順1：フォトショで文字を円形に曲げる（ワープの円柱）
新しいドキュメントを作って、文字を打ちます。
筆者は横2400×縦1600ピクセルにして、「LIP STICK」と入れました。
書体は、縦に長くて太い Helvetica Neue の Condensed Black です。
曲げると文字が細く見えるので、太い書体のほうが読みやすく残ります。
文字のレイヤーを選んだまま、メニューの「編集」＞「変形」＞「ワープ」を選びます。
画面の上のオプションバーに「ワープ」という欄が出るので、種類を「円柱」にします。
いちばん下にある項目です。
右：文字が円柱に巻きついたように曲がります。
文字が、筒に巻きついたような形になりました。
これがフォトショで文字を円形にする、いちばん大事な一歩です。
中心のポイントで、文字の幅を調整する
真ん中あたりに、小さな四角いポイントがあります。
これを左右にドラッグすると、文字の幅（どれくらい巻きつくか）が変わります。
両端の文字がつぶれすぎないところで止めて、Returnキー（WindowsはEnterキー）で確定します。
左右に動かすと、巻きつき具合が変わります。
手順2：文字を複製して、もう一度ワープで輪にする
文字のレイヤーを複製します。
Command＋J（WindowsはCtrl＋J）で、すぐ上にコピーができます。
ワープはかかったまま複製されます。
複製した上のレイヤーを選んで、もう一度「編集」＞「変形」＞「ワープ」を選びます。
今度は、上の真ん中のポイントを上へドラッグします。
引き上げていくと、文字の上の線が山なりにそって、筒の奥側のような形に変わります。
右：上下の文字がつながって、輪に見える位置で止めます。
上と下の文字がひとつの輪に見えたら、Returnキーで確定します。
ここまでで、文字の輪の形ができあがりです。
止める位置に正解はありません。
輪がきれいに見えるところを、目で見て決めてください。
輪がきれいに見えるところを、目で見て決めてください。
手順3：下の文字を少し暗くして、立体に見せる
このままだと、2枚の文字が同じ色なので平たく見えます。
下のレイヤー（最初に作った文字）を選んで、色を少し暗くします。
文字の色の四角をクリックするとカラーピッカーが開くので、いちばん下の「#」の欄に色のコードを入れて「OK」です。
「#」の欄に色のコードを入れて「OK」。
筆者は、元のセージ色（#5E8C6A）を、暗いセージ色（#405848）にしました。
奥の文字が暗くなるだけで、手前と奥の差が出て、ぐっと立体に見えます。
手順4：2枚の文字のあいだに、写真をはさむ
背景を消した口紅の写真を、このドキュメントに持ってきます。
レイヤーパネルで、上の文字と下の文字のあいだに置くのがポイントです。
写真が文字のあいだに入ると、手前の文字は写真の上に、奥の文字は写真のうしろに見えます。
これで、輪が写真を通り抜けているように見えます。
右：あいだに写真をはさんだところ。
文字の角度とサイズを、写真に合わせる
写真が斜めなら、文字の輪も同じように傾けると自然です。
2枚の文字のレイヤーをいっしょに選んで、Command＋T（WindowsはCtrl＋T）で回転と大きさを調整します。
筆者は、輪が口紅の軸に対して直角に近くなるよう、17度ほど傾けました。
最初は輪が大きすぎて、口紅に巻きついている感じが弱く見えました。
お手本と見比べて、輪を8割くらいに縮めたら、ぎゅっと巻きついた印象になりました。
手順5：影をつけて、輪をリアルにする
最後に、手前の文字の影を口紅に落とします。
ひと手間ですが、ここで仕上がりの本物らしさが変わります。
- 上の文字のレイヤーを複製して、写真のすぐ上に置きます。
- メニューの「フィルター」＞「ぼかし」＞「ぼかし（ガウス）」でぼかします。
筆者は半径12ピクセルにしました。 - 移動ツールで、右下へ少しずらします。
- レイヤーパネルで、影のレイヤーと写真のレイヤーの境目を、Optionキー（WindowsはAltキー）を押しながらクリックします。
これがクリッピングマスクで、影が写真の上にだけ表示されます。 - 影のレイヤーの不透明度を下げます。
筆者は75%にしました。
文字のレイヤーにぼかしをかけようとすると、ラスタライズするか、スマートオブジェクトに変換するかを聞かれます。
スマートオブジェクトに変換しておくと、あとからぼかしの強さを変えられるので便利です。
これで、文字の輪の完成です。
口紅のまわりを、LIP STICKの文字が一周しています。
仕上げ：文字の輪を使って、バナーにする
せっかく作った輪なので、そのままバナーに仕上げました。
サイズは、ブログやSNSのリンク画像でよく使う横長（横2400×縦1256ピクセル）です。
| 場所 | やったこと | ねらい |
|---|---|---|
| 背景 | 淡いピンクのシルクの写真を全面に敷く。 左側だけ、白っぽい色をふんわり重ねる。 |
やわらかい印象にしつつ、文字を読みやすくする。 |
| 右側 | 文字の輪と口紅を、背景を消したまま配置。 | 見る人の目を、まず商品に集める。 |
| 見出し | 「くちびるに、／秋の彩り。」を丸ゴシックの太字で2行に。 | 一瞬で何の広告かがわかる。 |
| 小さな英字 | NEW COLOR ｜ 2026 AUTUMN をセージ色で。 | 見出しの前に、季節と新色であることを伝える。 |
| ボタン | コーラル色の丸いボタンに「詳しく見る」。 | 次にしてほしい行動を1つだけ置く。 |
文字の輪と口紅は、元のドキュメントで背景を非表示にして、表示されているレイヤーを1枚にまとめてから持ってきました。
Command＋Option＋Shift＋E（WindowsはCtrl＋Alt＋Shift＋E）で、見えているものを新しいレイヤーにまとめられます。
色は、文字にセージ色、ボタンにコーラル色の2色だけにしました。
口紅の赤とピンクの背景に、緑みのある文字がよく映えます。
ボタンは、長方形ツールで描いて、角の丸みをいちばん大きくすると同じ形になります。
文字の輪は、商品が主役の広告と相性がいいです。
カップや香水のびんでも試せます。
カップや香水のびんでも試せます。
うまくいかないときは、ここを見てください
確認したい5つのこと
- ワープに「円柱」が見つからない：オプションバーの「ワープ」の一覧のいちばん下にあります。
古いバージョンにはない場合があります。 - 輪にならない：2回目のワープで動かすのは「上の真ん中」のポイントです。
複製したほうのレイヤーを選んでいるかも確かめます。 - 写真が文字の前に全部出てしまう：レイヤーの順番を見直します。
写真は、上の文字と下の文字のあいだです。 - 影が写真の外にも出る：影のレイヤーにクリッピングマスクがかかっているか確かめます。
- ぼかしがかからない：文字のレイヤーのままだと、ラスタライズかスマートオブジェクトへの変換を聞かれます。
スマートオブジェクトに変換してからかけます。
よくある質問
Q. 日本語の文字でも作れますか？
作れます。
ただ、輪にすると文字が細く見えるので、太い書体で、文字数は少なめのほうが読みやすく仕上がります。
Q. ワープをかけたあと、文字を打ち直せますか？
打ち直せます。
ワープは文字のレイヤーのままかかるので、文字ツールで中身を書きかえると、曲がった形のまま変わります。
Q. 写真は何でもいいですか？
縦に長くて、少し傾いているものが向いています。
口紅、ボトル、カップ、人物の全身などです。
背景が白や無地だと、切り抜きもきれいです。
Q. Adobe Stockの無料素材は、バナーに使っても大丈夫ですか？
Adobe Stockの無料素材は、ライセンスの範囲で商用にも使えます。
使う前に、各素材のページとライセンスの条件を確かめてください。
まとめ
フォトショで文字を円形にして、立体の輪にする5ステップ
- 文字を打って、ワープの「円柱」をかける。
中心のポイントで幅を調整。 - 文字を複製して、もう一度ワープ。
上のポイントを上へ引き上げて輪にする。 - 下の文字を少し暗い色にする。
- 2枚の文字のあいだに、背景を消した写真をはさむ。
角度とサイズを合わせる。 - 上の文字を複製して、ぼかし・クリッピングマスク・不透明度で影をつける。
むずかしそうに見えるデザインも、分けてみると、ワープ2回とレイヤーの順番だけでした。
好きな写真と言葉で、ひとつ作ってみてください。
Photoshopの基本操作は、こちらの記事でも紹介しています。
Photoshopをこれから使うなら
この記事の作例は、Photoshopの単体プランか、Creative Cloudのプランで作れます。
ワープも背景を削除も、Photoshopに最初から入っている機能です。
写真は、Adobe Stockの無料素材だけで作りました。
ただ、無料の素材だけでは、ぴったりの構図や日本人が写っている写真が見つからないこともあります。
作りたいものが増えてきたら、有料のプランを考えるくらいでちょうどいいと思います。
ツールを契約しただけで、何かが変わるわけではありません。
筆者もWEBデザインのオンラインスクールに通いましたが、そこでは1円も稼げませんでした。
作りたいものを先に決めて、まずは無料体験でひとつ作ってみるのがおすすめです。
スポンサーリンク（PR）
※上記はアフィリエイトリンクです。
無料素材は、Adobe Stockの無料コレクションから探せます。
Photoshopで何ができるかは、こちらのページにまとめています。
この記事で確認した範囲
手順は、参考動画の音声と画面で確かめたものです。
ワープ2回と文字の色の変更は、Photoshop 2026の画面で操作して撮っています。
背景の削除、写真をはさむ・回転する工程、影の工程、バナーの組み立ては、筆者がスクリプトで同じ操作を行いました。
影のぼかしの半径や不透明度などの数値は、動画では話されていないため、筆者が作例に合わせて決めた値です。
バナーの商品は架空のもので、作例として作りました。
参考：タマケン「【Photoshop】円形の立体文字デザインを作る方法」（YouTube）。
手順は動画を参考にし、画面と作例は筆者が作り直したものです。
Instagramでは、図解を週3本出しています。
50代からのAdobeのコツと、心を軽くする本の1行を、黒猫が1分で案内します。
保存して、明日そのまま試せる形にしています。
Instagramを見る@yoshihirok0358
スポンサーリンク
Profile
仕事、家計、親のこと。自分は後回しになっていませんか。再就職、パートや在宅の小さな収入、心が軽くなる本の言葉、Adobeで暮らしを楽しむコツを、黒猫と一緒にやさしく届けています。53歳で早期退職→再就職、いまは会社員とブログの二足のわらじ。
