今回は、その中のひとつ「波動」のグラデーションを使った
シャボン玉デザインのチュートリアルです。

なんとなく…シャボン玉に見えませんか？

完成ファイルは、このチュートリアルの最後からダウンロードできますので
Fireworksでさわってみてくださいね。

それでは作り方です！

新規カンバスを開く

新規カンバスを開きます。今回は600px × 400pxとしました。

背景にする写真を読み込む

背景に使用する写真を読み込みます。ファイル→読み込みから好みの画像を選択します。
今回は葉っぱの画像を使用しました。

PHOTO STOCKERからダウンロードできます♪
http://photo.v-colors.com/2427.html

このように配置しました。

楕円ツールで正円を描く

ツールから楕円ツールを選択します。

Shiftキーを押しながらドラッグして正円を描きます。

グラデーションを指定する

描画したオブジェクトを選択した状態で、グラデーションの「波動」を選択します。

グラデーションの色はこんな感じでパステルっぽい色を組み合わせています。

上の画像真ん中のプルダウンから【パステル】のセットを選んだ後、
スライダーを調整するとこんな感じの色がセットされるので簡単です。

このような感じになります。グラデーションのかかり具合はあとから調整しますのでこの時点では画像のようになっていなくても大丈夫です。

ストロークを設定する

ストロークの設定をします。カラーは【#ffffff】で太さを2としました。

描画モードを変更する

オブジェクトの描画モードを変更します。プロパティインスペクタから描画モードを【ピンライト】に設定します。

このようにシャボン玉らしくなってきました！

フィルタ効果をかける

ぼかし（ガウス）をかける

よりリアルな質感になるよう、フィルタ効果を掛けていきます。

【プロパティインスペクタ】から【フィルタ】横の【+】をクリックして【ぼかし】→【ぼかし（ガウス）】の順で選択します。

今回は0.9ほどかけました。プレビューを見ながらお好みで調整してください。

Photoshopライブエフェクトをかける

次に【プロパティインスペクタ】から【フィルタ】横の【+】をクリックして【Photoshopライブエフェクト】を選択します。
ベベルとエンボスにチェックを入れ、図のように設定します。

グラデーションの掛け具合を調整する

オブジェクトを選択するとハンドルが表示されます。これを動かしたり伸ばしたりするとグラデーションの具合を変更することができます。オブジェクトの場所や背景画像とのなじみを考えて調整します。

クローンで量産する

オブジェクトを選択した状態で、メニューの【編集】から【クローン】を選択します。

コピーをたくさん作り、拡大縮小ツールで大きさを調整して配置します。

描画モードを変更してみる

場所によっては【描画モード】を【反射】にするとよりそれらしい質感に見えます。

完成！

以上、Fireworksのおもしろいグラデーション、【波動】を使ったデザインレシピでした。

アイデア次第でいろいろと使えるグラデーションだと思いますので、ぜひ一度使ってみてくださいね☆

完成ファイルダウンロード

完成ファイルのダウンロードはこちらからどうぞ♪

それでははじめます☆

新規カンバスを開く

新規カンバスを開きます。今回は600px×400pxとしました。

長方形ツールで画面いっぱいの長方形を描く

長方形ツールで画面いっぱいの長方形を描きます。ツールから長方形ツールを選択して長方形を描画します。

パターンで塗りつぶす

描画した長方形をパターンで塗りつぶします。【プロパティインスペクタ】から塗りの種類で【パターン】を選択し、プルダウンから【ブルーペイント】を選択します。

このように適用されます。

フィルタメニューから色味を変更する

フィルタ効果を使って色味を変更します。【プロパティインスペクタ】の【+】マークをクリックし、【カラーを調整】→【色相・彩度…】を選択します。

色相・彩度の値を設定する

今回、このように値を変更し、黄色にしました。

オブジェクトをコピーして、色相・彩度を変える

オブジェクトを選択したままの状態で【⌘（control）】+【Shift】+【D】を押して複製を作ります。

複製したオブジェクトを選択した状態で【プロパティインスペクタ】の【色相・彩度】をダブルクリックします。

【色相・彩度】のパネルが開きますので、図のように値を調整し、緑色にします。

描画モードを変更する

緑色のオブジェクトを選択した状態で【プロパティインスペクタ】から描画モードを【焼き込み（カラー）】に変更します。緑色のオブジェクトが焼き込まれ、図のような茶色に変化します。

お好みの濃さに微調整

2つのオブジェクトの重なりをずらしたり、オブジェクトの透明度（上の画像で71となっているところの数値を調整）を変更したり、ハンドルを動かしてパターンの掛かり具合を調整するなどしてお好みの具合に調整してください。

長方形ツールで長方形を描く

フチにさらなる焼き込んだイメージを作るため、長方形ツールで長方形を描画します。

グループを解除する

描画したオブジェクトを右クリックして【グループ解除】を実行しておきます。

パス領域変形ツールを使ってパスを変形する

パス領域変形ツールを使ってパスを変形していきます。図の位置を長押しすると切り替えられます。

【プロパティインスペクタ】からサイズや強さを調整します。今回は図のように調整しました。

長方形のパスを選択した状態でこのツールで線をなぞっていくと、パスをこのように変形させることができます。

描いた長方形を拡大して、ストロークの太さを調整する

ランダムなパスにし終わったら【⌘（control）】+【T】を押して拡大・縮小ツールに切り替えてはみ出すように配置します。
ストロークの太さを67とし色は#000000、塗りはなしにしています。

ぼかして描画モードを変更する

【プロパティインスペクタ】から描画モードを【オーバーレイ】に変更します。
次に【プロパティインスペクタ】横の【+】をクリックし、フィルタメニューから【ぼかし】→【ぼかし（ガウス）】を選択します。値はお好みで調整してください。

文字を入力して重ねる

テキストツールで文字を入力し、【⌘（control）】+【T】で回転させます。

描画モードを変更する

テキストの描画モードも【オーバーレイ】に変更します。

フィルタメニューでぼかす

このままでもよいのですが、今回は【プロパティインスペクタ】横の【+】をクリックし、フィルタメニューから【ぼかし】→【ぼかし（ガウス）】を選択してオブジェクトをぼかします。

コピーして貼付け

このままだと薄いので【⌘（control）】+【Shift】+【D】で同じ位置にコピーします。こげたような質感になりました。

完成！

文字をコピーしてたくさん配置してみました。

こんな感じで完成です！

完成ファイルのダウンロードはこちら

今回のポイント

今回のポイントは3つ。

• 既存のパターンを【色相・彩度】を変えて使い回す
• 描画モードを変更して重ねてみる
• パス領域変形ツールを使ってパスを変形してみる

です。

特に「パス領域変形ツール」は今回はじめてご紹介したのですが、なにかと使える便利なツールです。
ぜひ特性を覚えて、活用してみてくださいね！

こんな感じの風船が簡単に描けますよ☆

楕円を描く

楕円形ツールを使って描画します。

ツールから[楕円ツール]で楕円を選択します。

図の場所に長方形ツールが表示されている場合は、長方形ツールを長押しして楕円ツールに切り替えます

風船の色を設定

プロパティインスペクタから色を調整します。

塗りの種類は[ベタ塗り]で色はお好みの色で着色してください。

フィルターで立体感を表現する

次にフィルターを追加して、風船の立体感を出していきます。

フィルター：横の［+］をクリックして、［Photoshopライブエフェクト（WinはPhotoshopライブ効果）］を選択します。

ベベルとエンボスを選択し、深さとサイズの値を調整して風船の立体感を出していきます。

こんな感じになればOKです。

より立体的に見せるために、光と影を表現する

次に風船の質感を表現していきます。

風船に当たっている光と影と、風船の結び目部分を作成します。

必要なパーツは3つです。

こんなかんじ。

パスツールで簡単にこの形がかける人は、パスツールで描画してください。

