マーカーネット株式会社

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制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン

関連記事

商用利用OK!お洒落な無料フォント6選

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

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

商用利用OK!無料日本語フォント6選

商用利用OK!無料日本語フォント6選

こんにちは、デザイナーのAです。 今回は商用利用OKな日本語の無料フォントをご紹介します!この記事は2021年6月現在の内容になります。 Contents 黒薔薇ゴシック g_コミック古印体-教漢版 …

【これから始めるWEB制作】adobe?フォトショ??イラレ???adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その1~

【これから始めるWEB制作】adobe製品の中身を解剖!~とりあえず覚えておきたい8ソフトの特徴その2~

あけましておめでとうございます。 ひよっこWEB制作者のMです。 9連休、上京してから史上最長の帰省でしたが 実家にあたらしくやってきた家族(ワンちゃん、0歳)に ちゃんと覚えてもらえたことが嬉しかっ …

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

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

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …