[無料ツール]簡単、お手軽にロゴデザインをしてみよう

皆様、あけましておめでとうございます。
スタッフ「ほ」です。
年末年始、いかが過ごされましたか?

私は幸いにもお休みをいただくことができました。
特に遠出をするわけでもなく、自宅でゆっくりと過ごしましたが、毎年の敵である「正月太り」に対抗すべく、9月のエントリーでも書きましたスマホの位置情報ゲームで、がんばって歩きました。
歩きまくりました。

おかげで体重、減りこそしないものの、増加を食い止めることができました。

さて、年明け1回目の今回のエントリーは、Adobeソフトではなくインターネット上で無料で利用できるサービスのご紹介です。

ロゴ、作成したことありますか?
デザイン考えるの大変ですよね。特にクライアントさんに複数の案を出さなければならない時なんか。。
もしくは、作成してみたいけれど、どうすればいいのかわからない、という方もいるかと思います。

そんな時、大きな助けになってくれる「Wixロゴメーカー」という無料のWebサービスがあります。
※高品質データや商用利用は有料(でもとってもリーズナブル)になります

Wixロゴメーカー
https://ja.wix.com/logo/maker

ユーザー登録(無料)後、ほんの3ステップだけでロゴが出来上がっちゃいます。

実際に作成しながら説明していきますね。

まずはサイトにアクセスしましょう。
https://ja.wix.com/logo/maker

ステップ0.ユーザー登録

サイトにアクセスしたら「いますぐはじめる」ボタンをクリックしましょう。

メールアドレスとパスワードを決めて入力したら「新規登録」ボタンを押すことですぐにロゴ作成が始まります。

ステップ1.必要情報の入力

最初にロゴに入れる名前とタグラインを入力します。
タグラインはキャッチコピーみたいなものだと思っていただければいいかと思います。
名前の下に小さく入りますが、不要であればタグラインは省略可能です。

私はこんな感じで入力してみました。

入力が終わったら「作成する」をクリックします。

ステップ2.問いに答える

いくつかの質問が出てきます。
最初はビジネスを入力するように促されます。
バンフートレーニングスクールはPCスクールなので「パソコンスクール」と入力しました。

次は、デザインの傾向を聞かれます。複数選択可能です。
私の好みで「モダン」「フォーマル」「テクノロジー」を選んでみました。

この後は複数回、下のように「どちらのデザインが好みか?」という問いが続きます。

最後にロゴの使用目的を聞かれます。
私は「ホームページ」と「名刺」をチョイスしてみました。

ロゴの生成が始まります。

ロゴの生成中

少し待っていると、たくさんのロゴデザインが生成されました。

ロゴがたくさん生成された

「モダン」「フォーマル」といった私の好みにドストライクなデザインがたくさんです。
どれもかっこいい!

ステップ3.カスタマイズ

しかも、このデザインたち、自分好みにさらにカスタマイズをおこなえます!

かっこいいデザインの中から、悩みに悩んで、このロゴに絞りました。

絞り込んだロゴ

ロゴにマウスを載せると出てくる「詳細設定」ボタンをクリックします。

画面が編集モードに切り替わります。
画面左部でロゴの色、フォント、アイコンの変更などがおこなえます。

ロゴの編集画面

私はアイコンだけ別のものにしたかったため、「アイコン」欄で別のアイコンを選択しました。

アイコンの変更

アイコンのサイズや位置を調整します。

アイコンサイズの調整

終わったら画面右上の「次へ」をクリックしましょう。

次の画面でWix内でホームページを同時に作成するかを問われます。
今回はロゴのみ入手したいので画面右側の「ダウンロード」をクリックします。

ホームページ作成の有無

料金プランが表示されます。
作成したロゴを商用利用する場合は、こちらでプランを選択することになります。

2つプランがありますが、ざっくりと説明するとアドバンスロゴは印刷もできるベクターデータ入り、ベーシックロゴはWebサイトやプロジェクター投影用のスライドに挿入できるロゴデータのみが入ったもの、と考えればいいかと思います。

