FireworksデータをPhotoshopデータに変換する際にやるといいこと - Qiita
前置き(Fireworks Dis) AdobeがMacromediaを買収して早10年。AdobeがFireworksの開発を終了して早2年。IllustratorやPhotoshopにウェブデザイン関連の機能が実装されてきて、Fireworksで作業をするメリットが徐々に薄れてきた昨今ですが、未だにその人気は根強く、WEBデザイナーさんから送られてきたデザインデータが *.fw.png になってることがままあります。 正直、Fireworksはバギー過ぎてまともに動かないことが多々あるし、できることなら使いたくないし、いまだFireworksを使ってるひｔ（ｒｙ とはいえ、*.fw.png が送られてきてしまった以上は仕方がないし、おそらくFireworksのデータを送ってくる人はPhotoshopで起こし直すなんてことしない（できない）だろうから、スライス切って書き出すにしても、この
Fireworksユーザーに朗報？海外で話題の新しいWeb制作ツールSketch.app | Goodpatch Blog
Web制作ツールといえばAdobeのPhotoshopやFireworksですが、AdobeはFireworksの開発停止を発表してしまいましたね。そんな最中、海外のWeb/ UIデザイナーたちが使い始めている新しいWeb制作ツールを見つけました。それがSketchです。BOHEMIAN CODINGという会社がリリースしているアプリで、他にも有名なフォント管理アプリFontcaseもリリースしています。 （Sketchを使い始めている海外のデザイナーたち→「Sketch App vs Photoshop」、Dribbbleにsketchで描いた作品をアップしている人も→[.Sketch] Wireframe UI kit） アイコンやWebサイトのデザインもきれいで、Goodpatch社内でも最も話題になっているアプリ。Sketchも使ってみようと盛り上がっています。ただSketchにつ
Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
Fireworksでのウェブ制作の作業をかなり楽にする機能拡張のまとめ
グリッドやガイドのお助けツールから、グループ化したエレメントのサイズ調整、ダミー画像やテーブルの作成、ショートカットの強化など、そんな便利なFireworksの機能拡張を紹介します。 Optimizing The Design Workflow With Extensions 上記で紹介されている7つのツールを紹介します。 Grids Panel Guides Panel Smart Resize Tables Placeholder Orange Commands QuickFire Grids Panel 「Grids Panel」は、数値を入力してレイアウト用のグリッドを作成します。 Grids Panel カラムの幅、数、溝の幅、を選択するだけで簡単に作成できます。また、作成したグリッドは不透明度を調整できる優れものです。 Photoshopにも同様にグリッドを作成する便利な機能拡
今後の大きな画像を配置するウェブデザインに必須のファイルサイズ縮小テクニック
概要 ▶ 最近のウェブサイトでは大きく画像を使うデザインが増えてきましたが、閲覧者のストレスを無くすためにロード時間はなるべく短い方が良いですよね。今回はFireworksを使った画像劣化の少ないJPEG画像サイズ縮小テクニックを紹介します。 今回は画像を画面いっぱいに使う時代に必須の画像ファイルサイズ縮小テクニックを紹介します。 最近のウェブサイトではかなり大きく画像を使うデザインが増えてきました。 たとえばこんな感じのサイト（これは本当はデモページですが） 出典：Overlay Effect Menu with jQuery | Codrops ブロードバンド化が進んでいるとはいえ、画像のファイルサイズが大きすぎて、画面表示まで時間が掛かってしまうようであればユーザビリティも悪いですし、何より格好が悪いですね。 ローカルでデザインしている時は特に問題が無くても、サーバーにアップロードし
Fireworks用テキスト生成パネル「PI_TextGenerator」 (PIXEL LAB)
Fireworks用のテキストオブジェクト生成パネルを作成しましたので、公開します。 たまに、いてますよね。なんでもイラレで作る人。デザインをはじめ、ちょっとした資料・指示書まで。 私の場合は、あらゆるものを、Fireworksで作成してるのですが、 そんなヘビーユースを支えてるパネルくんを、紹介・公開したいと思います。 4～5年前から使ってるんですけど、これがないと、仕事する気がしません。 テキスト生成パネル「PI_TextGenerator」の機能 テキストデータから、改行やタブをもとに、複数のテキストオブジェクを生成します。 複数行や、タブ区切りによる行列データにも対応しており、一発でテキストオブジェクトを生成できます。 用途 デザイン作業の下準備として Fireworksでデザインを行うときは、通常は、ワードなり、エクセルなりの 原稿データから、テキストをひとつひとつコピペしていく
Fireworksの本を書きました！ 中身を紹介させてください！ – VIVID COLORS + BLOG -福岡から東京に出てきたデザイナーのブログ-
12月7日発売予定です^^ 先日twitterなどで発売日が決まったことを告知させていただいたのですが、 何名か予約したよ！なんて声をかけていただいて本当にうれしい限りです；； 結構いい内容に仕上がっていると思うのですが、 また発売日前でなにも詳細が公開されていない状態なので 「予約して買ったけど求めていた内容と違ったーー」 ということがあっては、 予約までして買っていただくのに本っ当に申し訳ないので…。 今日は、ちょっとその本の中身を紹介させてください！ Fireworksによる画像パーツのデザイン Part2です。 FIreworksの基本動作が一通りマスターできるように考えました。 基本の操作説明ってなんか退屈な説明になりがちなので、 いろいろ実際に作りながら覚えられるようになっています。 これらのレシピをこなしていくと、 終わる頃には「あー大体こんな感じでパーツ作るんだなー」と わ
【Fireworks】 テキストボックスを改行で分割するコマンド | バシャログ。
髪を切って2日目で失敗したことに気がついたminamiです。 今回もちょっとだけ便利なFireworksのコマンドです。 テキストボックスを改行で分割するコマンド 右クリックなどで保存してください。ご使用は自己責任でお願いいたします。 読んで字のとおりですが、テキストボックスを改行部分で複数のテキストボックスに分割してくれるコマンドです。 画面をデザインをする際に、テキストを原稿からパーツにわけて一つづつコピペ・・・がめんどくさかったので作りました。 使い方 テキストボックスを選択して、「コマンド→スクリプトを実行」でスクリプトのファイルを選択して実行するだけです。改行でテキストボックスに分割されます。複数のテキストボックスを選択して実行するとそれぞれ分割されますが、テキストボックス以外のオブジェクトを含めるとそのオブジェクトが消えてしまうので注意してください。 作ってみてわかったこと v
[Fireworks]これは便利！Adobe Fireworks CSS3 Mobile Pack | バシャログ。
ここ最近はピンク・フロイドを BGM に就寝している sakai です。どんどん陰気になってきている気がします。 11/12（土）に開催される「CSS Nite in MIYAZAKI Vol.3」に出演させていただくことになりました。 近隣の方、ご都合の合う方いらっしゃいましたら是非。Fireworks や Dreamweaver を使って効率よく Web 制作をするノウハウをご紹介する予定です！（詳細は近日公開します） さて、今回は先日リリースされた「Adobe Fireworks CSS3 Mobile Pack」のご紹介です。これはなかなかイイモノですよ！ インストール 拡張機能のダウンロードはこちらから。 Adobe Fireworks CSS3 Mobile Pack Download のリンクをクリックすると、Adobe Extension Manager が立ち上がって、自
Fireworks の “ページ機能” でスライスなどの作業効率が 3.5 倍アップ！ (フェンリル | デベロッパーズブログ)
こんにちは！デザイナーの長谷川（ヒロユキ）です。 僕は Fireworks 大好きっ子なのですが、残念ながらフェンリルのデザイナーは殆ど Illustrator や Photoshop でデザインしているので、今日は僕が Fireworks を手放せない理由のひとつであるページ機能を紹介したいと思います。 ●動的なコンテンツや背景などのスライス書き出しがメッチャ楽 Fireworks CS3 で実装されてしばらく使わずにいたページ機能は今では無くてはならない機能です。 こういうデザインの場合、メニューの背景の画像とボタンの画像をそれぞれスライスしたいのですが、レイヤーのみで管理しているとスライスを重ねるしかなく、必要な画像をスライスする時に他のスライスを非表示にして背景レイヤーを消して…などと非常に面倒です。 ここでページ機能が威力を発揮します。 デザインができたら、ページを複製します。複
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
コーダーの為のFireworksスライス入門 | バシャログ。
iPhone 4S遣いが身の回りに着々と増えてますが、うらやましくなんかないんだからねっhakoishiです。 今回は、「あれ、今回はデザイン？」と見せかけてやはりコーディングネタ。 スライスって、コーダーが担当することが多いですよね。 けど、デザイナーほどグラフィックソフトに通じてなくて「もっと効率いいやり方があるんじゃないかなあー」なんてもどかしく思うこと、あるんじゃないですか？ そこで、突然ですがFireworks。 馴染みのない人も多いかもしれませんが、スライス機能がスッゴイんですよ！ 以下、普段Photoshopを使用している人向けに、Fireworksの便利なスライス機能をまとめました。 最初に。 まずは基本動作。 Photoshop同様、スライスツールでドラッグします。 …でも良いのですが、もっと楽な方法があります。 スライスを切りたいオブジェクトを全て選択 ⇒右クリックで「
Fireworks使いなら知っておきたい5サイト＋10個のワザ。 « 世田谷区のとあるホームページ制作事務所のブログ
Photoshopと比べると、どうしても知名度が低いものの、その使いやすさに熱烈？な支持者が多いFireworks。 ですが、正直95%（なんとなく）はPsユーザーなため、あまりFwのコンテンツはネット上でも見かけません。 本屋に行ってもあるのはPhotoshopの教本ばかり。。。 そこで、Fwに力を入れてる日本のサイトをまとめてみました。 Fireworks Bros.（白坂 翔さん） Fireworks Bros. 株式会社デザインエージェント、84ism/ハチヨンイズムでご活躍されている白坂 翔さんのブログ。 ・素人っぽく見えないドロップシャドウのつけ方 ドロップシャドウはニガテなので、非常に助かります。 ・普通に拡大すると、矩形がボケてしまう場合の対処法 Fwの弱点としてアンチエイリアスが弱いのがあります。定番のワザかもしれませんが、知らない人は必見！ Fireworksマニア（Y
CSS スプライト作成に便利な拡張機能「CSS Sprite Extension」 | デベロッパーセンター
CSS Sprite ExtensionはFireworks CS4、CS5を使用してCSSスプライトのCSSファイルと画像を生成するFireworksの機能拡張です。 CSS Sprite Extensionの機能 CSSスプライト用のCSSと画像を作るワークフローの中で、特に大変な作業部分を手助けする機能を備えています。 指定フォルダからの既存画像ファイルインポート機能。 Fireworksドキュメント上のオブジェクトの整列機能（ビットマップ、Fireworksシンボル、テキスト、PSDファイルのレイヤーなどに対応）。 CSS書き出し機能（簡単なテンプレート対応で案件の要件に沿ったCSSを生成します） 透過PNG（32bit）書き出し機能。 ワークフローによっては全工程を一度に行えるとは限らないので、使いたい部分だけ使えるように設計されています。 Fireworksの機能拡張であるため
賢く使い分けよう! WebのレイアウトにはやっぱりFireworks! « ウープスデザインブログ (デザイナーまめこ)
2010年6月12日に開催された「CSS Nite in Omotesando. Vol.2」にてタイトルの内容でお話させていただきました。Fireworksのパワーユーザーさんが5人も集まっていろいろな角度から攻めていました。Photoshop vs Fireworks 、 裏設定、便利な機能拡張、FireworkでのデザインTipsなどなど。これから始めようとしているに人にもヘビーユーザーにも楽しめる、稀有な内容になったのではないかな？と思います。 スライドの公開はもうちょっとお待ちくださいませませ。 Fireworksの立ち位置はPhotoshopと同じところじゃない! と熱弁しています。ざっくりと話すと「デザインワークはPhotoshopでいいんだ! その後の事はFireworksにまかせろー。」って事ですね。 当日の動画はこちら。なんと全部見れちゃいます。 まめこは27分くらい
The Ultimate Adobe Fireworks Toolbox - noupe
Today we are here to help with the whole getting to know Adobe Fireworks a bit, as we dive deep into the internet to find the most useful sites, resources, tutorials and more to expand your Fireworks knowledge base and skillsets, and we deliver them all right into your readers. Below is an assortment of various links that will help you assemble the ultimate Fireworks toolbox, so you can get the mo
【ケータイ】画像のファイルサイズを50%削減するひと手間
こんにちわ。最近ソーシャルアプリやるようになったやしこです ソーシャルゲームはいま一番アツい分野！いろいろなゲームが群雄割拠です。 でも画像が重くてさくさく連打できないとゲームの爽快感が半減してしまいます。悲しいけどこれ携帯なのよね。 なるべくストレスフリーのみんなに優しいデザインをした〜い！ そんなユーザーにもエンジニアにもモテる爆軽画像への研究・発見報告です 基本の基本 画像の重さは１画面合計100k以内 PNGは使えないとおもっておk 画像にwidthとheightを指定しないのは死亡フラグ 元画像が複雑な場合ライブトレースで爆軽に 私が現在担当している英雄になりたい！は魅力的なキャラクターたちが登場する戦争ゲームです 繊細なキャラクターデザインでそれが重厚な世界観を作り出す大事なキーになっています ところがアニメ塗りと違って色数が多すぎて減量に不向きです。どうしても重くなってしまい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
オリジナルフォントが作れるiPad用フォント作成アプリ「iFontMaker」｜linker journal｜linker
beplay类似软件-beplay体育飞翔下载
IDEA * IDEA