パスツールが苦手な方は、以下の方法で簡単に描くことができます。

パスツールを使わずに自動シェイプのみでパスを書く

ツールから［楕円ツール］で円を2つ描きます。色は何色でもかまいません。

上になる円は図のように少し長細く描き、重ねます。かさねたら［Shift］キーを押しながら2つまとめて選択します。

パスパネルで型抜きする

パネルから［パス］パネルを表示し、パスの型抜きをクリックします。

上になったオブジェクトで型抜きされるため、このような形のパスオブジェクトになります。

光の部分のオブジェクトも同様にして作成します。

楕円ツールで円を2つ描いて、重ねます。

この円は同じ大きさのものが好ましいので、ひとつ描いたらコピー＆ペーストして複製し、上になっている丸を右に図のようにずらします。先ほどと同じようにパスパネルで型抜きします。

次に長方形ツールで図のように長方形を描き、重ねます。

パスパネルで型抜きします。

下の方も同様に長方形を重ねて

型抜き。

このような形ができました。

風船の結び目？の部分は曲線がないので簡単です。

もうパスツールでてんてん…と4カ所クリックして図のように描いてください。

ここまで形ができたらあとは風船のオブジェクトにあわせて微調整。

描いた図形の調整は、ダイレクト選択ツールでアンカーポイントをクリックして、表示されたハンドルやポインタを動かして調整します。

こんな感じで配置します。

塗りの色は光の部分を#FFFFFF（白）、影の部分を#000000（黒）とし、
風船の口の部分は、風船本体の色の一番濃いところをスポイトでとって着色してください。

ぼかしをいれる

光と影のパーツにぼかしを入れます。

オブジェクトをクリックして選択状態にし、［プロパティインスペクタ］のフィルタから［ぼかし］→［ぼかし（ガウス）］を適用します。

ぼかしの量を調整します。

プレビューにチェックを入れ、スライダーを動かして値を調整します。

だいたいこれくらい感じになるように調整してください。

描画モードを変更する

描画モードを変更して、オブジェクトをなじませます。

［プロパティインスペクタ］から描画モードを変更します。

図の場所のプルダウンから［オーバーレイ］を選択します。

光の部分も影の部分もどちらも変更します。

不透明度を調整する

オブジェクトの不透明度を設定します。

左から風船の光の部分、風船の影の部分、風船の本体部分の設定値です。

これも値はプレビューを見ながら適宜調整してください。

本体の不透明度を変更すると、こんなふうに重ねたときにほんのり透けてより風船っぽくなります！

風船の色を変えるときは、風船本体と風船の口部分のみ色を変えればOKです。

影の部分はそのまま出よいのでラクチン！

こんな感じでたくさんカラーバリエーションがつくれます。

ハートの風船

ハートの風船は、［自動シェイプ］パネルからハートのオブジェクトをドラッグして描画します。

光と影の部分は、光2カ所、影1カ所の計3カ所。

こちらの影も、

こんな風に丸と長方形を重ねて

型抜きすれば半月見たいなオブジェクトが作れます。

あとは先ほどと同様の手順でダイレクト選択ツールで微調整。

風船の糸

風船の糸はストロークで表現しました。

ツールから［ペンツール］を長押しして、［ベクトルパスツール］に切り替えます。

［ベクトルパスツール］ですっと直線を書きます。

線の種類は、クレヨン→基本と設定しました。

フィルタから［シャドウとグロー］→［ドロップシャドウ］でほんのちょっぴり影をつけました。

糸をつけたらこんな感じ

これで完成ですー！！！

一番ポイントは、ものをしっかり見て観察すること

いかがだったでしょうか？

光りと影を意識するとぐっと本物っぽくなります。
いろんなものをじーっと観察していろいろ作ってみてくださいね☆

いろんな図形を差し引きして、原型を作ろう

また、ペンツールを使わなくても、Fireworksの豊富な自動シェイプとパスの結合や型抜きなどをうまく組み合わせればさまざまな形状を手軽に描くことができます。

ペンツールが苦手で…という方もぜひいろいろ試してみてくださいね！

なお、書籍のほうでもいろんな型抜き＆結合の方法を紹介しています。

Fireworks本、本日発売になりました☆

Fireworks本が今日、ついに発売となりました！

早速今日本屋さんで店頭に並んでいるのを見てきました…

感動しました（笑）

書店で見かけた際にはぜひパラパラと眺めてみてくださいね！

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

お久しぶりの更新です！

さて、今日はこんな感じのアメコミ風デザインをFireworksで簡単に作る方法をご紹介します！

完成ファイルとアメコミ風の色のスタイルのダウンロードもできますよ☆

それでははじめます☆

構成要素

今回のサンプルは以下のようなオブジェクトで構成されています。

ほぼ自動シェイプで描いたものを変形させたり組み合わせたりして作ります。

それぞれのオブジェクトの作り方

それぞれのオブジェクトの作り方を説明します。

吹き出し

これはツールから【楕円ツール】を使って描いた楕円と、【ペンツール】を使って描いた三角形を組み合わせて描画します。
（※このときの塗りや線の色や種類はなんでもかまいません）

三角形は【パスツール】にしたら画面上で頂点にしたいところを3点をぽちぽちぽちとクリックしてください。三角形が描けます。

楕円と三角形が描けたら、重ねて置きます。

【shiftキー】を押した状態で三角形と楕円をクリックして、2つのオブジェクトとも選択状態にします。

次に【パネル】から【パス】パネルを表示します。

パスパネル内の【パスの合体】をクリックすると、パスが合体して1つのオブジェクトになります。
これで吹き出しの完成です。

こちらも同じく楕円ツールで描画したオブジェクトを【パス】パネルから合体させたもの

ポイント：ストロークの位置

Fireworksではストロークの位置揃えを内側、中央揃え、外側の3つの中から選ぶことができます。

（CS5以前のバージョンはストロークを編集ボタンから指定できます）

それぞれ角の処理が図のように異なります。

この形の場合は外側とするのがよいかと思います。

パンクマーク

これはFireworksマニアではおなじみの、便利な便利な星ツールを使って描画します。

星ツールを使ったパンクマークの書き方がわからない方はこちらの記事を参考にしてください☆

Fireworksの星ツールで書けちゃう、星以外の模様いろいろ

ツールの【拡大・縮小ツール】を長押しすると切り替えられる【変形ツール】を使えばこんな感じで動きのあるパンクマークに簡単に変形させることができますよ☆

袋文字の作り方

次にこんな感じの動きのある袋文字を作ります。

テキストを入力

まずテキストツールでテキストを入力します。

塗りと線の設定

塗りはお好きな色で、線はなしに設定します。

フィルターを適用する

次にフィルター効果をかけていきます。

【プロパティインスペクタ】からますはPhotoshopライブエフェクトを設定します。

Photoshopライブエフェクトを適用する

ストロークを以下のように設定します。塗りの色は#000000です。

オブジェクトの線を使用しない理由

オブジェクトの線でも袋文字はできるのですが、オブジェクトの線を使用した場合、フォントサイズが小さい文字（12px以下ぐらい）に線を適用すると文字が乱れてしまう現象が起こります。

今回の文字サイズぐらい大きければ線を使用しても問題ないのですが、この方法で作ってスタイル登録すれば使い回しができるのでこちらの方法を紹介しています☆

ソリッドシャドウを適用する

こんな感じになりました。

動きのある形に変形させる

変形ツールを使って動きのある形に変形させます。

ツールから【拡大・縮小ツール】を長押しして【変形ツール】に切り替えます。

黒いハンドルを自由に動かすことができるようになりますので、動きのある形に変形させます。

今回は右に行くにつれて大きくなっていくよう変形させました。

それぞれのオブジェクトのテクスチャと塗り、線を適用する

それぞれのオブジェクトに塗りや線、テクスチャを適用していきます。

塗りの色について