どちらのプランも商用利用OKです。

ご自身の趣味で作成したホームページなどに挿入するロゴの場合は、ページ下部にあるこのリンクから無料でロゴのJPEGファイルを入手できます。

無料ダウンロード

商用のサイトに掲載する場合は、最終的にプラン契約が必要となりますが、JPEGファイルは無料で作成できますので、まずは複数パターンのロゴを作成して、実際にサイトに入れてみたイメージを検討して最終的にしっくりきたロゴを購入するのもアリかもしれませんね。

ちなみに私が作成してダウンロードしたJPEGファイルはこちらです。

作成したロゴ

いかがでしょうか?
ロゴ作成でいつもお悩みの方は是非お試しください。

「ツールに頼らず、自分で作ってみせる!」という方、バンフートレーニングスクールが応援します!
ロゴデータ作成の定番ソフトはAdobe Illustrator。
バンフートレーニングスクールでは、Illustratorを基礎から学べる講座をご用意しています。

バンフーのイラストレーター講座、詳細はこちら

無料体験もございますので、ぜひ一度スクールへ体験にいらしてください。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator Photoshop] 2020小ネタ

大分寒くなりましたね。
今年は23日が祝日じゃないのが寂しい…と感じるスタッフ「の」です。

Adobe MAXから数日経ち、2020も細かいアップデートが行われて落ち着いてきた感があります。

さて、Illustrator2020は今回のバージョンを通しで見ると「24」となり、
CC互換から外れました。
足枷となっていたであろう旧バージョンとの互換を外したのでパフォーマンスの向上が見込めます。

保存もCC~CC2019(通しバージョン:17~23)は、CC(レガシー)という扱いになりました。
(CCが取れたのは今までのと区別するためかもしれないですね)

今回のバージョンアップはパフォーマンスの向上に力を入れたんだと思います。
新機能よりもさくさく動いてくれる事が何よりと思います。

そしてiPad版のIllustratorもリリースしてくれるとの事で大いに期待したい所ですね。

さて、PhotoshopだけiPad版もあるからか、アイコンがiPad OS風となっております。

並んでる時に違和感が…。

前回スタッフ「ほ」が紹介した「オブジェクト選択ツール」が今回の目玉かと思いますが、個人的には「ワープ」の分割がカスタマイズできる事が嬉しいです。
[Photoshop]オブジェクト選択ツールの使い方
まず「編集」メニュー→「ワープ」を実行しても今までのグリッドは表示されなくなりました。

オプションバーの「グリッド欄」で3:3を選択すると以前と同じになります。

↓4:4

↓5:5(相当細かい変形が可能)

更にオリジナルでグリッドが入れられます。
これによりかなり自由度の高い変形が可能となりました。

自分の作業的に相当使える機能ですが、代わりに以前のブログで紹介した「自動確定」機能の枠外クリックで確定がなくなってしまいました。
↓CC2019(枠外で白い矢印になったらクリックで確定)

↓2020(どこに持っていっても白い矢印にならず)

「Photoshop 2020」にして最初にあれっ!って思ったところでした。
でも巷で全然騒がれていないので皆さんはそんなに使ってなったのかな、と思いました。

以上です。

バンフートレーニングスクールでは、イラストレーターやフォトショップ、インデザインにWebサイト作成の講座を 開講中です。

このブログを書いているスタッフ「ほ」と、スタッフ「の」をはじめとする印刷会社の研修部門のスタッフがアプ リケーションの使い方を徹底レクチャー!

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座の詳細
フォトショップ講座の詳細

ご興味がある方は、ぜひ一度無料体験にお越しくださいませ。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Photoshop]オブジェクト選択ツールの使い方

11月生まれのためか、この秋深まる季節が一年で一番好きなスタッフ「ほ」です。

Photoshop 2020(CCがつかなくなりましたね)がリリースされました。

どんなパワーアップがなされたのか、毎回ワクワクどきどきしますね。

早速アップデートして起動すると、見慣れない「オブジェクト選択ツール」という名のツールアイコンが…

オブジェクト選択ツール

