出不精をなおすためだけに、最近デジタル一眼を購入してしまったアシスタントデザイナーのテツです。
サイブリッジには凄腕のカメラマンがぞろぞろといるので負けじと腕を上げていきたい所ですね！

さて、今回はFireworksでスライス名がサクサク付けられるようになるエクステンション「Slice Name Changer」を紹介します。

簡単にスライス名をつける「Slice Name Changer」の使い方

1．Fireworksに「Slice Name Changer」をインストール

下記のサイトを参考にインストールしてください。

Fireworksのスライス名を簡単に変更するエクステンション

2．ショートカットを割り当てる

Extension MaganerからインストールするとFireworksの「コマンド」タブに「1 Slice Name Changer」が入ります。これをクリックすればすぐ使えるのですが、このままだと使いづらいのでショートカットに割り当てることをオススメします。

ショートカットの割り当て方

1. 「編集」→「キーボードショートカット」でキーボードショートカットを開く。
2. キーボードショートカットの「メニューコマンド」で「コマンド」タブを開く。
3. 「1 Slice Name Changer」をクリック。
4. 「キー制御」にお好みのショートカットコマンドを設定。

※ここでは「F3」を設定しています

3．早速「Slice Name Changer」を使ってみよう

いつも通りスライスを置きスライスを選択した状態で「F3」を押す。

すると↓のようなダイアログが表示されるのでここに付けたい名前を入力してOK。

スライスに名前が反映されているのがわかります。

Fireworksの便利な機能としてスライスの使いやすさを挙げる人は多いかと思います。ただ、スライス名を付ける時にレイヤーのスライスをダブルクリックしないといけないので少し面倒だったんですよね。今回のこの機能を使えばそんな面倒も解消されるわけです！「Slice Name Changer」を使ってよりサクサクにスライス機能を使いこなしましょう！

その他、私がデザイナーになってすぐにためになったスライス系のまとめです。

■CS5のスライス書き出し名の「_s1」を消す方法

CS5のデフォルト設定だと、書き出し名に「_s1」が付いてしまいますよね。その解消方法です。これは以前のサイブリッジラボでも紹介されていましたね。

Fireworks CS5 のスライス書き出し時に _s1 をとる

■重なったスライスでもバラバラにならないで書き出す方法

複数のスライスが重なっていると、下層レイヤーにあるスライスを選択し書き出すときに下記のように分割して書き出されてしまいます。これは書き出したいスライスの上に他のスライスが乗っているからです。

例）書き出したい「square」のスライスの上に「circle」のスライスがのっている状態。

これを解決するには、書き出したいスライスを重なっているスライスよりも上に持ってくることで解消できます。

例）書き出したい「square」のスライスが「circle」のスライスよりも上にある状態。

■スライスガイドを消す方法

スライスガイド（スライスを付けたときに出現する赤い線）は便利な反面、スライスの数が増えてくるとデザインが見えずらくなりますよね。サイトのTOPページデザインを書き出す時なんかは特に。。
ガイドラインを消す方法は「編集」→「スライスガイド」でチェックを外すだけです。（ショートカットは「Ctrl+Alt+Shift+:」です）
これが便利な点はガイドラインを消してもスナップは効いているということ。これならガイドラインがなくても置きたい場所に置けますね。

以上、スライス系のまとめでした。ぜひ参考にして頂ければと思います。
それではまた！

こんにちわ。りうこです。
2011年1回目のラボブログです☆
今年もどうぞよろしくお願いいたします。

第1回目のラボブログは、

女の子向けのデザインに役立つサイト5選と題して女の子向けサイトのデザインを
充実させる為に役立つサイトを５つ紹介したいと思います！ 

まず1つ目は、

Fireworksマニア

私がいつも参考にさせていただいているサイトです。

http://fw.v-colors.com

こちらのサイトでは、Fireworksをつかったデザインアイディアなどが紹介されています。
例えば真珠の作り方や、花のコラージュを作る方法など...私もやってみたのですが、Fireworksでこんなことができるんだっ！と目からウロコでした｡実際にまねして作ってみるととても楽しいですよ♪

2つ目は、