アメコミの独特の配色ってどうやって生まれたんだろう？？と思って調べてみました。

どうやらこれが起源のよう。

アメコミ業界では三原色の色の濃さを100%,50%,20%の3種類に限定し、
境界線には黒インクを使っている

派手な現職とシンプルで力強い輪郭線をザラ紙に刷ったもの点これはやがてアメリカンコミックスの代表的なスタイルになっていった
 

出典：マンガ学―マンガによるマンガのためのマンガ理論（書籍）

なるほどー。

ということで、それにそってCMYKでCMYをそれぞれ0%,20%,50%,100%の4パターンで組み合わせた全64色のスタイルを作ってみました！

アメコミっぽい！（気がする）

よりアメコミっぽくするために黒い線が引かれるようにしています。

ページ下のダウンロードボタンからダウンロードできますので使ってみてくださいね！

ちなみにスタイルファイル作るときに失敗してしまって、ひとつ変な順番になっちゃってピンクが一番最後になっちゃいました＞＜

ごめんなさい＞＜

テクスチャについて

スタイスファイルにはテクスチャは適用していないので、

スタイルクリックで塗りの色と線を設定した後、テクスチャを指定してください。

デフォルトのものでも斜線やドットなどそこそこ使えるものが入っているのですが、シンプルパターン研究所にもアメコミに使えそうないろんなテクスチャを置いているのでよかったらそちらもどうぞ☆

シンプルパターン研究所

完成したのがこちら！

アメコミ風デザインの完成です！

完成ファイルはダウンロードファイルの中に入っています☆

サンプル＆スタイルファイルダウンロード

サンプルデータとスタイルファイルのダウンロードは以下のダウンロードボタンからどうぞ♪

スタイルファイルの読み込み方はについてはこちらの記事をご覧下さい。

おまけ

線の色を黒ではなく違う色にしてもポップな感じでかわいいです♪

いろいろお試しくださいねー！！

最後に

Fireworksの本を書きました！

12月7日に発売になります。

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

Fireworksはじめての方から、使っているけどまだ使いこなせていない気がする方まで楽しんでいただける1冊になったと思います♪書店や図書館などで内容をみていただければうれしいです☆

Fireworksのよさがもっと多くの人に伝わりますように…！！

本の内容については以下のページにまとめているのでよろしければそちらもご覧下さい☆

それもひとえにサイトに足を運んでくださった皆さんのおかげです。

本当にありがとうございました！

1周年の記念日に募集を開始するつもりがすっかり過ぎてしまいましたが…。

1周年記念企画を開催します！

第1弾はこのサイトがきっかけで書かせていただくことになった、12月7日に発売になるこちらのFireworksの本のプレゼント。

2名様にプレゼントします^^

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

ご希望の方がいらっしゃいましたら、よかったら以下のフォームからご応募くださいね。

締め切りは12月4日 24:00です。

当選者の方には12月5日中にこちらからメールにて折り返しご連絡させていただきますので、gmailからのメールが受信できるメールアドレスでご応募下さい！

ご応募は閉め切りました。
たくさんのご応募ありがとうございました！

当選者の方には12月5日中にご連絡致します。

ご応募お待ちしております^^

なお、すでに予約した！！という方ごめんなさい＞＜

本当にありがとうございます！

1周年記念企画、第2弾として、本を買っていただいた方だけにご覧頂ける、12月限定のレシピやスタイルダウンロードなどの公開を計画しているので、そちらをお楽しみ頂けますとうれしいです^^

2つのオブジェクトを重ねて様々な質感を出したりすることも多いと思うのですが、
シンプルなボタンならボタンのベースはできるだけ1オブジェクトで作っておくと、
サイズ変更があったときもあっという間でラクチンですよね♪

今回はあると便利なカラフルなボタンスタイルを用意してみました。

シンプルなので、モックアップ作成のときなどにも便利ですよ♪

ボタンスタイル＆サンプルのダウンロードはこちらから

サンプルファイルとスタイルファイルのダウンロードはこちらからどうぞ

スタイルファイルの使い方がわからない方はこちらのエントリーを参考にどうそ

色相・彩度の調整を使えばもっと作れるカラーバリエーション

また、モノクロでベースを作って、
フィルタメニューの色相・彩度でカラーバリエーションを作っていますので
これ以外のカラーも簡単に作れます。

初心者のうちは単色系のグラデーションを作る時、
例えば薄いブルーと濃いブルーの色選びが難しく、
違和感のあるグラデーションしか作れない場合がありますが

この方法でモノクロのボタンからカラーカラーバリエーションを作れば
だれでも確実にきれいなカラーグラデーションが作れます。

色相・彩度の変更を使ってのカラーバリエーションの作り方はこちらをどうぞ

角丸長方形ツール活用術

ベースの形ですが、サンプルファイルではすべて
【角丸長方形】のオートシェイプで描いています。
リサイズも楽々です。

ちなみに角丸長方形ツールは、
四隅の黄色のポイントをクリックすると形状が変えられるので
かなりいろいろなバリエーションが作れます。

ドラッグすると丸みなどの値が変更でき、クリックすると形状が変更できます。

またShiftキーを押しながら四隅のどれでもよいので一度クリックすると、4隅の関連のロックが解除され、
それぞれ四隅をバラバラに変更できます。

もういちどShiftキーを押しながら四隅のどれでもよいので一度クリックすると、4隅が同時に変更できるようになります。

サンプルファイルのようにいろいろな形が簡単に作れるので
ぜひ試してみてください！

いろんなものをくぼませてみる

サンプルでは【楕円】のオートシェイプで描いた円をくぼませ、その上に矢印を描いて配置していますが、
【矢印】のオートシェイプを使ってこんな風に矢印をくぼませてみるのも面白いと思います^^

今回のボタンはPhotoshopライブエフェクトのみを使用して作っています。
どのような設定になっているかはここでは割愛しますので、サンプルファイルを確認してみてくださいね。

Photoshopライブエフェクトだけでなく
Fireworksのフィルタをうまく組み合わせれば1オブジェクトでもこんな感じでけっこういろいろな表現が可能です。

他にもこんな感じで、いろんなボタンができます。
すべてベースは１つのオブジェクトです。

また違う種類のボタンスタイルも用意しようと思いますのでお楽しみに☆

今回のポイントは、【回転】と【ヒストリーパネル】の使いこなしです。

追記：@akira_maruさんに、もっと簡単に書ける「オートシェイプが追加できる拡張機能」を教えていただきました！ありがとうございます！
オートシェイプなので、Fireworksで星や矢印を書くみたいに、楽に簡単にかけますよ！
拡張機能でやってみたいかたは以下をどうぞ。

http://fireworks.abeall.com/extensions/autoshapes/

拡張機能をいれたくない、よくわからない、自力で書いてみたい人は以下の手順でどうぞ！
 

【回転】や【ヒストリーパネル】の説明になっていますので、2つの機能の使い方を知りたい方にもおすすめです。
「オブジェクトを複製して回転（変形）させて繰り返す」方法は一度覚えると、応用次第でいろんな形が書けるようになりますのでぜひ練習してみてください！

 

それではどうぞ♪

ラインを描く

まず、ベクトル系ツールの中から、ラインツールを選択します。

shiftキーを押しながら直線を引きます。

複製する

直線を引いたら、この線を複製します。

このラインを選択した状態で

編集メニューから【クローン】

（ショートカット　shift + control(command) + d）

もしくは普通に右クリックしてコピー、ペーストを行います。

（ショートカット　control（command）+ v ,control（command）+ v）

FireworksはIllustratorと違って、普通にコピー&ペーストするとコピーしたオブジェクトと同じ位置にコピーしてくれるのでコピペでも大丈夫です。

回転させる

変更メニューの【変形】→【数値を入力して変形】をクリックします。

【回転】を選びます。

