Fireworksでテキストの回り込み

illustratorなら簡単にできるのにFireworksでできない事・・・やはりテキスの機能が弱いことですが、よく困ることのひとつに、「テキストの回り込み」が出来ないこと。

ブロックに流し込んだテキストも、前面にきた画像にかぶらないように回り込みをさせたい場合が多いですよね。

今まで苦労して、二つのブロックに分けたりしてたんですが、ふと思いついてこの方法を試してます。あんまりスマートな方法じゃないですが・・・・・

（１）矩形を二つ描きます

（２）二つの矩形を合体（パスを結合）します

（３）流し込みたいテキストを入力します

（４）両方を選択しておいて、メニュー⇒テキスト⇒パス内に流し込む

（５）こんな形に流し込みました

Fireworks入門の動画マニュアル制作しました

いろんな人から「動画マニュアル更新しないのー？」ってリクエスト貰ってたんですが、やっとこさ時間ができまして、Fireworks入門の動画マニュアル作りました。



初心者向けですが、「AdobeCS　持っているけど、Fireworksってどこが使い勝手がいいの？」ってピント来ない方は良かったら見てみてください。
illustratorにはillustratorの得意分野があり、PhotoshopにはPhotoshopでしかできない得意分野がありますが
それほど凝ったことをしないで、手軽に、web素材を作りたい時にとても便利なソフトです。
illustrator、Photoshopそれぞれの機能にはとうていかなわないけど、便利なパーツ類なども揃っているので、「私デザインは苦手なの」っていう人でも、そこそこのパーツが作れてしまうんじゃないかな・・。と。
むしろプロのデザイナーさんというよりは、ネットショップの担当者とか、社内でweb担当になった素人の方とか、そういう方が使いこなすととても便利だと思います。
フォトショップやイラストレーターを使いこなすにはちょっと勉強が必要で、やれることも多いかわりに難易度も高いです。
Fireworksはそれほど勉強しなくても、そこそこのwebパーツができてしまいます。
それなのにFireworksの解説本はあまり出ていないようで、情報を探している人も多いかと思いますので、、、よかったら見てみてくださいね。


＜Fireworksの基礎＞
[1]ドキュメントの新規作成と保存
[2]Fireworksを軽くする環境設定
[3] 画像を開く方法
[4]画像をリサイズする方法
[5]画像の一部をカットする
[6]ウィンドウとパネルの使い方


＜Fireworksの色の操作の基本＞
[1] カラーを選ぶ方法
[2] グラデーションの方法
[3]塗りのテクスチャ
[4]塗りにパターンをつける方法
[5]いろんな線


＜ベクター画像（図形や線）の基本＞
[1]ラインツールで線を引く方法
[2]ペンツールで直線と図形を描く
[3]多角形の描き方
[4]矢印を描く方法
[5]星型を描く
[6]フリーハンドで絵を描く


＜スタイルとフィルタの使い方＞
[1]スタイルを適用してボタンをつくる
[2]スタイルを使ってロゴを作る方法
[3]フィルタを使ってバナー作成


　この後もできれば増やしていきますので、、今後ともご贔屓に・・・・・

Fireworksで金色のシールを作ってみる

Fireworksのチュートリアルリンクに載っていた「ゴールドシール」を作る方法を試してみたので、それを動画マニュアルにしてみました。
↓参考サイトはこちら
http://www.designwalker.com/2008/04/fireworks-tutorial.html

チュートリアルの公開元は英語のサイトなので、よくわからなかったところは自己流にアレンジしちゃってます。
ありがたいチュートリアルを公開してくれた元サイト様には感謝です。

Fireworksで金色のシールを作る方法

（１）金色のシール－ギザギザの円を描く
（２）金色のシール－立体感をつける
（３）金色のシール－箔押ししたような文字
（４）金色のシール－文字を丸く並べる
（５）金色のシール－グループ化して回転

１〜５まで順番に見ていただければできるようになっています。

Fireworksのコマンドの使い方

例えば、デジカメから取り込んだ写真を、リサイズして、右と下に余白をつけて、ドロップシャドウで影をつけ、書き出し・・・同じ処理を複数のファイルに一括で施したいことがありますね。
そんなとき、いちいちファイルを開かなくても、Fireworksのバッチ処理機能で行えます。
順番としては、オリジナルでコマンドを作る、次にバッチ処理をする・・となるんですが、

Fireworksのコマンド（自動処理）の作り方は簡単です。
同じような機能で、Photoshopのアクションがありますが、それよりかなり簡単に登録できます。
ただ、Photoshopのアクションは、登録したあとに、間に作業を追加したり、一時停止したり細かい編集ができるんですが、Fireworksはその機能がないので、
物足りないというか不便と思いました。

コツとしては、細かい動作をひとつずつコマンド登録しておいて、
バッチ処理の時に、使いたいコマンドを編集（いくつも組みあわせたり、順番を変えたりできるので）すれば
かなり高度なことができると思います。

動画マニュアル「Fireworksの使い方」でこの方法を更新しましたので
興味のあるかたは覗いてみてください。

Fireworksのコマンド登録とバッチ処理
１〜３までで完結してます。

---

動画の例では、思いつきで一つ作業を登録してみたんですが、これはクリップボードに入っている記録をペーストするのであとで再現してみたら大いに不具合があることがわかりました。なのでそっくりマネしないでくださいね(^_^;
どんなことができるのかがわかっていただけるかと思います。

Fireworksでのスライス使用方法

Fireworksの使い方　動画マニュアルを更新しました。
今回は、ファイヤーワークスでのスライスの使用方法です。


一昔前のスライスの使い方というと、デザインを全面、画像作成ソフトで作って、それをスライスで１画面全部書き出ししてから、HTMLにテーブルごと取り込み・・・
という方法が主流でしたね。
とくにDTPなどのデザイン畑からweb制作に入ったデザイナーさんにとっては、ＨＴＭＬソースを覚えなくても自由自在にデザインができるという素晴らしい機能でした。
同時に、５年も前にはまだネットの回線の速度が遅く、どうやって軽い画面を制作するかに、とても神経を使わなければいけない時代だったので、大きな画像は、スライスで切り刻んで部分的に高画質で出力したり、広い余白はスペーサーを入れて無駄な画像が入らないようにするなど、
画面を軽くするテクニックも重要でした。

しかし時は流れ、今やWEB標準に合わせた制作方法が主流に・・・・
大きな画像は１枚で背景用に書き出して、そのうえにテキストやパーツを配置していく・・。
こちらが主流になってから、スライス機能の使用方法も使い方が変わってきました。

全画面テーブルで書き出ししてしまうと、修正があったときに大変ですが
後のメンテナンスを考えると、こういった背景画像にHTMLでテキストをのせるといった方法をとったほうがだんぜん効率が良いですね。

というわけで、作例では、１画面で作ったweb用背景を、ヘッダー用、フッター用、メイン部分用の３つに切り分けて、さらにロゴは別で書き出しする方法です。
（１）から（３）までで完結してます。

Fireworksのスライスの使い方 >> （１）背景画像用に切り抜きする方法