PearlBox

http://flap.vis.ne.jp/pxb/

こちらは、photoshopですが、ダイヤモンドや、
羽根など。可愛い素材の作り方が乗っています♪


3つ目は

ビジンソザイ

http://bijinsozai.com/

美容･化粧品系のサイトを作るときにきっと役に立つと思います☆
例えば、スキンケアをしている女性とか、お化粧をしている女性の写真が沢山揃っています！
安い素材で1,000円～　無料の素材も少しあるので美しい女性の素材が
なくてお困りの時にはこのサイトをのぞいてみるといいかも。


4つ目は

シルエットデザイン

http://kage-design.com/wp/

私もよく助けられています！
無料で商用フリーなのが嬉しい限り。
人物などのシルエットはもちろん、飾り枠や、季節の素材も揃います☆
デザインにちょっとプラスするだけでゴージャスになります♪


5つ目は

アイコンファクトリー

http://iconfactory.com/freeware

可愛いアイコンはもちろんスタンダードなアイコンまで
幅広く掲載されています☆
こちらは商用利用はNGなのですが、デザインの参考になると思います。


時間がないときにうまく素材を使ってデザインするのはもちろん、
fireworksマニアさんや、pearlBoxさんの様に手を動かしてデザインしてみることで

自分のスキルアップにもつなげていきたいですね♪

最近の記事は HTML のことばかり書いていたので、本日は Fireworks CS5 で、スライス書き出し時にファイル名の末尾に「_s1」がつく件についての対処法を書こうと思います。

設定方法はカンタン！3ステップで終わります。

1. ファイル → HTMLの設定

2. ドキュメントの詳細 → ステート名「なし」＋「なし」を選択

3. デフォルトに設定をクリック → OK

以上です。これでファイル名の末尾に「_s1」がつかなくなりました！お試しあれ。

こんにちは、けっつんです。

今日はFireworksの限界を超える技をご紹介します！

サイブリッジのデザイナーがデザインに愛用しているFireworksですが
web用だからかなぜか6000px以上のキャンバス設定ができなくなっています。
ランディングページ作成のときとか、どうしようかと困ったことがある方も
ちょっとはいらっしゃるかも？

でも！対策がありますのでご安心下さい♪

Adobe Fireworks CS5/CS4の場合

Fireworks CS5の場合は
C:¥Documents and Settings¥<ユーザー名>¥Application Data¥Adobe¥Fireworks CS5¥Japanese¥Fireworks CS5 Preferences.txt

Fireworks CS4の場合は
C:¥Documents and Settings¥<ユーザー名>¥Application Data¥Adobe¥Fireworks CS4¥Japanese¥Fireworks CS4 Preferences.txt

というテキストファイルを一部書き換えます。

このファイルをエディタで開き、

<key>MaxDocSizeInPixels</key>
<integer>6000</integer>

という部分を探します。

この6000の部分を変更することで、最大設定値を変えることができます！

たとえば...
<key>MaxDocSizeInPixels</key>
<integer>10000</integer>

とすると、キャンバスのサイズを10000pxまで広げることができます。

Adobe Fireworks CS3の場合

6000pxよりも大きいgifなどの画像をPhotoshopなどで作成します。
それをFireworksで新規レイヤーに貼り付け。
キャンバスをフィットさせると、その分キャンバスが広がってくれます！



どうぞお試し下さい★

こんにちは、けっつんです。

こないだの土日、社長はミラコスタにお泊まりしていたようですが
私は実家に帰り、ひさしぶりにお菓子作りとかしちゃいました。
ちんすこう作りました。ちんすこうって作れるんですね。
ちょっと焦げましたがちゃんとちんすこうでした。

さて、今日のテーマです。

Fireworksで.icoファイル(ファビコン)を作成する方法

.ico形式のファイルを作成するのに、いちいちジェネレーターを使ったり
Photoshopにプラグイン入れて書き出してみたりなど
いろいろ方法はあるかと思いますが、
今回はサイブリッジのデザイナのように、普段のデザイン作業はFireworksで！
ほかのソフトをいちいち立ち上げるのメンドイんだよね
というひとにオススメのエクステンションをご紹介します。
 

