乱雑モックアップ » fireworks http://blog.sakurachiro.com らんざつ[乱雑] （名・形動）[文]ナリ 入り乱れていること。乱れていて秩序がないこと。また、そのさま。 Mon, 06 Feb 2012 11:08:54 +0000 ja hourly 1 http://wordpress.org/?v=3.2.1 要求された操作を完了できません。不明または無効なJPEGマーカーがみつかりました。 http://blog.sakurachiro.com/2011/08/jpeg-marker/ http://blog.sakurachiro.com/2011/08/jpeg-marker/#comments Wed, 17 Aug 2011 14:34:20 +0000 まこと http://blog.sakurachiro.com/?p=2546 開けないjpgがあった。

要求された操作を完了できません。不明または無効なJPEGマーカーがみつかりました。

初めていわれた。

fireworksでも

ファイルを開けませんでした。
ファイルタイプが不明です。

と言われて開けなかった。

解決法

ペイントで開いて別名保存した
jpgで保存したら、ブロックノイズが乗りまくったのでpngにした。

忙しくってアウトプットする時間を作れない。
色々あるのに忘れてしまう。

]]> http://blog.sakurachiro.com/2011/08/jpeg-marker/feed/ 0 商用利用可・使用報告不要の、「デザイン枠、飾り罫素材専門サイト」 http://blog.sakurachiro.com/2011/05/frame-design/ http://blog.sakurachiro.com/2011/05/frame-design/#comments Mon, 16 May 2011 10:45:19 +0000 まこと http://blog.sakurachiro.com/?p=2489 [image]Frame Designスクリーンショット
デザイン枠、飾り罫素材専門サイト「フレームデザイン」frame-design.com

現在157個？
高品質な飾り枠素材が、ai,jpg,pngの3種類から選んでダウンロード出来る(太っ腹だ)

こりゃ助かる。

]]> http://blog.sakurachiro.com/2011/05/frame-design/feed/ 0 FireworksCS4のテキストをアウトラインか画像にしたい http://blog.sakurachiro.com/2010/12/fireworkscs4-text-outline-image/ http://blog.sakurachiro.com/2010/12/fireworkscs4-text-outline-image/#comments Thu, 09 Dec 2010 13:01:32 +0000 まこと http://blog.sakurachiro.com/?p=2306 [image]テキストを変換

テキストをアウトライン化しようと[テキスト] – [パスに変換]すると
物によって文字が細くなるというか、なんかカタチが崩れるんですね、微妙に。

こんな感じに(青がテキスト、赤がアウトライン)
[image]テキスト - パスに変換

うちは大雑把というかあんまり気にならないけど、気になる人もいることでしょう。

でもって調べると[コマンド] – [テキスト] – [固定]でもアウトライン化出来るみたいなので試してみると
こんな感じ。中マドが抜けない＞＜；；；
[image]コマンド - テキスト - 固定

使い方を間違っているんですかね、これはこれで素敵だけど。

他にパスに変換する方法は見つけられなかったので
あとは画像に変換する方法を探してみる。
書きだしたりせずに簡単に出来ないかな？とあれこれやってみると
レイヤーを右クリックして – 選択範囲を結合で画像になった
[image]選択範囲を結合

うん、これがいい。

]]> http://blog.sakurachiro.com/2010/12/fireworkscs4-text-outline-image/feed/ 0 Fireworksでブラウザプレビューした際の余白を消す。 http://blog.sakurachiro.com/2010/06/fireworks-browser-preview-margin-padding-0/ http://blog.sakurachiro.com/2010/06/fireworks-browser-preview-margin-padding-0/#comments Sat, 26 Jun 2010 10:07:16 +0000 まこと http://blog.sakurachiro.com/?p=1880 例えばこんな画像を書いていたとして
[image]Fireworksで作成中の画像

ブラウザでプレビューすると、こうなると思います。
[image]ブラウザプレビューした時のスクリーンショット

ブラウザがデフォルトで持っている body の margin や padding が効いているからこうなるのは当然なんだけど
なかには余白無しでプレビューしたいなぁと持っている人がいるかもしれないし、
余白をなくしたい気分になる時がいつか来たりするかもしれないので(こないと思うけど)消す方法を考えてみました。

方法1 / プレビュー用のhtmlテンプレがどっかにあるハズだ。

Dreameweaverにもテンプレートhtmlがあるし、Fireworks も adobe だからあるでしょうと探したらありました。

WindowsXPの場合
C:\Program Files\Adobe\Adobe Fireworks CS4\Configuration\HTML Code\Dreamweaver\SLICES.XTTの1526行目。

WRITE_HTML("<body bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");

