【Fireworks】の痒い所に手が届く！拡張機能“Transform Panel”を使ってみた | バシャログ。
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
【連載1】Fireworksのもやもや解消法｜ふわっとブログ
今年は私がはじめて執筆したFireworksの本が出ます。 多分こんな話は最初で最後だろうと思うので、発売までいろいろ宣伝をしたいなと思っています。宣伝ができることも幸せです。 なので、これからFireworksについても何かしらTipsを連載していきたいと思っています。平によろしくお願いします。 Fireworks もやもや解消法 最初の回ですが、ほんとーに細かいコツのようなものを書きます。 知ってたら、あーそれ知ってるわ〜2年前から知ってるわ〜と流し読みしてください。 アンチエイリアスがもやもやするのを直す パーツ同士を整列させたりしたタイミングで、よくアンチエイリアス（パーツのフチの境目）の部分がもやもやっとすることありませんか？
パス画像をFontに変換！「icoMoon」を使ってみた。 | バシャログ。
1月が終わってしまいましたね～！春が待ち遠しい、seki です。 今回は、今まで画像として書き出して使っていたピクトグラムなどのパス画像を、フォント形式で吐き出してくれるサービス「icoMoon」のご紹介です。一度自分で作ってみたくてウズウズしてました。詳細は以下より。 作り方について 参考サイト→http://webamb.com/web_service/773.html はい！こちらの記事にとても分りやすく紹介されています！ とりあえずその通りにやってみましょうか。 1. Fireworksでまずは元となるアイコンを作る パスツールを使ってサクサク。よくメニュー周りなどで使えそうなものを作ってみました。 無心で作りすぎたせいであまり統一性がありませんが、参考までに。 塗りは黒ベタで。もし描くのが難しいという方は、フリー配布されているアイコンから持ってきても良いかと。 もちろんイラレで作
『Fireworksを使った大規模ウェブサイトのデザイン設計』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
Fireworks で戦国武将の家紋を作って SVG な Web Font に変換してみる - 歴史雑談録
どうも、松田直樹@まぼろし でございます。 当方、実はWeb制作が本業でして、このような記事を書くハメになってしまいました。（いや、喜んで書いてますよ） 「Fireworks」ってのは Photoshop のようなグラフィックツールでございまして。 Web制作に特化した機能が豊富だったりで Webな方々には多く使われていたりするのですが、僕も右に倣えで頻繁に使用しているわけです。この Fireworks に関する記事を書くにあたり、この歴史雑談録に何とか絡めようと表題のようなテーマに及んだ次第にござりまする。 ということで、この記事は「Fireworks Lover Advent Calendar 2012」の20日目の記事となります。（長いです。すんません） 今現在、Web制作界隈においては「脱ビットマップ」「SVG元年」といったキーワードが脚光を浴びておるわけですから、なんと時勢を読ん
Fireworks でワイヤーフレームを作成する際に活用したい機能 | バシャログ。
来年のテーマを早くも「断捨離」に決めた sakai です。 今回は Fireworks でワイヤーフレームを作成する際に活用したい機能についてです。 この記事は Fireworks Lover Advent Calendar 2012 の 10日目です。良記事ばかりなので、ぜひチェックしてみてください！ Fireworks でワイヤーフレームを作成することのメリット そもそも、なぜ Fireworks でワイヤーフレームを作るの？ ピクセルベースで作業ができる。 ピクセルベースでオブジェクトを作成・配置できるので、グリッドでレイアウトすることも簡単です。 ページ機能・共有レイヤー・共有ライブラリ・ステート機能が強力すぎる。 Web サイトの制作に特化したツールだけに、他のツールにはない強力な機能があります。 ワイヤーフレームの作成からコーディング直前までの工程を Fireworks オンリ
【Fireworks】ワイヤフレーム作成時に覚えておくと便利なアタリ画像＆アタリテキストを簡単に作成する拡張機能 | バシャログ。
3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について２つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ
Fireworks CS6の新機能、CSSプロパティパネルを便利に使ったWebデザインの流れまとめ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
G3株式会社さまのコーポレートサイトを制作させていただきました。 CSSプロパティパネルが便利すぎて… 今回、FireworksのCSSプロパティパネルが最高すぎることによってかなりの短時間でサイト制作できたので、それのご紹介がてら、どのようにサイトを作っていったかご紹介したいと思います。 すでにサイトがWordPressで動いていて、別のテーマで運用中だったので、 テキスト等もそのまま流用でき、私の作業としては純粋にWordPressテーマのデザインとコーディングの部分でしたので今回ご紹介するのはその部分の流れになります♪ まず、イメージを膨らませる イメージ固めから入りました。 会社のコンセプトが「毎日をワクワクさせちゃえ！」だったので、私の中でのワクワクのイメージを考えてみます。 google画像検索でワクワクを検索してみたり。 なんとなーくブルーが多い印象。 こういうものも参考にし
Photoshop・IllustratorユーザーのためのFireworks入門
現在開講している、社会人のためのWebデザインスクール で私と一緒に講師をされているユミソラさん（ @YumiSora ）は、以前のスクールでも Fireworks 特別講座を担当して頂きました。 その際、「桜の作り方」というレッスンは Fireworks 特有の操作が上手くまとまっていたので、ユミソラさんに許可を頂いて記事にしました。 Illustrator でも同じものは作れそうですが、普段 Fireworks を使わない私には新鮮でした。 Fireworksで桜を作る 今回作る桜はこんな感じです。 桜の形はパスの型抜きでサクッと作れそうですが、5等分に回転して並べる部分はどう作るのか気になりました。 まず新規作成し、楕円ツールをクリックし、塗のカラーでピンクを選択し、Shift キーを押しながらドラッグして正円を描きます。 このあたりは Photoshop や Illustrator
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
2. 自己紹介 • まぼろしの松田と申します • デザイン、マークアップ、JSer、 ライティングなど • 主な著書 『効率的なサイト制作のためのDreamweaverの教科書 【CS5.5対応版】』（鷹野さんとの共著、マイナビ） 2
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
Fireworks CS6 の進化したところと不具合まとめ
さて、前回に続き、今回は WebデザイナーのためのAdobe CS6検証会 から Fireworks CS6 の情報まとめです。 Fireworks CS6 は、6月から私と一緒に Webデザインスクール の講師をされる @YumiSora さんから、詳細を詳しくまとめた資料をメールしていただけたのでそれを基に書いています。 Fireworks CS6の進化したところ CSSプロパティパネル 選択しているオブジェクトのCSSのコピペができるようになりました。 CSS プロパティパネルは、「ウィンドウ＞CSS プロパティ」より表示できます。 CSS3などの慣れないものや特殊なプロパティなど、ある程度ここからコピペして、 手動で改変やGoogle検索で調査のきっかけにするなどのワークフローに使えそうです。 線の位置を内側や中央にした場合、線幅を考慮した分、形そのものの width と heig
ページデザインの各エレメントのスペックを1クリックで表示するFireworksの機能拡張 -Specctr
メンバーへの指示書、自分の確認、ガイドラインの作成に役立つ、各エレメントのサイズやフォント・カラーなどのスペックをクリック一つで自動表示するFirewoks用の機能拡張を紹介します。 Specctr [ad#ad-2] Specctrの使用感 Specctrのダウンロード Specctrの使用感 Specctr Liteをインストールしてみたので、キャプチャと共に使用方法を紹介します。 メニューの[ウインドウ]からSpecctrを起動します。 Specctrを起動 Specctr Liteでは2種類のスペックを表示できます。 「SPEC」の「Width/Height」ボタンをクリックすると、エレメントの幅と高さのスペックを表示します。
PhotoshopやIllustratorを組み合わせて5分でも早く！Fireworks中心に制作している僕のAdobeソフトの使い方 | Webデザインのタネ
一定期間更新がないため広告を表示しています
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUKI HARUYAMA Portfolio Site | 春山 有由希
http://lab.spec5zigen.com/archives/fireworks_tips_01/
解放新聞による在特会関連の虚報について - 在日特権を許さない市民の会 - ニュース
【Fireworks】Fireworksの基本技！[ box-shadow ]のあしらい再現方法まとめ | バシャログ。
Fireworksで覚えておくと便利な文字設定まわりのTips | Webデザインのタネ
Fireworks初めての方にオススメしたいサイトと参考書 | Webデザインのタネ
