STEP01. ロゴを書いてきます

元のロゴを書いて
長方形ツールを使って文字からはみ出すようにメインになる色を描きます。
色は少し明るめの方がいいです。
長方形を選択してcommand+shift+↓で、最背面に移動させておきます。

STEP02. にじみの部分を作ります

楕円ツールを使って、文字がクロスしている部分や書き始めの部分など、にメインの色より少し暗い色で楕円を書きます。
少し暗い色はHSBつまみの明度を10％ほど下げると作りやすいです。色味によって加減して下さい。

書いたにじみ部分をコマンドを押しながら全て選択して
変更→グループを選択すると、その後一度にまとめて選択できて便利です。

にじみ部分を選択し
フィルター→ぼかし→ぼかしガウスで1.5pxほどふちをぼかします。（文字の大きさによってぼかし具合を加減してください。）

STEP03. 文字で切り抜き（マスク）して完成

にじみ部分とメイン色の長方形を選択してグループ化します。
コマンド＋↓で文字の背面に移動しておきます。
文字を選択して編集→カットします。
グループ化させておいたにじみとメイン色を選択し、編集→マスクとしてペーストします。

色が文字の型に切り抜かれ、完成です。

おまけ

実際の万年筆の試し書きなどを、インクのたまる場所や色合いなど参考にするといいです。
手書き風のフォント以外に、筆記体などもカリグラフィーのようになり相性が良いです。

そんなときはガンマ切り替え機能がオススメです。

例えば、こんな写真。（Macで表示）

「表示」→「Windowsガンマ」にチェック。

すると、Windowsでの画面の見え具合を擬似的に確認できます。

左が、Macでの見え方、右が、Windowsでの見え方です。

Windowsでの方が若干暗く見えるのが確認できるかと思います。

擬似的に色味を再現しているので、出来れば実機で確認するのがベストですが、
かなり参考にはなると思うので、多用できるTIPSです。ぜひ！

カンパスサイズや、画像サイズを変更する際、上図のプロパティエリアのボタンをクリックしていると思います。しかし、プロパティ画面にいつもこの「カンパスサイズ」、「画像サイズ」があるとは限りません。矩形ツールやブラシツールを選択してる場合には、これらのボタンは表示されていません。表示されるのは、選択ツール（矢印マーク）を選択していて、かつ、どのオブジェクトも選択していないときにのみ、表示されるのです。その為、「全ての選択を解除」するショートカットがこういう時に役に立つのです。

「全ての選択を解除」のショートカットは、[Ctrl+Shift+A]。

こんなショートカット、あんまり使用頻度は高くなさそうですが、上記のカンパスサイズを変更したいとき以外にも、作業の切り替え時に意外と重宝しますよ。ぜひ、使ってみてください。

こんな風にボケてしまいます。これはイケてない。

そんな時は、「ダイレクト選択ツール」を使いましょう。
ダイレクト選択ツールで、2つの角を選択し、（下図の例では右の2つの角）
矢印キーで頂点を移動させ、拡大します。

これで、ボケることなく、大きさを変更できます。例では横方向への大きさ変更ですが、縦方向に拡大したい場合も、「下の2つの角を選択し、下矢印キー」で行うことができます。

フチがボケてどうしよう、と思った際は、ぜひ使ってみてくださいね。

Organizing for America | BarackObama.com

そんなオバマ風の背景の作り方を紹介するサイトがありました。
ブルーのグラデーションの仕方だけでなく、
後光が差してる風のライトアップも忠実に再現されています。

英語ですが、シンプルな説明なので、そこまで難しくないと思います。
記事の詳細は、以下のリンクよりどうぞ。

Obama’s Background on Fireworks

テンプレートファイルは、以下のボタンよりダウンロードしてください。

(46.6KB, Adobe® Fireworks® CS4)

内容は、以下のようなかんじです。（クリックして拡大します）

また、このPNGにはスライスレイヤーも作成済みです。スライスの書き出しを行うだけで、「top.jpg」というファイルで書き出しを行いますので、同フォルダ内の「index.html」を開くと、こんなかんじでブラウザで表示されるようになっています。

