【Photoshop】無料のフォントを使ってポケモンGO風のロゴを作成する方法。

スクリーンショット 2016 09 16 22 07 36

ハイサイ!ウミウシ大好き!しんやりょう@umiushimeshiです。

ポケモンGOっぽい無料フォントを見つけました。
実際にPhotoshopを使ってポケモンGO風にロゴを作る方法を紹介します。

ポケモンGO風、無料フォントをゲットするには

Pocket Monk font by Chequered Ink FontSpace

無料でゲットできるポケモンGO風のフォントは、「Pocket Monk」というやつ。
ダウンロードしましょう。

Pocket Monk font

ぼくはMacユーザー。解凍したファイルはフォントブックから追加。
わからない人はcontrol+スペースでSpotlightを表示。
検索して追加してください。ファイルをドラッグ&ドロップするだけ。

ユーザ 5 個のフォント と 無料のポケモンGOフォントを使ってPhotoshopでポケモンGO風のロゴを作成する方法

PhotoshopでポケモンGO風のロゴを作成する方法

スクリーンショット 2016 09 16 20 59 18

Photoshopでファイルを新規作成したら、テキストから「Pocket Monk」を選択して文字を挿入します。

続いて色を選択していきます。

Pokémon GO

公式サイトから1つ画像を頂きました。
この画像に使われている色をパクります。

スクリーンショット 2016 09 16 21 04 27

スポイトツールを選択。さっきの画像を読み込んだら、欲しい色の部分をクリック。
すると色を読み込んで左下のパレットの色が変わります。
パレットを選択して確認してみてください。

スクリーンショット 2016 09 16 21 05 58

Web上の色は全て#と6ケタのアルファベットか数字でできています。
このポケモンGOのメイン色の場合は#ffcc33
同じ色を使いたいので、全てこの方法で色はパクれます。

スクリーンショット 2016 09 16 21 13 06

テキストの色を変更しました。
ちなみに右側の目のマークを押せば、表示したい画像、邪魔で消したい画像を分けて表示できます。
これは便利。

次は文字の青い周りと影の部分。具体的には3色つかわれてるので、毎回色を調べてコピーしなければなりません。
めんどくさい方のためにカラーコードを記載。

  • メインの黄色 #ffcc33
  • 外側の青色 #336699
  • 影の濃い青色#003399
この方法を使えば、好きなWebページのスクリーンショットを撮って、PhotoshopでWebカラーをコピーしてデザインに役立てるという応用もききますね。
スクリーンショット 2016 09 16 21 20 48

先ほどのフォントを選択したら、右下の方、fxというマークから境界線を選択します。

スクリーンショット 2016 09 16 21 22 52

これで境界線が外枠の青色になりました。
色は先ほどコピーした通り。#336699。
これでそれっぽくなりました。

次は、さらに外枠の影を追加したいです。

スクリーンショット 2016 09 16 21 24 42

フォントを選択して右クリック。「レイヤースタイルをラスタライズ」を選択。
これで今まで決めた色は確定して変更できません。注意。

スクリーンショット 2016 09 16 21 26 21

境界線を選択したときの同じ方法で、右下のfxから今度は「ドロップシャドウ」を選択。

スクリーンショット 2016 09 16 21 27 04

影が追加されました。
色は先ほどコピーした#003399。
角度だけ調整すれば(65度くらい)影の角度をうまいことできます。

RYO
これで完成や!

GOの部分を真似する方法

今度はGOの部分をパクります。

スクリーンショット 2016 09 16 21 32 38

GOの部分だけスクリーンショットを撮ってきました。

スクリーンショット 2016 09 16 21 34 38

マグネットツールでうまいこと地味に切り抜きました。
範囲選択系ならなんでも大丈夫です。
上手な人はペンツールとかでいけるらしいっす。

これだと細かいところがまだ粗い・・・のでマスク機能を使います。

スクリーンショット 2016 09 16 21 36 40

左下の「マスク」を押すと選択した部分以外の画面が赤くなります。

スクリーンショット 2016 09 16 21 37 44

あとは拡大しまくって、荒れてる場所や色が違う場所を「消しゴムツール」で消しちゃえば大丈夫。
*消しゴムツールのブラシの大きさは調整できるので、小さめを選ぶとよいです。

スクリーンショット 2016 09 16 21 41 46

マスク解除前。ロゴ周りの緑色の微妙な部分がキレイになくなりました。

終わったらまたマスクを解除。
これでOK!

スクリーンショット 2016 09 16 21 53 53

背景が邪魔なので、右クリックしたら「レイヤーをラスタライズ」します。

スクリーンショット 2016 09 16 21 54 04

最後です。
「選択範囲を反転」を選択。そのあとデリートボタンを押して完了です。

スクリーンショット 2016 09 16 22 07 36
RYO
ウミウシ飯GO!って意味わかんないけどできた!

ポケモンGO再現するためにがんばったらPhotoshopのレベル上がった!

Umiushimeshi go
RYO
なんかわからんけどPhotoshopに少し詳しくなったぞ!

楽しかったです。
Photoshopやっている人もこれ実行すればけっこう勉強になるのでは?

しんやりょうでした。

[めちゃ参考になったPhotoshop記事]
photoshopで文字や図形を縁取りする1番簡単な方法。レイヤースタイルに境界線を適用する&小技

[こだわりたい人はこんなポケモンGO素材も]
Pokemon Go UI Kit

ご案内

ウミウシ飯ってなに?しんやりょうプロフィール
ウミウシ図鑑更新中!!
ワーホリでオーストラリア行きます
石垣島でポケモンGOコンプリート!!

人気記事セレクション

  1. 石垣島に移住して3年目のぼくが「移住してよかった!」と思う5つの理由
  2. ホリエモンが絶賛!Xiaomi(シャオミ)の公式ストア「台北小米之家」にいってきた。ちょっとした台湾お土産にも最適!
  3. スラスラ読める!はじめての古事記(現代語訳)ならこれがオススメ。
  4. 我的中文不好[Transition 前進樂團]の歌詞 英語/中国語/日本語
  5. ウミウシの上手な探し方。
スクリーンショット-2016-09-16-22.07.36.png

当ブログの記事に共感していただけたら、また読みにきていただけるとうれしいです。読んでくれる方の数が多くなると、更新するやる気につながります^^

コメントを残す

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