インストールと使い方

ExportAsFavicon | johndunning.com

ここからダウンロードしたファイルをFireworksにインストールします。

まず、「コマンド」→「Favicon」→「New Favicon - 16X16」から、新規アートボードを作成します。

ファビコンにする画像をつくったら...

「コマンド」→「Favicon」→「Export as Favicon」で書き出し先を指定。
Favicon.icoファイルが書き出されます！

ただ、まだモチーフの輪郭にアルファチャンネルが効かなかったりなど
痒いところに手が届かない感があるエクステンションですが...
今後に期待です!!!

昨日12日、Adobe CS5が発表になりました。
 日本語版発売は5月28日だそうですが、発表予告サイトを設置したりして、強化された新機能で盛り上がっていましたね！

サイブリッジでは1人1ライセンスずつ持って全員が何かしらのAdobeソフトを使っています。

 今日はサイブリッジのデザイナがよく使うソフトのCS5に追加された新機能について説明します。

Fireworks CS5

・デフォルトで入っているテンプレートが26に増えました。もちろん追加も可能です。
・グラデーションの品質が向上したようです。いままで極端なグラデーションなどはphotoshopを使って書き出したりなどしていましたが、もうそういうこともなくなりそうですね。
・「ピクセルにスナップ」という機能が追加に。これを利用することで、オブジェクトのエッジやストロークに生じるムダにブレたアンチエイリアスが‥ということもなくなります！

その他の追加機能
 縦横比を保持を［プロパティ］パネルに実装
ストロークの整列（線の位置を内側／中央／外側に）
破線設定の簡略化
option＋ダブルクリックで同属性のテキストを瞬時に検索、ハイライト、属性変更
ASE（Adobe Swatch Exchange）のサポート
カラーピッカーからのカラー値のコピー
スライス間での属性のコピー&ペースト
テキスト編集中有の取り消し機能の改善
9スライスのテキスト拡大・縮小の改善
複合シェイプツール（後から編集可能なパスファインダー）

Dreamweaver CS5

・Firefoxのアドオン「Firebug」のようなデバッグをDW内で実現できます。マウスオーバーしながら目的の要素を選択し、その要素に設定されているCSSを確認・編集することが可能です。
・CSSスタイルパネル内の要素を一時的に無効にしたりなどでCSSの検証をすることが可能です。
・クロスブラウザでの確認作業のためのBrowserLabが「CS Live」と呼ばれるオンラインサービスの一環として正式にリリースされました。

その他の追加機能
スタイルレンダリングの強化（文字サイズの変更、:visted/:hoverなどの表示）
すぐに作業できるシンプルなサイト定義
関連ファイルのフィルタリング（CSSのみ、JavaScriptのみなどの表示）
WordPressをはじめとするPHPをベースにしたCMSのサポート
PHPのカスタムクラスコードヒント
Subversionの連携強化（Subversion 1.6に対応）
Omniture連携（Test & Target）
日本語ヘルプも充実のCSS新規ドキュメント
ライブビュー利用時のブラウザナビゲーションバー（オンラインコンテンツを表示可能）
新規ファイル作成時のICE（InCntext Editing）のサポート


こう見ると結構いいかんじの機能っぽいですね！CS4に続きCS5も弊社には導入されるのでしょうか！？

CS5もほしい。iPadもほしい。あたらしいPCもほしい。iPhone以外にもう1台ふつうの携帯もほしい。ディズニーの年間パスも更新したい。
お金使うことしか思いつかないけっつんでした。

ハシモトです。
最近 Google Chrome が軽くて、Firefox の出番がめっきり減ってきました。
きっと Firebug for Chrome なんてリリースされたときには、ほぼ Chrome で事足りているのでしょう。Lite 版はまだまだ使えません＞＜；

さて今日は、ビットマップデータしかないロゴ画像などを割りとキレイに、しかもサクッと（ここ重要！）抽出しちゃう Fireworks の小技を紹介します！
もうこれでパスデータがないロゴなんかでも思考に制限を与えることなく、バリバリクリエイティブできちゃう！もう大丈夫！なはずです。

