おすすめ iPadアプリ “Procreate”を使ってお手軽にロゴマークを作る方法

(こちらの記事の内容は古い情報をベースにしています。当時の雰囲気としてお楽しみください)

ムクッといこうブログのロゴマークはこちらです。

Logo

実はこれ、もともとのデザインはネットのフリー画像を使ってるんですが、着色や影のスタイルはiPadアプリ “Procreate”を使い自分で仕上げました。

今回は Procreate を使ったロゴマーク作成方法をご紹介します。

Procreate

720円
(2017.03.17時点)
posted with ポチレバ

おすすめ iPadアプリ “Procreate”

さて Procreate ですが、数ある iPadペイントアプリの中でも常にトップ1、2に名前が挙がるほどの優秀なアプリです。

プロが使うツールとしては多少物足りないところがあるようなのですが、僕のような素人がちょっと凝った画を作成したい時にはかなり便利な相棒になってくれます。

画像の透過度を変更したりレイヤー機能を使うことで超かんたんにトレースもできます。

ロゴマーク作成の準備

ではさっそくロゴマークを作っていきましょう。

まずは前準備からやっていきます。

完成のイメージを決める

コレっ!一番大事なステップです。

  • 何のためのロゴマークなのか?
  • ロゴマークで何を表現したいのか?
  • どんなデザインをイメージしているのか?
  • 色は?

なんとなくロゴサンプル集を眺めながら「あ!これいいなっ」というのでもいいですけど、コンセプトどんな想いがあってそのロゴを選ぶのかが明確になっているほうが愛着が湧きます。

それにその方が探しやすいというメリットもありますよね。

ロゴを描く・描いてもらう・探す

イラストを描ける人は自分でデザインしてみましょう。

自信がない人はココナラ というサービスを利用すると500円からオリジナルロゴマークを作成してもらうこともできます。

今回は例として画にちなんでこのロゴマークを使わせてもらうことにします。

Sample

パレットのロゴマークですね。

自分の好きなスタイルがあるかどうかはわかりませんが、ビビっとくるものがあったらそれを使っちゃいましょう。

画像はPNG(透過ファイル)で用意しましょう。

Procreateをインストールしておく

言うまでもないですけどアプリを買っておきましょう。

ランチ一回分だと思えば安いもんです。

今後も色々使えるアプリなのでこの価格は破格です。

Procreate

720円
(2017.03.17時点)
posted with ポチレバ

ちなみにこのアプリを最大限に効率的に使うんだったらスタイラスペンが必須です。

僕はその中でもダントツに Apple Pencil をオススメします。

これ使うとマジで世界が変わるほどに便利で使いやすいです!

Procreateで読み込む

用意したPNGをProcreateアプリで読み込みます。

iPadのカメラロールなどに保存した画像を取り込んで自由に編集できるのがProcreateの特徴の1つですね。

1

Procreateで編集する

お次はいよいよProcreateを使って編集です。

まずこちらがロゴを読み込んだ時の画像です。

2

色を白に変更する

さっきダウンロードしたロゴマークはもともと着色されてます。

これを自分の好きな色に変更しやすくするために全て白で統一しましょう。

やり方はかんたん。

画面右上の丸い色をタップすると色の選択画面になるのでそこで白を選びます。

3

この白に指(もしくはスタイラスペン)を置いてドラッグします。

するとこうやって色のアイコンがスーッと移動するんですね。

4

あとは色を着けたいところで指(スタイラスペン)を離すと枠の中が一気に着色されます。

いわゆる塗りつぶし機能です。

Procreateでどうやって塗りつぶすのか疑問だった人の参考になれば幸いです。

この作業を繰り返して全て白色にしましょう。

5

配色を決める

アイコンをどんな配色にするか決めておきます。

サイトカラーに統一するか、もしくはこちらのような色が与える印象を参考にして選んでもいいです。

今回はこの中から「ポップで楽しいイメージ」になるように配色を決めたいと思います。

6

画像をコピーする

さっき白塗りした画像をコピーしておきましょう。

画面のどこでもいいので3本指で上から下にスライドするとこのように選択画面が表示されます。

7

