マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

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デザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

簡単レシピ!アメコミ風デザイン素材と活用法!!

今回はアメコミ風のデザインを作るときに役立つフリー素材と活用法をご紹介いたします。 まずは実際のアメコミを見て、簡単に特徴を分析してみます。 アメコミでgoogle画像検索をかけると、、、 とってもカ …

【デザイナーをお助け!vol.2】まずは真似から!○○に特化したWEBサイトまとめサイト

「ピンとこない、なんか違う、と迷いすぎて時間がどんどん無くなっていく!効率悪っ!」 「デザインがパターン化されていつも似たようなサイトに・・・。この負のスパイラル、払拭したい!」 「そもそも私初心者な …

WEBサイトの配色に迷った時の必見サイト!をご紹介。

WEBサイトの配色に迷った時の必見サイト!をご紹介。 http://www.markernet.co.jp/blog/2015/08/10/post-5960/ Facebook

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

【意外と知られていないIllustrator小技】たったの2STEPで画像をベクターに変換!

WEBサイトのデザイン素材を紙媒体に使うとき、ベクターのデータがなくて困ったことありませんか? ペンツールでトレースするのも時間がかかるし、Photoshopでパスを作成したら境界がギザギザになってし …

【Illustrator】写真を簡単にモノクロベクター画像にする方法

【Illustrator】写真を簡単にモノクロベクター画像にする方法

みなさまこんにちは、新人Aです。 今日は、写真をIllustratorでモノクロにしてイラストっぽくベクター画像を仕上げたいと思います! 【1.Illustratorにベクター化したい画像を配置します …