先日、弊社が運営する大学生向けポータル、キャンパスシティに2010年版の新生活特集がオープンしました。そのキャンパスシティのロゴをサンプルに、たった５ステップでサクッと春らしくピンクに変えちゃいましょう！

※通常、ロゴマークを扱う際は規定をしっかり守らなければなりませんが、今回はあくまでサンプルとしてお送りいたしますのでそこの辺りご了承ください。

ステップ.1 画像をグレースケールに変換

通常だとロゴ画像のパスデータがあれば、こんなことをしなくても済みますが、細かいことは気にせずまずはロゴ画像を Fireworks のキャンバスに配置します。

今日はFWの画像の縮小拡大方法についてお話しします。

FWの「編集」→「環境設定」(Ctrl+U)の「一般」の中に
「画像補間方式」という項目があります。
これは画像の縮小・拡大をするときの方式になります。

それぞれの方式には下記のような特長があります。

バイキュービック

コレが一番キレイに拡大縮小できます。
この方式では、色と色の境目をお互いの平均値を計算して
なめらかなグラデーションになるようにしてくれます。

バイリニア

精密度はバイキュービックとニアレストネイバーの真ん中。
ある程度のなめらかさは欲しいけど、もうちょっと輪郭線をクッキリさせたい・・
といった場合に使用するといいと思います。

ソフト

輪郭にやわらかいぼかしが入り、細部が不鮮明になります。
正直使い道がわかりません。

ニアレストネイバー

4種類の中で最も画像補間の精密さが低い方式です。
ドットを維持して拡大縮小したいときに使用します。


あまりバイキュービック以外を実作業で使用することはほぼないに等しいのですが、
モバイルサイトを使用するときにたびたびおきる現象を回避することができるので
覚えておくといいかもしれません。

QRコードの拡大縮小がぼけずにできる！

画像を見ていただくとわかると思いますが、
バイキュービックで縮小をするとエッジがぼけるので
特にQRコードの場合などは、読み取れない場合があります。
実際社内端末のSO906iでは読み取れませんでした。
そんなSO906iですが、ニアレストネイバーで縮小をしたQRコードは
見事読み取ることが出来ました！

こんにちは。けっつんです。

Fireworksでデザインをしていて、「このパーツをもうちょっとひとひねりしたいなあ･･」と考えたとき、重宝するのがテクスチャです。
でも、Fireworksに標準で入ってるテクスチャって使いやすいものがたくさんあるわけじゃないので他のサイトとかぶったりしてしまうのが気になります。

だから自分でテクスチャを作ってしまいましょう！



まず白黒でテクスチャをつくってみます。
作ったテクスチャが上下左右に繰り返されるので、線がズレたりバランスが悪くなったりなどならないよう注意です。

gif,jpg,pngあたりで保存。保存したときのファイル名がテクスチャの名前になります。


テクスチャを入れたいパーツを選択し、プロパティの「テクスチャ」→「その他」で作成したテクスチャ用ファイルを選択。


これでできあがりです！

今回つくったテクスチャ素材、よろしかったらお持ち帰り下さい。



商用利用可能なテクスチャファイルがダウンロードできるサイトもあります。

Fireworks texture gallery

ここのテクスチャを使えばこんなクリスマスな素材だってつくれます！



あーシーにいきたい。

では！

こんにちは、ぴんしゃんです。

今回もFireworksのお話です。

日々お世話になっているありがたいソフトですが、
「え、なんで？」と思うようなバグに出くわすことがあります。
今回はそんなバグの解決方法を一つご紹介します。

ボケたりブレたりしたエッジの直し方

角丸の矩形を作って整列で移動したときに
下記のようにエッジや線が絶妙なかんじでブレてしまうことがよくあります。

こんなときは元に戻って整列を使わずに移動したり、
「角丸じゃなければ...」と無駄なことを思ったりしていたのですが、
下記のようにすれば簡単にエッジのブレを直すことができます。


プロパティの中の幅を1pxほど大きくします。
そしてすぐにまた元の幅に戻します。

ぼやけたエッジが再びシャープに！
あーよかった (・∀・)