これまでPhotoshopは、「クイック選択ツール」や「選択とマスク」、そして「被写体を選択」といった画像内から被写体を切り出すために便利な機能を次々と搭載してきました。

今回のオブジェクト選択ツールは、これらの機能と組み合わせることでさらに切り抜きの作業を軽減することができそうです。

使ってみましょう。

被写体を選択

まずはCC2018から搭載されている「被写体を選択」からおさらいです。

こちらの機能は、説明がほとんど不要で…

  1. 写真を開く
  2. 「オブジェクト選択ツール」「クイック選択ツール」「自動選択ツール」のいずれかを持つ
    オブジェクト選択ツール
  3. オプションバーにある「被写体を選択」をクリックする
    被写体を選択ボタン

のステップだけで、Photoshopに搭載された人工知能「Adobe Sensei」が被写体を感知して自動的に選択してくれます。

選択範囲が自動で作成された

便利なポイントは以下2点。

1.人物は複数人でもOK

被写体は複数でもOK

2.生き物じゃなくてもOK

生き物じゃなくても選択できる

少し怪しい部分もなくはないですが、これまではクイック選択ツールなどでおこなっていた大雑把な選択がドラッグ不要でできるようになりました。

オブジェクト選択ツール

オブジェクト選択ツールは、画像内で選択したいものをざっくりと囲んであげるとその中からPhotoshopが境界を認識して選択範囲を作成してくれるツールです。

囲めば勝手に選択範囲を作ってくれる

「被写体を選択」との使い分けとして、

・複数の被写体から狙ったものだけを選択できる
・選択範囲の調整がおこなえる

といった点が挙げられます。

先ほどの写真、「被写体を選択」では人物が2人とも選択されてしまいますが…

被写体は複数でもOK

↓オブジェクト選択ツールで、片方の人物だけをドラッグで囲んであげれば…

選択したい人物だけを囲む

↓このように囲んだ人物の輪郭を認識して選択してくれます。

選択範囲が作成された

このツールでドラッグすると長方形の選択エリアが表示されますが、オプションバーでなげなわに変更できます。

モードをなげなわに変更できる

長方形では選択しづらい場合は切り替えるといいでしょう。

選択範囲が微妙にたりない場合は、Shiftキーを押しながら足りない部分を囲んであげると選択範囲を追加するように再調整されます。

選択範囲を追加

また、余計な部分まで選択されていて、選択範囲を削りたい場合は、Altキー(Mac:optionキー)を押しながら削りたいエリアを囲んであげれば選択範囲から除外されていきます。

選択範囲を除外

数回トライしてどうしてもダメな部分は諦めてクイックマスクなどでチャチャッと修正しちゃいましょう。

今回のダチョウは、このオブジェクト選択ツールと「選択とマスク」機能を使って5分かからず切り抜くことができました。

切り抜き前後※クリックで拡大します

「選択とマスク」機能に関しては、以前スタッフ「の」が書いた以下の記事をご参照ください。

CC2017対応 Photoshopを使って人物を切りぬこう!

オブジェクト選択ツールは、このツールのみで切り抜きを完結するのは難しいですが、これまでの切り抜き作業の中に組み込んでいただけると作業の手間がかなり軽減されると思います。

アップデートされた方はぜひ使ってみて下さい!

「Photoshopの基本的な使い方がわからない~」という方はバンフートレーニングスクールのフォトショップ講座でお待ちしております!

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator] パスの単純化

夏好きを宣言している私でも金木犀の香り漂うこの季節もわりと好きだったり。
こんにちは。スタッフ「の」です。

今回は、そろそろ「Adobe CC 2020」の足音が聞こえてきそうなこの時期にイラレ、フォトショ、インデ、とアップデートが入りました。
細かいバグ修正版かな、と思いきや「イラレ」は「パスの単純化」機能に変更点が見られました。
地味な機能の変更ではありますが、複雑なパスに伴うアンカーポイント過多は出力に時間が掛かるだけではなく修正等の編集作業を困難にするケースもあります。
もちろんPCにも負荷をかけます。
そこで今回は「余分なポイント」を減らす事に焦点をあててみたいと思います。