今回は傾きを10としました。これが大きければ大きいほど線の幅が太くなります。

10°回転された線ができました。

2つを組み合わせて塗りを作る

ペンツールに持ち替えます。

線の端を順番にクリックしていきます。

このようにパスが閉じました。

現在【線】のみ適用されていますので、線なしで黒で塗りつぶします。

これを回転させる

先ほどと同様に変更メニューの【変形】→【数値を入力して変形】をクリックします。

【回転】を選び、角度を20°としました。

ここで入力する数値は、360を余りなく割り切れる整数で、かつ２の倍数の数値にします。

(10,20,30,40,60,90など)

そうしないと放射線の間隔があわなくなります。

20°の傾きで回転されました。

ヒストリーパネルを使って簡単に繰り返す

これを繰り返していくのですが、これにはヒストリーパネルをつかうと便利です。
これまでの履歴が残っていますので、コピー、ペースト、変形の３つをshiftキーを押しながら選択します。

選択し終わったら【再実行】をクリック。

再実行を押すたびにひとつ羽が増えます。

円になるまで繰り返します。

これであっというまに放射状の柄を書くことが出来ました！

パスオブジェクトなので拡大・縮小も自由自在です。

拡大して画面いっぱいに広げました。

バリエーション

色をつけてテクスチャをつけたり

線ををつけてみてもおもしろいかも。
線の種類【クレヨン】で白い線を引きました。

↓もちろん線だけでもできます。

いろいろ試してみてくださいね！

こんな感じのデザインの作り方を解説してみたいと思います☆
カンバスを開いてガイドをかくところから説明していますので、Fireworksはじめての方でも大丈夫だと思います！

よさげな写真が撮れたので

作ってみました。

今回の見どころは、ヘッダーの装飾に使っているツイストアンドフェードで作ったオブジェクトです。

面白い機能なのでぜひ使ってみてください！

以下のステップで説明しています。

1. カンバスを開く
2. 作業用ガイドを引く
3. 背景を配置する
4. ツイストアンドフェードで装飾パーツを作る
5. 光を描く
6. コンテンツの背景ボックスを描く
7. タイトルロゴを作る
8. グローバルナビゲーションを作る
9. コンテンツを描く
10. 完成！
11. バリエーションアイディア

それでははじめます☆

カンバスを開く

両サイドに向かって背景が消えていく感じのデザインを作りたいので、
1600px × 1400pxと横幅大きめのカンバスを開きます。

背景は黒（#000000）に設定します。

作業用ガイドを引く

作業用ガイドを引いて作業しやすくしましょう。
上と左にある定規をクリックしてドラッグするとガイドラインが引けます。

ガイドラインは、キーボードショートカット【control（command）】+【 ; 】で表示非表示を簡単に切り替えられます。
覚えておくととても作業しやすいです。

今回ははじめに6本。

背景を消したい位置に印を入れておきたいので、100pxと1500pxのところに縦のラインを、
コンテンツ幅を960pxにしたいと思いますので、320pxと1280pxのところにも縦のラインを入れます。
コンテンツ部分の余白用にさらに内側20pxづつの部分、340pxと1260pxの部分にも縦のガイドラインを入れました。

定規が出ていない場合は上部メニューバーの【表示】→【定規】で表示させることができます。

背景画像を配置する

背景にする画像を配置します。

メニューバー【ファイル】→【読み込み】で背景画像を配置します。

このままだと、背景がスパっと切れてしまっていて黒の背景となじまないので
黒のグラデーションをかけて背景となじませます。

以下の図のように３つの辺を覆うように長方形を長方形ツールを使って書きます。

それぞれの長方形に以下のグラデーションをかけます。

塗りを【グラデーション】→【線形】にして色、不透明度を以下のように設定します。

グラデーションの方向やかかりかたをそれぞれの図形で調整します。

コーディングのことも考えて、最初に引いたガイドラインの範囲内でキレイに消えるようにします。

カンバスを広めにとっているのはきちんと消えているか確認しやすくするためです。

ツイストアンドフェードで装飾パーツを作る

こんな感じの装飾パーツをとっても簡単に作ります。
背景の写真の上に重ねるといい感じになります！

楕円ツールでこんな感じの楕円を書きます。
色はお好みで。あとで変更できます。

メニューの【コマンド】→【クリエイティブ】→【ツイストアンドフェード】で設定画面を開きます。
今回は以下のように設定していますが、ランダムを押していろんな効果を試してみてお好みの効果を出してみるのもよいと思います。

お好みの効果が作れたら設定画面左下の【+】マークで設定を保存できます。

いろんな設定を保存しておくと便利です。
 

この機能で作成した色はあとから簡単に色を変えられます。

色によってこのように同じ効果でもまたがらっと印象が変わるのでいろいろ試してみてください！

ヘッダーに重ねてみました。

今の時点ではわかりにくいですが、このあとのオブジェクトを配置した時に際立ってきます。

光を描く

画像の上にキラキラと光った感じのオブジェクトを書いてきます。

これもとっても簡単です。

楕円ツールでshiftキーを押しながら正円を書きます。

線の設定は

色:#ffffff 線の太さ:2 エッジが柔らかい線（丸）

とします。

この円に２つのフィルタをかけていきます。

プロパティーパネル右下、フィルタの部分から

【ぼかし】→【ぼかし（ガウス）】をかけます。

0.7でぼかしをかけました。

フィルタメニューから【Photoshopライブエフェクト】を選択

【光彩（外側）】で以下のように設定します。

二つのフィルタをかけ終わったら
プロパティーパネル右下レイヤーモードを【オーバーレイ】に変更します。

黒背景の状態だとなにもみえない状態になりますが、背景部分にドラッグするとこのように光った感じの効果がかかります。

この出来上がったオブジェクトをコピーしてリサイズしてバランスよく配置します。
さらに塗りと線を入れ替えたものも配置していきます。

塗りと線の入れ替えはツールバーのボタンで簡単に切り替えられます。

こんな感じに仕上がりました。

コンテンツエリアのボックスを描く

コンテンツエリアの背景ボックスを描きます。

長方形ツールで最初に引いた320pxと1280pxのところガイドラインにあわせてボックスを描きます。
塗りは黒（#000000）で透明度を60にし、フィルタメニューから【シャドウとグロー】→【グロー】で以下のような値で設定します。

この状態だとこんな感じで下の方までボックスが延びていますが、

これも下に向かってフェードアウトするようなデザインにしたいので、上記に記載した背景の時と同様、グラデーションをかけた長方形を置いてフェードアウトするように調節します。

タイトルロゴを作る

塗りを白（#ffffff）でタイプした文字に、プロパティパネルのフィルタから【Photoshopライブエフェクト】を選び、
光彩（外側）を以下のように設定しました。

カラーは黄色にしてほんのり輝くような色に仕上げました。

グローバルナビゲーションを作る

立体感のあるグラデーションボタンも簡単に作ってしまいましょう。

現在のページ用とそれ以外とで2色つくります。

それぞれのグラデーションは以下のように適用します。

次にフィルタをかけて立体感を出します。

プロパティパネルのフィルタから【Photoshopライブエフェクト】を選択します。
【ベベルとエンボス】にチェックを入れ、以下のような値を設定します。

数値はどれも控えめに。
ほんのりかかるぐらいがきれいです。

コンテンツ部分を作る

長方形ツールや楕円ツールを使ってコンテンツ部分を書いていきます。

特に難しいテクニックは使っていないので詳しい説明は割愛します。

完成！

バランスよく配置したら完成です！

バリエーション例

背景写真をPHOTO STOCKERで配布している夜景加工写真に入れ替えてみました。
背景の入れ替えとキーカラーの変更だけでかなりイメージが変わるのでいろいろバリエーションも作れると思います！

今回のポイントはツイストアンドフェードと、レイヤーモードをオーバーレイにして配置した光の輪っかです。