この中からコピーを選択し、続けて貼り付けを選択します。

そしてレイヤーを見ると、

8

こんな感じで貼り付けた画像が挿入されたイメージ(新規レイヤー)として表示されるようになりました。

ワンポイントアドバイス
画面の一部だけコピーしたい場合は範囲選択を使います。

左上のメニューから範囲選択ボタンをタップ。

9

下に表示されたフリーハンドを選ぶと自由に範囲を設定できるようになるので、コピーしたい領域を囲みます。

10

囲み終わったらさっきと同じ要領で3本指で上から下にスライドしてコピペしましょう。

選択した範囲だけが新規レイヤーとして登録されます。

影を作成する

影をつけるため着色します。

着色するのはオリジナルのロゴでもコピーしたロゴでもどちらでもOK。

ポップで楽しいイメージにあわせるため、ここでは影の色を#0074bfで設定します。

11

Procreateでは16進数で色を決めることもできます。

右上の色アイコンをタップして表示される画面の左上にある3本線をタップすると詳細画面に移動します。

12

ここで色を16進数で指定できます。

13

白色に着色した時と同じ要領で影になるロゴを塗りつぶしました。

14

レイヤーの位置をズラす

これで今は

  1. 白色のロゴマーク
  2. 影になるロゴマーク

の2種類があります。

影を生み出すために①のロゴマークの位置をズラしましょう。

レイヤーの順番に気をつけよう
上側にあるレイヤーが優先的に表示されます。

そのため白色のロゴマークレイヤーを上に、影になるロゴマークレイヤーが下に来るよう順番を入れ替えておきましょう。

レイヤーを入れ替えるためには移動させたいレイヤーを長押ししてスライドさせるとできます。

━━━━━━━━━

ではまず白色のロゴマークレイヤーを選択した状態にしておきます。

15

そしてメニュー項目から矢印ボタンを選択します。

16

これで選択したレイヤーの位置を変更することができるようになりました。

この状態でロゴマークをドラッグすると・・・

17

はい!こんな感じで下にある影レイヤーと位置がズレるので影を作ることができました!

お好みで影の大きさを調整しましょう。

位置が決まればもう一度矢印ボタンをタップして決定します。

着色する

いよいよ着色です。

ポップで楽しいイメージになるように自由に色を決めていきます。

16進数で色を指定してドラッグアンドドロップで塗りつぶしていけば作業はあっという間に終わります。

色塗りが終わったらPNGで出力してお終い。

んで完成したロゴがこちら。

18

オリジナルと比較すると見た目もずいぶん変わりました。

まとめ

iPad Proを使うとものすごく簡単に画像編集ができます。

PCアプリとして例えば僕も使ってるようなこちらの Pixelmator のようなものもあります。

Pixelmator

3,600円
(2017.03.18時点)
posted with ポチレバ

ProcreateよりもPCが使いやすいという人はもちろんこっちでもOKです。

Procreateは残念ながら文字入力ができないのでその点は見劣りするかもしれないですけど、難しい操作も必要なく感覚でポンポンと作業できるのは嬉しいですね。

以上、Procreateを使ったロゴマークの作り方でした!

Procreate

720円
(2017.03.18時点)
posted with ポチレバ
ゆーすけ(守屋祐輔)

ゆーすけ(守屋祐輔)

複業サラリーマン

会社員×ブログ×デザイン×講師×投資の5つの働き方・稼ぎ方を実践する複業サラリーマンブロガー ▼経験から学んだノウハウや考え方、自分の人となりがわかる記事をお届けします ▼主力複業のサイン作成では800人以上、5,500点以上の作成実績あり。

FOLLOW

カテゴリー:

\実体験に基づく情報/

ストレス・重圧から開放され、毎月がボーナス月で、強いやりがいを感じる私なりの複業に関する戦略・戦術を不定期でお届けします。普通の会社員が努力と継続で登ってきた階段です。あなたにもきっとできます。動く時は今しかありません。



複業しながらでも1日1冊の読書はできます。その読書術や私が読んで良かった本・学んだこと・活かしたことなど不定期でお届けします。読書は人生を豊かにします。本を読んで1つでも学びがあればいいのです。



関連記事