Local Designing in Kanazawa

【Fireworks】マスクを適応後のレイヤーでマスクと画像を個別に編集する方法

Fri, 13 Jan 2012 15:38:47 +0900

「Illustrator」を使っていたデザイナーが「Fireworks」を使い始めるとき、
機能や、コマンドの名称の違いに戸惑うことは多いでしょう。

マスクをかけた後の、マスクや画像の形状変更はIllustratorとFireworksで勝手が違います。

■前置き「マスクとは」

画像を完全に切り抜いてからレイアウトを組んでしまうと、画像のあたりやトリミングサイズに変更があったときに非常に厄介です。

マスク機能を使うと、元の画像を保持したまま切り抜くことができ。
使わない部分を非表示にできます。隠すことができます

マスクの適応手順
-----------------------------

1.切り抜きたい画像の配置
2.任意の形状や大きさの図形を前面に重ねて配置
3.上記の２つを複数選択
4.マスクを適応する
・Illustratorの場合
メニューから[オブジェクト]-[クリッピングマスクの作成]。
・Fireworksなら[変更]-[マスク]-[選択範囲外をマスク]。

※win版CS5ですのでMacでは名称が違います。

-----------------------------

■両ソフトの違い
Illustrator場合
ダイレクト選択ツールでマスクの端を選択。マスクのサイズや形状を変更できます。
画像を選択すれば、形状の数値の入力に応じて画像のあたりや大きさが変更できます。

しかしFireworksの場合は違いました。マスクをかけると一つのオブジェクトとして扱われるようにダイレクト選択ツールで上記のようにマスクの形状や画像が個別で変更できません。

これは、マスクをかけたレイヤー内で、マスクと画像がリンクされていることが原因です。
Fireworksではデフォルトで、マスクかけたらリンクされる設定のようです。

■Fireworksでの設定
1.マスクをかけたレイヤーを「レイヤーパネル」から選択する
2.画像とマスクの間に、リンクマーク（鎖アイコン）があるのでクリックして外す。
3.レイヤー内のマスク、画像のミニプレビューをクリックする。（色つきの枠で囲まれた方がアクティブとなる）
4.選んだ方を選択ツールで編集する。

これでできます。

■感想
この点はIllustratorに比べてやっぱりまどろっこしさを感じますね^^;
まあ慣れている方が使いやすく感じるのは当然でしょうけど。
ショートカットキーを似たような機能に合わせて設定するといいかもしれませんね。

【Tool】PNG最適化で容量を軽くするツール「optpng」

Fri, 13 Jan 2012 11:24:40 +0900

どうも(^^)

最近、テキストのベースカラー#222がマイブームのNushiです。

今回は、PNG最適化で容量を軽くするツール「optpng」を紹介します。

ダウンロードはコチラ

PMGは非常に便利ですが、
ファイルサイズは何も考えずに書き出すと…

かなりヘビーになります。

そこで、「optpng」の登場なんです、、

画質の劣化を一切感じさせずに、
10％くらいの容量をカットできます。

書きだした素材のデータの仕上げに使うといいかもです。

----------------------------------------------

使い方

1.exeに任意のPNG画像をドロップ
ダウンロードしたexeファイルに、
任意の画像をドラッグ＆ドロップするだけです。

簡単やね！

2.生成されたデータの確認
最適化が行われた後は、同名のファイルが生成されます。
前のデータと比べると容量が少なくなったのがわかります。

3.最適化前のデータの削除（要確認）
たまに、前データが～png.backという拡張子で同フォルダ内に保存されます。
発生条件がはっきりしませんが、バックアップ的なものなので必要なければ消しましょう。

----------------------------------------------

最後に

詳しい仕組みなどは恥ずかしながらわかりませんが、
またの機会に調べておきます。

いろいろ同型のアプリは探して検証してみましたが、
一番これが使いやすかったです。

【Problem】FireworksCS5で「メモリ不足」エラーが起こり動作が停止する件

Thu, 12 Jan 2012 21:40:44 +0900

うちの子（FireworksCS5）が時々「メモリ不足」って叫んで動かなくなるんです。

病気でしょうか？？

発生する問題は以下の通り

・データが開けなくなる
・保存できなくなる
・操作が受け付けられない
・ウィンドウが真っ白になる
・Nushiも真っ白になる

どうやら、CS5に限った話ではないらしい。

やっべぇぞいや(^^)大事な時間が。

データが消し飛ぶ恐怖感。

たまんないですよねｗ

先輩方々らに質問してみたけど。全然わからない。

