グローバルナビゲーションの「溝」を簡単にカッコよく作るTips.

1layer_mizo.jpg

最近、Webデザインのトレンドとか言って、立体的なナビゲーションじゃなくて、平面でシンプルなナビゲーションがトレンド、なんて言う人が多いですね。
で、そうなりつつあるのはわかるんですが、だからといって、今の企業サイトもそうだし、クライアントが全てトレンドを求めてる訳ではなく、テイストは案件によって出し方を柔軟にする事が大事なんです、と思っています。

今回、アップルのサイトのグローバルナビゲーションをマネしてみましょう。
シンプルだけど、拡大してみると案外細かい線が凹凸感を出していて、心地よい立体感を演出してくれています。

ここで大事なのが、「溝」。だと感じました。
地味な存在で目立たないけど、ここもこだわってデザイナーとしてのクオリティを上げてみたいな、と。

aa.jpg

新規レイヤーを作り、同じ大きさの「土台」を作ります、塗りはわかりやすく赤で、何でもいいんです。

bb.jpg

選択範囲を残したまま「レイヤーマスクを追加」で「土台」の外は黒くマスキングされます。

ピクチャ 7.png

レイヤースタイルでベベルとエンボスを設定。これだけでOKです。

ピクチャ 5.png

ペンツールに持ち替え、黒い線で1pxの線を「溝」となる縦線を1本引いてください。

ピクチャ 4.png

このレイヤーの「塗り」を0%へ。

ピクチャ 6.png

場合によっては溝がキツすぎる、ということもあるので、そういう場合は、「ベベルとエンボス」の「テクニック」を「ジゼルハード」へ。だいぶ自然な「切り込まれた溝」の質感が出来ました。

web creators vol.99にIllustratorの記事を寄稿しました

wc_cover3_99.gif

99号目となるweb creatorsの特集記事「WEBの作業が楽になるテクニック総まとめ」に寄稿しました。

題して「Illustrator内で完全にシンボル化しFlashにインポートする」というものですが、年末年始激務に追われ、編集部に「もうだめ〜」って言って今回は甘えて1記事だけ書かせていただきました。すいません、編集部の方、次からはなるべく貢献します。。

しかし今まで寄稿してきた内容、振り返ってみると色んなジャンルの記事書いてるな、何が得意な人と思われているのか、実は自分が一番わかってない。。。

宮崎で公演します。[CSS Nite in MIYAZAKI]

CSS Nite in MIYAZAKI
2010年5月22日(土)、宮崎産業経営大学にて、CSS Niteの宮崎版の初開催に出演させていただく事になりました。

宮崎は母の実家が日南市にあるのですが、実行委員会のイチゴちんさんは都城在住の方で、一度もお会いした事がないんですが、たまたま僕のことを知ってくれてたらしく、呼んで下さいました。
そういうのってなんだかウレシいですね。
罰当たりにも、墓参りに行ってなかった。。。ちゃんと行かねば。

【出演者紹介】

  • 鷹野 雅弘 さん (株式会社スイッチ)
  • 安藤 直紀さん(デジタルハリウッド大学院 産学官連携センター研究推進室)
  • イラスティックコンサルタンツ株式会社の方
  • 中島 道 さん (Webデザイナー)
  • 津曲 智英さん(TNETPRO 代表取締役)

と、僕を予定しているとのことです。
何を話するかは、ちょっと考えていますし、決まりましたらまたお知らせします。

IT CIRCUS 2010に出演します。

itcircuslogo3.jpg
デジタルハリウッド大学院 客員教授の塩見政春さんが主催する全国行脚のセミナーイベント「IT CIRCUS 2010」が大阪を皮切りに全国行脚スタートします。

大阪主導で動くこのイベントに、僕が関わらせてもらっているCSS Nite in OSAKA実行委員会も参加していき、実行委員を代表してスピーチをさせてもらうことになりました。

公式サイトはこちら。
http://www.it-circus.com/?p=21

出演は、日本ウェブ協会理事長の森川眞行さん、ファーストサーバの森下源一さん、そして仲良くさせてもらっているInVogueのFlashチームのメンバーさんなど。

IT/Webに関わることであれば、特に境目のないジャンルでのセッションとなりそうです。

じゃあ、僕は何をしゃべるかというと・・・
公演タイトル 「フリーで生き抜くデザイナーでガンバろう!」 秋葉秀樹
自分で名付けておいて、ちょっとおバカっぽいな、と思いきや、マジメにやろうっと。

結構フリーでやってきて、別にフリーが良いってワケじゃないんだけど、まあ、生きてこれたわけだし、そんな中で思っているデザイナーとして心がけていることとか、実技も出しながらお話させてもらおうかな、と思っています。

で、公式サイトにはIllustrator、Photoshop 、Flash、CG、HTML5と、色々な内容を話すって書いてますが、詳しく言うとこんな感じ。

