こんにちは、おかゆ(＠B_____0o0ky)です。
今回は変わり種回ということで、同人誌とか漫画のロゴっぽいものの作り方をシェアしてみようと思います。
今回作るのはこちら。
マスク暑いし嫌だなと思って作りました。
使うソフトはPhotoshopのみ、使用フォントはフリーで配布されているプイッコとラノベPOPです。
※追記：フリーフォントとして配布されていたプイッコですが、現在はダウンロードできなくなっていました…
プイッコについても大変心苦しいのですが非公開とさせていただきます…申し訳ありません。
またなんらかの形で皆様の前にお目見えできると思います。今後とも頑張りますのでどうぞよろしくお願いします。— あらたかな (@ARTAKANA) April 20, 2021
そのため、別のフリーフォントで代用しご参考いただけますと幸いです。
ラノベポップは以下からダウンロード可能です。
今回は特にフォントの文字の形はいじらずにそのまま使用しているので、簡単に作れるかと思います！
BOOTHにてpsdデータを無料で配布していますので、初心者の方は是非参考にしてください！
Photoshopの練習にもなるかと思います。
mask sampleData.zip(328KB)：
※BOOTHのページへ飛びます。
「プイッコ」配布終了のため、フォントはシェイプ化しております。
その他にもちょこちょこデザイン記事更新しておりますので、ご興味ある方は是非寄り道してってください！
それでは早速いきましょう！
まずは新規ドキュメントを作成
まずPhotoshopを開き、「新規作成」から新規ドキュメントを作成します。
何ピクセルでも良いですが、今回は「web上でのみ使用するロゴ」と仮定し以下のように設定します。
- サイズ：800×420ピクセル
- 解像度：72dpi
- カラーモード：RGB
新規作成できたら、ベタ塗りレイヤーなどで適当に文字が見えやすい色を置いておきます。
ロゴのベースを作成していこう！
文字を配置してこう
それではフリーフォントのぷいっことラノベPOPを使用し、文字を並べていきます。
（今回は都合上ロゴ小さめサイズで作成していますが、後々拡縮することを考えるともっと大きいサイズで作ることもあります。というかもっと大きく作ります。）
「マスク」を一番強調させてたい部分なので、文字の中では大きく配置し、また全体的に動きのある配置にしてみました。
「！」はバランスを考慮し大きめに、右回りに10度回転させています。
「マスクなんかしたくないんだー！」と意思の強さを感じますね（ほんま？）
左下にはマスクのイラストを配置する予定なので空けておきます。
色をつけよう
次に、文字にベースの色をつけます。
「文字パネル」の「カラー」のところをクリックして文字の色を変更していきましょう。
「マスク」はマスクの色のイメージである、白っぽいベージュに（#f5f4eb）。
「なんか」はマイナスなイメージがあるので青っぽい色に（#5fb8b1）。
「したくない！」は強い言い方であるのと、動きのある配置を活かしてオレンジ色（#e9833f）と赤色（#e94b3f）を交互に配色してみました。
レイヤー効果をつけていこう
それではいよいよ、レイヤー効果を使って文字のデザインをより豊かなものにしていきましょう！
「マスク」の効果
「マスク」の文字色は白っぽいベージュ色にしましたが、このままではいくらなんでも見辛いので、文字に境界線をつけていきます。
まずバラバラになった「マ」と「ス」と「ク」のレイヤーを選択肢グループ化(⌘G)。 グループ名は「マスク」とします。
作成した「マスク」グループをダブルクリックしてレイヤースタイルのパネルを表示させます。 その中の境界線から、以下のように設定して境界線を追加しましょう。
（カラー：#bfbdad）
次に、よりマスクっぽくなるように、文字に横ボーダーの模様を追加します。
今回はシェイプでボーダー模様を作り(カラー：#e9e7d4)、それを「マスク」グループにクリッピングマスクさせる簡単なやり方で進めていきます。
最後に、文字の視認性を確保するため、文字の内側とプラスで外側にも境界線を追加します。
【文字の内側境界線】カラー：#f5f4eb
【文字の一番外側の境界線】カラー：#ffffff
「なんか」の効果
こちらは文字の上半分にシャドウをかけて、薄い青色の外側境界線（カラー：#e5f9f8）を追加します。
やり方は「マスク」と同様に、シャドウ用のシェイプを作成しクリッピングマスク！
「したくない！」の効果
こちらも文字の上半分にハイライトをかけ、全ての文字をグループ化し薄いベージュの外側境界線（カラー：#eedccc）を追加します。
基本的なやり方は「マスク」「なんか」と同様ですが、こちらは一文字一文字にハイライトレイヤーをクリッピングマスクさせています。
そしてこうなった。
最後の仕上げ
最後に、ロゴ全体のフチどりを追加していきましょう！
すべてのレイヤーをグループ化し、「all」とします。
この「all」グループに以下のようなレイヤー効果をつけていきます。
【ロゴ全体の境界線】カラー：#ffffff
【奥行き(ドロップシャドウ)】カラー：#ebdaaa
【ロゴ全体のドロップシャドウ(ドロップシャドウ)】カラー：#000000
そして「all」グループ内の一番下にマスクのイラスト素材を置き、穴埋め作業を適当にして…
＼ 完成！ ／
以上、同人誌っぽいロゴの作り方でした！
記事を作成している途中から「あれ、これYouTubeとかでチュートリアル動画作ってアップした方が分かりやすいのでは？」とも思いましたが、まあそれはそれ、これはこれ（なんやねん）
ここが意味わからんねんけど！とかござましたらTwitterには常時いますので、そちらで話しかけてもらえるとお答えできます。ドシドシどうぞ。暇人ではありません。
