DREAMARK

WEBLOG

直感的な操作でブログのロゴを作る。YouiDraw Logo Creatorの作成から保存までをご紹介。

昨日はこのはてなブログのカスタマイズを進めると共に、ロゴマークを作ってみた。本当はもっとごく簡単なロゴにしようと思っていたのだが、結局はイラストレーターとフォトショップを使って作った。

簡単にと書いたが、最初はパソコンで使えるオンラインアプリでロゴを作ろうと考えていた。今日はそのアプリを紹介していきます。以前何度か使っていたアプリで、特に目新しいアプリではないのですが、便利なので。

直感的なUIが魅力のYouiDraw Logo Creator

 

f:id:dreamark:20160424203808p:plain

http://site.youidraw.com/

ロゴをオンラインアプリで作れるアプリやサイトは結構沢山あります。無料から有料まで色々とあるのですが、今回のアプリは有料になります。無料でも使用する事が出来ますが、保存をする時にウォーターマーク(透かし)が入ってしまいます。
無料でも、透かし以外が機能としてほとんど変わりがないので試しに使ってみるのも良いかもしれません。

YouiDraw Logo Creatorとは

値段は月/9.99$と年/99.99$の2コース。
Chromeアプリでもあるが、アプリをダウンロードしなくても使う事が出来る。

唯一残念なのは、日本語を入力する事は出来るのだが、フォントの種類を選ぶ事は出来ない(ゴシック体で表示される)

保存するには、ログインが必要になるが、登録ではなく、DropboxGoogleFacebookの各アカウントでログインする事が出来る。

Logo Creatorのはじめかた

先ほど書いたように、直感的に操作が出来るので、説明する迄もないのですが、簡易的な保存迄の流れを説明していきます。

YouiDrawのTOPページから「Logo Creator」をクリックします。

f:id:dreamark:20160424204201p:plain

すると、サンプルや説明等が出て来ます。一通り目を通したら、「Start Now」をクリック。

f:id:dreamark:20160424204448p:plain

今度はロゴのサンプルを選ぶ画面になります。

f:id:dreamark:20160424204559p:plain

画面中央がロゴのサンプル。
左側のサイドメニューは、ジャンル分けになっています。

f:id:dreamark:20160424204945p:plain

右上のプルダウンでおすすめや人気等の順番にソートする事が出来る

f:id:dreamark:20160424205055p:plain

サンプルを使いたい人は、画面中央からサンプルをクリックする。新規で何もない所から作りたい人は画面左上にある「Start from Blank」をクリックする。

f:id:dreamark:20160424205225p:plain

画面は変わらずにログイン画面が出てくるので、使用するサービスをクリックする。

f:id:dreamark:20160424205356p:plain

許可をリクエストされるので、ウインドウ下の「許可」をクリック。

f:id:dreamark:20160424205500p:plain

無事にログインすると画面のような表示になるので「Start Now」をクリック。
これで準備は完了です。

f:id:dreamark:20160424205554p:plain

表示されているのがロゴを作る画面です。

f:id:dreamark:20160424205643p:plain

保存するまでの流れを紹介していきます

ロゴの制作の流れを説明をしていきます。簡単にではありますが、これで大体の流れはつかめると思います。

アイコンを選ぶ

左側の「Shape」はアイコンが表示されています。その下のプルダウン部分の「Shapes」からジャンルを選択出来ます。
この中から好きなアイコンを選択する。と画面のように表示されます。色は白で、黒のボーダーが付いています。

f:id:dreamark:20160424205855p:plain

色を付けて、ついでに、ボーダーがいらないので消してみましょう。
右側の白い部分をクリックすると、カラーを選択出来る画面が表示されます。ここから好きな色を選択する。

f:id:dreamark:20160424210051p:plain

ボーダーはその下の「Stroke」のチェックを外すと消す事が出来ます。

f:id:dreamark:20160424210338p:plain

オブジェクトの編集

移動とサイズ変更はオブジェクト(ここでは丸)をドラッグすると移動が出来ます。周りの線の四角の部分でドラッグすると大きさを変更出来ます。上についている羽根のないタケコプターみたいな部分をドラッグすると回転になります。

f:id:dreamark:20160424213102p:plain

※サイズ変更の時に高さと幅の比率を保ちたい場合はShiftを押しながらドラッグする。消去したい場合はDeleteキー。コピーアンドペーストやコントロールZ(アンドゥ)にも対応している。

上の順序でもう一つのオブジェクトを配置してみました。

f:id:dreamark:20160424210609p:plain

中央画面下のNodesがレイヤー機能になります。右に行く程レイヤーが上になります。順序はドラッグで左右に動かす事で出来ます。

f:id:dreamark:20160424213305p:plain

文字を入れる。

今度は出来上がったマークの下に文字を入れてみましょう。画面上部のメニューから「Text」をクリックします。すると「Type something」と書かれた文字が表示されます。この部分をクリックして、文字を入力します。

f:id:dreamark:20160424210904p:plain

文字の入力が完了したら、好きな位置に移動をして下さい。

フォントを選ぶ

テキストを選択している状態で、右側のメニューを見ると、フォントのプロパティ画面が開いています。ここの「Arial」の部分をクリックすると、プルダウンメニューが開き、フォントを選択する事が出来ます。その横の数字はフォントの大きさです。

f:id:dreamark:20160424211117p:plain

文字間の調整
ロゴテキストの文字間の調整をする事で、印象が変わります。ブランドのロゴ等も有名なフォントを使用して、文字間等を変更していたりするので、参考に見てみたりしましょう。

f:id:dreamark:20160424211226p:plain

 後は、位置やアイコンとテキストの位置や大きさのバランス等を調整して出来上がりです。

f:id:dreamark:20160424211335p:plain

ロゴを保存する

出来上がったロゴを保存する流れですが、まずは、背景を透過しない場合や透過する範囲を指定したい場合はキャンバスの幅と高さを変えておきましょう。

f:id:dreamark:20160424211413p:plain

オブジェクトの部分のみを残して後は透過したい場合は、オブジェクトを全て選択しておく必要があります。

f:id:dreamark:20160424211629p:plain
全て選択された状態です。下のレイヤーの部分が反転されて選択されています。

それでは保存をしてみましょう。画面右上の「Export」をクリックします。

f:id:dreamark:20160424211752p:plain

Export画面の説明

Export画面に変わりプレビューが表示されます。

f:id:dreamark:20160424212021p:plain

左下の「type」からファイル形式PNGかJPGを選択します。

f:id:dreamark:20160424211920p:plain

SVGやPDFは有料

「include」で透過指定をします。img019

  • Entire Canvas 透過なし
  • AllObject 背景色を透過
  • Selected Object 選択したオブジェクトのみ透過

 

f:id:dreamark:20160424212132p:plain

保存をするには、画面右下の「Export」をクリックする。

f:id:dreamark:20160424212205p:plain

これでロゴの完成です。

 

このように簡単にロゴを作る事が出来ます。ですが、他にもたくさんの機能を兼ね備えているので、もっと本格的なロゴを作る事も出来ます。ブログのアイコン等も作れたり、アイキャッチ画像等の制作も出来るでしょう。無料でも充分に操作出来るので、まだ使った事がない方は体験してみてはいかがでしょうか?

Copyright © 2016 DREAMARK All rights reserved.