覚えておきたい！Illustratorで、画像からベクターデータのロゴをつくる方法
新しくサイトを作成するとき、企業やお店側に"ベクターデータのロゴがない！"なんてことはよくあります。
過去にはjpg形式で送られてきた画像を、泣く泣く手作業でベクターデータにおこしたこともあります(;0;)
そんな苦労をする前に知っておいてほしい…！今回はラスタデータからベクターデータにおこす方法をご紹介します。
「ベクターデータ」と「ラスタデータ」について
まず、画像形式について軽くおさらいです！
----
ベクターデータ
拡大・縮小しても画像が荒くならない、点と線で繋がれた画像のこと。この結び線のことをベクトルと言います。
- 代表的なソフト：Adobe Illustrator
- 拡張子：svg、eps など
----
ラスタデータ(ビットマップデータ)
拡大すると点の集合でできている画像のこと。みなさんがよく使うgif・jpg・png形式の画像はよくよく見ると細かいドット絵の集まりになってますよね！
- 代表的なソフト：Adobe Photoshop
- 拡張子：gif、jpg、png、bmp など
----
詳しく知りたい人は下のサイトさんも参考にしてください。
■「ビットマップデータ」と「ベクターデータ」の違い - ウェブ学のすすめ
Illustratorの『画像トレース』機能
では、早速ラスタデータのロゴをトレースしてみましょう！
----
1.Illustratorに画像を配置する
まず、ベクターデータにしたい画像(ラスタデータ)を埋め込みで配置します。
このとき、切り抜きに不要な部分は予め取り除いた画像を用意してください。クリッピングマスクなどを使って切り抜くと便利です。
クリッピングマスクがわからない方はこちら↓のサイトさんを参考にしてください。
----
2.画像をトレースする
そうすると、ロゴがなんとなくオブジェクトっぽくなります。
※『画像トレース』はCC・CS6以降の機能だそうです。
～CS5だと『ライブペイント』が同様の機能です。(2015.09.15追記)
～CS5だと『ライブペイント』が同様の機能です。(2015.09.15追記)
----
3.トレース範囲を調整する
このままでも良いのですが、細かい部分が上手くトレースされていないと思いますので微調整して仕上げにかかります。
『画像トレースパネル』を出して細かい設定をしていきます。上の画像でいうと、左上に赤丸で囲った部分に四角いアイコンがありますので、これをクリックしてください。
画像トレースパネル
- しきい値
- パス
- コーナー
- ノイズ
…などを調整して、綺麗にパスを抜ける値を見つけます。
画像トレースパネルの詳細は↓のサイトさんを参考にしてください。
■Illustrator ヘルプ | 画像トレースの使用
----
4.パスを確定する
いい感じの形になったら、
ツールバーから『オブジェクト』→『画像トレース』→『拡張』でパスを確定します。
これでラスタ画像からつくる、ベクター画像の完成です(*^^*)
----
5.完成前と完成後
上がトレース前のgif画像を配置したもの、
下が画像トレース後のものです。
ある程度もとがギザギザな画像でもどうにかなりそうですね！
あまり細かい装飾や複雑な形には向いていませんが、簡単な図形ならこの子にお任せです！
----
この機能を知ったときはすごく感動しました…！！まさに文明の利器ですね！
また、写真などのグラデーションのかかった画像をトレースすると、いつもと違った感じが演出できて面白いかもしれません。
写真もベクター素材も！デザイナーを目指すなら知っておきたい、無料素材サイト
webサイト素材、バナー、ポスター、何を作るにも素材が必要になりますね！
プロの方はどうだかわからないけど…初心者の私は1から素材を作ってたら、いくら時間があっても足りないのです(´･ω･`;)
…ということで、今回は私がよくお世話になる写真素材・ベクター素材・ピクトグラム素材のサイトさんたちをご紹介します！
写真素材
webサイト制作をするうえで大切なこと。内容はもちろんですが、写真はとーーーっても大事です。
綺麗な写真が1枚あるだけで、サイトの雰囲気がグッとよくなります。
みなさんが素敵な1枚に出会えることを願って…！
----
PhotoAC
とにかく種類が豊富です。
たまに素人さんが撮ったような写真もありますが、そのぶん他のサイトにはないようなニッチな写真があってすごく助かっています！
----
foto.project
写真の種類ごとに検索サイトが違ったりします。
私がよく使うのは野菜・果物の写真があるfood.foto！
色鮮やかでみずみずしいお野菜の写真がいっぱいです。
----
PAKUTASO(ぱくたそ)
こちらはとても有名な写真素材サイトさんです。
種類もさながら、ネタ的な風変わりな写真もたくさんあります！
ベクター素材
これからweb業界はベクター素材の時代ですね！
写真と違ってドットの集合じゃないので、拡大・縮小しても線がブレず綺麗なところがベクター素材の特徴です。
Adobe Illustratorで編集するような点と線(パス)で繋がれたオブジェクト素材のことですね。
----
freepik
選びきれないほど豊富なベクター素材が投稿されているサイトです！私が1番よく使うサイトはここ！！！
プロのクリエイターさん達が作ったステキな素材たちは、見ているだけでもわくわくしてきちゃいます！
※無料での仕様だと著作権表示が必要なので注意が必要です。
----
Frame Design
飾り枠素材の専門サイトさんです。
装飾が繊細でエレガント・ガーリーなフレームが沢山あります！
----
シルエットデザイン
シルエットだけで格好良く仕上げたい･･･！そんなときによくお世話になります。
ビジネスマンや色々な人の横顔シルエットなどがお気に入り！
----
フキダシデザイン
とにかく『吹き出し』を集めたサイトさんです。
もこもこの吹き出しに、ファミコンみたいなドット絵の吹き出しなど様々！
ピクトグラム
非常口の逃走君や、歩行者信号の歩く君・止まる君ように、ひと目で何のことだかわかるマークのことをpictogram(ピクトグラム)と言います。
昔からある逃走君は、日本語がわからない外国の方にも意図が伝わるようにできているのですね！！(あの子、よくよく考えるとユーザビリティを考えたマークだったんだなぁ･･･と最近気づきました！)
近年は、このわかりやすいピクトグラムの注目度がどんどん上がってますね！
----
Free vector icons
ありとあらゆるピクトグラムを集めたサイトがこちらです！
英語で検索しないと探せないけど、英語苦手な私には 酷だけど･･･でも好き！！
----
ICOOON MONO
暖かい感じのピクトグラムが沢山あるサイトです。
どちらかと言うと日本人思考な感じのアイコンが多いです。
いかがでしたか？
デザインに困ったらぜひぜひ訪れてみてください。きっといいアイディアがもらえると思います！
いつかは私もかっこいいベクター素材を自分でいちから作ったり、一眼レフを買って構図のお勉強をして、綺麗な写真を撮れるようになりたいなぁと思います。
そのときが来るまで(…来るのかな？)素材サイトさんには大いにお世話になろうと思います(*´ `*)
webデザインで困る前に！日頃から準備しておきたいmyサイトリンク集
最近のマイブームは、自分がいいと思ったサイトをただただブックマークすることです。
- 素敵なサイトを見つけてはカテゴリー別にブックマークする
- この動きかっこいい！と思ったらとりあえずブックマークする
･･･の繰り返し。
決して暇だからやっている訳じゃなく、きちんと理由があってのことですからね！笑
1. デザインのセンスが磨かれる
色々なパターンを見ることで、どれが好きか嫌いか、どれが格好いいのか格好よくないのか、自分の中に評価の軸ができてきます。
もし、今後自分がサイト作りに迷ったら、ブックマークから参考になるサイトを探して真似してみるのが、いいサイトをつくる近道です。
初心者はいきなり格好いいサイトなんてデザインできないからと諦め、模倣することから自分の中に取り込んでいくのがコツ。 その為の準備です。
2. クライアントとのイメージギャップが最小限になる
どんなサイトつくりたいですか〜って話になったときに、色やイメージだけでは話がまとまりにくい。そんな時に自分のブックマークから提案することができると話が早い。
ぴったり同じサイトは作れないだろうけど、こんなイメージでどうですか？っていくつか提案できたら、向こうのイメージがつかみやすいです。
お互いのイメージギャップをなくすことで、より精度の高い話し合いができ、スムーズなサイト制作につながります。
目標と実際のサイト
参考までに、私が目標にしたサイトと、自分で作ったサイトを載せておきます。
≪参考≫ 食堂souffle (左)
≪自作≫ たこやき うーたこ (右)
----
≪参考≫ 光と風設計者 (左)
≪自作≫ 千葉音声研究所 (右)
----
どうですか？
まったく同じではないけれど、なんとな～く似た配色や配置、イメージになっていると思います。初心者は"マネること"から、です。
私のお気に入りサイト集
ここからは私の独断と偏見によるお気に入りサイトまとめです！
デザイン サイトまとめ
・ズロック
・WEBデザイン見本帳
・ikesai.com
・Webデザインの参考になるギャラリーサイトまとめ33選(LIG)
シンプル
・OLYMPUS Hack& Make Project
・NERO HAIR ANKD LIFESTORE
・アースワーク
POP
・Biblio Baby
・クロノバ デザイン
・LITALICO
ナチュラル
・cotoha coffee
・Nova SELECT
・Herbal Bises
手書き
・子供写真スタジオ HAPISTA
・ehka sopo
・SARAYA 100万人の手洗いプロジェクト
パララックス(視差)
・Gilgul
・SIGMAXYZ(採用ページ)
飲食系
・HUGE
・BAKESHOP BYtheBAY
・La Banquise
和風
・はなみち舎
・CHITAZEN
企業
・引っ越し侍
・speee
素敵なサイトを見つけたときはなんだか幸せな気持ちになれます。クリエイターの先輩方を目指して、自分も頑張ろう！って意欲もわいてくる。
私も誰かにまとめてもらえるような、かっこいいサイトを作れるようにがんばろー！！！