ちょっとしたPhotoshopっぽいことならFireworksでもこんな感じで簡単にできて、あとで色変更も出来ます。

（あとから色変更が利くのがとても便利です…！！！）

↓こんなのも楽々。

ぜひいろいろと試してみてくださいね♪

久々の更新ですみません…私は元気です！

最近、アメブロ界隈のコミュニティーに興味があって、
どんなものなのか知りたくてアメブロをちょっとはじめてみました☆

アメブロ用にデザインを作ったので、
今日はそのデザインの作り方を解説していきたいと思います☆

どのパーツも少ないステップ数であっという間にできますのでぜひ試してみてくださいー！

カンバスの準備

まず新規ドキュメントを開きます。

今回は1200ピクセル×1200ピクセルのカンバスサイズで開きました。

背景の描画

画面を覆うように長方形ツールで四角を描きます。

色は#FFEACBにしました。

これにうっすらと見えるか見えないかぐらいの質感を与えます。

【テクスチャ】で木目を67%でかけます。

すごーく拡大するとテクスチャが当たっているのがわかるぐらいです。

ヘッダー部分のパーツ作成

次にヘッダー部分を作り込んで行きます。

茶色の破れたような表現部分

まずはページ上部の紙の破れたような部分です。

この部分は上部の茶色の部分をがたがたにし、内側に影をつけることによってベージュの紙が破れているように見えるようにします。

【パスツール】を長押しして【ベクトルパスルール】に切り替えます。
【ベクトルパスツール】でガタガタっと線を引いていきます。

破れたような質感にするためにわざとガタガタさせます。

※この時点でのストロークの種類はなんでもよいです。あとで変更します。
塗りはなしにしておいたほうが見やすいと思います。

ほどよいがたつきの線が引けたら【ベクトルパスツール】を長押しして【ペンツール】に持ち替えます。

ペンツールで長方形の形に点をつけたしていきます。

長方形になったら以下のように色をつけていきます。

塗りの色は #4B2627
ストローク（線）の色は #3D0000

ストロークの種類は【クレヨン】→【基本】

透明度を 66%とし、

内側にうっすらとシャドウをかけます。

レースのような飾りパーツ

レースのようなパーツを書いていきます。
これは以前に紹介したように星ツールを使って書きます。

詳しくはこちらのエントリーをどうぞ。

Fireworksの星ツールでつくる、星以外の形いろいろ

わかりやすいように塗りを黒にして書いています。
白に変えて配置します。

タイトルのパーツ

次にタイトルの部分です。

【ペンツール】を使い、点をランダムに四点打ち、四角を書いていきます。

それぞれに色、テクスチャ、透明度を設定していきます。

今回は5パターン作りました。

それぞれスタイル登録して、他の文字の背景にも使い回します。

スタイルの登録方法がわからない方は
Fireworksでさくっと縫い目を表現する方法の最後の方で解説していますのでそちらをどうぞ。
 

丸いふわっとしたパーツ

丸いふわっとしたパーツも【ベクトルパスツール】でまるーく描きます。

お洋服や帽子のイラスト素材の加工

お洋服等のイラスト素材はハンコでアソブさんのフリー素材を使用させていただきました。
商用利用もOKのPNG素材を配布してくださっているサイトさんです。とってもかわいくておすすめ！！

黒のデータなので、【フィルタ】→【色相・彩度】で色を調整します。

色相・彩度の調整方法について詳しく知りたい方はFireworksで表現する シンプル＆カラフルな布の作り方を参照してください。

破線を引く

破線を引いて行きます。

プロパティは以下の通り。

破線の設定がよくわからない…というかたはFireworksでさくっと縫い目を表現する方法を参考にどうぞ

ドットの破線

細い破線

ボックスを書く

ボックスを書いていきます。

ほんのり影をつけます。

影の色は#000000にして、透明度を調整するようにすると自然な影がつけられます。

ボタンを作る

ボタンを作っていきます。以下のように設定しました。

線を3pxの白にテクスチャにメタルを25%で使用しています。
こちらもほんのりとグローをかけました。

色は#000000です。

こちらのボックスも以下のように設定します。

メニュー見出し

メニューの見出しを作ります。

それぞれ色を変え、テクスチャに砂壁を15%でかけています。

できあがり

ぜーんぶあわせたら完成です！！

コーディングして、こんな感じに仕上がりました。

どのパーツもとっても簡単な手順でできますのでぜひ試してみてくださいね♪

ちなみにアメブロはこちら。
http://ameblo.jp/yuki-930/

アメブロ界隈で学んだことや、あとは適当にだらだらと毎日のことを書いていこうかと思っています。

アメブロ詳しいかた、よかったらいろいろ教えてくださいませー！

効率よくデザインを進めるには、適材適所でツールを使い分けることが大切です。

Photoshopが得意なところはやっぱりPhotoshopに任せた方が効率が良いですよね。

Fireworksマニアでは、Fireworksの優れた機能の紹介に加え、ここはこっちのツールの方がいいよ！というTipsも掲載していきたいと思っています。

第一弾は、バラバラに撮影した写真をパノラマ風に一発で合成できるPhotoshopのPhotomergeという機能をご紹介します。

この機能はCS3以降搭載されています。

Photoshop CS3以降を持っていないWindowsユーザーの方へ

Microsoft Image Composite Editor (ICE)というフリーソフトでも同様のことができるそうです。
Photoshop CS3以降を持っていないWindowsユーザーの方はこちらをどうぞ！

↓こちらのページが詳しいです
複数画像をドロップするだけで簡単にパノラマ画像が作れる「Microsoft Image Composite Editor (ICE)」 – TERRAZINE

先日東京に行って、スカイツリーを撮ってきました。

大きな被写体なので、狙ったポイントからはかなりの広角レンズを用意しておかないと、一枚にはおさめられないサイズでした。

そこで、こんなふうに細切れに撮影してきました。

Photoshopを使えば、これを一発で合成して１枚の画像にしてくれます。

必要な画像を開きます。

【ファイル】メニュー→【自動処理】→【photomerge】をクリック

このような画面が開きます。

【開いているファイルを追加】を選び、ファイルを追加します。

左のレイアウトの中から希望の調整方法を選びます。
撮った写真のアングル等によっても変わってきますので、いくつか試しながら写真にあった設定を探してみてください。

↑位置の変更のサンプル

↑球面法のサンプル

今回は球面法で行いました。

なんと、これで完成です。

一緒に、出来上がった画像の傾きを直す方法も一緒にご紹介したいと思います。

これには【ものさしツール】を使います。

【スポイトツール】長押しで【ものさしツール】が出せます。

このような感じで【ものさしツール】を使って直線を描きます。

【イメージ】→【画像の回転】→【角度入力…】を選択します。

すると【ものさしツール】を使ってひいたラインを水平、もしくは垂直にするための値が自動的にセットされます。

値を変更せずにそのまま【OK】を押します。

これで角度の修正ができました。

まっすぐにした後は、必要な範囲を【長方形選択ツール】で選択して、【イメージ】メニュー→【切り抜き】

これできれいなパノラマ写真の完成です！

位置調整などの重要な部分の作業をPhotoshopが自動的にやってくれますので、画像の色味さえあわせておけばとーーーっても簡単にパノラマ写真ができます。

もちろん横でもOKです。

これはFireworksにはできないことなので、こういう写真の加工はPhotoshopにまかせると作業時間が短縮できてよいのではないでしょうか^^

Photoshopをお持ちの方は試してみてくださいね！

縮小した画像の解像度を下げてくれるので、ファイルサイズも適切に小さくなるので、よい面もあるのですが、デザイン作業中でまだその画像をどの大きさで出すか決まりきっていない場合など、拡大すると画質が悪くなってしまい、再度張り込み直すという作業が発生してしまい、大変不便な場合があります。

まずこちらをご覧下さい。

