操作に慣れよう
PCで初期テキストを自分の文字に変え、見た目を整え、画像を1枚保存します。画面の見方から順に、同じ作品を最後まで作ります。
このページでできること
中央の「文字を装飾」を2行の「応援／してるよ」に直接書き換え、紫の文字・黒いフチ・薄い黄色の星を組み合わせてPNGをダウンロードします。初期テキストは削除せず、白紙に戻したり、作品サイズを固定したりしません。
PC向けの操作です。狭い画面でもこの説明を読めますが、画像はPCのエディターです。スマートフォンでの操作手順は別に説明します。
ガイド全体は5部です。この入門章では第1〜3部を練習します。続く第4部は目的から探す操作、第5部は保存・再編集と困ったとき。各メニューやツールバーの詳しい設定は、この練習のあとで関連ページから調べられます。
第1部 画面の見方
1 新規作成の画面を知る
エディターを開くと中央に初期テキストが入っています。これから編集する対象です。右の一覧が閉じていたら、画面右端の「レイヤー」をクリックして開きます。下の図は初期テキストをまだ選んでいない状態です。
- 左の追加メニュー：テキスト・素材・アップロードなど、新しいものを作品に加える入口です。
- 中央のキャンバス：対象を選び、直接編集する場所です。市松模様の面が作品の範囲、灰色は作品の外側です。
- 上部ツールバー：選んだ対象を変える場所です。今は無選択なので、テキスト用の操作は出ていません。
- 右のレイヤー：作品の中のテキスト・素材・背景の一覧です。ここからも対象を選べます。
- 下部：保存状態、作品サイズ、表示倍率を確認します。倍率は見る大きさ、作品サイズは画像自体の大きさです。
第2部 選択と直接編集の基本
2 テキストを1回クリックして選ぶ
- 目的
変える対象を決めます。
- 開始状態
中央に「文字を装飾」があります。
- 操作
中央のテキストを1回クリックします。
- 理由・画面の意味
選択は、今操作する対象を決めることです。文字内容はまだ変えません。
- 結果
文字に枠が付き、上部に文字用ツールが出ます。
3 同じテキストをもう1回クリック
- 目的
その場で入力できる状態にします。
- 開始状態
初期テキストに選択枠が付いています。
- 操作
同じテキストをもう1回クリックします。
- 理由・画面の意味
選択済みの文字をクリックすると直接編集に入ります。ダブルクリックでも入れます。
- 結果
文字の位置に入力カーソルが出ます。
4 「応援／してるよ」に書き換える
- 目的
初期テキストの内容を自分の言葉に変えます。
- 開始状態
初期テキストの直接編集中です。
- 操作
Ctrl＋A（MacはCommand＋A）でこの文字の全文を選び、「応援」と入力します。Enterを押し、次の行に「してるよ」と入力します。
- 理由・画面の意味
Enterは改行です。今あるテキストを書き換えるため、別のテキストを追加する必要はありません。
- 結果
同じテキストが2行になり、右の名前も変わります。
5 外側の灰色で入力を終える
- 目的
入力を終え、内容を残します。
- 開始状態
2行の文字に入力カーソルが出ています。
- 操作
作品の外側にある灰色の余白をクリックします。
- 理由・画面の意味
灰色クリックで入力と選択が終了します。Enterで終える操作ではありません。
- 結果
2行の文字は残り、カーソルと枠が消えます。
第3部 最初の作品を完成させる
ここからも、直接編集で2行に変えた同じテキストを使います。新規作成画面に戻ったり、別の作品に切り替えたりしません。
6 テキストを紫にする
- 目的
テキストの色を決めます。
- 開始状態
同じ2行の文字があります。
- 操作
テキストを選び直し、上部の色の丸をクリックします。左の単色から「ラベンダー」を選びます。
- 理由・画面の意味
上部ツールは選択中の対象を変えます。左パネルの色見本を中央の結果と見比べます。
- 結果
2行の文字が紫になります。
7 黒いフチを追加する
- 目的
文字の輪郭を強調します。
- 開始状態
紫の文字が選択されています。
- 操作
上部「装飾」→左「装飾を追加」→「フチ」を選び、色を「黒」にします。
- 理由・画面の意味
文字色を変える操作とフチの色を変える操作は別です。適用中のフチの欄で変更します。
- 結果
同じ紫の文字に黒いフチが付きます。
8 「星 塗り」を追加する
- 目的
文字に添える素材を増やします。
- 開始状態
同じテキスト作品を編集しています。
- 操作
左の「素材」で「星」を検索し、「星 塗り」をクリックします。追加後は左パネルの×で閉じます。
- 理由・画面の意味
追加は作品に別の要素を増やす操作です。テキストを選んだままの設定変更とは違います。
- 結果
中央に星が増え、右にも星の名前が現れます。
9 星をクリーム色にする
- 目的
文字と素材の色を区別します。
- 開始状態
追加した星が選択されています。
- 操作
上部の色をクリックし、左の「クリーム」を選びます。
- 理由・画面の意味
星を選択しているため、文字の紫と黒いフチは変わりません。
- 結果
星だけが薄い黄色になります。
10 星を200pxに整える
- 目的
文字に対して星の大きさを整えます。
- 開始状態
クリーム色の星が選択されています。
- 操作
上部の「サイズ」を開き、幅200px・高さ200pxを入力します。
- 理由・画面の意味
幅高さ連動は比率を保つ設定です。この例では幅・高さを同じ値にします。作品全体の1200×600pxは変えません。
- 結果
星が200px×200pxになります。
11 星を右側へドラッグする
- 目的
星と文字の重なりを減らします。
- 開始状態
星が中央のテキストに重なっています。
- 操作
パネルを閉じ、星を押したまま文字の右側へ動かして離します。
- 理由・画面の意味
動かす対象は選択枠内の星です。今回の本番では素材の配置パネルが空白になるため、確認できたドラッグを使います。
- 結果
星だけが文字の右側へ移ります。
12 選択を外して全体を見る
- 目的
保存前に端の切れと読みやすさを確認します。
- 開始状態
文字と星の配置を整えました。
- 操作
作品外の灰色をクリックします。文字と星の全体が作品の範囲内にあるか見ます。
- 理由・画面の意味
選択枠を外すと、保存する画像に近い見え方で確認できます。
- 結果
2行の紫文字・黒いフチ・クリーム色の星がすべて見えます。
13 PNGをダウンロードする
- 目的
完成画像をPCに保存します。
- 開始状態
同じ作品の全体を確認済みです。
- 操作
右上の「ダウンロード」を開き、PNG・標準1x・1200×600pxを確認して「PNGでダウンロード」を押します。
- 理由・画面の意味
下部の自動保存は編集用です。使う画像ファイルはダウンロードします。背景の市松模様は透過表示で、PNGには模様として入りません。
- 結果
PCに透過PNGが保存されます。
14 保存したPNGを開いて確認する
これは最後に実際に保存したPNGです。操作手順を終えた結果として示す完成見本です。紫の2行文字、黒いフチ、薄い黄色の星が画面と同じように入っているか、ダウンロードしたPNGを開いて確認します。今回の実寸は1200×600pxで、背景は透明です。
これで最初の作品が完成です。初期テキストの直接編集から、同じ作品の見た目と配置を整えて画像を取り出すまでを練習しました。
確認ポイント
- 1回クリックで選択、選んだ同じテキストをもう1回クリックで直接編集できましたか。
- 文字の内容・色・フチを変えるときと、星を編集するときで対象を区別できましたか。
- 文字と星が作品の範囲内に入り、保存したPNGにも残っていますか。
困ったとき
文字が入力できないときは、まずテキストを1回クリックして選び、同じテキストをもう1回クリックします。Enterは改行するキーです。書き終わりは灰色の余白をクリックします。
重なった星が選びにくいときは、右の「星 塗り」レイヤーを選びます。移動した星が切れているときは手順11のドラッグで作品の内側に戻してください。配置パネルではなく、星を押したまま動かすドラッグで位置を整えます。