初心者必見!即使えるphotoshopの文字知識が満載!

デザイン

2017/03/30

デザイン

photoshop(フォトショップ)における文字に関する様々な知識をWebデザイナーである筆者が解説します。

photoshop初心者でも文字について学習できるように、見やすい図を使いながらわかりやすく解説しています。

本記事を読めば、photoshop(フォトショップ)の基本である文字の入力から、縁取りをする方法、文字を立体的(3D)にする方法、文字を変形する方法、文字に影をつける方法など、多くの知識が身につくでしょう。

ぜひ最後まで読んで、photoshop(フォトショップ)における文字をマスターしてください!

 

photoshopで文字を入力する方法

まず、基本の文字入力についてです。

新規のファイルを作成します。次に左のバーからテキストを選択しましょう。テキストを選択

これでクリックした後にタイプをすれば文字を書くことができます。

もし、枠の大きさが決まっている場合は、ドラック&ドロップで四角を書きます。するとその四角の中に文字が入るようになります。

例えば、今回のように、長い文章をレイアウトするときなどに便利です。

長い文章をレイアウトする

色や、フォントの大きさを変更したい場合は、レイヤーを選択します。

イラレを使っている人でphotoshopが慣れないと、ここで苦労しますが、phtoshopはレイヤー命です。ですので、レイヤーを選択し、変更します。

レイヤーのTと書いてある部分をクリックします。

レイヤーのTと書いてある部分

色を変える場合は、塗りをクリックします。

塗りをクリック

以下のようなカラーピッカーがでてきますので、好きな色を選択しましょう。

カラーピッカー

今回は緑を選択しました。

緑を選択

次にフォントの大きさやフォントの変更などをしましょう。

ウィンドウ>文字 を選択します。

ウィンドウ>文字 を選択

以下のようなウィンドウがでてきます。

ウィンドウ

ここで、フォントを変えたい場合は、赤い線をクリックします。

赤い線

以下のようにフォントがでてくるので、好きなフォントを選びます。

好きなフォントを選択

また、大きさもこのウィンドウで変更することができます。

赤線をクリックしましょう。

赤線をクリック

以下のように大きさを変更できます。

大きさを変更

 

photoshopで文字に縁取りをつける方法

次に、photoshopで縁取りをつける方法についてです。

以下のように、写真とテキストがかぶると、同系色で見えにくい場合があります。

同系色で見えにくい場合

(yが少し見にえにくいですね)

そのような際に縁をつけることで、見えにくさは解決されますよ。

まず、レイヤーの赤線の部分をダブルクリックします。

レイヤーの赤線の部分をダブルクリック

以下のようなウィンドウが出てきます。

ウィンドウ

この境界線にチェックを入れ、選択します。

境界線にチェック

このような画面になりました。

これを以下のような画面に設定します。

画面設定

おすすめは、プレビューにチェックがついていれば見ながら変更できるので、調整しましょう。

特にポイントは、描画モードを外側にすることです!

これで、縁取られました。

縁をとった場合

 

photoshopで文字を立体的(3D)に加工する方法

次にphotoshopで文字を立体的(3D)に加工する方法についてです。

今回は以下の画像のUdemyを立体的にさせていきます。

立体的にしたい画像

まず、3D>選択したレイヤーから新規3D押し出し作成 を選択します。

新規3D押し出し作成

このようなアラートが出ます。はいを押してすすみましょう。

アラート

以下のような画面になります。

3D画面では、ひとつ大事な基本を押さえましょう。

3D画面

X、Y、Z軸

X、Y、Z軸

これに限ります。

Photoshopだけなく、そのほかの3Dソフトもそうですが、この概念が重要になります。

この軸を動かして、テキストを動かします。

テキストを動かす

このようにすることも可能です。

また、影の調整やベベルにすることもできます。

影の調整は、環境から行います。

影の調整

ベベル設定は、シェイププリセットから行うことができます。

シェイププリセット

最初は、なかなか難しいとおもうので、遊び感覚で触って覚えるのをお勧めします。

自分で納得のいくテキストに変更したら、レンダリングを行います。

赤線で囲んだところがレンダリングボタンです。

レンダリングボタン

レンダリングはとても時間がかかる作業なので時間があるときに行いましょう。

レンダリングが終わったら、レイヤーから3Dをラスタライズを行います。

3Dをラスタライズ

こちらも時間がかかる作業ですので、時間を多めにとって作成してください。

ラスタライズされたものは変更できなくなります。気をつけてくださいね!

 

photoshopで文字を変形する方法

次に、photoshopで文字を変形させましょう。

イラレにもありますが、photoshop でも簡単にできます!

以下の文字を変形させましょう。

変形したい文字
文字を選択します。

文字を選択

次に、赤で囲んだところをクリックします。

赤で囲んだところをクリック

以下のようなウィンドウが出てきます。

ウィンドウ

このスタイルを「なし」から下弦にしてみましょう。

「なし」から下弦に変更

OKを押すと

OKを押す

以上のように適応されました。

このほかにも、様々な変化があるので、プレビューをみながら行うと良いです。

様々な変化

これを使えば、photoshopでも簡単にロゴなども作れますね!

 

photoshopで文字に影を付ける方法(ドロップシャドウ)

photoshopではイラレと同じくらい簡単にドロップシャドウがかけられます。

先ほどのテキストにドロップシャドウをかけます。

先ほどのテキスト

赤の部分をダブルクリックします。

赤の部分をダブルクリック

以下のようなウィンドウが表示されます。

ウィンドウ

一番最後のドロップシャドウにチェックを入れ、選択します。

ドロップシャドウにチェック

このような画面です。

こちらを調整して、ドロップシャドウをかけます。こちらもプレビューにチェックをいれておけば、変化をみながら調整できます。

プレビューにチェック

今回は以下のように調整しました。

調整後のテキスト

 

いかがでしたか?

基本のきであるテキストですら、たくさんあるなんてやはりphotoshopは奥深いですね。

udemyでは、フォトショップ初心者でも確実にスキルアップできる講座を用意しています。

プロのデザイナーが丁寧に教えて売れるとても売れている講座なので、ぜひこれを機にフォトショップをマスターしてみてはいかがでしょうか?

  

実際にアウトプットをしながら、実践的にphotoshopのスキルを習得できる動画講座です。

未経験からプロを目指す!実践PhotoshopCC講座 - Udemy

未経験からプロを目指す!実践PhotoshopCC講座 - Udemy

Photoshopが初めての人が中級レベルまでスキルアップできるコースです。単なる機能説明をするような、つまらないコースではなく、写真加工、バナー作成、フライヤー制作、Webページの制作など、実際の制作をしながら実践力を身につけます。

動画で学習する

  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー
  • シェア
  • ツイート
  • Poket
  • はてなブックマーク
  • フォロー

関連記事