デザイナーさんにカフェで教えてもらったこと

SPONSORED LINK

Pocket

d_top

昨晩はとあるデザイナーさんと夜カフェ(許可とってないので一応名前伏せとこ)。Fireworksを買ったまま放置してあったので勘所を教えてもらおう、という下心でしたよ。思いのほか勉強になったので以下、覚書。いつか詳しく書く。

追記:許可もらったんでデザイナーさんの紹介。フリーで活躍中なのでなにかあれば連絡取ってみてくださいー。
» ウープスデザイン: 石嶋未来個人事務所

  • いまっぽいボタンを作りたいならFireworks用のグラデーションをダウンロードしておくべき。さくっと作れますよ!「Web 2.0 Layer Styles for Fireworks」とか。
  • フォントはWindowsならメイリオがきれい。無料だし。
  • 文字やボタンに影をつけるときは黒やグレーじゃなくて、そのボタンや文字の色をくらーくしてあげるといい感じ。
  • 文字には強めのアンチエイリアスをつけてあげるときりっとします。
  • ケータイ用なんかに小さい文字のボタンを作りたいときはMS UI Gothicでアンチエイリアスなしがいいですよ。
  • つくったボタンはシンボル(ボタン)に変換しておくと使い回しがききますよ。
  • 整列パネルはとっても便利なので覚えておきましょう。
  • たとえばブログを作る場合、フォトショップはトップメイン画像、イラレは文字(キャッチコピーとか)、Fireworksはその他、って感じで使い分けています。ウェブつくるならFireworksは絶対マスターしておくべき。
  • キャッチコピーなど、文字をきれいにつくりたいならイラレはとっても便利。Fireworksは文字を一文字ずつ扱いづらい。Photoshopは移動がしづらい。イラレは一文字ずつ好きに加工できるし、サイズを変えてもきれいだし。
  • フォトショップのブラシもマスターしておくべき。素材はdeviantARTから。集中線とか、宇宙といったものが簡単にかけるようになります。
  • アルファチャネルはマスターしましょう。選択範囲を白黒で表現するレイヤーです。白は見える、黒は見えない。
  • ベジェ曲線はまずはギザギザ線、次はそれを曲線に変換、次に円、次にS字、といった具合に少しずつ覚えていきましょう。それができるようになったら写真をトレースする練習をすればいいですよ。
  • おおざっぱにつくるときは図形を組み合わせて大体の形を作るのもいいですね。三角と丸と四角のパスを組み合わせてだいたいの形をつくってからパスを変更すればいいです。
  • 三階ラボさん、きれいですよねー。
  • fladdictさんは天才。

そんなところでしたかね・・・。やっぱり普段から使っている人に聞くと本を読むようなのっぺりした知識ではなくて、きっちり「使える」知識を教えてもらえますね。

ちなみに教わったあとに作ったボタン。Fireworksでさくっと作れた!すげー。

beta_open

↑ メイリオっていいな!

button_addnew

↑ 小さいボタンはきりっとしたフォントがいいですよね。

いやぁ、勉強になった・・・。また教えてもらおうっと。

ツイッターもやっています!

SPONSORED LINK

  1. わあー、参考になりました!

    • faketurn
    • September 9th, 2009

    メイリオはいい!小さいボタン用のフォントも良いですね。

    Fireworks無いよ……。イラレとフォトショで頑張るか。

    • kazz
    • September 9th, 2009

    メイリオを商用利用の際は、商用ライセンスを取らないといけなかったと・・・
    綺麗なフォントなんですけどね。

    MS UI Gothicも同じと思います・・・

    • hoge
    • September 9th, 2009

    プロジェクトを追加のボタン、白い文字では見づらいと思います。