Embed Size (px)
Citation preview
デザインデータの扱い方とFireworksのそれっぽい使い方
自己紹介
• Kaa
• Twitter:kaa
• 家と会社でアプリ作ったり見守ったりしてます
• Flash11年、デザイン5年、Android2.5年
• 個人アプリ http://bit.ly/kaa_app
• ブログ書いたり http://bit.ly/kaa_level0
• 仕事したり http://bit.ly/kaa_work
今日の内容
• デザイナーからデータをもらう編
仕事でやり取りする時とか、デザイナーとの
素材受け渡しの時のこと
• 自分でなんとかがんばる編
自分で全部作るときに、Fireworksに助けて
もらったりする方法
まずキホン
• Fireworks PNGについて
拡張子pngだけど、ちゃんとpngとして使えるけど、fireworksのデータがいろいろ埋め込まれたヤツ。
一応画像としても使えるけど、やけに重いのでそのまま使わないように。
デザイナーからデータをもらう編デザイナーに伝えておくこと
• FWで書き出しをやる。書き出し以外やらない。
• レイヤー効果などはできるだけなしで。ラスタライズを頼む
• フォントはアウトライン化。(フォント周りは機能差多いので再現しきれない)
• 特色指定をしないようにしてもらう
デザイナーからデータをもらう編スライスの使い方と実演
• スライスはスライスツールでやるのは連続したパーツの切り分け
• 独立したボタンについては右クリック・長方形スライスを挿入
• スライスにはちゃんと名前つけよう
デザイナーからデータをもらう編書き出しについて
• 書き出しは右クリック・選択したスライスを書き出し
• 複数選択した場合はメニューの位置が違う！
• ステートによって接頭語がつく。(CS4あたりまではフレームだった)
• ステート(フレーム)は画面の状態ごとに作られていたりする。
自分でなんとかがんばる編キホン
• 色は最初にある程度まとめて決めておく
• いきなりパスツールとか使わない。基本は角丸四角、丸、多角形、矢印
• 微調整するときは、グループ解除。自動シェイプからパスデータにする
• 微妙な差で差別化をしないこと。まず伝わりません。
自分でなんとかがんばる編キホン
• 色は最初にある程度まとめて決めておく
• いきなりパスツールとか使わない。基本は角丸四角、丸、多角形、矢印
• 微調整するときは、グループ解除。自動シェイプからパスデータにする
• 微妙な差で差別化をしないこと。まず伝わりません。
自分でなんとかがんばる編スタイル
• 形きめたら、まずスタイルに頼る。この時、色は気にしなくてOK
• スタイルを選んだら、塗のテクスチャの％を変えてく。％は少な目がおすすめ
• そのあとは色。フィルターでカラーを調整＞色相・彩度。色相だけをいじる
自分でなんとかがんばる編調整
• 1アプリに使うテクスチャはせいぜい2・3種類。増やすと破綻します。
• 塗のグラデーション。だいたいやりすぎる。
• ツールをオブジェクトの端にしないで、外にするとやんわりしやすい。
• フィルターは上のメニューではなくオブジェクトのプロパティで。あとで戻せる。
自分でなんとかがんばる編スタイルを探す
ダウンロードできるスタイル、探すといろいろあります。
• http://bit.ly/fw_style1
• http://bit.ly/fw_style2
• http://bit.ly/fw_style4
• http://bit.ly/nKoPKt
おまけ
PNG書き出し後、色数を減らしたりして
軽量化できることがあります
• http://bit.ly/fw_downsize