印刷会社なんでFW使ってない人らばっかりやがな。

過去、事例のブログをある程度探しまとめてみましたが
【Fireworks】CS5で頻発する、メモリ不足エラーの回避方法

上記のまとめた記事だけで解決できないほど、予期せぬ時に頻発します。

「メモリ不足エラー」

恐ろしい子…(；･`д･´)

他のアプリのメモリ圧迫や、
ヒストリーのログ問題はクリアできたけど、
…まだ起こる。（発生率は下がった）

ユーザーセッテングもリセットしてみたが変わらず。

心当たりあるのは

・ページの作成。5P～くらいから？重くなった気がする（画像はそんなに入ってない）
・シンボルの作成。

あと

・ビットマップ画像にマスクをかけるとエラーが起こりやすい気がする。
・

教えてえろいひと！！(ﾟдﾟ｀ )

【Fireworks】メモリ不足エラーの回避方法。Prat1 -メモリ節約編-

Thu, 12 Jan 2012 20:06:12 +0900

～【Fireworks】 CS5で頻発する、メモリ不足エラーの回避方法～の続編です。

いろいろ原因はあるけど、イマイチはっきりしないので(^_^;)

作業データの消失リスクを回避する対策をします。

今回は外部的要因である、

他のアプリケーション起動によるメモリの圧迫に関する対策を調べて見ました。

※PCのメモリが足りてても「メモリ不足エラー」は起こることがあります。

■メモリへ負荷の把握と節約が必要

OSや環境に依存しますが、使っているPCのスペックに応じて、
メモリの使用量は限られています。
「メモリの拡張」を行えば一番簡単ですが、会社の環境であったり、
金銭的な問題で拡張ができない方もおいでと思われます。

その場合は限られたメモリの中で、どれだけやりくりできるか。

何が原因でメモリに負荷がかかっているか。

どの程度の負荷までならスムーズに動くかという検証が必要です。

■手順

1.メモリ使用量の把握

-------------------------------

メモリの確認手順
1.[タスクマネージャー]を起動する
2.タブメニューから[プロセス]を選択
3.メモリ数値を監視しする

-------------------------------

2.各アプリケーションの負荷を検証
よく使うものから、気づかず動いているものまでたくさんあります。
必要のないヤツは閉じましょう、
スタートアップツールとかガジェットなんかは見えないとこで動いてたりします。

3.不要のアプリは落とす
個人的にはブラウザや、メールソフトなどが危険だと思います。
「Firefox」なんかはアドオンを沢山使い、タブを複数開いていると、
余裕で500,000KB～超えちゃいます。サンダーバードとかも結構な負荷です。

エバーノートや、ドロップボックスなども不要なら落としておくと良いかもです。

4.Fireworks使用時のメモリ負荷の把握
Fireworks自体がそこまで軽くないんです。
そこそこ作業を行うだけで350,000KB～は消費します。
（もちろんOSや環境に依存しますが）作業に使っているPCのスペックのことを考えても、
結構な消費量ですね。場合によっては、12GBでも簡単に落ちるようです。

win版で、起動時150,000KB～くらいです

大きな画像を追加したり、フィルタなど不可の大きな作業を行うこと、
当然、応じて増加します。

※ページの作成や、シンボルの作成自体は、
直接的にメモリの圧迫にはあまり関係ないと思われます。

■個人的な感想
「Fireworks」は、他のAdobeのグラフィックソフトに比べて、
メモリの圧迫が原因でフリーズしたり落ちたりすることが多い気がします。

あとブラウザの負荷がハンパないです(^_^;)
Firefoxは便利なんですけど、開発に関係ない時まで、
アドオンを有効にしていたり、たくさんタブを開いて放置しがちなんですよね。

必要ないときは閉じるクセをつけるのと、

ブラウジング目的だけなら、サブブラウザを持ってもいいかなと思いました。

~~IE？何それ。そんな粗大ｇ~~

クロームとかね！(；･`д･´)

Jimdoの邪魔な広告は勝手に消していいものか？という問題

Wed, 11 Jan 2012 15:27:28 +0900

結論から言うと消しては行けません。

課金で、Proにバージョンアップすることによって排除されます。

Jimdoは、基本的に好みのテンプレートからカスタマイズして、

自分のサイトを作成していきます。

そのなかで「独自レイアウト」という機能が存在しますが、

これは自力でHTMLとCSSが書き込めるので、かなり自由がききます。

自由すぎます

図1. Jimdo独自レイアウト編集画面

