「PhotoshopによるWebデザインカンプ制作はFireworksに比べて効率が悪い」という都市伝説について
2013/5/7に、Adobe Fireworks の事実上の開発終了が発表されました。 ただし、「バグ修正やセキュリティ関連のアップデートは継続する」とのことですが、いつまでも使い続けられることを保証するものではないので、Fireworks ユーザーの方はそう遠くないうちに別のアプリケーションに乗り換える必要があると思います。 Adobe、Web画像ツール「Fireworks」終了へ – ITmedia ニュース 移行先アプリケーションの候補の1つである Photoshop について、Twitterを見ていると「Photoshop でのWebデザインは制作効率が悪い」という方が多いようですが、私はそんなことはないと思っています。 なぜそう言えるのかについて、簡単にまとめてみました。 目次 FireworksとPhotoshop、それぞれのメリットとデメリット なぜ「Photoshopは効
『Fireworksを使った大規模ウェブサイトのデザイン設計』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
和のデザインに使える！国内商用可フリー素材・素材サイトまとめ
こんにちは、Kanaです。 日本らしい、和のデザインを担当したときに利用した素材サイトや、フリー素材をご紹介します。 和の雰囲気をもった無料で商用利用ができる素材って、そう多くはないんですよね…。 今後また和のテイストのデザインをするときのためにも、まとめておくべく記事にしました。 それでは、素材を提供してくださる方々に頭を下げつつ、ご紹介したいと思います。 商用可のサイトや素材を集めていますが、詳細な規約は、ご利用の際ご自身でご確認ください。 2014/12/10：素材サイトを追加しました。 イラスト素材和柄商用フリー素材 WArgo Pattern（ワーゴパターン） こちらの素材サイトは和素材が非常に充実しています。和風イラスト、和風写真、和柄パターンなど、和デザインを作るにあたり、欲しくなる素材がたくさん集まっています。 WArgo Pattern（ワーゴパターン） 季節素材 夢幻華
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にも同様にグリッドを作成する便利な機能拡
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
作業時間を10分の1にできて、デザイナーとコーダーのお互いが幸せになれるプラグイン「SPECCTR」が素晴らしい。
ややうさんくさい感じのするタイトルですが、ホントの話なんです。 海外のサイトを見ていてたまたま見つけて試してみたところ「このプラグインを使えばデザイナー自身、そしてコーダーのお互いが幸せになれるっ!」と思ったので全力でご紹介したいと思います。 SPECCTRについてごく簡単に説明すると… フォント名やオブジェクトのサイズ、間隔、色などをボタン一つで建築の設計図のようにデザインの仕様を書き出せる というものです。 これまで、デザインからコーディングに取りかかる際に、ボタンのサイズやレイアウト間隔を正確に調べたりするには元データをいちいち開いたりしなければならず、地味ながら非常に手間のかかる作業が必要で、それらを一覧にできる良い方法が無いのが実情でした。 また、デザイナーからコーダーにデータを渡して、いざあがって来た時のレイアウトをみると、ところどころ変わっている部分があったりして、相互の無駄
コーダーの為のFireworksスライス入門 | バシャログ。
iPhone 4S遣いが身の回りに着々と増えてますが、うらやましくなんかないんだからねっhakoishiです。 今回は、「あれ、今回はデザイン？」と見せかけてやはりコーディングネタ。 スライスって、コーダーが担当することが多いですよね。 けど、デザイナーほどグラフィックソフトに通じてなくて「もっと効率いいやり方があるんじゃないかなあー」なんてもどかしく思うこと、あるんじゃないですか？ そこで、突然ですがFireworks。 馴染みのない人も多いかもしれませんが、スライス機能がスッゴイんですよ！ 以下、普段Photoshopを使用している人向けに、Fireworksの便利なスライス機能をまとめました。 最初に。 まずは基本動作。 Photoshop同様、スライスツールでドラッグします。 …でも良いのですが、もっと楽な方法があります。 スライスを切りたいオブジェクトを全て選択 ⇒右クリックで「
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
PhotoShop&FireworksでWebデザインする為に必要な情報をまとめてみた
PhotoShopでWebデザイン PhotoShopVIP PhotoShopだけでなく、他のソフト共通で使える素材やネタも多い。 これからPhotoshopでWebデザインをしたい初心者さんのためのツールパネルとかいろいろ PhotoshopをつかってWebデザインする視点で使う機能解説なので、知ってることも多いけど、ここはまず抑えておいたほうがいい！ Webデザインの1pxを作るためのPhotoshopのレイヤースタイルいろいろ この辺りの設定数値は覚えておこう！他のソフトでも応用できます。 PhotoshopでWebサイトのモックアップをつくるチュートリアル 海外のチュートリアルの日本語訳での解説、グリッドシステムの勉強にもなる。 日本語で読めるPhotoshopチュートリアル集 まとめ まずは、日本語でのチュートリアル！どんな使い方をしているのかを知るのが大事！ photos
リッチに見せるデザインテクニック。美しいぼかしで魅せる 『MAX 塗り』のすすめ。
こんにちは、イメージ担当の長谷川です。 今回は 1px にこだわったリッチな Web や UI デザインを更に立体的で奥行きのある雰囲気にする『MAX 塗り』を取り入れたグラフィック作成手法をご紹介します。 ところで『MAX 塗り』ってご存知ですか？ガンプラなどが好きな方はピンと来たと思いますが、プラモデルなどに興味がない人は全く分かりませんね。 『MAX 塗り』とはプラモデルに立体感を出すためにエッジから中央に向かってぼかしていく、昔からある「ぼかし塗り」や「グラデーション塗り」の技法です。 この技法で塗装されたプラモデルは単純に塗装したものより格段に迫力や存在感が上がります。プロモデラーの MAX 渡辺さんが良く使うプラモデルの塗装技術として通称『MAX 塗り』と呼ばれています。 Web や UI にこの『MAX 塗り』を取り入れる方法は簡単です。 作ったボタンや背景などのグラフィック
[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 が立ち上がって、自
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fireworksで覚えておくと便利な文字設定まわりのTips | Webデザインのタネ
caraldo.net - it転職 リソースおよび情報
Fireworks初めての方にオススメしたいサイトと参考書 | Webデザインのタネ
FireWorks.20