Fireworks CS5/4/3 速習デザインの増刷が決まりました!!!

Fireworks CS5/4/3 速習デザインの増刷が決まりました!!!
発売してから早いもので10ヶ月ちょっと…。
みなさんのおかげで、このたび増刷していただけることになりました!!!

私の28〜29の楽しい時期を棒にして一生懸命書いた本なのでw めちゃくちゃうれしいです!!!!!!!!ありがとう20代の私!!!

Fireworks CS5/4/3 速習デザインの増刷が決まりました!!!

Fireworks CS5/4/3 (速習デザイン)
山口 有由希
技術評論社
→Amazonで詳しく見る
→楽天で詳しく見る

発売してから早いもので10ヶ月ちょっと…。

執筆中はFirworksの本なんて本当に売れるのか?大丈夫なのか?と心配すぎて夜も眠れなかったこの本ですが、みなさんのおかげでこのたびなんと!!増刷していただけることになりました!!!

私の28〜29歳の楽しい時期を棒にして一生懸命書いた本なので、
めちゃくちゃうれしいです!!!!!!!!(本当にありがとう20代の私。)

増刷分が出来上がったらまた何冊か頂けるみたいなので、またプレゼント企画したいなって思っているのでその時はどうぞよろしくお願いします♪

ADCの連載、3回まで公開中です!

Fireworks関連ネタで、現在Adobe Developer Connectionで連載させていただいているFireworks記事ですが、第3回まで公開されてます。

こちらもよかったらチェックしてみていただけると嬉しいです♪

あとちょっと告知

そして、またこれについては改めて記事を書こうと思うのですが、以前一度やらせていただいたこの本を使ったFireworksの授業をまた10月下旬からやらせていただけることが正式に決まりました!

デジタルハリウッド福岡校で開催です。

まわりにもしご興味のある方がいらっしゃったらお知らせ頂けるとうれしいです♪

今後とも頑張りますので、どうぞよろしくお願いします^^

10月11日(木)デジタルハリウッド福岡校さんでFireworksの勉強会します!

10月11日(木)19:30からデジタルハリウッド福岡校さんでFireworksの勉強会します!

10月11日(木)19:30からデジタルハリウッド福岡校さんでFireworksの勉強会します!

はじめの1時間程度は、私の方でFireworksを使ったことないorよくまだ機能を知らない方向けにPhotoshopやIllustratorと併用してでも使ってほしい!魅力的なFireworksの便利機能を中心に、以下のような内容をご紹介しようと思っています☆

まだ考え中なのですが時間が1時間半とってあるので、残りの30分は、こういうときどうしたらいいの?こういうどうしてる?といったFireworksに限らずWebデザイン全般についてのお悩み相談会みたいな形にできたらいいなーと思ってます!

お時間ありましたらぜひ遊びにきてくださいね♪

紹介しようと思っている内容

デザインするのに便利

  • 見た目をそのままコピー!「属性のペースト」
  • CSSのように共通の見た目を管理して一括アップデートもできる「スタイル機能」
  • 質感の表現も楽々。豊富な「テクスチャ」「パターン」

コーディングするのに便利!

  • ここは何ピクセル?距離計測もラクチン「ものさしツール」
  • 適正サイズのスライスを一瞬で「スライスを挿入」機能
  • グラデーションや角丸など、Fireworks上で描画したオブジェクトをCSSに変換!「CSSプロパティパネル」

もっと効率アップ

  • 複数ページのデザインやスライスのときにも使える便利な「ページ機能」
  • 同じオブジェクトを使い回すときにはかかせない「シンボル機能」
  • もっと便利に!豊富な拡張機能の紹介

無料ですが、こちらからお申し込みが必要です。

https://www.dhw.co.jp/dhef/event_form.php?cid=sc&eid=701100000001gry

わいわいやれたらと思いますので、お気軽にご参加くださいね♪

Fireworks CS6の新機能、CSSプロパティパネルを便利に使ったWebデザインの流れまとめ

G3株式会社さまのコーポレートサイトを制作させていただきました。

今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。

G3株式会社さまのコーポレートサイトを制作させていただきました。

CSSプロパティパネルが便利すぎて…

今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。

すでにサイトがWordPressで動いていて、別のテーマで運用中だったので、
テキスト等もそのまま流用でき、私の作業としては純粋にWordPressテーマのデザインとコーディングの部分でしたので今回ご紹介するのはその部分の流れになります♪

まず、イメージを膨らませる

イメージ固めから入りました。
会社のコンセプトが「毎日をワクワクさせちゃえ!」だったので、私の中でのワクワクのイメージを考えてみます。

google画像検索でワクワクを検索してみたり。
なんとなーくブルーが多い印象。

wakuwaku
こういうものも参考にしながら
私の中でのワクワクのイメージというのも固めていきました。

私の中ではテンション上がりすぎて楽しみで仕方ない!という時の感情表現だなという結論に。

外で、天気は青空で…
みんなで手をつないでジャンプ!!!的なイメージです。

手をつないで ジャンプ で画像検索…