なので、もしやと思い

営業の上司に相談されて、根本的にそれダメだろと感じつつも。

{ display:none }を記述してみた。　※CSSで対象を不可視

、、、、なんと。　消えてしまった。

消せちゃうんです

…

なんと。(；･`д･´)

これははたして合法なのだろうか？？

…ってことで、調べて見ました。

案の定↓こちらに

Jimdoガイドライン

デスヨネー(ﾟдﾟ｀ )

やっぱり消すと契約違反でツンツンされるらしい。

Jimdoさん

これだけ立派なもの作れるならjsで簡単に制御できるだろうに。。

なんで消せちゃうの？？と感じつつも、

んな～むしのいい話しはないですよねー

結論

皆さん

無料登録では広告は消してはいけません！

超リアルな、ジョブズフィギュア

Wed, 11 Jan 2012 14:50:33 +0900

超リアルな、ジョブズフィギュア

スティーブ・ジョブズのリアルフィギュア。

個人的にプリキュアのフィギュアよりは「欲しい」と思えるクオリティ！！

手とかパーツとか変えて、変なポーズまでさせれちゃう！！

http://inicons.com/

いやいや仕事中遊んでるわけじゃなくてさ、

このサイト自体が結構面白い作りしてるから気になったんだよ！！

まじで(；･`д･´)

Fireworks：グラデーションが荒くなる件

Tue, 10 Jan 2012 20:06:01 +0900

Fireworksでグラデーションの入った、gif画像を書き出すと、

横ラインに粗さが出てしまう、という問題です。

（Macなどのディスプレイでみると歴然、色数が多いと更に…）

こんな感じ、、

怒られました。

明度設定の高いWinディスプレイで、作業していると気づきにくいです。

gifの拡張子自体が、グラデ向きではないですが、

・サイズの小さいボタンなどを作成する際、画像の大きさに対してファイルの容量が割りに合わないケース

・仕様や、IE対応でPNG禁止など制約のあるケース

こんなんで、やむおえないこともありマス(T_T)

元々、Fireworksはこういった書き出しには弱いらしいですね。(^^)

しかし、Fireworksメインで作業していると、わざわざPhotoshopに移して書きだす。

なんて面倒くさいこと「やってられるか！」ってことで…

この問題を回避する方法をいくつか調査しました。

原因は”ディザ”の設定が、深く関わっているようです。

※ディザって何それって方はまたの機会に

要は0%だと荒く、100％になればなるほど滑らかになります。

FireworksCS4以前の解決策

1.書き出し設定を、GIF256色、ディザ100％にする

2.グラデーションの設定を、細かく刻む。

FireworksCS５での解決策

1.プロパティから、グラデーションディザの適応

CS5からは、「グラデーションディザ」という機能が実装されました。

ボタンをポチッと押すだけである程度の違和感は緩和される感じです。

結果こんな感じになりました

以上

Fireworksでグラデーションが荒くなる問題の回避方法でした。

画面確認環境は、最低3つは用意しておくことを強くお勧めします。

なにはともあれ、クオリティーのため、クライアントのため。