ここで body を吐き出してるっぽいので margin:0;padding:0 を追加してみた

WRITE_HTML("<body style=\"margin:0;padding:0;\" bgcolor=\"#", exportDoc.backgroundColor.toString(16), "\"");

* 編集する場合はバックアップを忘れずに。

方法1の結果

[image]SLICES.XTTを変更したプレビュー

できた。

方法2 / 保存したpngをあらかじめ用意した余白のないhtmlに読み込ませる

適当な場所に(今回はFireworksで作成中のpngを保存しているフォルダでやりました)余白のない適当なhtmlを作成して
プレビューしたくなったら代わりにそれをF5して表示する。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title>preview html</title>
 <style type="text/css">
 body{margin:0;padding:0;}</style>
</head>
<body>
	<img src="example.png" />
</body>
</html>

方法2の結果

[image]htmlを作成してそれをプレビューの代わりにした結果

できた。

使い道

余白を消すだけじゃあまり意味がないので、背景画像を先に作っておいて background で読み込むような css を書いておけば
デザイン中のイメージが湧きやすくなったりしないかしらね?
ちなみに<head>は1523行目

WRITE_HTML("</head>\n");
]]> http://blog.sakurachiro.com/2010/06/fireworks-browser-preview-margin-padding-0/feed/ 1 [Fireworks] テクスチャの基準点を変更する。 http://blog.sakurachiro.com/2010/05/textures-position/ http://blog.sakurachiro.com/2010/05/textures-position/#comments Tue, 04 May 2010 09:24:53 +0000 まこと http://blog.sakurachiro.com/?p=1689 どんな風に表現したらキチンと伝わるのか判らないんだけど、Fireworksのはテクスチャは、基準点がオカシイ。

だってテクスチャ開始位置がテクスチャを適用した矩形の左上からではなく、キャンバスの左上からで、矩形を生成した瞬間からは矩形を移動させても固定される。
まるで、矩形がテクスチャのマスクのような挙動をする。

例えば、こんなテクスチャを作った。

5px - 5px のテクスチャ5pxのグリッド背景。

キャンバスの適当な位置に、矩形を作成して先程のテクスチャを適用する。

キャンバスに矩形を作成してテクスチャ適用

拡大してみると。
ズレてる
ズレてる。

選択ツールで掴んで移動してみる。
ズレたまんま
ズレたまま動く。

何やってんの?左上からリピートして下さいよ。

最初からキャンバスのx:0，y:0に作成しろって事なのかしら。

とりあえず修正する方法

矩形を変形中
拡大縮小ツールかCtrl+Tで矩形を変形。

左上が基準になった。
左と上にラインが出現した、ここで変形を確定すれば完了。

本当に矩形がテクスチャのマスクのようだ。
変形中だけリンクが外れる感じ。

うちが知らないだけでもっと簡単にテクスチャの開始位置を変更する方法があるんでしょうか?

]]> http://blog.sakurachiro.com/2010/05/textures-position/feed/ 0 Fireworksでグリッドの設定を保存させる。 http://blog.sakurachiro.com/2010/03/fireworks-grid/ http://blog.sakurachiro.com/2010/03/fireworks-grid/#comments Sat, 20 Mar 2010 06:35:07 +0000 まこと http://blog.sakurachiro.com/?p=1576 Fireworksの「グリッドの設定」の基本値は何故か以前から36pxで ( 理由があるんでしょうか？ )
これは、5pxとか10pxとかキリのよい数値に変更しても、ファイルを新規作成する度に36pxに戻ってしまうので、毎回面倒くさいなーって思いながら変更し直して使ってる人もいるかと思います。

36pxから変更した任意の数値を記憶させる本来のやり方があるのかもしれないけどあいにくと知らないため、代替で使っていた方法です。

「グリッドの設定」を保存させる方法。

グリッドの設定はFireworksの環境設定に保存されず、各ファイル毎に記録されているようなので、好みのグリッド幅を設定した名称未設定ファイルから毎回Fireworksを起動させれば擬似的にグリッドの設定を保存できるって話。

FIreworksを使うのをやめれば解決する問題ですけどね。

]]> http://blog.sakurachiro.com/2010/03/fireworks-grid/feed/ 0 Fireworksでオブジェクトを縮小して線が潰れたら http://blog.sakurachiro.com/2009/11/fireworks-line/ http://blog.sakurachiro.com/2009/11/fireworks-line/#comments Sun, 15 Nov 2009 22:55:02 +0000 まこと http://blog.sakurachiro.com/2009/11/fireworks%e3%81%a7%e7%b8%ae%e5%b0%8f%e3%81%97%e3%81%a6%e7%b7%9a%e3%81%8c%e6%bd%b0%e3%82%8c%e3%81%9f%e3%82%89/ 真ん中

