現在開講している、社会人のためのWebデザインスクール で私と一緒に講師をされているユミソラさん︵ @YumiSora ︶は、以前のスクールでも Fireworks 特別講座を担当して頂きました。
その際、﹁桜の作り方﹂というレッスンは Fireworks 特有の操作が上手くまとまっていたので、ユミソラさんに許可を頂いて記事にしました。
Illustrator でも同じものは作れそうですが、普段 Fireworks を使わない私には新鮮でした。
まず新規作成し、楕円ツールをクリックし、塗のカラーでピンクを選択し、Shift キーを押しながらドラッグして正円を描きます。
このあたりは Photoshop や Illustrator と同じですね。
このようにピンクの正円が描けたら、画面の下に表示されている﹁プロパティインスペクタ﹂内の不透明度の部分の数値を50に変更し、Enter を押します。
ピンクの正円を右にドラッグしながら Alt と Shift キーを押します︵Alt と Shift キーを押してからドラッグではなく、ドラッグ開始してからAlt と Shift キーを押します︶。
このように配置し、選択ツールで2つの正円を選択します。
プロパティインスペクタの中で右から2番目のところにある﹁交差﹂をクリックします。
するとこのようになります。
次に、プロパティインスペクタの中で交差などのボタンの下にある﹁結合﹂をクリックします。
このように、1つのオブジェクトになります。
オブジェクトを上にドラッグしながら Alt + Shift キーを押します。
このようになったら、2つのオブジェクトを選択してプロパティインスペクタの﹁減算/型抜き﹂と﹁結合﹂をクリックします。
このように桜の花びらができました。
これを回転しながら綺麗に並べる方法ですが、まず角度は 360°÷5枚=72° になります。
では、↓のように Ctrl︵command︶+ T を押して中心軸を下に下げて 72° 回転させれば良いのか？というと、これではうまくいきません。
変形時の回転基準点はマウスで動かせますが、正確に中央に移動させたり、数値をpx指定で動かしたりできないからです。
感覚で回転させる分には問題ありませんが、幾何学的に作らないときれいに見えない形状の場合は、感覚だけで作るわけにはいきません。
ではどうすれば良いのでしょう。
ダミーのガイドとして正五角形を作り、それを中心として手動と目視で5枚並べるという力技の方法もあります。
どうしてもうまい方法を思いつかなければそういう力技でやるしかありませんが、今回はきっちり正確に5枚の桜の花びらを並べる方法をいくつか紹介します。
プロパティインスペクタで、下の桜の花びらの塗りの色を﹁青﹂など別の色に変えておきます。
下の花びらはあくまでもダミーなので、あとで削除などをしますが、同じ色だとぱっと見で分からなくなってしまうので目印で色を付けておきます。
Ctrl︵command︶+ G キーを押し、グループ化しておきます。
Ctrl︵command︶+ C、Ctrl︵command︶+ V を押し、その場にコピペ︵複製︶します。
Ctrl︵command︶+ Shift + T キーを押し、﹁数値を入力して変形﹂ダイアログでプルダウンメニューの﹁回転﹂を選び72と入力して上下反転させます。
あと3回、コピペと回転を繰り返し、ピンクの桜が5つになるようにします。
ツールの中から﹁ダイレクト選択ツール︵白い矢印︶﹂をクリックします。
Shift キーを押しながら5つの青い桜を選択し、 Delete キーを押して削除します。
できました。
F8 キーを押して、﹁シンボルに変換﹂ダイアログが出たら種類の﹁グラフィック﹂を選択した状態で Enter キーを押します。
ここでひとつ、﹁効率化﹂の技があります。
ドラッグしながら Alt を押し、適当に5つ並べてもいいのですが、まずひとつを複製し、それから﹁Ctrl︵command︶+ Y﹂を押します。
左から2番目を選択し、Ctrl︵command︶+ Shift + T キーを押し、72°回転させます。
そのまま左から3番目を選択し、Ctrl︵command︶+ Y キーを﹁2回﹂押します。
このようになりましたか？ここが今回の大きなポイントです。
これは何が起きたかというと、Illustrator でいう Ctrl︵command︶+ D︵直前の作業の繰り返し︶のようなものです。
ただし、Fireworks の Ctrl︵command︶+ Y は通常﹁取り消しのやり直し﹂なので、Ctrl + Z した後には使用できません。
同じように、左から4番目を選択し、Ctrl︵command︶+ Y キーを﹁3回﹂押します。
一番右を選択し、Ctrl︵command︶+ Y キーを﹁4回﹂押します。
すべてのオブジェクトを選択し、整列パレット︵もし表示されていなければメニューの﹁ウィンドウ＞整列﹂︶の﹁水平方向中央揃え﹂﹁垂直方向中央揃え﹂をクリックします。
すると、桜の花びらがこのように綺麗に揃います。
青い花びらが有効に働き、全てのパーツが中心を同じくするため、整列パネルがそのまま使えます。
5枚の花びらのままだと、桜の完成形である正五角形相当では横幅の方が長いため、整列パネルでの中央揃えでは真ん中に出来ません。
ダミーのオブジェクトを配置し、共通化、法則化するのが大事で、
﹁いきなり完成形﹂を作らずに、﹁一度、中間形状の手順﹂を挟むのがポイントです。
あとは青い花びらを削除するのですが、今回は桜の花びらを﹁シンボル﹂で作成したので、1つ変更するだけで全部まとめて変更できます。
選択ツール︵黒矢印︶で桜の花びらをダブルクリックします︵どれでも良いです︶。
このように、ダブルクリックした桜の花びらを以外のオブジェクトが薄く表示されるようになったはずです。
︵シンボルの中に入っている状態です。︶
ダイレクト選択ツール︵白矢印︶で青い桜の花びらを選択し、Delete で削除します。
この時、削除でなく、シンボル内のレイヤーパネルで青い花びらを非表示にしておけば、またあとから再度変形や整列をしたい時にやり直さずに済みます。
非表示にしておけば、メインの花びら自体のシンボルの形状や座標には影響がありません。
ユミソラさんの操作方法は、こういう﹁修正に強い﹂手法が色々あるのが特徴です。
← をクリックして、シンボルから抜けます。
できました。
Ctrl︵command︶+ C、Ctrl︵command︶+ V でその場にコピペし、Ctrl︵command︶+ T で 72° 回転させます。
次に、ヒストリーパネル︵もし表示されていなければメニューの﹁ウィンドウ＞ヒストリー﹂︶を表示し、Shift キーを押しながら﹁コピー/ペースト/変形﹂を選択し、﹁再実行﹂をクリックします。
﹁再実行﹂を3回クリックするとこのようになります。
このようなヒストリの操作を Script︵JSF︶化して抜き出すことも可能で、ユミソラさんは特に JSF を利用した即時マクロの制作や、より汎用的に使いまわせるレイアウトに特化した JSF をたくさん作っているようです。
ダイレクト選択ツール︵白矢印︶で青い桜の花びらを選択し、Delete で削除するか、非表示にすれば完成です。
Fireworks は﹁Photoshop と Illustrator を足して2で割ったようなツール﹂と聞いていましたが、パスの編集や整列は結構本格的にできるのですね。
実際の授業ではこれ以外にも Fireworks の基本操作やパーツ作成方法について教えていただいたのですが、使いこなせば結構効率的に作業できそうだと感じました。
Fireworksで桜を作る
今回作る桜はこんな感じです。 桜の形はパスの型抜きでサクッと作れそうですが、5等分に回転して並べる部分はどう作るのか気になりました。
まず新規作成し、楕円ツールをクリックし、塗のカラーでピンクを選択し、Shift キーを押しながらドラッグして正円を描きます。
このあたりは Photoshop や Illustrator と同じですね。
このようにピンクの正円が描けたら、画面の下に表示されている﹁プロパティインスペクタ﹂内の不透明度の部分の数値を50に変更し、Enter を押します。
ピンクの正円を右にドラッグしながら Alt と Shift キーを押します︵Alt と Shift キーを押してからドラッグではなく、ドラッグ開始してからAlt と Shift キーを押します︶。
このように配置し、選択ツールで2つの正円を選択します。
プロパティインスペクタの中で右から2番目のところにある﹁交差﹂をクリックします。
するとこのようになります。
次に、プロパティインスペクタの中で交差などのボタンの下にある﹁結合﹂をクリックします。
このように、1つのオブジェクトになります。
オブジェクトを上にドラッグしながら Alt + Shift キーを押します。
このようになったら、2つのオブジェクトを選択してプロパティインスペクタの﹁減算/型抜き﹂と﹁結合﹂をクリックします。
このように桜の花びらができました。
これを回転しながら綺麗に並べる方法ですが、まず角度は 360°÷5枚=72° になります。
では、↓のように Ctrl︵command︶+ T を押して中心軸を下に下げて 72° 回転させれば良いのか？というと、これではうまくいきません。
変形時の回転基準点はマウスで動かせますが、正確に中央に移動させたり、数値をpx指定で動かしたりできないからです。
感覚で回転させる分には問題ありませんが、幾何学的に作らないときれいに見えない形状の場合は、感覚だけで作るわけにはいきません。
ではどうすれば良いのでしょう。
ダミーのガイドとして正五角形を作り、それを中心として手動と目視で5枚並べるという力技の方法もあります。
どうしてもうまい方法を思いつかなければそういう力技でやるしかありませんが、今回はきっちり正確に5枚の桜の花びらを並べる方法をいくつか紹介します。
1つ目の方法
桜の花びらを下にドラッグしながら Alt + Shift キーを押して下に複製し、Ctrl︵command︶+ Shift + T キーを押し、﹁数値を入力して変形﹂ダイアログでプルダウンメニューの﹁回転﹂を選び 180 と入力して上下反転させます。
プロパティインスペクタで、下の桜の花びらの塗りの色を﹁青﹂など別の色に変えておきます。
下の花びらはあくまでもダミーなので、あとで削除などをしますが、同じ色だとぱっと見で分からなくなってしまうので目印で色を付けておきます。
Ctrl︵command︶+ G キーを押し、グループ化しておきます。
Ctrl︵command︶+ C、Ctrl︵command︶+ V を押し、その場にコピペ︵複製︶します。
Ctrl︵command︶+ Shift + T キーを押し、﹁数値を入力して変形﹂ダイアログでプルダウンメニューの﹁回転﹂を選び72と入力して上下反転させます。
あと3回、コピペと回転を繰り返し、ピンクの桜が5つになるようにします。
ツールの中から﹁ダイレクト選択ツール︵白い矢印︶﹂をクリックします。
Shift キーを押しながら5つの青い桜を選択し、 Delete キーを押して削除します。
できました。
2つ目の方法
桜の花びらを複製し、青色にし、グループ化するところまでは1つ目の方法と同じです。
F8 キーを押して、﹁シンボルに変換﹂ダイアログが出たら種類の﹁グラフィック﹂を選択した状態で Enter キーを押します。
ここでひとつ、﹁効率化﹂の技があります。
ドラッグしながら Alt を押し、適当に5つ並べてもいいのですが、まずひとつを複製し、それから﹁Ctrl︵command︶+ Y﹂を押します。
左から2番目を選択し、Ctrl︵command︶+ Shift + T キーを押し、72°回転させます。
そのまま左から3番目を選択し、Ctrl︵command︶+ Y キーを﹁2回﹂押します。
このようになりましたか？ここが今回の大きなポイントです。
これは何が起きたかというと、Illustrator でいう Ctrl︵command︶+ D︵直前の作業の繰り返し︶のようなものです。
ただし、Fireworks の Ctrl︵command︶+ Y は通常﹁取り消しのやり直し﹂なので、Ctrl + Z した後には使用できません。
同じように、左から4番目を選択し、Ctrl︵command︶+ Y キーを﹁3回﹂押します。
一番右を選択し、Ctrl︵command︶+ Y キーを﹁4回﹂押します。
すべてのオブジェクトを選択し、整列パレット︵もし表示されていなければメニューの﹁ウィンドウ＞整列﹂︶の﹁水平方向中央揃え﹂﹁垂直方向中央揃え﹂をクリックします。
すると、桜の花びらがこのように綺麗に揃います。
青い花びらが有効に働き、全てのパーツが中心を同じくするため、整列パネルがそのまま使えます。
5枚の花びらのままだと、桜の完成形である正五角形相当では横幅の方が長いため、整列パネルでの中央揃えでは真ん中に出来ません。
ダミーのオブジェクトを配置し、共通化、法則化するのが大事で、
﹁いきなり完成形﹂を作らずに、﹁一度、中間形状の手順﹂を挟むのがポイントです。
あとは青い花びらを削除するのですが、今回は桜の花びらを﹁シンボル﹂で作成したので、1つ変更するだけで全部まとめて変更できます。
選択ツール︵黒矢印︶で桜の花びらをダブルクリックします︵どれでも良いです︶。
このように、ダブルクリックした桜の花びらを以外のオブジェクトが薄く表示されるようになったはずです。
︵シンボルの中に入っている状態です。︶
ダイレクト選択ツール︵白矢印︶で青い桜の花びらを選択し、Delete で削除します。
この時、削除でなく、シンボル内のレイヤーパネルで青い花びらを非表示にしておけば、またあとから再度変形や整列をしたい時にやり直さずに済みます。
非表示にしておけば、メインの花びら自体のシンボルの形状や座標には影響がありません。
ユミソラさんの操作方法は、こういう﹁修正に強い﹂手法が色々あるのが特徴です。
← をクリックして、シンボルから抜けます。
できました。
3つ目の方法
上2つの方法までは Illustrator でも普通にできそうですが、3つ目の方法は普段 Fireworks を使わない私にはちょっと衝撃でした。 まず、桜の花びらを作成し、グループ化、シンボルに変換します。
Ctrl︵command︶+ C、Ctrl︵command︶+ V でその場にコピペし、Ctrl︵command︶+ T で 72° 回転させます。
次に、ヒストリーパネル︵もし表示されていなければメニューの﹁ウィンドウ＞ヒストリー﹂︶を表示し、Shift キーを押しながら﹁コピー/ペースト/変形﹂を選択し、﹁再実行﹂をクリックします。
﹁再実行﹂を3回クリックするとこのようになります。
このようなヒストリの操作を Script︵JSF︶化して抜き出すことも可能で、ユミソラさんは特に JSF を利用した即時マクロの制作や、より汎用的に使いまわせるレイアウトに特化した JSF をたくさん作っているようです。
ダイレクト選択ツール︵白矢印︶で青い桜の花びらを選択し、Delete で削除するか、非表示にすれば完成です。
Fireworks は﹁Photoshop と Illustrator を足して2で割ったようなツール﹂と聞いていましたが、パスの編集や整列は結構本格的にできるのですね。
実際の授業ではこれ以外にも Fireworks の基本操作やパーツ作成方法について教えていただいたのですが、使いこなせば結構効率的に作業できそうだと感じました。