怒られないため！！(；･`д･´)

【Fireworks】CS5で頻発する、メモリ不足エラーの回避方法

Tue, 10 Jan 2012 19:43:37 +0900

FWから「メモリ不足です！」…の

一点張りで、一切の操作が完了できなるという問題です。

最近、ドハマリして膨大な時間が無駄になったので、

こんな悲しい事が起こらないようにアウトプットします。

発生条件は、それなりのページ数の、サイトを制作している場合などに多く見られました。

最悪の場合、時間をかけて作成したデータが、

・保存出来ない
・データが開けない
・開けても全く操作ができないまま落ちる

なんてことが起こります。

原因がいくつか考えられるので調査し、回避方法をまとめました。

Case1.　ページ機能を使いすぎている
ページ枚数が8Pを超えたあたりから、かなりデータが固まるリスクが高くなった気がします。
上書き保存するときに、不穏な間ができてヒヤヒヤします。

回避方法
マスターページの機能を上手に利用して、作成サイトの共通部分はできるだけマスターページにまとめましょう。

Case2.　ヒストリーの蓄積
ヒストリーは作業時間や行程が長ければ長いほど、蓄積されていきます。
これは、環境設定の、「最大取り消し階数」の制限が関わっています。

100以上に値を設定してる方は、要注意です。

たくさん以前の操作に戻れると安心できるかもしれませんが、一番危険なパターンです！！

予期せぬアクシデントでぶっ飛んだらどうしますか！？
制作上では何が起こるかわかりませんのでバックアップはこまめに取りましょう。

回避方法
メニュより、編集 → 環境設定 → 一般 → 最大取り消し階数で、設定可能です。

20くらいが無難で、作業が長引いてもそれなりにサクサク動きます。

CS5ではデータがパンクしそうになってフリーズしたら、「ヒストリーを削除しますか？」と聞いてきますので保険はあります。

Case3.　画像データが大きすぎる
当然、編集データ内に大量のデータや、ファイルサイズの大きい画像を調子にのって入れすぎるとパンクします。
ページ機能が便利だからって叩きこんでたら僕のように悲しい目にあいます。

回避方法
マスターページ機能の利用で、共通画像などはできるだけマスターページにまとめましょう。
各ページで使いまわす画像がある場合は、画像をシンボル化することをお勧めします。
画像のシンボル化を行うと、ドキュメントライブラリに送られ、一つの画像を使いまわすことができます。
これにより画像重複によるデータの増加は防げます。っと言うかこっちのが便利です。

Case4.　ドキュメントライブラリへの不要データの蓄積
個人的にこれが一番致命的で、ちゃんと検証しないと気づかない問題です。
ドキュメントライブラリに、気づかないうちに不要データが溜まって大変なことになっている件です。

これは、Case3で説明したシンボル化が原因です、シンボル化した画像データはページやレイアウト、
レイヤー上で削除してもドキュメントライブラリで残ってしまうのです。

回避方法
シンボル化したデータは、ドキュメントライブラリ上で削除するか、ゴミ箱アイコンで消しましょう。
シンボル化した際、そのシンボルにネームをつけるなりして管理するのも手です。

Case5.　単純に環境のメモリ不足
おいおい！っと思われる方もいるかと…でも結構ありがちですがこの場合は、
上記の対策に加えて、作成データ自体を小分けして小さくするしか方法はないです。
マスターページ機能や、シンボル化など使おうもんなら簡単に落ちるかもです。
8GBでも不足になるくらいですからね。

Case6.　他のアプリの立ち上げ過ぎ
多く語る必要はないと思いますがAIやFirefoxはびっくりするぐらい、気づかぬうちに重くなってます。

まだまだ有りそうですが今回はココまで！

ちまたで話題の、JimdoというWeb屋キラーの話

Thu, 05 Jan 2012 20:37:01 +0900

こんばんわNushiです(^^)

今回は最近ツイッターで騒いでいるJimdoというWeb屋キラーについてのまとめ記事を書きたいと思います。

多分しばらく関わる事が多いので、この度は第一弾です。

とりあえず今回は簡単に紹介やらしていきたいと思います。

リンクはこちら＞http://jp.jimdo.com/

■Jimdoとは

Jimdo（じんどぅー）とはなんなのか。

めっちゃくちゃ簡潔に言うと、専門的な知識がなくてもだれでもHPを作れるサービスのことです。

もともとはドイツのJimdo社が展開していたサービスだったのですが、２００９年についに日本に襲来しました。

提携は皆さんおなじみKDDIさんです。

「無料オンラインウェブサイト作成ツール」ということで、特にエディタ等や専用ソフトなど必要なくブラウザでHPが作成できるというわけです。

■特徴

・手続きがすごく簡単。メルアド一個で簡単にURLやドメインなど環境がもらえる。

・管理編集画面が、ほぼ表示画面と変わらないから初心者でもわかりやすい。

・レイアウトやデザインのテンプレートが豊富、アメブロさながら。

・HTML、CSSでかなり自由度の高いカスタマイズができ、拡張も容易。

・フォトギャラリー、掲示板、お問い合わせフォーム、、ブログ、おまけにアクセス解析機能まで。

・何がすごいって、jsまで外付けできて、フォトギャラリーなんか動作制御までできる。

・簡単にオンラインショプも作成できる

■コースと料金

<初期の状態>

・サーバー容量500MB
・広告が邪魔
・独自ドメインがない、～jimdoが付いたURLになる
・メールアカウントなし

<年額11,340円コース>※月額945円

・サーバー容量5GB
・独自ドメインあり
・メールアカウントがもらえる
・アクセス解析機能
・Jimdo広告などの排除

などなど

■個人的な感想

まあ驚異的なサービスだと感じますね、僕の仕事が無くなりそうですｗ

特別Webの知識など持っていないクライアントさんや、
単にHPが必要になったという、コダワリのないクライアントさんの場合は、
これだけの機能があれば大満足でしょう。

初期費用のことや、ランディングコスト、また更新の簡易性を考えると、
むしろコチラのほうがメリットが多いのかもしれません。

しかしこういったサービスのニーズが高まったとしても、
やはりテンプレートには限界があります。

っと言うよりは

「Webサイトとしてどう活かせるか？」

「いかにエンドユーザーへの反響を生み出せるか」

「クライアントさんの価値を高められるか」

そういう点ではWeb屋の本当にするべきことがあるような気がします。

たしかにJimdoは簡単にHPを作ることができるかもしれませんが、クライアントさんのもつ価値を効果的に高めているか？
発信したい情報を、ターゲットのユーザーに適格に伝えられているかはわかりません。

やはりそこはWeb屋としてプロフェッシェナルとして、見た目だけでない「反響を生む設計」…的なものを提案するのが使命なのでは？

と勝手に考えてます。

まあ…上記のようなクライアントさんと直接、言葉も文章も交わせる環境になれていない、
ジレンマ野郎がいっちょ前にいうておりますが！！　(^^)あばば

■補足
jimdoには「独自カスタマイズ」という、かなり自由にHTML・CSSを編集できる機能があるのですが、（大抵のことは出来ます）
無料でも邪魔な広告を消したい！！と思ったらなんと、display:noneとかで消してしまえちゃったりします(^^)

でもですね…実は消すと契約違反でツンツンされるらしいです。
http://jp.jimdo.com/wiki/Is_it_possible_to_remove_the_ads_on_my_Jimdo_site%3F＜ここに書いてあった。

と言うかなんで出来るんだよ。これだけ立派なもの作れるならjsで簡単に制御できるだろうに。

Flash Catalystへインポートするデザインデータ作成の流れ

Tue, 27 Dec 2011 21:21:34 +0900

自分も最初にFlash Catalystを使用したときは、インポートするデザインのデータ作成にかなり準備に時間を取られました。

神経質にデータを作りこんでいましたが、はじめに知っておけば無駄な時間が省けたのでは、ということも多かったです。

このソフトの強みはグラフィックソフトからのデータの反映が優秀なことです。
ですがFlash Catalyst自体もかなりのデータ編集機能を備えていますので、効率のいい作成を行いましょう。

あまり神経質にフォルダ分けや、リネームとかレイアウトの調整とかしても、取り込んだデータの管理編集などで意味がなくなることがあります。

重要なポイントをおさえて時間をかけずにさくっと仕上げましょう。

以下が、Flash Catalystへインポートするデザインデータ作成の流れです。

1.完成デザインをおこす
Flash Catalystでは、IllustratorやPhotoshopで作成したデザインがそのまま反映されるのが特徴です。デザインを起こした段階で静的な状態の完成図となります。動き出すのか想像しながら設計するのがコツです。また、ボタンや動きに関連するオブジェクトなどは部品として認識しながらデザインを行うといいかもしれません。当然ながらボタンのON/OFFなど。

2.パーツを最適化して保存、最配置する
Flash全般で言えることですが画像の要領がそのまま成果物のファイルサイズに干渉してくるので、この時点で出来る限りの最適化を行いましょう。画像やテキストを外部ファイルとして添付しない場合は特にです。テキストをアウトライン化する場合はこの時点で編集データを残しておきましょう。

3.パーツに名前をつけてフォルダ分けする
Flash Catalysへ、データを移行する際特に注意したいのはフォルダ分けです。主要なパーツはフォルダごとに分けて名前をつけておくとのちの作業が円滑になります。レイヤーの順序などもそのまま反映されるので構造を意識しながら作成しましょう。
ちなみにここで綿密にしなくてもFlash Catalyst内でも追加変更が行えます。
※あまりここで頑張りすぎても意味が無いのでほどほどに重要なものだけ。

4.編集データを保存する
IllustratorやPhotoshopで作成したデザインならばそのままで構いません。Fireworksやその他のグラフィックソフトの場合はFXGファイルで書き出しましょう。

●補足
・画像パーツ等の差し替えも後に行えます。テキストの打ち直しも可能です。
・データの書き出し方によってはテキストデータが埋め込まれないので特殊なフォントを使用したテキストを使う際はフォントのデータを添付するか、アウトライン化しましょう。
・Fireworksなどでビットマップ画像を編集データに含むものをFXGファイルで書き出すと勝手にPNGになります。
・ボタンなどのパーツはテキストの背景などが共通であれば一枚の画像で切り出すほうが吉です。（当たり前ですが）