メニュー

LINEスタンプの作り方(PC編)Photoshopで文字入れ

LINEスタンプの制作ガイドラインでは推奨するスタンプとして「日常会話、コミュニケーションで使いやすいもの」…とあります。コミュニケーションにはイラストや写真と共に文字は大切な要素の一つです。文字を効果的に入れることで、見る人に「このスタンプ、使ってみたい」と思わせることができるかもしれません。

Photoshopを使えば、写真やイラストの好きな場所に文字を入れることができます。文字の種類や大きさを変えることはもちろん、縦書きや横書き、円形に文字を配置すること、さまざまな効果をつけて気分を表現することもできます。

ここでは、Photoshopを使った、LINEスタンプへの文字入れ方法を解説します。アナタのセンスでかっこいい、かわいい、おもしろいスタンプにしてくださいね。(今回の記事ではPhotoshop CS 6の機能で作成しています。)

 

【目次】

1.文字ツールと入力方法
1-1.縦書き文字ツール
1-2.横書き文字ツール
1-3.文字マスクツール(縦、横)
1-4.パスに沿った文字
2.文字の変更方法
2-1.文字(フォント)の種類
2-2.文字の大きさ
2-3.特殊な文字表記
2-4.文字の色
3.編集メニューからの文字の変更方法
3-1.回転
3-2..拡大・縮小、反転
4.レイヤースタイルによる効果
4-1.べベルとエンボス
4-2.白フチ
4-3.ドロップシャドウ
5.文字を入力する際に気をつけること
5-1.文字の色や大きさ
5-2.文字の種類
6.フォントを入れ過ぎないことも大切
7.まとめ

 

1.文字ツールと入力方法

Photoshop で文字を入力するにはいくつかの種類があり、「縦書き文字ツール」「横書き文字ツール」「文字マスクツール(縦、横)」「.パスに沿った文字」という入力方法があります。

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

 

1−1縦書き文字ツール

LINEスタンプの作り方(PC編)Photoshopで文字入れ

縦書き文字ツールの入力方法は、ツールパレットから縦書き文字ツールを選び、画像の上でクリック。文字入力用のカーソルが現れたら文字を入力することができます。

 

1−2横書き文字ツール

LINEスタンプの作り方(PC編)Photoshopで文字入れ

横書き文字ツールは、縦書き文字ツール同様にツールパレットから横書き文字ツールを選び画像の上でクリック。文字入力用のカーソルが現れたら文字を入力することができます。

 

1-3.文字マスクツール(縦、横)

文字マスクツールは通常の文字入力ツールとは違い、入力した文字の形でマスクを作成するツールです。

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

文字マスクツールで作成した選択範囲には、通常の選択範囲同様に色を塗りつぶしたりグラデーションで塗りつぶすといったことのほか、写真を文字の形で切り抜くなど、自由に加工することができます。反面、文字ツールとしての機能は弱く、一度入力が確定した文字は大きさや文字の種類を変更することができないと言うデメリットもあります。

 

文字マスクツールには、縦書きと横書きがありツールパレットから選ぶことによって使うことができます。文字を入力するとクイックマスクモードのような赤い画面に文字が入力されます。画面の上の方には○と×のボタンがあり、入力した文字の大きさと位置でよければ ○印をクリックしてマスクの位置を確定します。(新しいバージョンの Photoshop では「確定」ボタンに変更になっています。)

 

1-4.パスに沿った文字

Photoshop ではパスに沿った文字を入力することが可能です。丸や四角と言った選択範囲ツールで作った選択範囲からパスパレットで作成したパスにも文字を入力することができますし、ペンツールで書いたパスに沿って文字を展開する事も大丈夫です。

一例として楕円形ツールで作成した選択範囲で試してみましょう。選択範囲をペンタブのところでパスに変換。書き文字入力ツールを選びカーソルを持っていくとカーソルの形が変わります。そこでクリックをすることでパスに沿った文字を入力することができます。

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

波形のパスに沿った文字、円形にぐるりと沿った文字など、通常の文字ツールでは表現することのできない文字を描き出すこともできます。 もちろん文字の大きさや種類も通常の文字ツール堂用に変更できるのも嬉しいですね。

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

2.文字の変更方法

縦・横の文字ツールやパスに沿った文字などは文字の大きさや種類(フォント)の変更のほか、上付き文字や下付き文字、フォントの色の変更などが後から自由に可能です。こうした作業は主に文字ツールパレットから行います。例外として、前述した通り、文字マスクツールで入力した文字に関してだけは後から変更することができません。

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

2-1.文字(フォント)の種類

入力した文字(フォント)を変更する場合には、フォントを変更したい文字レイヤーを選び、縦または横の文字ツールで希望の文字をドラッグして選択した後、文字ツールパレットから希望のフォントを選びます。

 

2-2.文字の大きさ

入力した文字(フォント)を変更する場合には、フォントを変更したい文字レイヤーを選び、縦または横の文字ツールで希望の文字をドラッグして選択した後文字ツールパレットからフォントの大きさを変更します。文字のポイント数が厳密に決められているのであれば別ですが、文字の大きさを、直感的に変更したい場合には、文字を選んで上部メニューから拡大・縮小を選び、ドラッグして大きさを変えるという方法もあります。

2-3.特殊な文字表記

