PSで文字を入れるだけなら簡単です。ただ、配置が崩れると一気に見栄えが悪くなります。新規カンバスの作成から文字ツールの選択、フォントサイズ・行間・整列の設定、PNGとPSDへの書き出しまで、文字入れの流れを一通り解説します。初めてでもそのまま真似できます。最後に文字の変形と応用スタイルも紹介します。
ステップ1：オンラインPSを開く
- ブラウザで オンラインPS（zaixianps.cc） にアクセスします。
- ページが読み込まれると、Photoshopに似た作業画面が表示されます。ソフトのインストールは不要です。
ステップ2：新規カンバスを作成
- 左上の
File（ファイル）メニュー →New（新規）をクリックするか、ショートカットCtrl+Nを使います（MacでもCtrl+Nです）。 - 表示されたダイアログで 幅・高さ・解像度・背景内容 などを設定し、
Createをクリックします。
ステップ3：文字ツールを選択
- 左側のツールバーで
Horizontal Type Tool（横書き文字ツール）またはVertical Type Tool（縦書き文字ツール）（ショートカットT）を選び、クリックすると文字編集モードになります。
ステップ4：文字の属性を設定
- 色：ツールバー上部のカラーボックスをクリックして、使いたい色を選びます。
- フォントとサイズ：上部オプションバーのドロップダウンから、フォント、サイズ、スタイル（太字・斜体など）を選びます。
ステップ5：カンバスに文字を入力
- カンバスの任意の位置を1回クリックすると、文字入力カーソルが表示されます。
- 文字を入力し、Enterで改行します。1行ごとに独立した文字オブジェクトになります。
ステップ6：文字の位置を調整
- 右側の Layers パネルで該当する 文字レイヤー を選び、
Move Tool（移動ツール）（ショートカットV）で文字を適切な位置にドラッグします。
ステップ7：入力済みの文字を編集
- 文字レイヤーを選んだ状態で、カンバス上の文字を直接ダブルクリックすると編集状態になります。
- 上部のオプションバーから フォント、サイズ、色、整列 などの属性をいつでも変更できます。
ステップ8：画像を保存・書き出し
- 一般的な画像形式で書き出す：
File → Export Asをクリックし、サブメニューからPNG、JPEG、SVGなどの形式を選びます。- 表示された設定ウィンドウで内容を確認して
Saveをクリックすると、ブラウザが自動でダウンロードします。
- 編集を続けられるPSDとして保存（後でPhotopeaやPhotoshopで編集する場合）：
File → Save as PSDを選ぶと、.psdとして直接ダウンロードされます。
応用的な文字機能（任意）
- 文字の変形（Warp Text）：テキストレイヤーを選択 → 上部のオプションバーで
…（その他）をクリック →Warp Textを選ぶと、円弧や波などの変形をかけられます。 - パス上の文字（Type on a Path）：まず
Pen Toolでパスを描画 → 文字ツールを選択 → パス上にカーソルを移動してクリックすると、パスに沿って文字を入力できます。
ヒント
- ブラウザの対応：最新版のChrome、Edge、Firefox、Safariを使い、広告ブロッカーは機能に影響することがあるのでオフにしてください。
- ショートカット：PhotoshopのほとんどのショートカットはPhotopeaでも同じように使えます。慣れると編集効率が大きく上がります。
- 自動保存：Photopeaは直近の作業をブラウザのローカルキャッシュに自動保存します。念のため、ページを閉じる前にPSDを書き出しておきましょう。
ここまでの手順で、Photopea でも文字の追加・編集・書き出しがほぼ追加学習なしで行えます。より凝った文字エフェクトが必要な場合は、Photopeaの公式ヘルプやPhotoshopの上級チュートリアルを参照してください。
参考資料
- Adobe Photoshop 公式ドキュメント
- HTML5と現代のフロントエンド画像処理の仕組み
- オンラインPS