jump

そうそう、なんかこんな感じ!

ジャンプしている写真もいいなぁと思ったのですが、
どうせやるなら関わっている人たちの写真を使いたいところなので、
今回は見送り(いつかやりたい!)清々しい青空をテーマにしよう!と方向性を決めました。

ざっくりイメージを作ってみる

コピーの文章やロゴなどを配置していきます。
青空のイメージ。こんな感じで。

rough

サイトの見せ方を考える

ここで細かいデザインを作っていく前にサイトの見せ方で悩みました。

現状、コンテンツ的には載せられるものがまだあまりない状態なので
どちらかというとイメージ重視のサイトがいいかなと思いました。

ちょっとした遊び心があるような感じに。

そこで今回は1枚ものにしてパララックス効果かアニメーション的なものをつけて、ぱっと見たときに楽しい、それこそワクワクのイメージが伝わるようなサイトにしようと考えました。

この時点でコーディングをはじめる

上記の方向性にしようと決めたので、そうなってくるとこれ以上Fireworksで作業していても仕上がりイメージがわかないので(動きみながらやっていきたい)ここからもうブラウザベースで進めていくことにしました。

slice

Google Web Fontを使う

今回はメニュータイトル等は英語表記にしようと決めていたのですが、
今後の運用等も考えてできるだけテキストベースでやってみたく、Google Web Fontを使用しました。

webfont

使いたい書体を探してUseを押します。

webfont-2

今回はQuicksandのBold 700ウエイトのものを使用しました。
必要なものにだけチェック。

webfont-3

あとは手順に従って、HTMLとCSSにコードをぺたっとするだけです

webfont-4

webfont-5

各ページのタイトル文字も、はじめは画像化しようかと思っていたのですが、
今回は同じくGoogle Web Fontで対応しました。

背景のグラデーションをCSSプロパティパネルで書き出す

お二人の好きな色がグリーンとレッドだと伺っていたので
それらの色をどこかに取り入れたいなと思い、各コンテンツの背景にしよう!と思いました。

切り替えがトップ含めて6つあるので、6色が繋がるようなグラデーションを作ることに。

Fireworksで長方形を6つ作り、それぞれにグラデーションをかけていきます。
(キャプチャでは繋がってるように見えるかもしれませんが長方形が6個並んでいます)

color

こんな感じでグラデーションができたら、
ここで!Fireworks CS6の新機能、CSSプロパティパネルの出番です。

ウインドウメニューからCSSプロパティパネルを表示しておきます。

CSS化したいオブジェクトを選択して、パネルを見ると…
css

こんな感じで、このオブジェクトをCSSで描画する時どのように書いたらいいのかが表示されちゃうのです!
超便利!!!

今回はグラデーションのCSSが欲しかったので、グラデーションとなっている部分をクリックして、右下の【選択範囲】のボタンをクリックします。

Dreamweaverに移ってコードをぺたっと。

dw

あとは貼付けるだけ。

簡単なステップでこんな感じで複数ブラウザに対応したコードがGETできます。

その他のCSSで表現したい要素もFireworksで見た目を調整して、コードをコピペ。

css3

ページ内の他の要素でCSSで表現したいものもFireworksでこんな感じに作ってしまいます。

テキストシャドウだったりボックスの影だったりといった部分。

css3-2

これらもコードをコピペすれば、すぐにブラウザに反映されます!便利すぎる!

雲と飛行機をjQueryでアニメーション

パララックス効果で雲を動かそうと思っていたのですが、それだとスクロールしないとなにもはじまらず開いた瞬間はなにも動いていない状態になってしまったので、トップ部分の雲はjQueryで背景のpositionを動かしてアニメーションするようにしてみました。

飛行機もぴゅーっと飛んでいくように。

完成したものを見てもらって、文言等チェック

文章等を手直ししてもらって、スクロールの幅等細かい調整をして公開となりました。

デザインに関しては完全におまかせで作らせていただいたので今回、超短時間で作れました。

CSSプロパティパネル最高です!

みなさんもぜひ使ってみてくださいね!

このあたりのデモや解説を含めたFireworksのイベントをデジハリ福岡校さんで行います☆

10月11日(木)19:30~21:00からデジハリ福岡校さんでFireworksのイベントをさせていただくことになりました。

CSSプロパティパネルの登場によってさらに便利になったFireworksなんですが、他にもPhotoshopやIllustratorと平行してでも使ってほしい便利機能がいろいろあるので、導入を迷っている方や持ってるけど使ったことない!という方向けにどういうところが便利なのかをデモを中心に解説していきます。

10月11日(木)19:30~21:00(開場 19:15)

場所はデジハリ福岡校さんです。

http://blog.dhw.co.jp/fukuoka_event/2012/09/dsf-vol101011fi-ccd5.html

サイトの表記がオーバーすぎてすごく恥ずかしいんですが…私が書いたんじゃないので目をつぶってください;;

もちろんFireworks好きな方も歓迎です☆
無料なのでぜひ遊びにきてください☆