画像を使わずにデザイン

754 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
754
On SlideShare
0
From Embeds
0
Number of Embeds
59
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

画像を使わずにデザイン

  1. 1. 画像を使わずに デザイン 2011/09/19 h13i32maru@Twitter maruyama-r@KLab
  2. 2. 自己紹介• 丸山 亮(h13i32maru) 最近はJSを触ってます• KLab株式会社所属32 http://blog.h13i32maru.jp http://twitter.com/h13i32maru https://www.facebook.com/ryo.maruyama https://github.com/h13i32maru
  3. 3. Androidアプリ作りました• 毎日の摂取カロリーをメモしていくアプリ• 32Calorie • 食事ごとのカロリーをなんとなくメモしていく • お手軽・シンプル
  4. 4. ダ、ダサい(-_-;)
  5. 5. 素人デザイン• いかにも素人が作ったデザイン • 原色カラー • 適当な配置 • ボタンの大きさ
  6. 6. デザイナーさん登場
  7. 7. 完成したモック画面が・・・
  8. 8. すごく良い!!けど・・・• 画像を使ったデザインは後から変更が難しい • 色や大きさを変えるだけでもお願いしないと • Adobe製品もってないから自分で変更できない
  9. 9. 画像(なるべく)使わない• じゃあ画像を使わずに再現してみよう• WebViewを使ったCSSデザインはしない
  10. 10. 頑張って再現してみました
  11. 11. 基本はshape.xml• Androidでは四角形 / 円形をXMLで簡単に作れます• もちろん角丸 / グラデーションも可能• これをViewの背景画像として設定する
  12. 12. <?xml version="1.0" encoding="utf-8"?><shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle"> <corners android:bottomRightRadius="0dp" android:bottomLeftRadius="16dp" android:topLeftRadius="0dp" android:topRightRadius="16dp"/> <solid android:color="#e7deaa"/> <gradient android:startColor="#261f1b" android:endColor="#40332a" android:angle="270"/></shape>
  13. 13. まとめ• やっぱりデザイナーさんの本気はすごい• 画像無しでも配色とか配置を考えると良くなる• 画像にプログラムで色をつけることも可能 - color filterを使って白いアイコンを黒いアイコンにする とか• シャドー、エンボスはできなさそう
  14. 14. おわり

×