Download - Fireworks or Photoshop【第3回ゆるふわ勉強会】
![Page 1: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/1.jpg)
Fireworks or
Photoshop
12年6月23日土曜日
![Page 2: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/2.jpg)
こうめ株式会社まぼろしWebデザイナーTwitter : Bamboo_C
Blog : http://webamb.com
12年6月23日土曜日
![Page 3: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/3.jpg)
Web制作で使われるデザインツールとして、FireworksとPhotoshop
結局どちらがいいのでしょう。
12年6月23日土曜日
![Page 4: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/4.jpg)
まずPhotoshopとFireworksの概要をみてみます。
12年6月23日土曜日
![Page 5: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/5.jpg)
Photoshop元々は画像編集ソフトとして開発されました。今ではバージョンアップ毎に機能拡張を重ね、画像加工に限らずデザインツールのスタンダードソフトです。現状、制作会社さんの多くがPhotoshopを標準ソフトとして使用しています。
12年6月23日土曜日
![Page 6: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/6.jpg)
FireworksWebをターゲットにした画像作成、出力ソフトとしてMacromediaによって作成。今はMacromediaがAdobeに買収されAdobeから発売されています。Webに特化しているため、事Webに関しては効率的でスピーディーな作業が行えます。
12年6月23日土曜日
![Page 7: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/7.jpg)
では値段をみてみます。
12年6月23日土曜日
![Page 8: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/8.jpg)
¥80,438-Photoshop CS6
12年6月23日土曜日
![Page 9: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/9.jpg)
12年6月23日土曜日
![Page 10: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/10.jpg)
12年6月23日土曜日
![Page 11: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/11.jpg)
¥36,251-Fireworks CS6
12年6月23日土曜日
![Page 12: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/12.jpg)
倍以上違います。
大企業ならいざしらず、SOHOや中小企業にはかなり魅力的なポイントですね。
12年6月23日土曜日
![Page 13: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/13.jpg)
だがしかしbut!
12年6月23日土曜日
![Page 14: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/14.jpg)
今まで使ったことが無い場合はソフトの購入費だけでなく従業員に一から覚えてもらう為学習コストがかかってしまいます。
12年6月23日土曜日
![Page 15: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/15.jpg)
また、前述したように大きなシェアを持っている為取引先との兼ね合いもあるでしょう。
12年6月23日土曜日
![Page 16: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/16.jpg)
さっきのmimaさんのPhotoshopの説明を聞いて、PhotoshopCS6 SUGEEEEEEE
ってなってる方も多いと思います。
12年6月23日土曜日
![Page 17: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/17.jpg)
じゃあなぜFireworksを使う会社が増えてきてるの?
12年6月23日土曜日
![Page 18: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/18.jpg)
前述したデメリットを踏まえても余りあるほどのメリットを感じるFireworksの機能の一部をご紹介します
12年6月23日土曜日
![Page 19: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/19.jpg)
Fireworksはステート機能・ページ機能テンプレート機能などの独自の機能や豊富なシェイプを使って制作することにより「効率的に」作業を行うことが可能です。
12年6月23日土曜日
![Page 20: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/20.jpg)
ページ機能
複数の仮想ページを管理できます。レイヤーを共有させることが可能で修正などを一括で管理できます。便利!
12年6月23日土曜日
![Page 21: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/21.jpg)
サイドバーにあるページタブを選択します
12年6月23日土曜日
![Page 22: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/22.jpg)
右クリックでページを複製を選択
12年6月23日土曜日
![Page 23: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/23.jpg)
するとコピーができます下層ページなども一つのファイルで管理できます
12年6月23日土曜日
![Page 24: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/24.jpg)
2ページ目
1ページ目
12年6月23日土曜日
![Page 25: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/25.jpg)
パーツなどもページで共有できます
12年6月23日土曜日
![Page 26: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/26.jpg)
ヘッダーを共有させてみます
12年6月23日土曜日
![Page 27: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/27.jpg)
共有したいレイヤーを右クリックし、「レイヤーを複数ページで共有」を選択します。
12年6月23日土曜日
![Page 28: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/28.jpg)
レイヤーを共有したいページを追加します
12年6月23日土曜日
![Page 29: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/29.jpg)
これで共有できましたいずれかのページで変更を行うと全てのレイヤーで共有されます
12年6月23日土曜日
![Page 30: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/30.jpg)
ステート機能
一つのページで「画像のマウスオーバー時」などの複数の異なる状況を管理できます。
12年6月23日土曜日
![Page 31: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/31.jpg)
サイドバーにあるステートタブを選択します
12年6月23日土曜日
![Page 32: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/32.jpg)
右クリックで「ステートを複製」を選択
12年6月23日土曜日
![Page 33: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/33.jpg)
各種設定を行ったらステートを作成
12年6月23日土曜日
![Page 34: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/34.jpg)
作成したらわかりやすいように名前を変更しておきましょう
12年6月23日土曜日
![Page 35: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/35.jpg)
ステート1ではこの状態で作ってありますがステート2ではボタンの色を変えた状態にしてみましたステートを切り替えてみます
12年6月23日土曜日
![Page 36: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/36.jpg)
色が変わりました
12年6月23日土曜日
![Page 37: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/37.jpg)
テンプレート機能CS5から予めFireworksに用意された沢山のテンプレートからページを作ることが可能になりました。ワイヤーフレームを作る際に重宝しそうですね。
12年6月23日土曜日
![Page 38: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/38.jpg)
メニューから「テンプレートから新規作成」を選択します
12年6月23日土曜日
![Page 39: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/39.jpg)
豊富なテンプレートが用意されています
12年6月23日土曜日
![Page 40: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/40.jpg)
ガラケー用とか
12年6月23日土曜日
![Page 41: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/41.jpg)
グリッドとか
12年6月23日土曜日
![Page 42: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/42.jpg)
色んなパーツとか
12年6月23日土曜日
![Page 43: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/43.jpg)
普通のPCサイトのデザインも
12年6月23日土曜日
![Page 44: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/44.jpg)
ボタンパーツの作成スピードに関してはやはりFireworksの方が早いと思います。早速ひとつ作ってみます。
12年6月23日土曜日
![Page 45: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/45.jpg)
Hands-onTogether will make
12年6月23日土曜日
![Page 46: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/46.jpg)
スライス
マークアップエンジニアにとってスライスは面倒な作業の一つですよね。Photoshopではひとつひとつガイドを当てて、スライスしたい箇所をドラッグしていって..
って結構面倒です。
12年6月23日土曜日
![Page 47: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/47.jpg)
スライスしたいオブジェクトを全て選択。「 shift + option + u 」でスライス挿入。後は右クリックで書き出せば全てのオブジェクトを別々に切り分けられます。いちいちガイドを引かなくても大丈夫ですし、複数のオブジェクトが重なっていても大丈夫です
12年6月23日土曜日
![Page 48: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/48.jpg)
また、スライス名も調整可能ですマウスオーバー用の_onとか独自の命名規則がある場合に非常に便利です
ファイルから「HTMLの設定」を選択
12年6月23日土曜日
![Page 49: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/49.jpg)
ドキュメント詳細タブのこの画面で色んな設定ができます
12年6月23日土曜日
![Page 50: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/50.jpg)
このドロップダウンをカスタムに変更すると
12年6月23日土曜日
![Page 51: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/51.jpg)
ステート名をカスタマイズできます!
12年6月23日土曜日
![Page 52: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/52.jpg)
また、先程紹介したステート機能を利用することでマウスオーバー時などの異なる環境もページヘステートを切り替えるだけで出来ますね。
12年6月23日土曜日
![Page 53: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/53.jpg)
12年6月23日土曜日
![Page 54: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/54.jpg)
続いて、この間出たばっかりのCS6の新機能をおさらい!
12年6月23日土曜日
![Page 55: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/55.jpg)
CSSオブジェクトプロパティの抽出
12年6月23日土曜日
![Page 56: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/56.jpg)
角丸とかグラデとか、ベンダープレフィックスをつけるのが面倒ですよね。
-webkit- ←こんなの
Fwなら、オブジェクトからプロパティを抽出してくれます!他にもPhotoshopライブエフェクトのドロップシャドウ、シャドウ(内側)、光彩(内側)、光彩(外側)なんかも抽出してくれます
12年6月23日土曜日
![Page 57: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/57.jpg)
Hands-onTogether will make
http://webamb.com/wp-content/uploads/sample2.zip
12年6月23日土曜日
![Page 58: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/58.jpg)
スライスをCSSスプライトとして
書き出せる
12年6月23日土曜日
![Page 59: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/59.jpg)
例えばロールオーバーの画像を作るとき1個づつ切り出して新しいウィンドウを開いてペーストして、繋げて...
みたいなことをしてましたが、これならめちゃくちゃ簡単にできます!
12年6月23日土曜日
![Page 60: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/60.jpg)
Hands-onTogether will make
12年6月23日土曜日
![Page 61: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/61.jpg)
jQuery Mobileテーマが作れちゃう!
12年6月23日土曜日
![Page 62: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/62.jpg)
スマホ案件で大活躍のjQuery Mobile、デフォルトでは5つのテーマから選択が可能が、CS6ならjQuery Mobileで使用可能なテーマが作成可能です。*作成時のプレビューもできちゃいます!
12年6月23日土曜日
![Page 63: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/63.jpg)
他にも..
• パフォーマンスの向上で最大4倍のサイズのファイルをサポート
• グラデーションの数値、角度設定
• 新しいファイル名拡張子fw.png
• 各機能の操作性向上 ...etc
12年6月23日土曜日
![Page 64: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/64.jpg)
まとめ
12年6月23日土曜日
![Page 65: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/65.jpg)
結局どっちがいいの?ってことなんですが一長一短あって、使い分けするのが最も効率的だと思います(≧▽≦)b
12年6月23日土曜日
![Page 66: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/66.jpg)
Photoshop
• キービジュアルのようなサイトの重要な箇所の画像加工
• 手書き風のデザインとかには必須の豊富なブラシ
12年6月23日土曜日
![Page 67: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/67.jpg)
Fireworks
• ワイヤー作成
• カンプ作成
• スライス
12年6月23日土曜日
![Page 68: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/68.jpg)
「Fireworksでは力不足」「Photoshopでは時間がかかりすぎる..」それぞれの特徴を活かしながら臨機応変なワークフローを心がけたいですね!
12年6月23日土曜日
![Page 69: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/69.jpg)
Fireworks or
Photoshop
12年6月23日土曜日
![Page 70: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/70.jpg)
Fireworks and
Photoshop
12年6月23日土曜日
![Page 71: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/71.jpg)
12年6月23日土曜日
![Page 72: Fireworks or Photoshop【第3回ゆるふわ勉強会】](https://reader033.vdocuments.site/reader033/viewer/2022052523/555e7e7dd8b42abd468b49f5/html5/thumbnails/72.jpg)
Thank you !
12年6月23日土曜日