ども!テクテンです!
サルワカさんのフォントロゴ、めちゃくちゃカッコイイよね!
今回はそんな「サルワカさん風」なロゴの作り方を教えちゃいます。
あ、あくまで「風」だからね(;・∀・)
テクテン
ブログを始めるときも、「ロゴは絶対サルワカさんっぽいやつにしたい!!」って決めてたくらいだからね。
なので「ヘタレスト」のロゴもサルワカさんに寄せてるわけです。
ってことで、これからブログを始める方、ロゴを変えようと思ってる方、必見です。
10分位でこんな感じのロゴが簡単に作れちゃうんだからね!
使うのはMACアプリの定番、「Pixelmator」のみという手軽さ。
では行ってみましょう〜!
中身をチェック!
超絶かっこいいフリーフォント「ニュータワー」を使おう
使わせてもらうフォントは、「デザインフォント」さんの「ニュータワー」です。
商用利用も可能なカタカナフォント。すげークールだよねぇ。
見つけた時は「これだ!!」って思ったもん!
公式ホームページからダウンロードできるので、さっそくMACに入れましょう。
公式ホームページ:フリーフォント「ニュータワー」
いろいろフォントを調べたんだけど、このフォントが一番「サルワカ」に近いと思う。
他に「これじゃない?」ってのがあったら教えていただけると喜びます。
Adobe製品不要、Pixelmatorのみ利用!
このロゴ作成のメリットには、高額なAdobe製品が要らないってところもあります。
サブスクリプション形式に移行したと言っても、月額で最低でも1,000円はかかるのでけっこう負担だよね。
ぼくはデザイナーで飯食ってるわけでもないので持ってません!
使うのは「Pixelmator」のみ。
Photoshopキラーと呼ばれるMACの中では定番中の定番アプリ。
こいつはPhotoshopに肉薄する機能を持っていながら、3,600円の買い切りアプリという良心ぶり。
うちのブログのアイキャッチはすべてこいつで作ってるよ(`・ω・´)ゞ
ぼくの相棒だ。
「PhotoshopやIllustratorを買うまではないんだよな〜」って方はこれを一本持っておくと、長く使えて重宝しますよ。
Pixelmatorを使ってロゴ作成!
じゃ、さっそく作っていくよ!
- まずは新規ファイル作成で、適当にキャンバスを作ろう。
今回は「1600*300」で作成してみたぞ。 - 「テキストツール」で作りたいロゴの文字を入力。
フォントはもちろん「DSFニュータワーUB」を選択。
サイズは200にしてみた。文字色はこの段階では別になんでもいいよ!
こんな感じ。なんか既にそれっぽくなってきたぞ! - 文字の角を丸くする(1)
このままだと文字の角が尖っているので丸くする作業。
文字のレイヤーが選択された状態で、「編集」→「選択範囲の読み込み」を実行
文字の周りが選択された状態になるね - 文字の角を丸くする(2)
文字レイヤーはもう使わないので削除する。
こんな風に文字の形が透明に選択された状態になったかな? - 文字の角を丸くする(3)
「編集」→「選択範囲をカスタマイズ」を選ぶ。
「図形の丸み」を18%に設定。
角が取れて丸くなったね! - 色を塗る
「バケツルール」で文字の中を好きな色で塗りつぶす。
今回はオレンジ色っぽい感じにしてみたぞ。 - 完成!!
サルワカっぽく出来たでしょ!?かっこいーー!!
あとはロゴ用にPNGで出力すればOKです。
お疲れ様でした!
応用編
少しだけ応用編も解説します。
AZU
テクテン
ロゴなら背景が透明のほうがいいね確かに。
やり方は簡単!
さっきの「1.新規ファイル作成で、キャンバスを作る。」の段階で、レイヤーの不透明度を「0%」に設定しよう。
これだけでOK!
AZU
テクテン
これもオシャレなロゴができるね。
やり方は超絶簡単!
さっきの「5.文字の角を丸くする(3)」のあとに、次の作業を入れよう。
- 選択範囲を反転させる
- 反転させたところを「バケツツール」で色を塗る
ほら、白抜きのロゴの出来上がり!
さてさて、いかがだったでしょうか?
見よう見まねで作ったので本家のサルワカさんのロゴとは異なる部分もあると思います(;・∀・)
Pixelmatorの使い方も、もっと効率のいい方法があるかもしれません。
そのへんはご了承ください!
「こんな方法で簡単に作れるよ」ってのがあればぜひご教示いただければと思います。
いやー!それにしても自分で作ったロゴはやっぱりかっこいい!!
どうせブログやるなら手作りロゴがいいね。
愛着が違うよ(•ˇωˇ•)
参考 ページタイトルサルでも分かる図解説明マガジン
ではではテクテンでした!
いつも楽しく読ませて貰っています。
https://tekuten.com/saruwaka-logo
のロゴの画像のリンクが1つ切れてます!
https://tekuten.com/wp-content/uploads/2018/02/logo14-300×56.png
が無いみたいです。
ご存知でしたらすいません。
では失礼します。
コメントありがとうございます!
ご指摘の通り、画像のリンクが1つ切れておりました。
元画像がなくなってしまったので類似画像を挿入しています。
今後もどうぞよろしくおねがいします\(^o^)/