おなじ画像を2枚張り込んでいます。

一枚を縮小し、確定させました。
（この時点で画像の再サンプリングが行われ、このサイズに適した解像度に変更されています。）

同じ大きさに拡大しました。
左側の画像の画質が悪くなっています。（クリックで画像拡大します）

そんなとき、オブジェクトの「シンボル化」を使えば、このような画質の低下をさけることができます。

右側の画像をシンボル化してみます。

シンボル化したいオブジェクトを選択して右クリック→シンボルに変換

このような
画面が開きますので、【グラフィック】を選び、【OK】を押します。

先ほど度同じように、拡大縮小してみます。

同じように縮小して

拡大しました。

シンボル化した右の画像だけ、きれいな状態を保っています。（画像クリックで拡大します）

サイズ変更をする可能性のある画像は【シンボル化】で画質を維持できます。

ただし、なんでもそのまま画像をシンボル化すればいいというものではありません。
Fireworksでは張り込んだ画像をリンクファイルとしてではなく、そのドキュメント内に保存します。

そのため、あまりに解像度の高い状態でシンボル化してしまうと、PNGファイルの容量も大きくなり、動作も不安定になってしまう可能性があります。

ですので、例えば3000pxもありそうなデジカメ撮影データを開いてそのままシンボル化したりするのではなく、これ以上拡大することはないだろう…という大きさまで縮小したあと、画像をシンボル化して使用することをおすすめします。

上手く使い分けで、効率よく作業を進めてくださいね！

今日はちょっとだけ出演させていただくイベントの告知をさせてくださいー！＞＜

今月2月19日にWordCamp Fukuoka 2011、 来月3月5日にCSS Nite LP, Disk 14 「Photoshopper meets Fireworks」に出演させていただけることになりました…！

WordCamp Fukuoka 2011

昨年も大好評だったWordCamp Fukuokaが今年もやってきました！
こちらは福岡での開催です。
参加費は一般1,000円、学生さんは無料となっています。

WordPressのイベントなのですが、
今回、WordPressの話だけでなく、本当に多彩なセッションが予定されています。

私も昨年に引き続き、お話しさせていただく機会をいただきまして、 今年は20分のショートセッションを担当させていただきます。

去年はテーマの作り方の基礎の基礎ををざっくりとお話しさせていただいたのですが 今回は、WordCamp Fukuoka 2011のデザインとテーマ作成をさせていただいたので、 そのテーマファイルをベースに、もうちょっと細かい部分もお話しできればなと思っています^^

現時点で200名を超えるお申し込みがあります。

福岡でこんなに一度にWeb関係の人が集まることってあまりない機会なので、いろんな人にあえる！というだけでも収穫のあるイベントなんじゃないかなーと思っています☆

WordPressを知ってる人も、知らない人も、WordPressに興味がある方も、興味すらないかたも（笑）ぜひお越し下さいね☆

詳しくはWordCamp Fukuoka 2011のサイトをご覧下さい

CSS Nite LP, Disk 14 「Photoshopper meets Fireworks」

こちらはFireworksに焦点をあてたイベントです。 東京での開催です。

今回のイベントはFireworksをこれからはじめてみよう！という方にも、 すでに使っているという方にもおすすめのイベントです。

新しい発見と驚きがあるセッションがたくさんあります！ 私もとっても楽しみです…！！ こんな内容のセッションが予定されています♪

• Fireworksビギナーのためのセッション
• Photoshopユーザーがつまずきがちなポイント
• PSD取り込み、PSD書き出しのコツ
• FireworksマニアLIVE
• Fireworksでのキーボードショートカットの使いこなし
• フォーム系の共有オブジェクトの活用
• バッチ機能（たくさんのドキュメントの自動処理）
• モバイルサイト制作におけるFireworksの活用
• ページ機能をPhotoshopのレイヤーカンプのように利用
• PhotoshopのカスタムブラシをFireworksで利用する
• Illustratorのライブカラーを使ってカラバリ
• コーダーさんはまずここをおさえておこう！
• FireworksにおけるスライスのTips & Tricks
• 拡張機能でFireworksを便利にする

私は『FireworksマニアLIVE』というセッションを担当させていただきます。

このサイトでご紹介しているものや、まだご紹介していない様々なTipsを使いながら ライブでトップページカンプを作り上げていくセッションです。

私はIllustratorもPhotoshopもFireworksも使いますが、 WebデザインはほぼFireworksで作っています。

こんなサイトを作って、Fireworksめっちゃ押してる私ですが、 正直、ソフトなんてなんでも好きなもの使っていいと思うんです。

自分が使いやすいと思うもので… ただ、私がWebデザインをするときFireworksを使っているのには理由があります。

私がどうしてWebデザインをする時Fireworksを使うことが多いのか、 Photoshopを使う場合もあるが、どういう風に使い分けをしているか？ などそのあたりもきちんとご紹介しながら進めていければと思っております。 がんばります！！！！

めったにない東京行きの機会なので、 いろんな方にあえるのを本当に楽しみにしています！！

なお、こちらのイベントは2月5日まで早割で割引があります！ ぜひお早めにお申し込みをー！！！！

詳しくはCSS Nite LP, Disk 14 「Photoshopper meets Fireworks」のサイトをご覧下さい。

どちらもイベントも精一杯がんばりますので どうぞよろしくお願い致します^^

みなさまにお会いできるのを楽しみにしております♪

告知にお付き合いいただき、本当にありがとうございました。

それではまた☆新たなTipsでお会いしましょう♪

他にもこちらの刺繍文字の作り方や縫い目を表現する方法もストロークの活用例です。

このように、Fireworksを使っていく上でストロークの使いこなしは絶対にはずせません…！

今後もストロークを活用した表現方法をいろいろとご紹介していこうと思っているのですが、その前に今日は、Fireworksに初期登録されているストロークの一覧を作成してみました。

眺めて見ると、いろんなものが作れそうな気がしてきませんか？？^^

こうやってあらためて一覧にして見ると、不思議な名前のストロークがいっぱいありますね…w

ストロークは自分好みに細かく調整することができるので、
自分好みのストロークを色々作って保存したり、わかりやすい名前にして保存したり…というのアリですよー！

Fireworksマニアでは今後も引き続きさまざまなストロークを使った表現手法をご紹介していきたいと思っています。

お楽しみにー！

いつもFireworksマニアをご覧頂きありがとうございます♪

今日は、ストロークを使いこなそう！第一弾☆です。

Fireworksのストロークを使って、ふわふわの雲を簡単に描く方法をご紹介します。

今日のは1分でできます。

1分でできるのに、チュートリアルを書くのには1時間もかかりました…（笑）

アレンジ次第でこんなふうに雲文字などもできますよ！

ぜひ覚えてみてくださいね！

まずは新規ドキュメントを開きます。
背景はお好きな色でかまいません。
雲を描いていくので、今回の背景色は水色の#5FC0D6にしてみました。

雲は、ベクトルパスツールを使って描いていきます。
ツールバーの中のペンツールを長押しして、ベクトルパスツールを選びます。

ストロークの種類を設定します。

プロパティパネルから【特殊ペン】→【ソフトドット】を選択します。
※バージョンによって名前が異なります。mac版CS3では【もこもこエイリアン】という名前でした。

名前は違ってもかならずありますので、このもこもこっとしたストロークを選びます。

ぐりぐりーっと好きに書きなぐります。

パスで描くので後から微調整も簡単です。

線の太さはお好みでいろいろ試してみてください♪

好みの形に調整したら完成です！

簡単にもほどがありますね！

サンプルで、架空の空のキャンペーンを想定したサイトのヘッダーイメージを作ってみました。
こちらもすべてFireworksです。

赤いリボンは、ストロークの【カリグラフィペン】→【リボン】を使って
同じようにベクトルパスツールで描いたものです。

ヘッダーやバナーに使えそうではないですか？？^^

