アフィリエイト広告を利用しています

広告

posted by fanblog

2016年11月29日

Photoshop|簡単にドット柄を作る方法!アメコミタッチにも使える



さて、今回は、アメコミタッチなデザインにも使えちゃう「Photoshopで簡単にドットを作る方法です。
仕上がりはこちらの3パターン(ほとんど2パターンっすけど)
kabe-photoshop0.png
順番に説明していきますね。

文字をドットに

仕上がり画像で言うところの1番上のタイプですね。
まず、Photoshopを開きます。
新規ファイルを立ち上げたら、文字を打ち込みます。
kabe-photoshopa1.jpg
色は # 5fc3ed
フォントはデフォルトで入っている「メイリオ」の「ボールド」を使っています。

さて、お次は、背景を差し込みます。
kabe-photoshopa2.jpg
文字レイヤーの下に 「新規レイヤー」 を作って、色を# 000000 (黒)にします。

現段階ではこんな感じに。
kabe-photoshopa3.jpg

そして、 「文字レイヤー」を右クリック します。
kabe-photoshopa4.jpg

こんなん出てきますので、
kabe-photoshopa5.jpg
「テキストをラスタライズ」 をチョイス(これやらないと、次の行程ができなくなります)。

ここで、色を確認してください。
kabe-photoshopa7.jpg
テキストに使ったブルーが上に来ていて、黒が下にあったらOKです。違ってたら変えてください&好きな色に変えちゃってください。
ちなみに、 上にきているほうがベースの色、下にあるのがドット部分の配色 となるので、お好きな色使ってくださいね。

今度は、ライスタライズした文字レイヤーを編集しますので文字レイヤーを選択しておいてくださいね。
選択方法は簡単。文字レイヤーをクリックするだけ。ほかのレイヤーと色が変わるのでわかりやすいかと思います。
kabe-photoshopa6.jpg
「ツールバー」→「フィルター」→「フィルターギャラリー」 選択っす。

kabe-photoshopa8.jpg
「フィルターギャラリー」では、 「スケッチ」の中から「ハーフトーンパターン」を選択

▼設定
  • サイズ=1
  • コントラスト=0
  • パターンタイプ=点


ほい、完成。
kabe-photoshopa9.jpg

でも、何か文字がさみしい気がする……。
そんなときは、さらに装飾しましょ。

文字を装飾

kabe-photoshopa10.jpg
文字レイヤーをダブルクリックして、レイヤースタイル編集画面を出します。このkabeの画像ではもうすでにレイヤースタイル編集済みっすけども。
境界線と光彩(外側)を編集っす。

境界線の設定はこんな感じ。
kabe-photoshopa11.jpg
▼境界線
  • サイズ=3px
  • 位置=外側
  • 描画モード=通常
  • 不透明度=78%
  • 塗りつぶしタイプ=カラー
  • カラー=f7f7f7


光彩(外側)の設定はこんなんです。
kabe-photoshopa12.jpg
▼光彩(外側)
  • 描画モー=スクリーン
  • 不透明=100%
  • ノイズ=0
  • 色=fcfcfc
  • テクニック=さらにソフトに
  • スプレッド=0%
  • saizu =208px
  • 輪郭は画像のまま(デフォルトのタイプです)
  • 範囲=50%
  • 適用度=0%


こんなんなりました。
kabe-photoshopa13.jpg
何となく、ほわんとした感じで、まずまず、てとこです。
色々試してみてくださいね!

さて、Photoshopでドット、今度は背景です。

Photoshopで背景をドットに

先ほどまでのものと、ほぼ一緒なので、さらっとご説明っす。
まず、Photoshop立ち上げたら、新規ファイル作って、文字を打ち込みます。
そして、新規レイヤーをぬりつぶして文字レイヤーの下に背景レイヤーを。
現段階でこんなんです。
kabe-photoshopb1.jpg
文字の色は # 013bf7 (ブルー)
背景の色は # f7e901 (イエロー)

とりあえず、文字に枠をつけましょう。
kabe-photoshopb2.jpg
文字レイヤーをダブルクリックして、レイヤースタイル編集画面を出します。
kabe-photoshopb2.jpg
▼境界線
  • サイズ=5px
  • 位置=外側
  • 描画モード=通常
  • 不透明度=100%
  • 塗りつぶしタイプ=カラー
  • カラー=f7f7f7


アウトライン(枠)がつきました。
kabe-photoshopb3.jpg
見づらいっすよね、すみません。

さて、文字レイヤーを右クリックして、
kabe-photoshopa5.jpg
「テキストをラスタライズ」 をチョイスします。

んで、色を確認。
kabe-photoshopb4.jpg
上にきているほうがベースの色、下にあるのがドット部分の配色 になりまっせ。

では、ライスタライズした文字レイヤーを編集しましょう。
文字レイヤーを選択して(選択方法は簡単。文字レイヤーをクリックするだけ)ください。
そしたら、
kabe-photoshopa6.jpg
「ツールバー」→「フィルター」→「フィルターギャラリー」 選択っす。

kabe-photoshopb5.jpg
「フィルターギャラリー」は、 「スケッチ」の中から「ハーフトーンパターン」を選択

▼設定
  • サイズ=2
  • コントラスト=50
  • パターンタイプ=点


このあたりもお好きに設定してみてくださいね!

そんで、完成したのが、こちら、
kabe-photoshopb6.jpg
こんなんなりました!

Photoshopでドット模様を作るの、簡単でしょ?

吹き出しの背景に使ってもかわいらしい。

使い方を変えれば、アメコミ風デザインも楽々っすよ。
そんなデザインサンプルなんかもそのうちアップします。

フォトショップ、イラストレーターのデザインってやりはじめると止まらなくなるくらい楽しいもんです。
手書き風デザインをレクチャーしてくれる本も素敵ですよ。
勉強になる&そのまま仕事で使ってもOK!

Photoshop & Illustratorでつくる手描き感デザイン

新品価格
¥2,484 から
(2016/11/29 01:49時点)




ではでは、また〜。
クリックしていただけるとうれしいです

人気ブログランキングへ

にほんブログ村 デザインブログ 女性デザイナーへ
にほんブログ村
posted by kabe at 00:31 | TrackBack(0) | Photoshop

この記事へのトラックバックURL
https://fanblogs.jp/tb/5667394
※ブログオーナーが承認したトラックバックのみ表示されます。

この記事へのトラックバック
ファン
検索
カテゴリーアーカイブ
プロフィール
kabeさんの画像
kabe
IT業界へ営業として入るや否や、数名いたデベロッパーが次々退職。 /クリエイトスキル0状態だったけど、自分でWeb制作もやらざるを得なくなる(!!なかなかないレア体験です、きっと)。フォトショとイラレの違い、JavaScriptとjavaの違いすらわかりませんでした。 /約3年が経過し、ようやくデベロッパーが入社したので、自分は退職。 /フリーランスのデベロッパーへ転向。 /美容・音楽大好き。癒しを求めて生きております。 よろしくおねがいします!
タグクラウド
記事ランキング
    ×

    この広告は30日以上新しい記事の更新がないブログに表示されております。

    Mobilize your Site
    スマートフォン版を閲覧 | PC版を閲覧
    Share by: