「Fireworks」カテゴリーアーカイブ

Fireworksに関する記事です。

Fireworksでビットマップ画像をpngへ変換する方法

Fireworksのデザインファイル(*.fw.png)中のレイヤに配置されているビットマップ画像を変換して抽出します。
変換先のファイル形式(jpgやpngなど)を選択することはできないようです。

 

[操作手順]
→コマンド>ドキュメント>レイヤーに分配 の順にアクセスする。

→要素が各レイヤーに分配される。

→ファイル>書き出し の順にアクセスする。

→書き出し:「レイヤーからファイルへ」を選択して、「イメージを切り抜き」にチェックを入れて、保存する。

→以下のファイルへ各レイヤーのビットマップ画像が書き出される。
レイヤー_1.png
レイヤー_2.png
・・・

以上で完了です。

 

[確認環境]
Windows 7 SP1
Fireworks CS3 9.0

[Mac]Fireworksでオブジェクトのピクセルサイズを縦横2倍(面積4倍)にしてRetina対応する

対象オブジェクトの縦横2倍(面積4倍)にピクセルサイズ変更して書き出すことでRetinaへ対応が可能となる。
対象はパスで描かれているオブジェクト(ベクトルデータ)に限る。

フォント、矩形、図形などのパスで描かれているオブジェクト(ベクトルデータ)は、解像度/品質を損なわずにピクセルサイズ変更できる。
BMP、JPEG、PNGなどの写真、イラスト画像のオブジェクト(ビットマップデータ)は、ピクセルサイズ変更で解像度/品質を損なうため、Retina対応できない。

「ベクトルデータ」または「ビットマップデータ」の区別は、Fireworksのダイレクト選択ツールで、対象オブジェクトを選択して、プロパティ表示を見て判断する。
プロパティ表示に「ビットマップ」と記載されていればビットマップデータとなる。

液晶画面上の見た目(画像の荒れなど)はあてにならないので、必ずプロパティ表示を確認する。
理由は、ドライバ、OS、ソフトウェア、レンダリングなどの要素が介在するので正しく描画されているとは限らない為。

 

[確認手順]
→ダイレクト選択ツールで対象オブジェクトを選択する。

→オブジェクトのグループ化を解く。
command+shift+G

→さらに、ダイレクト選択ツールで対象オブジェクトを選択する。

→プロパティに「ビットマップ」と記載されていないことを確認する。
command+F3 プロパティ表示ON/OFF(トグル)

 

[操作手順]
→対象オブジェクトを選択ツールで選択する。

→「数値を入力して変形」で縦横2倍(面積4倍)にピクセルサイズ変更する。
command+shift+T

→いつも通りスライスツールで画像をスライスして書き出す。

以上で完了です。

 

[確認環境]
Mac OS X 10.9 Mavericks
Fireworks CS4 10.0

Fireworksでオブジェクトのピクセルサイズを縦横2倍(面積4倍)にしてRetina対応する

対象オブジェクトの縦横2倍(面積4倍)にピクセルサイズ変更して書き出すことでRetinaへ対応が可能となる。
対象はパスで描かれているオブジェクト(ベクトルデータ)に限る。

フォント、矩形、図形などのパスで描かれているオブジェクト(ベクトルデータ)は、解像度/品質を損なわずにピクセルサイズ変更できる。
BMP、JPEG、PNGなどの写真、イラスト画像のオブジェクト(ビットマップデータ)は、ピクセルサイズ変更で解像度/品質を損なうため、Retina対応できない。

「ベクトルデータ」または「ビットマップデータ」の区別は、Fireworksのダイレクト選択ツールで、対象オブジェクトを選択して、プロパティ表示を見て判断する。
プロパティ表示に「ビットマップ」と記載されていればビットマップデータとなる。

液晶画面上の見た目(画像の荒れなど)はあてにならないので、必ずプロパティ表示を確認する。
理由は、ドライバ、OS、ソフトウェア、レンダリングなどの要素が介在するので正しく描画されているとは限らない為。

 

[確認手順]
→ダイレクト選択ツールで対象オブジェクトを選択する。

→オブジェクトのグループ化を解く。
Ctrl+Shift+G

→さらに、ダイレクト選択ツールで対象オブジェクトを選択する。

→プロパティに「ビットマップ」と記載されていないことを確認する。
Ctrl+F3 プロパティ表示ON/OFF(トグル)

 

[操作手順]
→対象オブジェクトを選択ツールで選択する。

→「数値を入力して変形」で縦横2倍(面積4倍)にピクセルサイズ変更する。
Ctrl+Shift+T

→いつも通りスライスツールで画像をスライスして書き出す。

以上で完了です。

 

[確認環境]
Windows 7 SP1
Fireworks CS3 9.0

Fireworksでフォント名が空っぽの時に対応するフォント名を調べる方法

以下のダイアログで「外観の保持」を選択してファイルを開くと、フォントの形は維持されますがフォント名までは判明しません。(フォント名が空っぽの状態になる)
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
フォント置換ダイアログ

このドキュメントにはシステムにないフォントを使用したテキストがあります。テキストを編集またはほかのフォントに置き換えるまでシステムにないフォントの外観を保持しますか?

 [  外観の保持  ]  [ フォントの置換 ]
↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

そこで、ダイアログで「フォントの置換」を選択してファイルを開きます。
「システムにないフォント」の箇所にフォント名が表示されています。

 

[確認環境]
Windows 7 SP1
Fireworks CS3 9.0

Fireworksの「矩形ツール」で効率よくマージン&パディング計測するコツ

コーディングの際にマージン&パディングを正しく設定するためには、「空白」のピクセル数を知る必要があります。

Fireworksの「矩形ツール」を使い、ボックスの角を起点にして矩形を引くと、「上端の空白」と「左端の空白」の両方を一度に測ることができます。

「上端の空白」を測るために矩形を引き、「左端の空白」を測るために矩形を引くやり方では労力が二倍かかることになります。

Fireworksでカンバスサイズの最大値を6000px以上に増やす方法

[操作手順]
→Fireworksを終了する。

→エクスプローラーを起動する。

→以下をアドレスバーへペーストしてEnterを押す。
CS5.1の場合
C:\Users\≪ユーザー名≫\AppData\Roaming\Adobe\Fireworks CS5.1\Japanese\Fireworks CS5.1 Preferences.txt

CS5の場合
C:\Users\≪ユーザー名≫\AppData\Roaming\Adobe\Fireworks CS5\Japanese\Fireworks CS5 Preferences.txt

CS4の場合
C:\Users\≪ユーザー名≫\AppData\Roaming\Adobe\Fireworks CS4\Japanese\Fireworks CS4 Preferences.txt

 

→テキストエディタで「Fireworks * Preferences.txt」が起動する。

→以下の箇所を、Ctrl+Fの検索ボックスを利用して探す。
MaxDocSizeInPixels
6000

→以下のように変更する。
MaxDocSizeInPixels
10000

→Fireworksを起動して、キャンバスサイズの上限が変更されているか確認する。

 

[注意事項]
CS3の場合
C:\Users\≪ユーザー名≫\AppData\Roaming\Adobe\Fireworks CS3\Japanese\Fireworks CS3 Preferences.txt
の中に、以下の箇所が存在しませんでした。
MaxDocSizeInPixels
6000

 

[PC環境]
Fireworks CS5.1
Fireworks CS5
Fireworks CS4
※実際に検証はしていません。

[Mac]Fireworksのキャンバスサイズの制限について

以下においてのカンバスサイズの最大値は、6000×6000 pxとなるようです。
・command+N     「新規ドキュメント」を作成

以下においてのカンバスサイズの最大値は、10000×10000 pxとなるようです。
・変更>カンバス>カンバスサイズ の順にアクセス

大きなサイズのpngファイルの読み込みには対応しているようなので、Photoshopで新規作成するなどの工夫で対処できるかもしれません。

 

[PC環境について]
Mac OS X 10.9 Mavericks
Fireworks CS4 10.0

Fireworksのキャンバスサイズの制限について

以下においてのキャンバスサイズの最大値は、6000×6000 pxとなるようです。
・Ctrl+N     「新規ドキュメント」を作成
・Alt>M>C>C   「キャンバスサイズ」を変更

大きなサイズのpngファイルの読み込みには対応しているようです。
Photoshopで新規作成するなどの工夫で対処できるかもしれません。
実際に、縦6800 pxのファイルを読み込みましたがエラーもなく動作しています。

 

[PC環境について]
Windows 7 SP1
Fireworks CS3 9.0

[Mac]Fireworksのキャンバスサイズの制限について

以下においてのカンバスサイズの最大値は、6000×6000 pxとなるようです。
・command+N     「新規ドキュメント」を作成

以下においてのカンバスサイズの最大値は、10000×10000 pxとなるようです。
・変更>カンバス>カンバスサイズ の順にアクセス

大きなサイズのpngファイルの読み込みには対応しているようなので、Photoshopで新規作成するなどの工夫で対処できるかもしれません。

 

[PC環境について]
Mac OS X 10.9 Mavericks
Fireworks CS4 10.0