ぜひ試してみてくださいね！

Fireworksに最初から搭載されているテクスチャの一覧です。

バージョンやWin版、Mac版などによってまちまちなのでわかる範囲でバージョンごとの名前を入れています。

このパターンたちは、背景などに使えるだけでなく、
以下のTipsでもご紹介しているように、質感の表現にも使えます！
工夫次第でいろいろアレンジできますよー！

• Fireworksで簡単にかわいいマスキングテープを作ろう！
• Fireworksで書く、本物の刺繍のような文字の作り方
• Fireworksで簡単にフェルト風アイテムを作る方法

↑すべて、最初から入っているテクスチャでできますよ♪

ただ、これも使っていると、
もう少し間隔の広いボーダーがあればいいのに…
もうすこし大きなドットが欲しい…
といったように、もっといろんな種類が欲しくなってくるので、
自分好みのテクスチャを作れるようになるとより表現の幅が広がってGoodです！

テクスチャ作る暇なんてなーい！！というかたは、
私がこういうのがあるといいのに…！と思って作りためたテクスチャ素材を配布している
シンプルパターン研究所のテクスチャ素材も使ってみてくださいね☆
商用も個人も無料で許可なくフリーでお使いいただけます♪

テクスチャの使い方はこちらを参照してください♪

• Fireworksでのテクスチャの使い方

テクスチャを使いこなして、Fireworksをもっと楽しみましょうー！！^^

…CS5はまだ買ってないので、買ったら調べて追記しますw

Fireworksマニアでは、極力データをダウンロードしたりせずに使えるTipsをと、そのままじゃ使いづらい初期搭載のテクスチャやパターンをいい感じにアレンジして使うTipsなどをご紹介しています。

• Fireworksで表現する シンプル＆カラフルな布の作り方
• Fireworksで簡単にフェルト風アイテムを作る方法

が…。

実はこの初期搭載のテクスチャやパターンたちがバージョンだったりwin版かmac版かだったりの違いで、日本語の表記がまちまちなのです…。

記事内で表記がまちまちだと読む方も大変だと思うので、できるだけバージョンによって表記が違うものもフォローして書きたいと思っているのですが毎度調べるのが大変なので…調べられる範囲で調べて一覧にしてみました。

疲れた…。

初期搭載のパターンは以下のような感じです。
こんなのが入ってるんだー、と眺めてみてくださいね。

初期パターンは、そのままでは印象の強すぎるものが多いですが、工夫次第でなかなか使えますよー！

明日はテクスチャ編を公開します♪

新年一発目のチュートリアルは、
『Fireworksだけでできる、カンタンきれいな画像切り抜き術』です。

Web用なら問題ないキレイさで、カンタンに手早くFireworksだけでやってしまう方法をご紹介します！

いろんな写真でのサンプルを作ったので、それを使って見本画像を作ったために、ちょっとすごいことになりました…ごめんなさい。

以下の内容を解説します。

1. パスを使って画像切り抜き
2. パスでマスキング
3. わざわざ手で書かずに、カンタンに切り抜き用パスを作成する
4. 色の差の少ない画像のときにもカンタンに切り抜き用パスを作りたい！
5. [おまけ]いろんなパスでマスキング

それではやっていきましょう！

Fireworksのよいところは、ベクターとビットマップを一度に扱えるという点です。
ベクターパスを用いてビットマップ画像をキレイに切り抜いていきます。

ペンツールを使って、切り抜きたい形のパスを書いていきます。

この画像の場合はほとんど直線なので、とんとんと点を打って結んでいきます。

↑こんな感じ

下の方も適当に点を打って、スタート地点までもどり、一周ぐるりと囲みます。

こんな感じで囲みます。
（わかりやすいように塗りを適用してみました。）

囲み終わったら、このパスで画像をマスキングしていきます。

パスでマスキング

パスを選択した状態で右クリック→編集→カットを選びます
（ctrl+x または command+xで切り取りしてもOK）

次に、元画像をクリックして選択状態にします。
その状態で右クリック→編集→マスクとしてペーストをクリックします。

すると、最初に書いたパスの部分にそってマスクが作られます。

こんな感じで切り抜けます。

パスを書く時に線が多少ずれてしまっていても、ベクターパスなのであとから修正ができます。
マスクをかけた後でも編集できるので便利です！

ただ、この方法だと少々複雑な形を切り抜きたいときちょっと大変ですよね。

切り抜きたい物と背景の色の差がはっきりしている写真なら、わざわざ手でパスを書かなくても、カンタンに切り抜き用のパスを作ることができます！

わざわざ手で書かずに、カンタンに切り抜き用パスを作成する

写真はPHOTO STOCKERから持ってきました。

カンタンに切り抜き用パスを作るには、自動選択ツールを使います。

プロパティパネルの許容量の設定がとっても重要です。
画像のコントラスト差に応じていろいろ調整してみてください。

ポイントは一度ですべて選択してしまおうとしないこと。
背景に当たる色がある程度まとまって選択できる許容量に設定して、
shiftキーを押しながら背景部分をとんとんとクリックしていくと…

こんな感じで、ブルーの部分がすべて選択されました。

選択範囲が出来上がったらこれを反転させて、物の方が選択範囲になるようにします。

メニューの編集から　選択範囲を反転をクリックします。

選択範囲が反転されました。

この選択範囲のまま、マスキングすることも可能なのですが、今回はこの選択範囲をパスに変換して、パスで切り抜きを行います。

こうしておくことによって、パスのポイントを編集することで切り抜きたい部分を滑らかに微調整することができます。

この選択範囲をパスに変換します。
メニューの選択から、選択範囲をパスに変換　をクリックします。

選択範囲がパスになりました！

このパスを使って画像をマスキングしていきます。

上記えんぴつのサンプルでご紹介した『パスでマスキング』の部分と同じ手順です。

このパスを選択した状態で右クリック→編集→カット
次に、写真を選択した状態で右クリック→編集→マスクとしてペースト

このように、選択範囲でマスキングできました！

下のような差のはっきりした写真なら一度で選択範囲が作れますよ♪

こちらも写真はPHOTO STOCKERから持ってきました。

↓こんな感じ

色の差の少ない画像のときはにもカンタンに切り抜き用パスを作りたい！

さて、上記の例は、比較的単純な形のものだったり、背景と物の色の差がはっきりしていたりして比較的切り抜きのしやすいものでした。

ただ…普通、こんなカンタンに切り抜けるものばかりじゃないんですよね。

色のトーンが似ていて上手く範囲選択ができず、かといってパスを書くのも面倒な図形…ありますよね。

こんな写真をPHOTO STOCKERから持ってきてみました。

ハイビスカスと葉っぱです。

一見、カンタンに範囲選択できそうなのですが…

実際やってみるとこんな感じで、上手く選択できません…。

こんなときは、画像をちょっと加工して、境目をくっきりはっきりわかりやすくしてあげましょう！

まず、レイヤーを複製します。

複製した画像の色味を調整します。
このとき、プロパティパネルのフィルタではなく、上のメニューバーのフィルタを使ってください！

フィルタメニューからカラーを調整→レベル補正をクリックします。

画像にあわせて、レベルを補正していきます。

プレビューを見ながら、こんな感じで色味を変更していきます。

こんな感じの２つになりました。

こうなってしまえばパスをとるのはカンタンですね！

上記の手順で選択範囲をとり、反転させてパスに変換します。

変換したパスを右クリックして編集→カットして、
色味を変えていないほうの写真の上で右クリックして、編集→マスクとしてペーストをクリックします。

お花がカンタンに切り取れました。

[おまけ]いろんなパスでマスキング

これまでは、対象物の形で切り抜きましたが、
たとえば丸く切り抜きたい、四角く切り抜きたい、なんてこともあるかと思います。

そんなときも同じ手法でカンタンにマスキングができます。

