【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. ウミウシの上手な探し方。

当ブログの記事をご覧いただきありがとうございます。また遊びに来てください^^

21 件のコメント

  • I blog frequently and I genuinely thank you for your information. The article has really peaked my interest.

    I am going to take a note of your website and keep checking for new information about
    once per week. I opted in for your RSS feed as well.

  • Nice post. I learn something new and challenging on blogs
    I stumbleupon everyday. It’s always helpful to read
    content from other authors and use a little something from their web sites.

  • Hello there, I discovered your blog by the use of Google while searching
    for a comparable subject, your site came up, it appears good.
    I’ve bookmarked it in my google bookmarks.

    Hi there, just was aware of your blog via Google, and located that it is really informative.

    I am gonna be careful for brussels. I’ll be grateful in case you continue this
    in future. A lot of people shall be benefited out of your
    writing. Cheers!

  • My individual idea is that google will eventually make it virtually impossible (even with online addresses) to rank for a
    couple of areas as their dream certainly is
    to supply the best, neighborhood listing for the individual.

  • Good – I should certainly pronounce, impressed with your site.
    I had no trouble navigating through all the tabs and related information ended
    up being truly easy to do to access. I recently found what I hoped for before you know it
    at all. Quite unusual. Is likely to appreciate it for those who add forums or something,
    web site theme . a tones way for your client to communicate.
    Nice task.

  • I seriously love your blog.. Pleasant colors & theme.
    Did you develop this website yourself? Please reply back
    as I?m trying to create my own blog and want to learn where you got this from or what the theme
    is named. Appreciate it!

  • I’ve read a few just right stuff here. Definitely worth bookmarking for revisiting.
    I wonder how so much effort you place to create any such magnificent
    informative web site.

  • Magnificent beat ! I wish to apprentice while you amend your website, how could i subscribe
    for a blog website? The account aided me a acceptable deal.
    I had been tiny bit acquainted of this your broadcast offered bright
    clear concept

  • I absolutely love your blog.. Pleasant colors & theme.

    Did you make this site yourself? Please reply back as I?m hoping
    to create my very own website and would like to know where you
    got this from or exactly what the theme is called.
    Thanks!

  • With havin so much content do you ever run into any problems of plagorism or copyright
    violation? My blog has a lot of completely unique content I’ve either
    created myself or outsourced but it appears a lot of it is popping it up all
    over the web without my agreement. Do you know any ways to
    help protect against content from being ripped off?

    I’d definitely appreciate it.

  • Ԍreat – I should dеfinitely pronounce, imprеssed with your site.
    I hаd no trouble navigɑting throᥙgh all the tabvs
    as well as relatеd informatіon ended սp bᥱing triⅼy easy to doo to access.
    I rеcently found ѡhat I hoped for befоre you know iit aat alⅼ.
    Quite unusual. Is likely to appreeciate it foor thoѕᥱ who add forums or sօmething, site
    theme . a tones way for your customer to communicate.
    Excellent task.

  • If so, aim to identify a way to thicken” those pages, or examine your analytics
    to see just how much website traffic they’re obtaining, and simply exclude them (utilizing a noindex meta tag) from search results to avoid having it show up to
    Google that you’re trying to flood their index with
    great deals of low worth web pages in an effort to
    have them place.

  • コメントを残す

    メールアドレスが公開されることはありません。