[Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

こんばんみ、@cappeeです。

今回はFireworksの超便利機能、「9スライス」をご紹介したいと思います。

「9 スライス」機能とは

ef334fcdf01cd7f0ffeffcd8644b78f7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

角丸の矩形や矩形の中にテキストが入っている場合など、その重要な要素はそのままで、幅や高さを自由に変形できる機能です。

言葉だけだと伝わりにくいかと思うので、「9 スライス」機能を使う2つの方法をご説明します。

9 スライスの拡大・縮小ツール

faad99340de6020c98711453db90b5e6 300x140 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形を選択し、画面左のツールにある「拡大・縮小ツール」の中から「9 スライスの拡大・縮小ツール」を選びます。

f0ef09d874cee86417c9172ea33e667d [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形に4本の破線が表示されるので、もし角丸が破線の内側に入ってしまっている場合は、外側になるように破線をドラッグして調整してください。

b7348c619ea4c8594bd3b746b474f7b7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

そして周りの黒い点をドラッグして矩形を拡大・縮小したとしても角丸はキレイなまま保たれます。とても便利ですね。

シンボルの9 スライス

023e2e6d22763b9a8028dc6488808036 300x103 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

矩形をシンボルに変換する際に表示されるオプションで「9スライスの拡大・縮小のガイドを有効にする」にチェックをいれます。

矩形の中にテキストなど他の要素も一緒にシンボル化してしまって大丈夫です。

ef334fcdf01cd7f0ffeffcd8644b78f7 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

シンボルをダブルクリックすると破線が表示されますので、角丸に合わせて調整してください。

調整後もう一度ダブルクリックしてもとの画面に戻ったら、“普通の”拡大・縮小ツールで変形してください。

ef334fcdf01cd7f0ffeffcd8644b78f71 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

9スライスのシンボルを使わないと上のように潰れてしまいますが、9スライスのシンボルを使えば図の下のように角丸とテキストはキレイに保たれます。

もし角丸やテキストが崩れたら…「変形を解除」で解決

4919b637981077d6e95cd44f7f8a4b8f 300x162 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

9スライスを使うのを忘れてしまって角丸の矩形を変形してしまった場合、崩れた角丸やテキストは右クリックの[変形]か、画面上ツールバーの[変更]→[変形]から[変更を解除]を選択します。

矩形の場合、拡大・縮小後のサイズのまま角丸が調整されるのではなく、キレイな角丸が適用されていたサイズに戻ってしまうので注意が必要です。

4919b637981077d6e95cd44f7f8a4b8f1 [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

上にある潰れた矩形とテキストを選択して「変更を解除」すると、こんな感じで矩形を引き伸ばす前に戻ります。

9スライスの機能がついてからデザインするスピードがかなり早くなったのは間違いないです。

Fireworksにこんなありがたい機能が今後も追加されることを期待してます。

[参考サイト]Fireworks / 9 スライスの拡大・縮小

Pocket
article clipper [Fireworks]角丸矩形の拡大縮小が思いのまま!「9スライス」機能が便利

[Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

どうも、@cappeeです。

私はWebデザインをする時にFireworksを使っています。

グラデーションやフォームなどよく使うデザインのパターンってありますよね。

これ毎回つくっていると、たとえつくるのに1分だとしても、10回つくったら10分、100回つくったら100分、、、とトータルで考えると非効率ですし時間がもったいない。

よく使うデザインは蓄積しておくこと!

それが素早くデザインするコツだと私は思っています。

ということで、Fireworksにある便利な機能な使わないと損です。

スタイル

style [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

例えば、HTMLのテキスト、グラデーション、写真の枠などよく使うデザインやベースになるものは「スタイル」に登録しておきます。

デフォルトで登録されているものは使わないデザインも多いので、スタイルウィンドウの右上にあるメニューから自分だけの「スタイルライブラリを保存」しておくと便利です。

スタイルウィンドウが表示されていない場合は、ツールバーの[ウィンドウ]→[スタイル]で表示できます。

16857944f6e21bec667b3a69a3f9a805 300x143 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

デザインを保存するには、保存したいパーツを選択してスタイルウィンドウの右上か下にある「新規スタイル」を選びます。

塗り、フィルター、ストローク、テキストなどどのプロパティを保存するか細かく選べるのでとても便利ですよ。

スタイルを活用すれば作業が1.5倍は早くなるんではないでしょうか。

共有ライブラリ

67644ee90467df423d5a4a0366200979 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

input や select などフォーム系のパーツやボタンなどは「共有ライブラリ」に登録しておきます。

デフォルトで用意されているライブラリを使ってもいいですし、新しくフォルダをつくって自分でつくったパーツを登録しておくこともできます。

パーツを共有ライブラリに登録する場合は、まずパーツをシンボル化(F8)してその時に表示されるウィンドウの「共有ライブラリに保存」にチェックします。

72be56defad0a82dde289720295ed4eb 300x158 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

共有ライブラリを使えばフォームのデザインが1.7倍は早くなるんではないでしょうか。

リッチシンボル

b3be6f0a1704dab9be403afebe34e064 [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

共有ライブラリをさらに便利に使えるのが「リッチシンボル」です。

例えばテキストありのプルダウンを共有ライブラリに登録したとします。

リッチシンボルの特徴は、中のテキストを「シンボルプロパティ」から変更することができてしまうのです。

登録はちと面倒ですが最初だけですし地味に便利な機能と言えます。

リッチシンボルの登録方法はこちらに詳しく書かれてありますのでご覧ください。
【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ

リッチシンボルを使えばフォームのデザインが1.1倍は早くなるんではないでしょうか。

せっかくFireworksにある機能ですので、たまには立ち止まって一度機能をおさらいするのもいいかもですね。

デザインもよく使うパターンは蓄積して、効率化した分早く家にかえりましょう。

Pocket
article clipper [Fireworks]デザインパーツを蓄積して1分でも早くWebデザインを仕上げる便利な機能3つ

[Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

もっともっと効率的にコーディングしたい@cappeeです。

Fireworks CS6に「CSSスプライト」が簡単に書き出せる新機能が加わったというので、今回怒涛のコーディング中にどうしても気になって使ってみました。

とても便利です。

CSSスプライトの書き出し方

スプライト用のページをつくって適当に画像をならべてそれぞれスライスします。

css sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

スライスの名前はクラス名をつけてください。

全選択か、書き出したいスライスのみを選択して右クリックし「CSSスプライトを書き出し」を選択します。

ファイル名はスプライト用の画像を読み込む background のクラス名と同じになります。

書き出す画像の形式を選ぶ場合は「オプション」をクリックしてください。

sprite [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

形式は「最適化プリセット」から選択することができますが、PNGの8bitを選択したい場合はデフォルトだと含まれていせんので、あらかじめ「最適化」ウィンドウで指定し、右上にある矢印から「書き出し設定を保存」しておきます。

sprite3 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

保存すると「最適化プリセット」の一覧に表示されるので選択することが可能です。

sprite2 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

任意のフォルダに書き出すと、適当に配置したはずの画像がきれいに配置されたPNGスプライト用のCSSができます。

sprite4 [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

画像が多いとファイル名を付けるのに時間がかかったり、どの画像をまとめるのが効率的か考えながらやっていると最初は時間がかかりましたが、次回からは倍速以上で作業できると思います。

一度書きだした画像に追加するとまた配置は変わってしまいますが、スプライト用のCSSをコピペするだけなので楽ちんです。

ページ単位とかカテゴリ単位とか、無駄な画像の読み込みをしないようにどの画像をまとめるのかは最初に考えておいたほうが良さそうですね。

スプライト用のCSS

実際に書き出されたCSSはこちらです。(今回クラス名はデフォルトのままです)

.sprite{ background:url("sprite.png") top left no-repeat; }
 ._r4_c3{ width:152px; height:38px; background-position:-30px -30px; }
 ._r8_c4{ width:20px; height:20px; background-position:-30px -98px; }
 ._r2_c2{ width:137px; height:19px; background-position:-30px -148px; }
 ._r10_c6{ width:15px; height:15px; background-position:-80px -98px; }
 ._r6_c10{ width:12px; height:12px; background-position:-125px -98px; }

コツをつかめば作業倍速&表示スピードの改善にもなっていいことづくめです。

Adobeのサイトでも紹介されているのでこちらもぜひご覧ください。

CSSスプライト書き出し機能の使い方

Pocket
article clipper [Fireworks]CSSスプライトの書き出し機能を使ったらめちゃんこ便利

[Fireworks]ショートカットをカスタマイズして効率化!絶対に追加すべきショートカット3つ

こんばんは、@cappeeです。

Fireworksのショートカットはデフォルトのままだとよく使うマスクが指定されてなかったりして不便です。必ずカスタマイズ、追加して作業を効率化すべきです。

先日パソコンの不具合によりリカバリしてしまったので、その時に設定したショートカットをメモしていきます。

ショートカットをカスタマイズ

Fireworksの[編集]から[キーボードショートカット]を選択して、「現在のセット」を右にあるアイコンから「複製」します。

下記は最低限追加で指定したほうがいいと思うショートカット3つです。この3つだけでも格段にスピードが上がります。

  • カンバスサイズ(C)… Ctrl+M
  • カンバスカラー(L)… Ctrl+,
  • マスクとしてグループ化(G) Ctrl+Alt+Shift+B

デフォルトも含めてショートカットマスターになればかなりさっくさくで作業できますね。私は最近ツールのショートカットも使うように気をつけてます。デフォルトも含めよく使うショートカットもまとめたいな。

ショートカット一覧

上記と同じく[キーボードショートカット]を選択して、右上にある「HTML形式でセットを書き出し」をすると設定されているショートカットの一覧が表になって見やすく確認することができます。忘れてしまった時など使えるかもしれません。

ショートカットのバックアップ

せっかく今までコツコツと指定してきたショートカットならそれもバックアップ取っておきたいですよね。私は突然やることになったリカバリを経験して、月1回必ずバックアップを取るようにしてます。CS6のショートカットデータはここにあるので必要ならバックアップも取っておきたいですね。

C:\Users\(ユーザー名)\AppData\Roaming\Adobe\Fireworks CS6\Japanese\Keyboard Shortcuts

その他のバックアップをとるデータのリストはこちらをご覧ください。

月1回のバックアップデーにバックアップするものリスト

 

Pocket
article clipper [Fireworks]ショートカットをカスタマイズして効率化!絶対に追加すべきショートカット3つ

[Fireworks]線つき矩形の角丸をキレイに見せる方法

こんばんは、@cappeeです。

Fireworksで角丸のボタンをデザインするときに、外側に線を引いて、更に内側に1pxの線を引きたい場合のお話。

結論から言うと、一番外側の線を「内側」もしくは「中央」指定にすると角丸がジャギってしまうんです。①だけジャギっているのわかりますか?

kadomaru [Fireworks]線つき矩形の角丸をキレイに見せる方法

わかりやすいように拡大。

kadomaru2 [Fireworks]線つき矩形の角丸をキレイに見せる方法

こういうボタンを作りたい場合の一番角丸がキレイで簡単な方法は、

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「外側」指定してカラーを選択。
  3. 同じ矩形を複製して薄い線を「内側」指定して中にグラデーションをかける。

という具合です!

「Photoshopライブ効果」を使った方法

線を指定するには上記以外にも「Photoshopライブ効果」を使った方法もあります。「Photoshopライブ効果」の「線」の「内側」は角丸がキレイに表示されるのでこちらでも線分の幅を調整しなくてもいいので便利です。だた、上記のように二重線を引きたい場合は、「Photoshopライブ効果」の「外側」と通常の線の「内側」を指定する必要がありますが、矩形を複製せずに簡単にできるので追加でご紹介します。(2012.12.17追記)

  1. 作りたいボタンのサイズから-2pxした矩形を作成。
  2. 一番外側の濃い線は「Photoshopライブ効果」の「線」の「外側」指定してカラーを選択。
  3. 薄い線は通常の線の「内側」を指定して中にグラデーションをかける。

ちなみに、線自体にグラデーションがかけられる機能Fireworksにも早くほしいですよね。IllustratorにはCS6から新機能としてあるみたいですけどっ。

Pocket
article clipper [Fireworks]線つき矩形の角丸をキレイに見せる方法

[Fireworks]文字の縁取りをキレイにつける方法

こんにちは、@cappeeです。

デザインするときによく黒文字の周りを白く縁取ったりしますが、この文字の縁取りってFireworksだと色んな方法がありますよね。

でも、方法を間違えると文字がつぶれたり、縁がジャギったりするので注意です。

主なやり方はこの3つ

  • 線で縁取りする
  • フィルターの光彩を使う
  • フィルターのPhotoshopライブラリの線を使う
下の画像をみるとわかりやすいのですが、普通の線で縁取りすると外枠を選んでも文字が若干細くなって丸ゴシックの丸いところがなくなってしまったりなんてこともあります。
フィルターの光彩だと文字は大丈夫ですが、縁の方がジャギってキレイじゃありません。
そんな時は、フィルターのPhotoshopライブラリの線を使うとキレイになります!

txt fuchidori [Fireworks]文字の縁取りをキレイにつける方法

細かいところにも気を使って文字を読みやすくしたいですねっ。

Pocket
article clipper [Fireworks]文字の縁取りをキレイにつける方法

PNG8とPNG24とPNG32で書き出しの違い

こんにちは、@cappeeです。

最近はGIFやJPEGではなく背景透過がキレイにできるPNGで書き出すほうが多くなってきましたね。

IEのバージョンの自動更新がだいぶ影響してます。

改めてPNG8とPNG24とPNG32の違いを調べてみました。

PNG-8

8ビットカラー(256色)。
透明可。
IE6でもjsなどでの対応なく透過できるけど、グラデを使用してて「すべての色を割り付け」が対応できなかった場合はPNG32にする必要あり。

PNG-24

24ビットカラー(フルカラー)。
透明不可。
透明にしない場合はPNG32よりPNG24の方が少し容量を抑えて書き出すことができる。

PNG-32

24ビットカラー(フルカラー)。
透明可。
IE6で透過を実現したい場合はjsなどの対応が必要だが、昨今はIEの自動アップデートがあるので透過できなくても問題なく表示されていれば問題ないと判断するケース多し。プログレッシブ・エンハンスメントというやつ。

書き出し方やコーディングの対応もブラウザが進化したことによって多少楽になってきましたね~。

でもPNGはやっぱり容量が気になるので、PNGの容量を圧縮してくれる無料の「PNGGauntlet」を使ってます。

PNG以外の形式も含め書き出し方については下記が参考になります。

PNGとGIFとJPEG…Web用画像の書き出し、どんな風に使い分けていますか?

Pocket
article clipper PNG8とPNG24とPNG32で書き出しの違い

[Fireworks]同じ書体のテキストを一括で別の書体に変更する

こんにちは、@cappeeです。

私はFireworksでデザインしています。

ゴシック体で使っていたフリーフォントをモリサワの新ゴに変更したいなーと思い、選択ツールをみるとおなじみのカラーは近似色を選択してくれるんだけどフォント系はないな~と思って拡張機能を探してました。

フォントの選択と言えば「Font Mixer」が有名なので、そのあたりの機能にないかなーと。

というか、検索機能があるのを忘れてました。

は!ちゃんとフォントの検索・置換ができる!

あまり使わないプロパティだから忘れてました。

fw font serch [Fireworks]同じ書体のテキストを一括で別の書体に変更する

もちろんフォント以外にもカラーやURLなども置換できます。

いや~便利だわ~と思っていたら落とし穴もあります。

置換したいフォントがひとつのオブジェクトの中で例えば目立たせたい文字だけ赤にするなど2色以上のカラーを使っていた場合、これが1色になってしまいます。

最終的に手動で確認しながら変更しました。

でも、Fireworksの検索と置換はすごい便利だと思いました。

たまに思い出してあげよう。

この記事が参考になるのでぜひ。

Fireworksの万能すぎる「検索パネル」を使いこなそう!

 

Pocket
article clipper [Fireworks]同じ書体のテキストを一括で別の書体に変更する