Illustratorを使用して素材作成している時にアンカーポイント多いな…って事があります。(特に効果に頼った時)アンカーポイントを「アンカーポイントの削除ツール」を使用して間引いてパスを修正するのは手間のかかる作業だったりします。

ここんとこのバージョンでは、「環境設定」を変えなければ「ペンツール」のまま追加や削除が出来ますがやはり手間である。

他にも「スムーズツール」を使用してパスをなぞるのも1つの手法ですが、制御が困難な事となぞるのでパスが大量にあればこれも手間がかかります。

①【パスの単純化】
そんな時には、「オブジェクト」メニュー→「パス」→「単純化」を実行します。
結構、旧バージョンからありますが、意外と知られていない機能だったりします。
2019年10月初旬のアップデート前までは以下のダイアログが出ます。
実行前と実行後のアンカーポイントの数と画像を確認しながら、「曲線の精度」と「角度のしきい値」のスライダーを調整します。(以下の画像はクリックで拡大します)

アップデート後に実行すると以下のダイアログが出ます。

スライダーが1つになりシンプルかと思いきや、「…(その他のオプション)」をクリックするとダイアログが大きくなります。

各スライダーも名称が変更になり、アイコンも付いて分かりやすくなりました。
「曲線の単純化」…最小に近づける程、アンカーポイント数が減ります。(コーナーポイント角度のしきい値が高いとあまり減りません)
「コーナーポイント角度のしきい値」…コーナーポイントの滑らかさとなり、数値を下回っている箇所は何も起こらないので数値が高いほど元の状態に近くなります。

▼「曲線の単純化」…最小、「コーナーポイント角度のしきい値」…0°(赤い線は元の状態)
精度は低いですが、アンカーポイント数も減りました。

▼「曲線の単純化」…最大、「コーナーポイント角度のしきい値」…180°(赤い線は元の状態)
元の線が殆ど見えない程、精度は高いですが、アンカーポイント数はあまり減っていない。

▼「曲線の単純化」…最小、「コーナーポイント角度のしきい値」…180°(赤い線は元の状態)
「コーナーポイント角度のしきい値」の数値が高いのでアンカーポイント数は減っていないですが、精度は少し落ちています。

▼「曲線の単純化」…最大、「コーナーポイント角度のしきい値」…0°(赤い線は元の状態)
今回の例では、アンカーポイント数も減り、精度も良い感じとなりました。

▼自動単純化(赤い線は元の状態)
標準の状態っぽい。ここから元の状態を見ながら各スライダーで調整します。

因みに「線幅ツール」で作成したデータを「パスのアウトライン」後に「単純化」を実行すると元データとそれほど遜色なくこんなにアンカーポイント数を減らせます。(198あったポイントは16に減りました)

他にも直線でひいたパスを曲線にする事も出来ます。(アンカーポイント数は14→2に減りました)

②【「パスファインダー」パネルのオプション】
「パスファインダー」パネルで合体機能を使用すると、ポイントが残ります。

「パスファインダー」パネルのパネルメニューから「パスファインダーオプション…」をクリックし、ダイアログ内の「余分なポイントを削除」にチェックを入れておきます。(以前のバージョンでは起動の度にリセットされてオフに戻ってました)

余分なポイントなく作成できました。

さて、「パスファインダーオプション…」といえば、こちらはどうか、というのがあります。
例えば、ドーナツを描いて縦線で半分に分割したいと思った場合。(抜けているのが分かるように背面に水色を引いております)

通常見えないですが透明な縦線が残ります。

「パスファインダーオプション…」ダイアログ内の「分割およびアウトライン適用時に塗りのないアートワークを削除」にチェックを入れて実行すると不要な縦線は残りません。

残念ながらこちらの方は、Illustratorを再度起動するとチェックが外れてしまいました。

③【孤立点】
「選択」メニュー→「オブジェクト」→「孤立点」を実行するとドキュメント内の不要なアンカーポイントが選択されます。
入稿前に確認してみましょう。

以上です。

バンフートレーニングスクールでは、イラストレーターやフォトショップ、インデザインにWebサイト作成の講座を 開講中です。

このブログを書いているスタッフ「ほ」と、スタッフ「の」をはじめとする印刷会社の研修部門のスタッフがアプ リケーションの使い方を徹底レクチャー!

詳しくは、下記詳細ページをご覧ください。

イラストレーター講座

ご興味がある方は、ぜひ一度無料体験にお越しくださいませ。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

[Illustrator]フリーグラデーションでリアルなイラスト描いてみよう

夏があっという間に過ぎていきましたね。
そろそろ私の大好きな秋が到来するので、今からワクワクですが、おいしいもの食べすぎて体重が増加して会社の健康診断見て青くなる時期でもあります。。

ということで、今日からリリースされた位置情報ゲームをスマホにダウンロードしてみました。歩いた量でストーリーを進められるゲームです。

さて、これで体重増加を抑えることができるのか…?!

こんにちは、スタッフ「ほ」です。

今回は久しぶりにグラデーションでいってみたいと思います。

以前、このブログでグラデーションメッシュを使ったイラストの描き方をご紹介しました。

[Illustrator]イラレのグラデーションを極める

グラデーションメッシュまでを使いこなすことができれば、かなりリアルなイラストも描けますよ、といった内容でご紹介しておりました。
なるべく簡単にできるように記事を書いたつもりですが、やはり使いこなしにはパスやアンカーポイントを自在に操作できるスキルが求められてしまいます。

そんな中、Illustrator CC2019からグラデーションパネルに「フリーグラデーション」という機能が搭載されました。

これまでにないグラデーション表現が可能になる機能です。
今回はこのフリーグラデーションをご紹介します。

基本

CC2019のグラデーションパネルです。
ここにフリーグラデーションが追加されました。

それ以外の2つは従来からある機能で、「線形グラデーション」と「円形グラデーション」です。

▼線形グラデーション

一方向にまっすぐ変化するグラデーションです。
グラデーションツールを用いることで縦や斜めに方向を変えられます。

▼円形グラデーション

真ん中から放射状に広がるグラデーションです。
グラデーションツールを用いることで中心位置やサイズを変更できます。

それでは、フリーグラデーションを使ってみましょう。
前回の記事で「これはグラデーションメッシュじゃないと作れませんー」とご紹介したこのグラデーションをフリーグラデーションで作ってみましょう。

長方形ツールで四角形を描き、「塗り」に対してグラデーションパネル内の「フリーグラデーション」アイコンを適用します。

パネル内の「グラデーションを編集」ボタンをクリックすると…

四角形の各カドに丸いマーカーが出てきました。
これがフリーグラデーションのカラー分岐点になります。

カラー分岐点には、それぞれ色が設定されており、となりの分岐点との間にグラデーションを生成します。

4つのカラー分岐点で色を入れかえていきます。

各分岐点をダブルクリックすると、以下のような画面が出てきます。

左部のアイコンをクリックすることで、カラーパネル調、スウォッチパネル調、画面内からクリックで色を抽出できる「カラーピッカー」が切り替わります。好きなモードで分岐点に色を入れていきます。

分岐点はドラッグで位置調整ができます。

それぞれの分岐点をカドギリギリまで移動すると、今回作りたかったグラデーションが出来上がります。これまでグラデーションメッシュでなければできなかったものがあっさりと作れるようになりました。

さらにパネル内の「描画」欄にある「ポイント」にチェックを入れた状態で四角形の中をクリックすると分岐点を追加できます。

※分岐点を削除する場合は、分岐点をクリックで選択した状態でDeleteキーを押すか、分岐点をオブジェクトの外にドラッグします。

ちなみに描画欄の「ライン」にチェックを入れてオブジェクト内をクリックしていくと、分岐点をアンカーにした線が引かれます。

引いた線に沿ってグラデーションが作成される、ということらしいのですが、ポイントで同じ位置に分岐点を打ってもほとんど同じものが出来上がります。

