Webの記録

IllustratorとPhotoshopで刺繍風のイラストと文字を作ってみた。

投稿日:

この記事は約 2 分で読めます。

布地に刺繍をしたみたいなイラストと文字をIllustratorとPhotoshopで作ってみました。

刺繍風のイラストと文字
※布地素材は既に用意している状態の説明です。

 

①Illustratorを開いて・・・適当なイラストと文字を入力します。
Illustratorで書いたイラストと文字

② ①で作成したものを選択した状態で、「効果」メニューから「スタイライズ」→「落書き」を選択。
Illustrator操作画面

らくがき効果がついたイラストと文字
③ ②でぐちゃっとなったイラストと文字をそのままコピーして、Photoshopを開きます。
既に用意している布地素材の上でペーストします。
Photoshopにはりつけた状態のイラストと文字

④ Photoshopでレイヤースタイルをつけます。
Photoshopの操作画面

ここはお好みで・・・なんですが、私の場合は以下の効果をつけてみました。
「ベベルとエンボス」にチェック。
「スタイル」を「ピローエンボス」を選択。
「テクニック」は「滑らかに」、「深さ」を「151」、「方向」を「上」、「サイズ」を「10」、「ソフト」を「0」。
「角度」を「120」、「高度」を「30」、「光沢輪郭」を「線形」。
「ハイライトのモード」を「スクリーン」で「不透明度」を「40」。
「シャドウのモード」を「乗算」で「不透明度」を「40」。

刺繍風のイラストと文字以上で、出来上がり~♪

作例はこんな感じ。
時間の合間に作っているものを作例として・・・載せます。
わかる人にはわかる・・・ってモノですww
作例

 

イラストと文字も、複雑なものは崩れてしまうので単純なものでチャレンジした方が良さそうです。

-Webの記録
-, , ,

執筆者:


comment

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

This blog is kept spam free by WP-SpamFree.

関連記事

no image

スマートフォン用サイトで、タップで電話をかけさせたい時

この記事は約 1 分で読めます。 スマートフォン用のサイトで、必要になったのでメモ。 ボタンをタップした時に電話をかけさせたい時の記述と、郵便番号などの数字を電話番号と間違えて勝手に電話番号のリンクが …

no image

slideshow.jsを使って画像のスライドショーにチャレンジ。 

この記事は約 1 分で読めます。画像数枚のスライドショーをjQueryのライブラリを使って作ってみたいと思います。 たくさん方法があると思うので、いくつか試してみるつもりです。 まず今回は、「slid …

no image

スマホ用サイトに「LINEで送る」ボタンを設置してみる

この記事は約 1 分で読めます。 スマホ向けに情報を発信しているサイトなど、あると便利なシェアボタン。 いつの間にかに「LINEで送る」ボタンが出来ていたのですね。 ひとまず自分用に記述方法を2種類メ …

no image

「WordPress Popular Posts」バージョン2.3.0アップデートでエラーが?!

この記事は約 1 分で読めます。 「WordPress Popular Posts」のバージョン2.3.0にアップデートすると、データベースエラーで記事が表示されなくなる現象が起きました! プラグイン …

no image

教訓。

この記事は約 1 分で読めます。 ここ最近、あるサイトを作っていて・・・気付かされた事があります。 学校の授業では習わない、実際のクライアントのサイトを制作していく中で起きる事。 Webについて何も知 …