Illustratorでは、僕も経験があるんですが、デザインしていると、背景に無数のオブジェクトを作ることがあります、手作業でも出来るんですが、例えば、水玉を500個ほど、ちょっと色違いで描いたりするのって、大変ですよね?
image0.jpg
そんな時によく使う手段がこちら。
ExtendScript ToolKitです。
image2.jpg

書きます、JavaScriptで。。
image4.jpg
こんな表現が出来ます。
ブレンドツールだと結構簡単に出来そうで簡単には出来ない。

image5.jpg

image.jpg
・・・といった、色んな表現が出来ます。
またここで他のセッションの内容も告知していきます、一緒に勉強しましょう〜w

Adobe Edgeに告知させてもらいました。

アドビさんが配信しているニュースレター「Adobe Edge」に僕が講師をしているイメディオのセミナーが告知されました。

http://www.adobe.com/jp/newsletters/edge/january2010/articles/article8/index.html#seminar37

  • 2/5(金)13:00〜18:00
    これが出来たら脱・初心者! はじめてのIllustrator[講師:秋葉秀樹氏]
  • 2/19(金)13:00〜18:00
    『脱・やらず嫌い!』デザイナーのためのFlash AS3.0入門 前編[講師:秋葉秀樹氏]
  • 2/20(土)13:00〜17:00
    Webデザイン スキルアップ講座〜サイトデザインの改善編〜[講師:森和恵氏]
  • 2/25(木)10:00〜17:00
    ビギナーのためのDreamweaverで学ぶCSS〜基礎編〜[講師:森和恵氏]
  • 2/26(金)10:00〜18:00
    動きで表現力をアップ Flashコンテンツ制作入門[講師:森和恵氏]

、、、とのことです。(って他人事?)

今、講師業やセミナー、通常のお仕事でお世話になっている森和恵さんの講座もあります。
僕の講座は割とデザイナーさんが多く来てくださいますし、女性でも安心して(!?)参加出来ます、と、思います・・・。
http://www.imedio.or.jp/seminar/

ありがとう、アドビさん。

グラフィック作品「Eco Les Paul」

my_gibson_LesPaul.jpg

ワコムのペンタブレット、Intuos4を購入しました。
2048という筆圧レベルを関知するということですが、なんとなく、押した後にじわ〜っとにじんでくる感覚がスムーズでいい感じだと思いました。

作品を作りたくなって、Intuos4を使ってさっそく夜なべして創作したのがこのギター。
愛機、ギブソン・レスポールのボディをカスタマイズ・・・?

右利きでも、左利きでも、利き手の反対の手でショートカットの操作が出来ると言う点がとてもユーザに優しいなと思います。
ただ、ホイール部分で拡大/縮小をやるのは慣れていないので、キーボードのショートカットと併用して使います、それでも全然ストレスにならなかった。

自然に影の濃淡をかぶせるときは、やっぱりゴシゴシした方がやりやすい、今回の製品付属の「芯」がよかった。
フェルトや筆の感触がシミュレートされているのかな?
ちょっと柔らかいタッチで書きたい場合はこっち、カタい鉛筆風の場合はこっちとか、あ、これはあくまで手の味わえる感触の話ですよ。

作ったのはエコギターってイメージ、もうちょっと手を加えたい。
使用ソフト:Photoshop CS4, VUE5

というわけでちょっとまだ作りかけだけど、早くこのサイトデザインをリニューアルしたいので、がんばってパーツを作る。

写真.jpg

やっぱりVUEのEcoSystemってすごいな。

forest.jpg
↑MacBook Pro 2.4GHz Intel Core2 Duoでレンダリング6時間・・・

まだ、VUE5だけど、このEcoSystemって、無限に木や草を生やしてくれる機能、ホントスゴい。
数百万の草木でコンピュータのパフォーマンスに影響しないって画期的で、実はCG屋さんでもないのに、いろんなビジュアル制作ではお世話になってる。
使い方は難しいけど、時代はとっくにEcoSystem ジェネレーションIII、もっと凄いことができる。
このページを見るとそのすごさが期待できる。
http://graphic.e-frontier.co.jp/vue/7_xstream/page03.html

EcoSystemペイントって、好きな場所にブラシでゴシゴシする感覚で草木を生やすことが出来る。
VUE5では、それを関数とかで位置を決めていかないといけないので、若干難しく、想い通りにならない事もしばしば。

EcoSystemペイントだと、直感的に「ここに生やしたい」をピンポイントに実現してくれそうで期待出来る。

じつはこれもEcoSystemを使ってます。
↓↓↓↓
main_photo.jpg

ある物体が近くにあったら、それを避けてくれる機能もあるので、中央のロゴが埋もれずに済むってやつ。
これだけでも便利だったんだけど、今作ってるプライベート作品はかなり苦戦。
やっぱりEcoSystem ジェネレーションIIIに頼る方が効率上がるかな?
VUE7の最高グレードはVue 7 xStream、もう昔のバージョンはアップグレード対象外、なので
価格は・・・標準価格:228,900円。

う〜ん、がんばって買うか・・・。
悩む。