Photoshop では、数式の表記で良く見られる上付き文字や下付き文字、論文などで使えそうな下線のついた文字やうち消し文字など特殊な文字表記を使うことができます。文字表記を変更したい、レイヤーを選び、文字をドラッグして選択。文字ツールパレットの下部にある選択ボタンから希望の効果を選ぶことで特殊な文字表記をすることができます。

 

ちなみに下のサンプル画像は左から「通常の文字」「斜体文字」「上付き文字」「下付き文字」「下線付き文字」「打ち消し線付き文字」になります。

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

2-4.文字の色

文字の色の変更はカラーパレット~行います。文字の色を変えたいレイヤーを選び、変えたい文字をドラッグして選びます。カラーパレットには今の文字色が表示されますので、好みの色を選んでクリックすることで色が変更になります。RGBの色成分やCMYKの色成分が分かっていれば数値による入力も可能です。

 

3.編集メニューからの文字の変更方法

文字の修正は文字パレットによる方法以外にも、画面上部の「編集メニュー」から行うことも可能です。回転、拡大・縮小、文字の反転などが可能です。編集を行いたい文字のレイヤーを選び、編集メニューから希望の効果を選び、適用します。

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

3-1.回転

編集から「回転」を選ぶと、文字の4すみにポイントが出て来ます。それをマウスでつかんでドラッグすることでレイヤーの文字全部を回転させることができます。

 

3-2..拡大・縮小、反転

編集から「拡大・縮小」を選ぶと文字の周りにポイントが出現します。縦方向の未、横方向のみの拡大・縮小が可能なほか、Shiftキーを押しながらドラッグすることで上下左右の比率を保ったまま拡大・縮小ができます。また、文字の左右反転・上下反転をすることも可能です。

 

4.レイヤースタイルによる効果

Photoshop のレイヤーにはレイヤーだけにかけるレイヤースタイルと呼ばれる特殊効果があります。文字レイヤーに対してもレイヤースタイルを適用することが可能で、レイヤースタイルを適用した後でも文字の修正やフォントや文字の大きさの変更をすることが可能です。 いくつか良く見かける効果についてあげてみましょう。

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

4-1.べベルとエンボス

文字に3Dの様な立体的に見せたい場合に効果的なののが、「べベルとエンボス」です。不透明度を下げることができるなど、自由な表現も可能です。

 

4-2.白フチ

文字の後ろに写真がある、青×青、茶色と濃紺、黒と紺…など、背景と文字が一見して読みづらい組み合わせの場合に用いるのが文字の周りにフチをつける効果です。単なる白フチだけでなく、黄色やピンク、黒や紺など色をつけたフチどりも可能です。

 

4-3.ドロップシャドウ

べベルとエンボスとはまた違った方法で立体感を演出するのが「ドロップシャドウ」です。文字の下に影がついて、文字が浮いているような錯覚を感じさせます。文字がみずらい場合に、白フチ効果と組み合わせて使うこともあります。

LINEスタンプの作り方(PC編)Photoshopで文字入れ

画像は上から「べベルとエンボス」「境界線」「シャドウ(内側)」「光彩(内側)」「光彩(外側)」「ドロップシャドウ」になります。

 

5.文字を入力する際に気をつけること

画像が使えてもしも入力できる Photoshop は、ネットや Web で文字を扱う際にも重宝するソフトと言えます。ホームページだけでなく、LINEスタンプやファビコンなど小さな媒体にも文字を入れる機会も少なくありません。

比較的しかし、文字の選び方や使い方を間違えてしまうと、見に来たお客さんが見づらい結果になり、伝えたいことが伝わらない可能性があります。フォントのサイズや文字の色などいくつか例を挙げてご説明しましょう。

 

5-1.文字の色や大きさ

文字の色を選ぶ時に気をつけたいのが、周りとのコントラストです。背景と文字に黒や紺など視認性が悪い色の組み合わせを選んでしまわないように気をつけましょう。どうしても変更できない場合には、前述の白フチなどの効果で視認性をあげるとよいでしょう。また、あまり、小さい文字を使用してしまうことも、文字がみえずらくなってしまう要因です。

 

5-2.文字の種類

文字いは縦横の太さが均一な「ゴシック体」「縦棒が太く、横棒が細い「明朝体」なお言う靴物種類たあります。LINEスタンプなど、小さい場所に文字を使う場合には、ゴシック体や、明朝体でも太目のフォントを使用して、大きく仕様する方がよいでしょう。

 

6.フォントを入れ過ぎないことも大切

Windows もマッキントッシュも後から自由にパソコン本体に文字を追加することが可能です。フォントの格納フォルダーに追加の本当を入れていることによって好きな書体はどんどん増やしていくことができます。しかし、あまり多くのフォントや、 同じ種類のものを入れすぎてしまうと、いざ入力する時に門司選びに時間がかかってしまうというデメリットがあります。普段からあまり使わないようなフォントはパソコンのフォルダから外に出しておく事も必要でしょう。

 

LINEスタンプの作り方(PC編)Photoshopで文字入れ

 

7.まとめ

Photoshop は文字編集を得意とするソフトではありませんが、画像ソフトとして業界標準なため、 Web を中心として、画像に文字を入れる際には使われることも多いソフトです。文字入力ツールや各種の効果など、ピンポイントでの仕様にはクリエイティブな文字のの使い方ができます。

LINEスタンプで使う場合には、スマホなど小さい機器で使うことを頭にいれてスタンプを作ることが最も大切です。日頃からスタンプを見て、見やすいな…と思った物を参考に作れば見やすくいいスタンプができると思いますよ。