線の種類を[鉛筆] – [1ピクセルの硬い線]にすると直るみたい。

Adobe Fireworks CS4 チュートリアル
ページの中ごろ

ヒント：1 ピクセルの線がぼやけて表示される場合は、プロパティパネルのストロークドロップダウンメニューから「鉛筆」と「1 ピクセルの硬い線」を選択します。

]]> http://blog.sakurachiro.com/2009/11/fireworks-line/feed/ 0 Fireworks 拡張メモ http://blog.sakurachiro.com/2009/11/fireworks-extension-memo/ http://blog.sakurachiro.com/2009/11/fireworks-extension-memo/#comments Tue, 03 Nov 2009 20:54:27 +0000 まこと http://blog.sakurachiro.com/2009/11/fireworks-%e6%8b%a1%e5%bc%b5%e3%83%a1%e3%83%a2/ iPhoneのUI
iPhone GUI as Adobe Fireworks rich symbols library. ｜google code
ウィンドウ – 共有ライブラリ（F7）

Color Palette panel 1.25
Using the Color Palette panel in Fireworks CS3
インストールする前にバックアップとっておいたほうがいい。
これ入れると、テキスト入力するときチカチカ(砂時計とテキストカーソルが交互に点滅)する？

ヒストリーパネルを見ると、「テキストの変更」が繰り返し呼ばれてる。

]]> http://blog.sakurachiro.com/2009/11/fireworks-extension-memo/feed/ 0 Fireworksその他のショートカット http://blog.sakurachiro.com/2009/10/fireworks-other-shortcut/ http://blog.sakurachiro.com/2009/10/fireworks-other-shortcut/#comments Thu, 29 Oct 2009 19:23:59 +0000 まこと http://blog.sakurachiro.com/2009/10/fireworks%e3%81%9d%e3%81%ae%e4%bb%96%e3%81%ae%e3%82%b7%e3%83%a7%e3%83%bc%e3%83%88%e3%82%ab%e3%83%83%e3%83%88/ マスク

マスクにしたいパスとか矩形とかをCtrl+Cして
マスクかけたいオブジェクトを選択してCtrl+Alt+V

変形

Ctrl+Shift+T(数値を入力して変形)が便利。
Ctrl+Tするとphotoshopのバウンディングボックスみたいな感じ？

webレイヤー/スライス

オブジェクトを選択してAlt+Shift+U
もしくは
[編集 - 挿入 - 矩形スライス]

続く

]]> http://blog.sakurachiro.com/2009/10/fireworks-other-shortcut/feed/ 0 PhotoshopCS3で(個人的に)良く使う機能を、FireworksCS3に置き換えられるか探すテスト。 http://blog.sakurachiro.com/2009/10/photoshop2fireworks/ http://blog.sakurachiro.com/2009/10/photoshop2fireworks/#comments Thu, 29 Oct 2009 18:39:23 +0000 まこと http://blog.sakurachiro.com/?p=1328 思いついたものから

レイヤー・オブジェクト関係

レイヤー効果を別のオブジェクトにコピー
psicon
  1. レイヤースタイルをコピー
  2. レイヤースタイルをペースト
fwicon
  1. Ctrl+C
  2. Ctrl+Shift+Alt+V
選択範囲をコピーしたレイヤー
psicon 複製したいレイヤーを選んでCtrl+J
fwicon

複製したいオブジェクトを選択して
Ctrl+Alt+D(複製、位置がずれる)か、Ctrl+Shift+D(クローン、重なって配置)

レイヤーから選択範囲作成
psicon Ctrl+対象レイヤークリック
fwicon

対象がベクターの場合 /
パスをマーキーに変換

ビットマップの場合 /
レイヤーパレットのオブジェクトをAlt+クリック

ビュー・画面表示

表示100%
psicon Ctrl+Alt+0
fwicon Ctrl+1

ガイド関係

ガイドをキレのよい単位で置く
psicon

Ctrl+R / ルーラー表示

Shift+ガイド
fwicon

Ctrl+Alt+R / ルーラー表示

[画面表示 - グリッド - グリッドの編集]で5pxなど好きな単位にする

グリッドを表示(Ctrl+Alt+G)、グリッドに吸着(Ctrl+Alt+Shift+G)にもチェックをつけておく。

色

psicon スウォッチ
fwicon 色見本

photoshopの色選択(なんていう名前かわからないけど、SとBをXY軸で弄れて、Hをスライダーで動かせる)みたいに使いたいんだけれど
Fireworksでそれは出来ないのかな？
カラーミキサーでHSBを選択しても3軸動いてしまって使いづらい。

