Fireworksのチュートリアルいろいろ - DesignWalker
Fireworks texture gallery
Fireworksで使えるテクスチャファイル300種類を無料で配布しています。商用利用も可能です。ライセンス Fireworks texture galleryで配布してるテクスチャ画像（png形式）は、以下のルールを守ってダウンロードをしてください。 商用利用も問題ありません。Webサイトだけではなく、印刷物などに利用していただいても構いません。 Fireworksなどの画像加工ソフトで加工していただいても構いません。 著作権は放棄してません。許可なく素材として再配布することは禁止してます。 更新履歴 2009年5月21日 Fireworks texture galleryをリリースしました。 「水平線」「垂直線」「円」「斜線」「星」「和風」「チェック」「花」「ハート」「ダイヤモンド」「モザイク」「雪」からなる12のカテゴリ、300種類のテクスチャを公開しました。
こんにちは、イメージ担当の長谷川です。 「品質を上げれば速度が落ちるし、速度を上げれば品質が…」 デザイナーにとってはこの品質と速度が非常に悩ましいですよね。 今回は UI や Web デザインのモックアップなどを、品質を保ったままサクっとデザインするときに役立つ Fireworks の拡張機能をご紹介します。 1. 作ったデザインを崩さずにまとめて縮小できる「Smart Resize」 Web ページのデザインデータを使ってスマートフォン用など異なったサイズのデザインを作りたいときなどに最適です。 【使い方】 インストールするとコマンドに「Smart Resize」が追加されます。 サイズ調整をしたいデザインを選択して コマンド＞ Smart Resize ＞ Attach を選択します。 後は黄色のコントロールポイントでサイズを調整するだけでテキストの改行などデザインを保ったまま自動的
Webデザインにおけるメインのデザインツールとして多く使われているPhotoshopとFireworks。我々の業界内において、どちらの方がデザインツールとして便利か、という議論がよく行われますが、いずれか一つしか使いこなしていないユーザによる比較論ではあまり意味がないでしょう。日頃から使いなれているツールの方が使いやすい、と感じるに決まっているからです。ここで参考になるのは、両方のツールを同等に使った経験を持ち、かついずれにも過剰なこだわりや愛着を持ってないデザイナーの声なのではないでしょうか。 実は私自身はもともとPhotoshopでWebサイトのデザインを作っていました。しかし以前勤めていた会社でFireworksを使っていた人が多かったため、あるプロジェクトで一時的にFireworksを使ってみたところ、色々な面でFireworksの方が優れていると感じ、Fireworksに乗り換
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
一定期間更新がないため広告を表示しています
PhotoshopやIllustratorを組み合わせて5分でも早く！Fireworks中心に制作している僕のAdobeソフトの使い方 | Webデザインのタネ
一定期間更新がないため広告を表示しています
PhotoShopでWebデザイン PhotoShopVIP PhotoShopだけでなく、他のソフト共通で使える素材やネタも多い。 これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ PhotoshopをつかってWebデザインする視点で使う機能解説なので、知ってることも多いけど、ここはまず抑えておいたほうがいい！ Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ この辺りの設定数値は覚えておこう！他のソフトでも応用できます。 PhotoshopでWebサイトのモックアップをつくるチュートリアル 海外のチュートリアルの日本語訳での解説、グリッドシステムの勉強にもなる。 日本語で読めるPhotoshopチュートリアル集 まとめ まずは、日本語でのチュートリアル！どんな使い方をしているのかを知るのが大事！ photos
アイコン、ボタン、リボンをはじめ、フォーム、スライダー、ツールチップ、メニューなどウェブデザインでよく使用されるようなエレメントをFireworks用のファイルで配布しているサイトを紹介します。 Webportio Graphical resource of Adobe Fireworks [ad#ad-2] 素材の利用にあたってはウェブサイト・ソフトウェアなど、個人でも商用でも無料で使用できます。また、利用の際にはバックリンクの必要もありません。 お願いとして、このサイトを何らかの形で広めてくれると嬉しい、とのことです。 素材はウェブデザインによく利用するエレメントも数多くあり、下記にいくつか紹介します。
一定期間更新がないため広告を表示しています
2月26日にLINEのオリジナルスタンプをだれでも制作できると言う話が発表されました。「LINE Creators Market」イラストであることが必須、png形式、スタンプだけで40個…これは…なんというFireworks向き案件！ということで今回はその理由を。 まずは概要 LINEスタンプのガイドラインによると、必要なものは メイン画像(1個) 240×240px スタンプ画像(40個) 370×320px(最大) トークルームタブ画像(1個) 96×74px 上記の画像計42個で、形式は全てPNGです。スタンプ、トークルームタブ画像は性質上背景透過になると思います。 イラストをどのアプリケーションで制作するかというのは個人の好みの問題なのですが、Fireworksで作る場合にはぜひ「ステート」機能を使うことをおすすめします。 ステートとは Fireworks CS4以前は「フレーム
Fireworksの素材集決定版 – creamu
Fireworksで使える素材を探している。 そんなあなたにおすすめなのが、『An Explosion of Adobe Fireworks Resources』。Fireworksの素材集決定版です。 ライブラリやパターンやシンボル、スタイルやシェイプなど、かなりたくさんの素材が揃っていますね。 かっこよくて使えそうなのをいくつかご紹介します。 Arrows 矢印がいろいろ入っているライブラリ Kaliber Patterns 種類がたくさんあるパターンファイル iPhone GUI as Rich Symbols for Fireworks iPhone用のGUIシンボル 150 Fireworks Styles (Gradient Effects) グラデーションスタイル150 15 Grunge Colors Styles グランジ系のカラースタイル 131 Ultimate We
Get the support you need on Articulate 360. We’re here to help.
一定期間更新がないため広告を表示しています
グリッドやガイドのお助けツールから、グループ化したエレメントのサイズ調整、ダミー画像やテーブルの作成、ショートカットの強化など、そんな便利な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ユーザーに朗報？海外で話題の新しい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につ
例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された（というか Web サイトからコピーした）ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に
米Adobe Systemsは5月6日（現地時間）、Webページ向けグラフィックスツール「Adobe Fireworks」の開発終了を発表した。同日発表の、6月に予定されているCreative製品のアップデートにFireworksは含まれない。 Creative Cloudへの移行に際しては、Fireworks CS6として提供を続け、バグ修正やセキュリティ関連のアップデートは継続する。 開発終了の理由は、Photoshop、Illustrator、Edge Reflowなどの他のAdobe製品との機能の重複が年々増えていることや、Web向けツールとして、従来よりもモジュール化したツールを提供する方針にシフトしてきていることという。 Fireworksは、Adobeが2005年に買収したMacromediaの製品。 Adobeは同日、Photoshop、Illustratorなどの一連のク
Fireworks CS4を買ったのでチュートリアル資料まとめ - IDEA*IDEA ～ 百式管理人のライフハックブログ
ドットインストール代表のライフハックブログ
Fireworks コレ、5分で作ります。その１ ※このエントリはFireworks CS4を元に書いています。 Fireworks の日本語チュートリアル少ないなーという話を先日Twitterでしていたので、なんか作ってみます。あまり超大作のチュートリアルは手順を書く気力が途中でなくなりそうだったので、今日は5分くらいでコレ作る方法を書きます。 今回の完成形 見出しの背景画像によくありそうなこういう画像をパパっと作ります。 今回は素材集等、Fireworks の機能以外のものは使いません。 土台を用意 まずは一番下の土台を作ります。よくあるアクア風のやつにしますね。矩形で適当なサイズで長方形作って、塗りを線形のグラデーションに。４色決めてスライダーを調節。外側には1pxの線も加えます。 ここでのサンプルのサイズはW 470 * H 40 としました。 こういう見出し用の背景画像でよく左側
Learn which Adobe products have been discontinued, and what support resources are available. Adobe occasionally discontinues the sale, development, or support of a product or technology due to changing market conditions and their impact on customers. Phone and chat support isn't available for free or discontinued software or services. Read more about the support and resources available to learn ab
Fireworks後のツールとワークフロー
Fireworks 以外の選択肢は？ Adobe Creative Suite が終了し、Cloud の一本化が発表されました。今回の新製品ラインナップでニュースになったのが、Fireworksの開発中止 のニュース。最新版の Fireworks CS6 の次期 OS へのサポートをすると宣言しているので、すぐに使えなくなるということはありませんが、視野を広げて別の選択肢を探さなければならなくなるでしょう。 Fireworks が数年後には使えなくなるかもしれないから、Photoshop に移行するべきなのかといえばそうでもありません。写真やグラフィックといったビットマップ画像編集であれば Photoshop は素晴らしいですし、ベクターシェイプやレイヤースタイルを使えばある程度柔軟性を保つことはできます。しかし、Webサイトデザインにふさわしいツールとはいえません。 Fireworks
CSS Nite im MIYZAKI, Vol.3 に出演してまいりました。宮崎、真剣に移住を検討するほどいいところでした。ご飯が美味しい！ さて、最近 Web クリエイターの方たちと話をしていると、今 Fireworks がきてるなーと思うことが多くなりました。 マクロメディア時代からの Fireworks ファンとしては、胸が熱いです。 今回は、Fireworks の便利なリソースを公開している国内のサイトをピックアップしてご紹介します。 Fireworks マニア Fireworks 関連のブログでは一番の注目度ではないでしょうか？ Fireworks を使って綺麗なデザインを作るテクニックがたくさん紹介されています。 「その機能をそんなところに使うの！？」といった、魔法のような Tips もたくさんあって凄いです。 Webデザインのタネ Fireworks 関連の Tips が公
一定期間更新がないため広告を表示しています
FireWorks.20
管理者のTwitterです。更新情報もお伝えしてます facebookページです。是非いいね！を RSSの登録はここからどうぞ ご連絡の際はこちらか"Contact"へどうぞ
マークアップエンジニア だからうれしい Fireworksの使い方あれこれ
3D printing for Development Hack Day in Bucharest, session 1Asociatia Techsoup Romania
Webデザイナとして仕事をする上で、ここ数年、個人的にFireworksが手放せないツールになっています。 twitterで某人に「書いて」と言われたのもあるのですが（笑）、Web画像を作るのによいソフトをさがしている人、これから画像編集のためのソフトを選ぼうとしている人の参考に、ということで、個人的にFireworksの気に入っている点など一通りまとめてみようと思います。 ベクター画像とビットマップ画像が等しく扱えるので作業がスムーズ Fireworksは、ベクター画像とビットマップ画像を同時に扱えます。ベクターでちょっとしたアイコンを作るとか、ビットマップ画像を読み込んで編集するとか、すべてが一つのソフトの中で完結できます。IllustratorとPhotoshopを行き来したりするような手間は不要ですし、また複数のソフトを同時起動しなくていいのでマシンにも優しいです。 ビットマ
Graphical resource of Adobe Fireworks Well Organized Files All graphics files have a good structure, so it is easy to navigate. Easy Customization The art works are vector based and be easily customized according to your needs. Download All files are availiable for free and can be used for noncommercial or commercial usage too.
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
Posted: 2013.04.23 / Category: WebDesign WebデザインツールとしてFireworksとPhotoshopがよく挙げられますが、私はFireworksをメインに使用しています。理由はFireworksと比べるいろいろと不便な点があったからなのですが、ちょっと調べたらいろいろと知らないだけだったのでメモしておきたいと思います。 Photoshopってキャンバスで直接選択できなくね？ Fireworksは選択ツールでキャンバスでオブジェクトを直接選択できるのに、Photoshopはレイヤーから選択しないといけないから直感的じゃないですよね。いえいえ直接選択もできますよ。 左パレットから「移動ツール」を選択ます。そのままだと選択されているレイヤーを移動させるだけのツールですが、「cmd + 左クリック」することで選択することができます。 ドラッグすれば範囲
FIREWORKS ZONE | プラグインなど
September 12, 2017 Guide On How You Can Build And Enhance Collaboration With SharePoint SharePoint is a powerful application that empowers teams with dynamic and productive sites for every department, division and project team. The application makes it easy to share files, resources, and news enabling team members inside and outside the organization to collaborate effortlessly and securely across
【Fireworks】ワイヤフレーム作成時に覚えておくと便利なアタリ画像＆アタリテキストを簡単に作成する拡張機能 | バシャログ。
3日間、ノロウイルスにやられ寝込んでいました ishida です。 手洗い・うがいはキチンとしておきましょうね。 さてさて今回は、「Fireworks Lover Advent Calendar 2012」 8日目のエントリーとして Fireworksでワイヤフレーム・モック作成時に覚えておくと便利な拡張機能について２つご紹介します。 自分はワイヤーフレーム作成につかうツールは、もっぱらFireworksです。 CS6にバージョンアップされてからワイヤーフレーム用の共有シンボルがめちゃくちゃ増えて、デザインツールとしてだけではなくワイヤフレーム作成ツールとしても便利になりました。 ちなみに共有シンボルの「ワイヤフレーム」内にあるパーツはこんな感じです。 また「jQuery Bootstrap」のパーツもあったりします。 これだけでもかなり便利なのですが、コンテンツ内のアタリ画像とダミーテキ
こんにちは、端山です。 デザイン部は全員「Fireworks」を使っていますが、 みんな実務経験やスキルが違うので、基本独学で習得。 そのため、たまに他の人の作業をみてると 「あ、そんな簡単なやり方があるんだ！」ということが･･･ 今回はそんな「知ってるようで、実は知らない?!」 Fireworksの小技をご紹介します。 細い矢印を作る方法 オートシェイプから引く太い矢印ではなく、オープンパスから作る 細い矢印の作り方をご紹介します。 1．「ラインツール」か「ペンツール」でオープンパスを引く 2．オープンパスを選択する 3．ツールバーの「コマンド」→「クリエイティブ」→「矢印の追加」 4．好きな矢印の形を選んで「OK」をクリック！ 曲線上にテキストを配置する方法 普段あまり使うことがないので、いざという時に 「どうやるんだったかな？」と忘れてしまいがちな小技。 1．テキストを入力する 2．
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
【スタイル】 ●Web 2.0 styles 概要:上図のようなスタイルが入っている。 インストール方法:解凍したらスタイルパネルからスタイルの読み込みでweb20styles.stlを選ぶ。 Tips:photoshopライブエフェクトを使ってスタイルを作っているのでＣＳ３から。 【コマンド】 ●DistriFusion FW8 画面はこんな感じ。（２つ画面がありますが、タブでごとの切り替えた画面を合成しています。） 概要:ドキュメント内のオブジェクトを複数のドキュメントに分配、逆に複数のドキュメントをひとつのドキュメントに結合できる。 インストール方法:Distrifusion_fw8_ja.mxpをインストールしようとするとＰＤＦを書き出す場所を聞くダイアログが出るので任意の場所を選択。「コマンド」＞「FireworksZone」に追加される。 Tips:Webレイヤ
先日、勢いで Macromedia Fireworks 8 を購入しました。私はどうも Photoshop や Illustrator が苦手、というか使いこなせません。メニューが豊富すぎてわけがわかんない。が、Fireworks はバージョン2 ぐらいから会社で使っていて、相性がいいのです。 で、せっかく買ったので、Web2.0っぽいデザインにチャレンジしてみました。まずは第一弾。「mirror reflection（反射）」です。 こういうやつ。 反射させたいオブジェクト（A）をコピー＆ペーストで複製（B）します。 複製したオブジェクト（B）を選択して、[修正]-[変形]-[縦反転]で反転させます。 反転させたオブジェクト（B）を元のオブジェクト（A）の下に移動させます。 反転させたオブジェクト（B）を選択して、[コマンド]-[クリエイティブ]-[イメージのフェード]を選び、メニューか
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
高品質な UI や Web のデザインが短時間で作れるおススメの Fireworks 拡張機能 4つ
Photoshopユーザが今すぐFireworksに乗り換えるべき10の理由 | ベイジの社長ブログ
「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
制作中の面倒を解決するFireworksの拡張機能のまとめ（2011年7月版） | Webデザインのタネ
PhotoShop&FireworksでWebデザインする為に必要な情報をまとめてみた
Fireworks用のウェブデザインの無料素材がダウンロードできる -Webportio
Fireworksの拡張まとめ（2012年8月版） | Webデザインのタネ
LINEスタンプづくりにFireworksをおすすめする理由 - デザイナーのイラストノート
Screenr - @hiloki: Fireworks CS5での透過gifの作り方だよ
Fireworksで覚えておくと便利な文字設定まわりのTips | Webデザインのタネ
Fireworksでのウェブ制作の作業をかなり楽にする機能拡張のまとめ
Adobe Fireworks（8)のweb2.0なレイヤースタイル131＋48個＋おまけ*ホームページを作る人のネタ帳
【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。
Adobe、Web画像ツール「Fireworks」終了へ
Fireworks コレ、5分で作ります。その１ : RedLine Magazine
Adobe - Adobe - Fireworks Exchange
Extending Fireworks® for Windows® and Mac OS
Fireworks のリソースを公開している国内のサイトをピックアップ | バシャログ。
Fireworks初めての方にオススメしたいサイトと参考書 | Webデザインのタネ
ウノウラボ Unoh Labs: Webデザインする上でFireworksがステキな12のポイント
Webportio | Graphical resource of Adobe Fireworks
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
『Fireworksを使った大規模ウェブサイトのデザイン設計』
PhotoshopってFireworksと違ってここがダメだよねって思ってたけど使い方知らないだけだった件
知ってるようで、実は知らない?！ Fireworksの小技 - EC studio デザインブログ
コーダーの為のFireworksスライス入門 | バシャログ。
Yoropan@Fla - Fireworksに入れてみた機能拡張
jmblog.jp - FireworksでWeb2.0デザインしてみる - Part.1