takapoyo

初心者のweb勉強の備忘録です。

自作ロゴとシンボルマーク

自分がフリーランスwebデザイナーになったつもりで

ロゴ(屋号)とシンボルマークを作りました。またコンセプト説明文も考えました。

ストライプのフォントは、 Shutterstock.comさんのサイトの画像を参考にさせていただきました。

羽の形はカードキャプターさくらちゃんの漫画でよく描かれている羽の形を参考にさせて頂きました。

 

参考にしたアイコン

f:id:takapoyo:20140721220924g:plain

 

今回作ったロゴ,マーク 

f:id:takapoyo:20140721220659g:plain

コンセプト説明文

屋号の由来の「TAKA」は自分の名前の一部からとり、まずは名前から覚えてもらえるようアピールしました。 また、文字をストライプにし、カラーをブルー系統にすることで、清潔感や誠実なイメージを持ってもらえるよう表現しました。   

シンボルとして羽をのマークを使用しました。羽は上昇、飛躍を意味を表しており、 羽の方向も上向きにすることで、これからどんどん能力を伸ばし成長していく意味を表しています。 また、羽を丸みの帯びたデザインにし、カラーをピンク色にすることで、柔らかさや親しみやすさを表現しました。フリーランスで活動するにあたり屋号「TAKA」を制作しました。

 

学んだこと   ・ロゴやマークのデザインはどうしてこの形なのかという意味を持って作ること。お客さんにちゃんと説明できるように考えること。

       ・内側にオフセット••数字に「−」マイナスをつける。

       ・パスのみでは分割できない。アウトライン化してから分割できる。

 

反省点          ・今回TAKA を作るとき文字ごとにパスだけで作ったり、アウトライン化して作ったり、まざっていて、実際拡大、縮小すると線の太さに違いが出ていたので、すべてアウトライン化することを忘れずにしたいです。斜線もマスクをかけて作成したのですが、アピアランスの分割をして見た目どうりにした後、アウトライン化することを忘れないようにしたいです。

 

 今回、作成に1週間ぐらいかかってしまいました。(;^ν^)

webデザイナーとかサービス系の業種のロゴって商品とか目にみえないし、取り扱う分野も幅広いからロゴとか作るのが難しいなあと思いました。

      

 

電話のアイコン

電話のアイコンを作りました。

誰でも簡単にフラットなアイコン画像を作れるiconicon。しかも無料だなんて!のサイトの画像を参考にさせていただきました。

また今流行りのロングシャドウは、 5分で完成!イラレで作るロングシャドウアイコンのサイトのチュートリアルを参考にさせていただきました。



参考にしたアイコン

f:id:takapoyo:20140712233742p:plain

 

自分で作ったアイコン

f:id:takapoyo:20140712233747g:plain

  

学んだこと   ブレンドツールクリッピングマスクを使ってロングシャドウを作ること

 

反省点          ・今回は全体的にすごく難しかった。グラデーションも難しくて、見本よりも暗くて全然グラデーションがかかってない。(;´Д`)やっぱりグラデーションがかかってたら、スポイトで抽出しても無理だからカラーパネルでRGBを色々いじってもっと色を探せば良かった.

                           ・電話のマークも角丸ツールパスファインダーを使って無理矢理つくったけど、ペンツールとリフレクトツールを使ったほうが見本の形にも似せられたと思う。

 

オブジェクトを作るとき、ペンツールじゃなくて図形ツールばっか使ってたけどペンツールをもっと練習して、もっと使っていきたいと思った。

今回は1番難しかったし、1番へたくそだと思う。オレンジのグラデーションが夕日色ですごくきれいな色だから、私もこんなグラデーションが作れるよう頑張ろうと思った。

     

     

 

 

twitterのアイコン

twitterのアイコンを作りました。

今回はtwitterのアイコンに似せられるように作らさせていただきました。

参考にしたアイコン

f:id:takapoyo:20140712224156g:plain      f:id:takapoyo:20140712224204g:plain

 今回自分で作ったアイコン

f:id:takapoyo:20140712224247g:plain        f:id:takapoyo:20140712224256g:plain

 

作り方   ・twitterの鳥とtの形は、見本をペンツールでトレースした。

        ・上の方の明るい所を矢印のアイコンでも使った透明パネルのソフトライトを使用した。

      ・t の反射してるところは丸の図形を合わせて型抜きして作った。

 

反省点   ・tのアイコンはよく見ると見本より明るくて、もっと深みのある感じにすれば良かった。

        ・トレースが難しくてカクっとした所がたくさんあるので、もっと練習が必要!

      

gmailの時よりはちょっとは似せられたかなと思った。でも、シンプルで分かりやすくて

かわいいアイコンで作りやすくてやっぱtwitterのアイコンはすごいなあと思う!!!

買い物カゴとカレンダーのアイコン

買い物カゴとカレンダーのアイコンを作りました。

今回はシンプルに作りました。

(毎回凝ってたら課題をこなすスピードがとても遅くなりました。(>_<)

学校の課題にあった見本のアイコンとネットで調べたアイコンを参考にしました。

今回作ったアイコン

f:id:takapoyo:20140712204532g:plain f:id:takapoyo:20140712204744g:plain

作り方  ・カゴのアイコンは台形の形を自由変形で作った。分割を使って網目の所を作った。

     (さっそく前学んだ分割を使った!    

      ・カレンダーの上の長方形の部分は線をミドリ色にして浮いてる感じにした。

反省点   ・カゴの大きさが小さすぎた。背景に合わせてもっと大きくすれば良かった。 

      ・台車のところのグラデーションをなんか入れてみたけどいらなかった。

     ・カレンダーも遠目で見た時、細かすぎてよく分からない感じだからもっと分かり

      やすく数字とかにしたら良かった。

 

アイコンは遠くから見ても何を表しているのか分かりやすくするのが大切だと学びました!

それを表現するのが難しいことも分かりました。。(;´д`)トホホ…

 

メールのアイコン

矢印のアイコンを作りました。

今回はgmailのアイコンに似せられるように作らさせていただきました。

参考にしたアイコン

f:id:takapoyo:20140706125316p:plain

 

今回自分で作ったアイコン

f:id:takapoyo:20140706125713g:plain

 反省点  ・アピアランスの分割を行う前にコピーとってなかった。

        背景の質感を自分は紙っぽい効果を出そうとして光彩拡散を使ったけど

       使わないほうがよかった。

      上の三角のふちの赤い部分の丸みがうまく表現できてなかった。

        (パスファインダーの分割を使えば良かった。)

 

全体的になんか暗くなってしまってフラットなアイコンの感じが全然ないなと思います。(>_<)

矢印のアイコン

矢印のアイコンを作りました。

Illustrator(イラストレーター)で中心がへこんだボタンのブログのチュートリアルを参考にさせていただきました。

 

f:id:takapoyo:20140705141956g:plain   

学んだこと:球体のグラデーションの方法。

      ふちは濃くして丸くグラデーションかけるんだなと思った。

     ソフトライトの使い方。

       球体の半分はソフトライトで明るくしてる。

 

反省点  :アピアランスの分割を行う前にコピーとってなかった。

        矢印もっとこだわれば良かったなと思う。