突然ですが、皆さんはレイアウト指示書、好きですか？ レイアウト指示書とは、デザイナーが開発メンバーにパーツと一緒に渡すドキュメントです。「このパーツとこのパーツの間は10px」とか「このフォントサイズは 34pt でカラーは…」みたいなレイアウトの詳細が記載されています（ぐぐるとそれっぽい画像が見られます）。 開発側にカンプ 1 枚渡して「じゃ、これと同じで」なんてことはできないので、お互いのコミュニケーションに必須なのです。 しかしですねー、この指示書というものを作るのがかなり面倒だったのですよ。 僕の場合、カンプは Photoshop で 指示書は Illustrator だったので、Photoshop でフォントサイズ確認して Illustrator に入力して〜とか、レイヤー効果分ピクセルを測ってオブジェクトサイズに足した数値を〜とか、記載する仕様とオブジェクトを線で繋げたり〜とか
Web制作の現場では、日々新しいデザインのインスピレーションを得るためにギャラリーサイトを活用しています。しかし、数多くあるギャラリーサイトの中から、自分の目的に合った適切なサイトを見つけ出すのは意外と難しいものです。 この記事では、複数の...
FireworksのデザインデータからHTMLコーディングする際、テキストを一つ一つコピー＆ペーストするのが面倒くさい…。そこで複数のテキストを一瞬でクリップボードにコピーし、テキストエディタに全て書き出しできるコマンドを作成しました。 （一応、誰か作ってないか探したのですが無かったので。既にありましたらすいません） どのようなコマンドかというと、以下のFireworksで作られたデザインがあるとします。 HTMLコーディングするために、デザイン内のテキスト情報を全部テキストエディタ上に写したい。 そこで、このコマンド使用すると、↓のように一瞬（5秒くらい）でテキストだけを上から順に全て書き出せます。 インストール方法 コマンドjsfデータftpa_textmulticopy をダウンロードします。 解凍した ftpa_textmulticopy.jsf ファイルを Windows:【C:
15 Free Adobe Fireworks Extensions & Commands for Web Designers Despite last weeks sad announcement that Adobe would no longer be developing it, Fireworks will remain a firm favorite amongst web designers for many, many years to come. I am convinced of it. Yes, there won’t be any more updates, and as time slowly passes users may dwindle, but the large Fireworks community is dedicated and will not
Adobeの定番デザインソフト「Fireworks」はデフォルトだと6000pxより大きい画像を開けません。 また、カンバスサイズも6000pxより大きくはできません。 これだとランディングページなど縦長のページをデザインするのに困りますよね。 そんな時に簡単に制限を解除する方法をご紹介します。 1）Fireworksを閉じるファイルを編集中だったら、まず落ち着いてFireworksを保存して閉じます。 Fireworksが立ち上がった状態だと、設定ファイルを保存しても再度Fireworksを立ち上げた際に保存前の状態に戻されてしまいます。 2）設定ファイルを開く「Fireworks CS5 Preferences.txt」というファイルを開きます。 場所は下記になります。 C:¥Documents and Settings¥<ユーザー名>¥Application Data¥Adobe¥F
Androidは複数解像度に対応させるために1枚の画像から複数の解像度に引き延ばせる9patchという仕組みが用意されていて、 画像を9patchに変換するツールが有るのだけれど、コレがまたびっくりするほど使いづらいので新しく作り直すことにしました。 ダウンロードはgithubから行ってください。 現行ツールの問題点上げるとキリがないのですが・・・ 現行ツールは元の画像を開いてそこにドットを打ち付けていくスタイル。 画像自体ではなく、端っこにドットを打っていくので角の丸めが終わる場所ぴったり打とうとかすると大変。 書き出されたファイルに対して9patchを作らないと行けないので、元の画像をちょっとでも修正するとまたドットを打ち直し。超面倒 しかも、それをインフレートする解像度ごとに一つずつ作成しないと行けない。 もう無理 9patchはかなり強力で使わないと仕事にならない反面、ツールのせい
CSS Nite in Ginza, Vol.68フォローアップ（1）狭間さん、森さんのセッション 記事公開日：2013年3月25日（月） 2013年3月21日（木）、アップルストア銀座 3Fシアターで開催したCSS Nite in Ginza, Vol.68のフォローアップとして、狭間 句美さん（ふわっと）、森 和恵さん（r360studio）の『仕事で使える、アイコン作画のコツとSVG変換のススメ』のスライドを公開します。 よくわかるFireworksの教科書 狭間 句美さん、森 和恵さんが共著で執筆された『よくわかるFireworksの教科書』が、マイナビから2013年3月にリリースされました。 出版社の『よくわかるFireworksの教科書』紹介ページ Facebookページ『よくわかるFireworksの教科書』 Amazonで『よくわかるFireworksの教科書』を見る 特別
最近昼間の暖房が少し暑いくらいなので、油断して薄着で出かけてみたら夜寒くて死にそうになった seki です。 今回は、先日Fireworksの拡張機能を色々復習＆整理をしていた時にたまたま見つけた拡張機能「Transform Panel」というのを入れてみたので、機能のご紹介をします。Fireworksで要素のサイズや細かい座標をプロパティで直接入力する人には、痒い所に手が届く良さを感じられるかと。 詳細は以下より。 ダウンロード http://www.senocular.com/fireworks/extensions/?entry=572 こちらからダウンロードしてください。 「Transform Panel」で出来ること まずは基本となる便利な機能を一つ一つ見ていきましょう。 実際のパネルがこちら。 簡単に言うと画像やテキストの変形を補佐してくれる拡張機能です。 1.小数点単位を表示
Fireworks で複数の画像を一気にリサイズする場合は［ファイル］→［バッチ処理］が最速だと思われますが、今回は別の方法での作業手順をご紹介します。 画像をリサイズした後に、ちょっと編集したい（個別にフィルタをかけたいなどの）場合は、こちらの方法のほうが結果的にスムーズかも。 今回使用するのは Fireworks CS5 です。 STEP1 画像のリサイズ 1. Fireworks を起動し、新規ドキュメントを作成する。 2. 作成した新規ドキュメントのステージ上に、リサイズしたい画像をドラッグ＆ドロップ。 3. カンバスをフィットする。（［変更］→［カンバス］→［カンバスを合わせる］） 4. 画像サイズを変更する。（これでカンバス上の画像が全てリサイズされます） 現時点では、レイヤー 1 の直下に全ての画像が配置されています。 STEP2 画像を個別のレイヤーに分配して加工 5. ［
今年の花粉は少なめ、て話を聞いたこと無い気がするhakoishiです。 なんかそういうところボジョレーっぽい。 さて、今回はスライスを偶数にリサイズするFireworks機能拡張を作りました。 以前、ソース内の画像サイズを半分にリサイズするDreamweaverコマンドを作ったのですが、 Dreamweaverで画像サイズをリセットするコマンド＆半分にするコマンド（Retina対応に便利） 画像サイズが奇数の場合は繰り上げる。(小数点が出るので) っちゅう処理が入ってるんですね、これ。 けど、画像の時点で偶数だと嬉しいじゃない。 自動でできたらもっと嬉しいじゃない。 というわけで作りました。 ダウンロード slice_even_v2.jsf ※JSF形式です。 右クリックなどで保存の上、お使いください。 また、ご使用は自己責任にてお願いいたします。 (02/06)マスターページレイヤーを含
Return to Firewoiks Extensions, resources & tutorials for Fireworks, Dreamweaver & HTML5 / CSS3 by UI developer, Matt Stow. CSS Professionalzr v1.1 Posted: August 1 2013 Fireworks CS6 introduced a fantastic feature with the CSS Properties panel. It allows the user to copy an element's attributes as CSS3 to make the build process more efficient. It doesn't produce the cleanest, most professional co
このエントリーはFireworks Lover Advent Calendar 2012の24日目の記事です。 イブという事でプレゼントを２つ用意しました． ・デザインをローカルサーバー経由でプレビューするコマンド ・お絵描きのお供にブラシパネル 2つともCS3以上で動くはずです。 ★プレゼント1 デザインをローカルサーバー経由でプレビューするコマンド 現在のデザインをローカルサーバーにHTMLファイルと画像を書き出して、書き出されたHTMLのアドレスをEdge inspectで表示しiPhoneなどの実機でデザインを確認してしまおうという怠惰に満ちた意欲作趣旨です。 メニューの「ファイル＞ブラウザでプレビュー」のモバイル版みたいな感じでしょうか。 ■前提 ローカルのサーバが立ち上がっていてEdge inspectで ・http://localhost/ ・http://127.0.0.1
Export Commands Command bundle for Adobe Fireworks Aaron Beall 2011 - fireworks.abeall.com Version 1.0.6 Description: An assortment of commands to export Fireworks designs to other formats: Export Pages and States - Exports both pages and states to files at the same time, with a customizable filename schema. Export Slices As Sprites - Exports slices combined as a single image, or each slice as an
When building an app for iOS, you have to provide the normal-sized and double-sized images for each graphic. This is where the strongest Adobe Fireworks feature comes in. In this article, Ivo Mynttinen describes how to design an iOS app with Adobe Fireworks for the iPhone and shows a few techniques which allow you to design faster, achieving the best possible results. Since the release of iPhone 4
風邪をすっ飛ばして肺炎という診断をくだされて、3日間ほど寝込んでいたminamiです。皆さんも気をつけて！ AdobeからWebサイト構築ツール&サービス「Edge Tools & Services」が発表されました。 その中のHTML5／CSS3／JavaScriptベースでアニメーションを作成できるEdge Animateというツールに、Fireworksで連携できてしまう拡張をご紹介します。 Edge Animate 上記拡張をインストールします。FW CS5でも問題なく動作しました。 Fireworks上で適当な矩形と文言をレイアウトします。 コマンド > Edge Animate > Export Edge が拡張によって追加されているので、選択します。 プロジェクトファイルを出力するフォルダを指定します。 フォルダに自動的にEdge Animateで必要なファイルが書きだされま
Before reviewing in detail the Fireworks extensions that Ashish Bogawat recommends, he shares a few general tips and suggestions on how to work with extensions in Fireworks. I’ve been using Adobe Fireworks for over a decade now and I can recommend it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks’ capabilities as a design application, but today I wan
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
