WEBデザイン

【PHOTOSHOP】すぐに使えるデザインテクニック!アート風文字をラクに作る方法

投稿日:2014年10月31日 更新日:

STEP1. まず加工したい写真素材をPhotoshopで開きます。
1

STEP2. 背景の写真レイヤーの上に文字を入力し配置します。
2

STEP3. レイヤーパレット上でテキストのレイヤーを右クリックして、「テキストをラスタライズ」を選択します。
テキストのアウトラインデータを ビットマップ(ドット)化することによって、色々なかこうができるようになります。
3

STEP4. メニューの「編集」から「変形」→「自由な形に」を選択して、写真に合わして変形させます。
下のサンプル画像のような感じに形を変えると文字の奥行き感が出てきます。
4

STEP5. 変形完了したら、Ctrlを押しながら文字レイヤーをクリックします。そうすると文字の部分だけが選択範囲になります。
以下のような選択範囲になりましたら、この状態のまま背景のレイヤーをレイヤーパレットで選択します。
6

STEP6.背景のレイヤーから選択範囲分のコピー&ペーストし([Ctrl]+[C]後[Ctrl]+[V]、または[編集]から、コピーとペーストを選べば大丈夫です。)
コピーしたら、ふたたび道路の黒色の部分にそのコピー分を移動させれば道路のテクスチャー文字ができました。
7

STEP7. 以上6つのステップを繰り返して、文字にテクスチャーを加えて加工します。
最後レイアウトを調整すれば完成です。
8

同じやり方で、デザインの一部を違うテクスチャーにしたりすると、また別の雰囲気が作れますのでいろいろ試せます。
是非デザイン制作に活用してみてください。

-WEBデザイン

関連記事

レスポンシブデザインに対するよくある4つの誤解

レスポンシブデザインに対するよくある4つの誤解

単一のファイルで様々な機器の画面サイズにフィットする便利な手法「レスポンシブデザイン」。 最近はスマホからのPVも爆発的に増えてきたので慌ててスマホサイトを導入する企業が増え、更新の勝手から、レスポン …

クオリティの高い“フリー写真素材サイト”まとめ編!

クオリティの高い“フリー写真素材サイト”まとめ編!

皆さん! こんばんは!! 株式会社マーカーネットでwebデザインを修行をしている新人デザイナーKです。 今回、私が皆さんにご紹介したいのはweb制作は欠かせない「素材」についてです。正確には、クオリテ …

AIが自動で削除!Photoshopの新機能『ワンクリック削除』のご紹介

AIが自動で削除!Photoshopの新機能『ワンクリック削除』のご紹介

今回は、Photoshopの新機能「ワンクリック削除」についてご紹介します。 これまでは、削除したいオブジェクトをひとつひとつ手動で選択する必要がありましたが、今回追加された「ワンクリック削除」では、 …

WEB制作における商用利用OK!お洒落な無料フォント6選

WEB制作における商用利用OK!お洒落な無料フォント6選

こんにちは、デザイナーのAです。 今回は商用利用OKな無料フォントをご紹介します! 無料フォントとして紹介されているフォントでも、中には商用利用は不可とされているものもありますので、ライセンスをしっか …

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

【多言語サイトデザインの参考になる!】世界のWEBデザインギャラリーサイト

本日はクリスマス、また一年の終わりが近ついてきましたが、 皆さんはいかがお過ごしでしょうか? サイトのデザイン制作に入る前に、よくWEBデザインギャラリーサイトで同じ業種やジャンルのサイトを参考してか …