昨日はこのはてなブログのカスタマイズを進めると共に、ロゴマークを作ってみた。本当はもっとごく簡単なロゴにしようと思っていたのだが、結局はイラストレーターとフォトショップを使って作った。
簡単にと書いたが、最初はパソコンで使えるオンラインアプリでロゴを作ろうと考えていた。今日はそのアプリを紹介していきます。以前何度か使っていたアプリで、特に目新しいアプリではないのですが、便利なので。
直感的なUIが魅力のYouiDraw Logo Creator
ロゴをオンラインアプリで作れるアプリやサイトは結構沢山あります。無料から有料まで色々とあるのですが、今回のアプリは有料になります。無料でも使用する事が出来ますが、保存をする時にウォーターマーク（透かし）が入ってしまいます。
無料でも、透かし以外が機能としてほとんど変わりがないので試しに使ってみるのも良いかもしれません。
YouiDraw Logo Creatorとは
値段は月/9.99$と年/99.99$の２コース。
Chromeアプリでもあるが、アプリをダウンロードしなくても使う事が出来る。
唯一残念なのは、日本語を入力する事は出来るのだが、フォントの種類を選ぶ事は出来ない（ゴシック体で表示される）
保存するには、ログインが必要になるが、登録ではなく、DropboxやGoogle、Facebookの各アカウントでログインする事が出来る。
Logo Creatorのはじめかた
先ほど書いたように、直感的に操作が出来るので、説明する迄もないのですが、簡易的な保存迄の流れを説明していきます。
YouiDrawのTOPページから「Logo Creator」をクリックします。
すると、サンプルや説明等が出て来ます。一通り目を通したら、「Start Now」をクリック。
今度はロゴのサンプルを選ぶ画面になります。
画面中央がロゴのサンプル。
左側のサイドメニューは、ジャンル分けになっています。
右上のプルダウンでおすすめや人気等の順番にソートする事が出来る
サンプルを使いたい人は、画面中央からサンプルをクリックする。新規で何もない所から作りたい人は画面左上にある「Start from Blank」をクリックする。
画面は変わらずにログイン画面が出てくるので、使用するサービスをクリックする。
許可をリクエストされるので、ウインドウ下の「許可」をクリック。
無事にログインすると画面のような表示になるので「Start Now」をクリック。
これで準備は完了です。
表示されているのがロゴを作る画面です。
保存するまでの流れを紹介していきます
ロゴの制作の流れを説明をしていきます。簡単にではありますが、これで大体の流れはつかめると思います。
アイコンを選ぶ
左側の「Shape」はアイコンが表示されています。その下のプルダウン部分の「Shapes」からジャンルを選択出来ます。
この中から好きなアイコンを選択する。と画面のように表示されます。色は白で、黒のボーダーが付いています。
色を付けて、ついでに、ボーダーがいらないので消してみましょう。
右側の白い部分をクリックすると、カラーを選択出来る画面が表示されます。ここから好きな色を選択する。
ボーダーはその下の「Stroke」のチェックを外すと消す事が出来ます。
オブジェクトの編集
移動とサイズ変更はオブジェクト（ここでは丸）をドラッグすると移動が出来ます。周りの線の四角の部分でドラッグすると大きさを変更出来ます。上についている羽根のないタケコプターみたいな部分をドラッグすると回転になります。
※サイズ変更の時に高さと幅の比率を保ちたい場合はShiftを押しながらドラッグする。消去したい場合はDeleteキー。コピーアンドペーストやコントロールZ（アンドゥ）にも対応している。
上の順序でもう一つのオブジェクトを配置してみました。
中央画面下のNodesがレイヤー機能になります。右に行く程レイヤーが上になります。順序はドラッグで左右に動かす事で出来ます。
文字を入れる。
今度は出来上がったマークの下に文字を入れてみましょう。画面上部のメニューから「Text」をクリックします。すると「Type something」と書かれた文字が表示されます。この部分をクリックして、文字を入力します。
文字の入力が完了したら、好きな位置に移動をして下さい。
フォントを選ぶ
テキストを選択している状態で、右側のメニューを見ると、フォントのプロパティ画面が開いています。ここの「Arial」の部分をクリックすると、プルダウンメニューが開き、フォントを選択する事が出来ます。その横の数字はフォントの大きさです。
文字間の調整
ロゴテキストの文字間の調整をする事で、印象が変わります。ブランドのロゴ等も有名なフォントを使用して、文字間等を変更していたりするので、参考に見てみたりしましょう。
後は、位置やアイコンとテキストの位置や大きさのバランス等を調整して出来上がりです。
ロゴを保存する
出来上がったロゴを保存する流れですが、まずは、背景を透過しない場合や透過する範囲を指定したい場合はキャンバスの幅と高さを変えておきましょう。
オブジェクトの部分のみを残して後は透過したい場合は、オブジェクトを全て選択しておく必要があります。
全て選択された状態です。下のレイヤーの部分が反転されて選択されています。
それでは保存をしてみましょう。画面右上の「Export」をクリックします。
Export画面の説明
Export画面に変わりプレビューが表示されます。
左下の「type」からファイル形式PNGかJPGを選択します。
※SVGやPDFは有料
「include」で透過指定をします。img019
- Entire Canvas 透過なし
- AllObject 背景色を透過
- Selected Object 選択したオブジェクトのみ透過
保存をするには、画面右下の「Export」をクリックする。
これでロゴの完成です。
このように簡単にロゴを作る事が出来ます。ですが、他にもたくさんの機能を兼ね備えているので、もっと本格的なロゴを作る事も出来ます。ブログのアイコン等も作れたり、アイキャッチ画像等の制作も出来るでしょう。無料でも充分に操作出来るので、まだ使った事がない方は体験してみてはいかがでしょうか？