好きなツールで図形を書きます。
今回は円を書いてみました。

このパスを使って画像をマスキングしていきます。

上記えんぴつのサンプルでご紹介した『パスでマスキング』の部分と同じ手順です。

このパスを選択した状態で右クリック→編集→カット
次に、写真を選択した状態で右クリック→編集→マスクとしてペースト

円でマスキングされました！

レイヤーパネルを見ると、このように写真とマスキングしているパスとが表示されます。

この鍵の部分をクリックすると、鍵が外れます。

鍵を外した状態で画像を選択して動かせば、画像のマスクされる位置をカンタンに変えることができます。

鍵がかかった状態で動かすと、普通のオブジェクトの移動と同じです。

Web用の切り抜きなら、
Phososhopを使わずともFireworksだけである程度の切り抜きができますので
みなさんもぜひ挑戦してみてくださいね！

新年あけましておめでとうございます！

2010年はどんな年でしたか？
2011年もみなさまにとって素敵な一年になりますように。

また、旧年中はサイトをご覧頂き、本当にありがとうございました。
2011年も元気に更新頑張りますので、
Fireworksマニアをよろしくお願い致します！

↑画像は年賀状です♪
Fireworksで作ってみました☆

いつもFireworksマニアをご覧頂き、本当にありがとうございます。
今日はクリスマスイブですね。
ということで、これまでのTipsを詰め込んだクリスマスカードを作ってみました！

ほとんど全部詰め込んだら、なんかすごいデザインになってしまいました…。
メガ盛り。

今回で、年内最後の更新となります。
来年は、バナーの作り方やキレイなボタンの作り方、ワイヤーフレームの作り方からそれをデザインに起すまでのステップなど、もっともっと実用的なTipsを書いていく予定です。

これまでに紹介したTipsは、カンタンな手順ながらFireworksの基本機能をできる限りたくさん使ったTipsでした。
操作に慣れるのにちょうど良いものを集めてTips化しているので、こんなデザイン好みじゃない…という方もいらっしゃるかとは思いますが、お正月休みでぜひチャレンジして、Fireworksの使い方に慣れてくださいね。
それでは、また来年お会いしましょうー♪

このクリスマスカードのPNGのデータがダウンロードできます。
ぜひどのような効果でできているのか見てみてくださいね^^

Fireworksマニアのtwitterアカウント@FwManiaでは、年内も引き続きWebサイト制作に関する気になったサイト情報をつぶやいていきますので、こちらもぜひフォローしてみてくださいね♪

@FwManiaをフォロー！

文字に影をつけたり、縁取りをしたら見やすい、ということはわかるけど、Fireworksではどのツールを使ったらいいの？という、Fireworksの使い方、フィルタ機能にまだ慣れていない方に特におすすめのTipsです。

赤や黄色、オレンジ、グリーンなどが
様々な濃さ、明るさで散らばった紅葉の画像です。

この画像に白で文字を置いてみました。

特にFの部分が見にくい感じですね。

これを読みやすくするために、どんな方法があるか、実際にFireworksのいろんなフィルタを試しながら進めていきたいと思います。

グローをかける

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【シャドウとグロー】→【グロー】を選択します。

文字にグローがかかりました。

色は黒(#000000)で値は以下のように設定しています。

エンボス（隆起）をかける

文字を盛り上がらることで影をつけ、文字を読みやすくします。

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【ベベルとエンボス】→【エンボス（隆起）】を選択します。

値を以下のように設定します。

あまり値を大きくしないことがポイントです。
値が大きいと嘘くさい感じの立体感になってしまいます…

エンボス（差し込み）をかける

文字をへこませることで影をつけ、文字を読みやすくします。
エンボス風になります。

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【ベベルとエンボス】→【エンボス（差し込み）】を選択します。

値を以下のように設定します。

こちらも、あまり値を大きくしないことがポイントです。
値が大きいと嘘くさい感じの立体感になってしまいます…

ドロップシャドウをかける

文字に落とし込みの影をつけます。
影の量よりぼかしの量を多くすることで、影ができる部分の反対方向にもうっすらと色を入れることができ、見やすくなります。

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【シャドウとグロー】→【ドロップシャドウ】を選択します。

色は(#000000)で
値を以下のように設定します。

画像の上に半透明のボックスをひく

長方形ツールで画像の上に長方形を描き、透明度を60に設定してみました。
長方形の色は#000000で塗りつぶしています。

画像自体の彩度・明度を変更する

画像の彩度・明度を調整することで文字とのコントラスト差を大きくし、見やすくします。

背景に敷いている画像を選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【カラーを調整】→【色相・彩度…】を選択します。

【色を付ける】のチェックボックスはチェックせずに、彩度と明度を調整します。
以下のように設定しました。

文字に縁取りをする（くっきり縁取り）

縁取りをする方法を2種類ご紹介します。
フィルタのグローを使う方法と、線を使う方法です。

以前からFireworksをお使いの方は、線を使う方法

線に色を付けて、【中心のストローク】に設定し、線の太さを調整する

で文字の縁取りを行っていた方が多いのではないでしょうか？

私もこのやり方を使っていたのですが、
実はCS4から文字の扱い方がPhotoshop寄りになって変更されたため、小さな文字（10px以下ぐらい)に線を適用すると、崩れてしまう文字が発生するようになってしまいました。。。

以下がサンプルです。
一番上が10pxでそのまません色なしで入力した文字
次が、線の色#999999で線でふちを設定した文字
最後がグローでふちを設定した文字です。

2番目のサンプルで、設定の【設】の字がつぶれてしまっているのがおわかりいただけるでしょうか？

そのため、Cs4〜では10px以下の小さな文字には線を使わず、フィルタを使って文字にふちをつけています。
エッジの処理は、線を使うやり方の方がキレイだと思うので
10px以上の文字に効果を適用する場合は線を使った文字の縁取りがおすすめです。

-線を使う-

入力した文字に線をつけて縁取りをする方法です。
入力した文字を選択した状態でプロパティパネルの線の色（鉛筆マークの横のカラーボックス）をクリックします。
【中心のストローク】に設定し、塗りをストロークに重ねるにチェックを入れてお好みのストロークの色を設定します。

- フィルタを使う -

入力したフォントを選択した状態で、プロパティーからフィルタを適用していきます。
フィルタの横の【+】をクリックして、【シャドウとグロー】→【グロー】を選択します。

値を以下のように設定します。
色は#921E13に設定しました。

紅葉の色をとりました。色の部分をクリックしてカラーパレットが出た状態で、画面上の画像の好みの色の部分をクリックすると、クリックした部分の色が抽出されますよ☆

文字に縁取りをする（うっすら縁取り）

先ほど、線がおすすめ！と描きましたが、グローでしかできないものもあります。
それは、ふちをうっすら半透明にすることです。

設定方法は上記「文字に縁取りをする（くっきり）-フィルタを使う-」と同じです。
設定値の透明度の部分だけ50に変更すると
このようにうっすらと縁取りされます。

以上、Fireworksで文字を読みやすくする方法9つでした。

サンプルデータを大きく作りすぎてしまって、
記事に張り込んでいるサムネイルじゃみやすくなってないんだけど…というものもありますが…ごめんなさい。失敗した。。
クリックして拡大してみてください＞＜

どのフィルタメニューも、初期設定のまま使うとFireworksでは大げさにかかってしまいがちなので、使えないじゃん！と思ってしまいがちなのですが、適切な値を設定すればばっちり使えます！！お好みの値になるように設定しながらいろいろ試してみてくださいね！

黒い文字を載せたいときは、文字を黒、設定している色を白(#ffffff)にするなど、値はそれぞれお好みで調整してみてください。

ちなみに今回のタイトルの文字は、グロー効果を適用していますが、ないとこんな感じです。

読めない…＞＜

画像やサイトのイメージに合わせて、
いろいろ試してみてくださいね！