正直、「ここは『ライン』じゃないとダメだよね!」という使いどころがわかりません。。。どなたかこれぞ!という使い方を思いついた方は教えてください。

(※2019/09/20追記)

フリーグラデーションがスウォッチに登録できないーというお問合せをいただきました。

フリーグラデーションはグラフィックスタイルパネルの方に登録が可能です。パネル内にドラッグ&ドロップして登録してください。

(※追記ここまで)

実践

では、実際にフリーグラデーションを使えば何ができるのか?
イマイチ、ピンとこない人も多いかと思います。

私もこの新機能を知った際に「へぇ、にじんだ水彩画みたいなのができるかなー?」程度でしたが、実際に使ってみるとグラデーションメッシュに近いことができるため、リアルなイラスト描画ができるはず!

ということで、写真ACさんから柿の写真をお借りしてきました。おいしそう。

この写真をトレースしてリアルな柿を描いてみたいと思います。

ペンツールで輪郭をトレースしていきましょう。線は後で消すので色も太さも適当でかまいません。

 

実際のパーツでオブジェクトも分けた方がよさそうなので、柿の実、ヘタ、枝部分で分けてトレースしました。

描けたら、オブジェクトを移動して写真の横に並べましょう。

選択ツールで柿の実オブジェクトを選択し、「塗り」にグラデーションパネルから「フリーグラデーション」を適用します。

作成された分岐点の位置を整えます。

その時の写真の状態にもよりますが、今回の柿は両端のオレンジをしっかり確保したかったので、まずは四隅に配置しました。

配置した分岐点に色を入れていきます。となりに並べた写真から色を拾ってきます。

分岐点をダブルクリックしたら、出てきたパネルの左部にあるスポイトのマークをクリックします。

そうすると、パネルが閉じてマウスポインタがスポイトの形状になるので、柿の写真に移動して、分岐点と同じ色のあたりの色をクリックして吸い上げます。

そうすると、分岐点にスポイトで吸い上げた色がセットされます。

この要領で4か所の分岐点に色を入れた状態が下図です。

写真では柿の実中央あたりが少し色が濃くなっており、その両サイドにハイライトが入ってます。

そこで、そのあたりにポンポンと分岐点を置いていきます。

あとは先ほどと同じ要領で追加した分岐点に色を入れていきます。

分岐点をクリックした際に現れる破線の円形についている下記のマークをドラッグすると、その分岐点の色の領域を広げることができます。

写真を見ながら分岐点の位置とサイズを調整して色を写真にちかづけていきます。

必要があれば分岐点をさらに追加していきましょう。

ヘタ部分も同じ要領で色をセットしていきます。

色が入ったら、輪郭の線を「なし」にして……

ヘタと実の一体感がイマイチだったので、ヘタにドロップシャドウを設定してみました。

元の写真との比較です。写真と並べてしまうと、やっぱりイラストだなーという感じはしてしまいますが、単体で見れば、かなりリアルなイラストになったのではないかと思います。

グラデーションメッシュよりも直感的に作業ができますし、メッシュよりもグッと短時間で作業がおこなえました。

グラデーションメッシュの回で描いたバナナのように長くて細いグラデーションを作成するのは、メッシュの方が優れていますが、今回のように丸に近い物体はフリーグラデーションの方が簡単に作業できるかと思います。

 

さぁ、どうでしたか?フリーグラデーション。;

新しい機能がついたはいいけれど、どこで使うの?これ?と思われている方、ぜひぜひイラスト描画で使ってみて下さい。
慣れればかなり使いやすいですよ。

イラストレーターの基本からしっかり勉強したいんだけど……という方は、ぜひバンフートレーニングスクールのイラストレーター講座へお越しください。
このブログを執筆している私スタッフ「ほ」やスタッフ「の」がわかりやすくレッスンしております。

バンフートレーニングスクールは 最短2日間でアプリケーションを習得できる 講座をご用意しております。

  1. 無料体験
  2. 資料請求
  3. お問合せ

Vanfu Training Schoolのスタッフがお役立ち情報を発信中