あくまで、テンプレートの一例ですので、このPNGに自分用のアレンジを加えて使いやすくすることで、制作のスタートダッシュが可能になると思います！

ご不明な点等あれば、コメントでいただければ対応させていただきます。
みなさんのウェブサイト制作の効率化のお手伝いが出来れば幸いです。

STEP01. ロゴを書いて、複製する

元のロゴを書いて、コピー＆ペーストします。
下の図は、同じロゴが二つ重なっている状態です。

STEP02. 拡大・縮小ツールで、複製した方を反転させる

下図のように反転させます。大きさは同じか、少し小さめにしておくのがポイントです。

STEP03. 反転させた文字の塗りに、グラデーションを追加して完成

反転させた方のロゴの塗りを、グラデーションで以下のように設定すれば、完成です。
下図の例では、【上から下にかけて、#999999→#FFFFFF、不透明度50％→0％】

いつものように、PNG元データをご用意しましたので、ぜひダウンロードして、確認してみてくださいね。

(61KB, Adobe® Fireworks® CS4)

拡大してみましょう。

全て真っ黒#000の1px線のハズなのですが、何故か、角丸長方形だけボケて2px＆薄いグレーになってしまってます。そんな時は、いっそ角丸ではなく、普通の長方形ツールで一度描いた後に（上図中央）、「丸み」プロパティで調整してみてください（上図右）。これで、1px線がボケて2pxに見えてしまうことは防ぐことが出来ます！　ただ、角のジャギーはやっぱり目立ってしまうので、線と面の色のコントラストを抑えることで誤摩化すくらいしか、対処法はありません。もし、イイ解決法を知ってる方がいらっしゃれば、教えてください！

ひとそれぞれ、よく使うショートカットキーは違うと思いますが、
個人的によく使うショートカットキーをまとめてみました。

第5位 イメージプレビュー　[Ctrl + Shift + X]

プレビューなのですが、画像の書き出しする際によく使います。

第4位 表示倍率100%　[Ctrl + 1]

アップにして作業して、全体図を見たくなった時に使います。
100％以外だとドットの荒さ具合が把握できないので、
定期的に100%表示にして確認しています。

第3位 選択を解除　[Ctrl + Shift + A]

なにかオブジェクトを選択してるときは、
プロパティエリアにカンバス周りの設定が表示されません。
そんなときは[Ctrl + Shift + A]で全ての選択を解除するのです。

第2位 数値を入力して変形　[Ctrl + Shift + T]

選択したオブジェクトの大きさを変更する際に使います。
個人的には写真サイズを変更するときに重宝しています。

第1位 属性をペースト(A)　[Ctrl + Alt + Shift + V]

既存のオブジェクトで使用しているフィルタ等をまとめて適用させる場合に使います。
使用頻度は非常に高いです。
【属性をペースト】を有効活用しよう！

他にも、マスクしてペースト、テキストの大きさ変更、重ね順を最前面に、キャンパスにフィット、ガイドを表示、などもよく使います。よく使う機能はショートカットキーをしっかり把握し、ショートカットキーが割り当てられてない場合は、オリジナルのキーを割り当てて作業効率UPを目指しましょう。

STEP01. 楕円ツールで正円を描きます

まず、正円を描きます。楕円ツールでShiftを押しながらで正円を描くことができます。

STEP02. ハートの下の部分を作ります

ペンツールを使って、円の下にある点をクリックします。

STEP03. ハートの肝となる谷間の部分を作っていきます

今度は、ダイレクト選択ツールで円の上の部分をクリックします。
下の図のように、点の色が白から青になればOKです。

上の点を選択できたら、キーボードの下矢印キー（↓）をクリックしまくって、ハートの形状に近づけます。

次に、クリックした左右の点を、altを押しながら上にドラッグし、ハートのふくらみを再現します。

ガイド線等を使用して、奇麗に左右対称になるようにしましょう。

完成！

いかがでしたでしょうか。慣れてくると、40秒もあればサクっと描けるようになります、覚えておいて損はないと思うので、ぜひ試してみてくださいね。

(49KB, Adobe® Fireworks® CS4)