css nite lp14 2011/03/05cssnite.jp/lp/lp14/cssnite-lp14-yuguchi.pdf · rsstudio 湯口りさ css...
TRANSCRIPT
![Page 1: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/1.jpg)
![Page 2: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/2.jpg)
RsStudio 湯口りさ
CSS Nite LP14 2011/03/05
Photoshopper meets Fireworks
フォーム系の 共有ライブラリの活用
![Page 3: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/3.jpg)
フリーランスのWeb屋さん
屋号:RsStudio Site :http://web.r-studio.jp/
Flashのお仕事をメインに Webの企画・デザインから制作まで幅広く!
Favorite Tools
・
自己紹介
![Page 4: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/4.jpg)
なずきのおと (株式会社NTTデータ)
キャンペーン、公式Tweetへの反応などを Web上や社内の文章から、 継続的に分析するサービス
・
最近のプロジェクト
![Page 5: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/5.jpg)
Fireworksで全画面をデザイン
Flash & HTML・JSで実装
なずきのおと (株式会社NTTデータ)・
最近のプロジェクト
![Page 6: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/6.jpg)
Flash & HTML・JSで実装
を、当初ほぼ一人で…
なずきのおと (株式会社NTTデータ)・
最近のプロジェクト
Fireworksで全画面をデザイン
![Page 7: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/7.jpg)
なずきのおと (株式会社NTTデータ)・
最近のプロジェクト
Fireworksで全画面をデザインFlash & HTML・JSで実装
フォームのような定形部分に 手は掛けたくない・・・
![Page 8: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/8.jpg)
共有ライブラリを使おう
共有ライブラリはパネルから・
共有ライブラリはCS3で パネルにまとめられたシンボル群 CS4からは ドキュメントライブラリ と 同じタブグループに入って表に。
![Page 9: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/9.jpg)
・
システムプロパティパネルを�使う�or�使わない
共有ライブラリを使おう
共有ライブラリのプリセットは�大きく分けて2種類
![Page 10: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/10.jpg)
1
2
33
共有ライブラリを使うメリット
ライセンスを気にせずに使える
複数のプラットフォームのフォーム要素が 揃っている
フォーム要素の大きさを変えられる デザインを変えても動く
![Page 11: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/11.jpg)
1
2
33
共有ライブラリを使うメリット
3
プリインストールの素材は使い放題!
3
ライセンスを気にせずに使える
複数のプラットフォームのフォーム要素が 揃っている
フォーム要素の大きさを変えられる デザインを変えても動く
![Page 12: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/12.jpg)
1
2
33
共有ライブラリを使うメリット
他の環境での見え方も確認できる!
プリインストールの素材は使い放題!ライセンスを気にせずに使える
複数のプラットフォームのフォーム要素が 揃っている
フォーム要素の大きさを変えられる デザインを変えても動く
![Page 13: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/13.jpg)
1
2
33
共有ライブラリを使うメリット
プリインストールの素材は使い放題!
他の環境での見え方も確認できる!
スクリーンショットよりも使いやすい!
ライセンスを気にせずに使える
複数のプラットフォームのフォーム要素が 揃っている
フォーム要素の大きさを変えられる デザインを変えても動く
![Page 14: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/14.jpg)
DEMO1 配置と変更
![Page 15: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/15.jpg)
作業手順
DEMO1 配置と変更
1
2
3
フォーム要素を配置
拡大縮小ツールでサイズ変更
初期値をセット
![Page 16: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/16.jpg)
DEMO1 配置と変更
参考例・
たくさんの�要素を並べると…
→グループ化で� すこし改善
Fireworks自体が重くなる
![Page 17: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/17.jpg)
FlashやFlexのフォーム要素を 知らなくてもデザインできる
・
FlashやFlexのデザインにも!
![Page 18: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/18.jpg)
ComboBox
FlashやFlexのデザインにも!
Button
![Page 19: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/19.jpg)
同じ形&たくさんあるパーツを�フォームパーツで代用
・
DEMO2 デザインを変えよう
![Page 20: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/20.jpg)
DEMO2 デザインを変えたい
「ボタン(win)」をベースに作成・
![Page 21: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/21.jpg)
設定条件が似てる
DEMO2 デザインを変えたい
「ボタン(win)」をベースに作成・
![Page 22: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/22.jpg)
・
DEMO2 デザインを変えたい
「ボタン(win)」をベースに作成
オブジェクト数が多くない
![Page 23: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/23.jpg)
→ボタンシンボルの代用
まとめ
他のプラットフォームのデザインも�最初から使える
デザインを変えて様々な用途に使える
・
・
→入力系のHTML静的モック
→JavaScriptと組み合わせて 独自デザインのフォーム
![Page 24: CSS Nite LP14 2011/03/05cssnite.jp/lp/lp14/CSSNite-LP14-yuguchi.pdf · RsStudio 湯口りさ CSS Nite LP14 2011/03/05 Photoshopper meets Fireworks フォーム系の 共有ライブラリの活用](https://reader034.vdocuments.site/reader034/viewer/2022051917/600942751f4b557c1624e7f2/html5/thumbnails/24.jpg)
Fin.