[追記:2009/11/04/3:41]
だがしかし
Using the Color Palette panel in Fireworks CS3
カラーパレットパネル1.25が面白い。

ガイドと色選択の違いが個性なのかな。

psはガイドをガンガン引いて、吸着させて配置させるのが楽だけど
fwはプロパティパネルからx,yを入力させて配置してくのが基本なのかな、グリッドは常に表示させるには邪魔過ぎるし、起動するたび36pxに戻るしで面倒。

あとで調べるとかメモとか困ることとか

角丸関係
photoshopは角丸の半径がpxで細かく指定できる。
後から簡単に変更は出来ない。
バウンディングボックスでサイズ変更したりすると比率が変わる。
白矢印で任意のパスを選択してシェイプの大きさを変えれば問題ない。

fireworksは角丸の半径を%？で指定するので矩形の大きさが変わると角丸のサイズも変わってしまう。
たとえば、w100h50で角丸の半径100%のと、w200h100の矩形の角丸を同じにするにはw200h100は角丸の半径50%にしないといけない。
これどうにかならないかな。
cs4だと%とpxを選択できる。

基本の角丸長方形の描画

角の丸みをパーセントかピクセルで指定します。丸みをピクセルで指定する場合、最大値は長方形の短辺の長さの半分です。それより大きな値を指定しても、効果は強くなりません。

1.ツールボックスの「ベクトル」セクションで長方形ツールを選択します。
2.カンバス上でドラッグし、長方形を描画します。
3.プロパティインスペクタで、「丸み」ボックスの右側のポップアップメニューからパーセントまたはピクセルを選択します。パーセントを選択した場合は、スライダをドラッグするか、ボックスに 0 ～ 100 の値を入力して、パーセント値を指定します。ピクセルを選択した場合は、長方形の短辺の長さの半分以下の値を入力します。

ドラッグしているときに上向き矢印キーまたは右向き矢印キーを押すと、角が丸くなります。下向き矢印キーまたは左向き矢印キーを押すと、カーブが小さくなります。

Ctrl+TやCtrl+Shift+Tで変形するとphotoshopとのバウンディングボックスでサイズを変更したりするときと同じように比率が変わる。
かと言ってパスを選択して変形させるとプロパティパネルから「角丸の半径」がなくなり簡単に角丸のサイズを変更できなくなる。
そうするとパスが使いずらい分だけFireworksは圧倒的不利だ。

けど以下で配布されてるコマンドを使えば問題ないみたい。
問題ないどころかphotoshopより全然楽チンに変形できますね、これはすごい。
Fireworksでくずれた角丸を元通りにするコマンド｜きんくまデザイン
うちもjsf作れるようになりたひ。

とりあえずpxで角丸をコントロールする方法はないものか？

シェイプとかふちどり線の透明度
fireworksはphotoshopに比べると割と簡単にシェイプを縁取り出来る。
ただそれぞれの透明度を別々に変更しようとすると、恐ろしく手間がかかる。

プロパティパネルにある透明度は、シェイプ本体+線をまとめて変更する大雑把なものぽい。

せっかく線と塗りをの色を別々に設定できるんだから、オブジェクトの透明度とは別に、線と塗りにもそれぞれ透明度を追加すればいいのに。

ちなみに線のほうは[ストロークオプション - 詳細設定 - インク量]で変更できたが階層が深くて面倒くさいし危険、そのうえプロパティパネルの線の色表示部分に透明度は反映されない。
つまり黒(#000000)が指定されてると
透明度50%(#7f7f7f)でも、線の色の表示は#000000のままだから
(思いっきり透明度を変更していた場合は気づくだろうけど)
微妙に調整した時はいつまでもずっと気づかないまま、微妙に色が違う状態で制作していくことになるかも。

忘れなきゃいいんだけど、ひさしぶりに開くファイルもあるだろうし忘れないでいるのは難しいんじゃないかと思う。
だからこそすぐに判る場所で透明度が確認変更できるようになってないとダメなんだろうけど、先に書いたように階層が深いの危険。
ちなみに塗り単体のアルファは変更出来ないみたい。

photoshopライブエフェクトを使っても、結局塗りの透明度を変更すると線の透明度も変わってしまうので使い物にならない。

なので別々にコントロールしたい場合は塗りのシェイプの上に線のシェイプを重ねる？しかないのかな。

[追記:2009/10/30/17:36]
思いついた
塗りをグラデーションにすれば、線の透明度とは別に塗りの透明度をコントロールできるかもしれない。

]]> http://blog.sakurachiro.com/2009/10/photoshop2fireworks/feed/ 1