【Fireworks】お絵かき感覚で、紙がビリビリに破れた感じを表現するチュートリアル – 宇都宮ウエブ制作所
画像加工ではPhotoshopに負けると思われがちなFireworksですが、使い方次第で結構イイ線いくもんです。できればFwだけで完結しちゃいたい――、そんな貴方にぴったりのチュートリアルをご紹介します。 Fwだけでここまでできちゃうよ！完成品 紙がビリビリに破れた感じをつくろう。 これ、Photoshopでのチュートリアルは数あれど、実はFireworksだけでも作ることができるんです。しかもお絵かき感覚で簡単に、エッジの質感もなかなか良い具合に仕上げる事ができます。 具体的な作り方は以下から。 画像を用意します。 元画像 適当に切り取ります。隠れる部分なんでざっくりで大丈夫。ここではマスクを使いました。 ここは神経質にならなくて大丈夫 新規ビットマップ画像を追加したら、ブラシツール「油彩」＜「ブリストル」に設定。後で色を変えるので、輪郭が分かりやすい色にしておきます。こんな感じでお絵
【Fireworks】ちぎった紙っぽいパーツをサクッと作る | バシャログ。
Adobe の Creative Suite 5.5 が発表になりましたね。 Dreamweaver の進化っぷりが凄まじいですが、影に隠れて Fireworks も実は 5.1 にマイナーバージョンアップしています。 参考：Fireworks CS5.1 in Creative Suite CS5.5 バグ FIX がメイン（それだけでも有難い！）ですが、書き出し時の色の最適化が改善されていたり、ファイル保存時に最後に保存した場所がデフォルトで開くようになっていたりするようです！ 嬉しい…！ 今回は、Fireworks でちぎった紙っぽいパーツを簡単に作る方法をご紹介します。 Step1 とりあえず、カンバスに背景を敷きます。（サンプルは Fireworks の塗りの「パターン」にある「青い布」をそのまんま） Step2 白い矩形を置きます。 Step3 ストローク（破線ダブル、外側、1
良質なワイヤーフレームを超簡単に製作できるFireworks拡張機能『Placeholder』がめちゃめちゃ便利!!
フリーランスでWEB製作をされている@sou_labさんから ドラッグ＆ドロップするだけでサイズ表記付きの良質なワイヤーフレームが作れてしまう 超便利なFW拡張機能の存在を教えて頂き、実際に使ってみたのでご紹介したいと思います。 FW持ってるけど使ったことない・・という方にも是非読んでいただきたい記事です！！ ワイヤーフレームとは デザインにとりかかる前にサイトの骨組みを視覚化し、 要素の漏れを防いだり、全体のイメージを掴むために用意するものですよね。 実はわたしは今まで作ったことがなかったのですが、 しっかり骨組みをしておけばデザイン時・コーディング時の作業がスムーズに進みますし、作っておいて損はないモノですね。 Placeholderとは そんなワイヤーフレームですが、自分用ならともかく クライアントさんにお見せする場合は、要素ごとにwidthやheightの数値なども記載してあった方
Fireworksで写真をマスクする方法 | src.7438.com
以前、メインのブログに”Fireworksでよく使う小技 | 19740308(TM)”という記事を書いたのですが、イラレ・フォトショに比べてFWはチュートリアルや小技があまり見つからないなぁと思ったので、よく質問されることを書いておこうと思います。 私はWebのカンプはFWで作るのですが、「写真の切り抜き（マスク）もFWの中でやるよ～」というと、FW使わない人からは結構驚かれます。いや、ちゃんと出来ますよ！ 基本的なマスク方法 これは、うちの猫の写真ですね。ひどい格好ですが気にしない！ これを、ちょっと違う形に切り抜いてみます。 写真の上に載せた、白い楕円の形に切り抜いてみますね。 レイヤーではこういう状態です。 「マスクとしてグループ化」を使う 切り抜きたい形のオブジェクトを作成して、ビットマップの上に配置します。 次に、両方を選択した状態のまま、メニューの「修正」→「マスク」→「マス
Macromedia - fw0126 - 曲線パスを使用したテキストの作成
Fireworks では、パスにテキストを合わせることによって、面白いテキスト効果を演出できます。パスに段落を合わせることも可能です。Photoshop でパスに合わせたテキストを使用する場合は、Illustrator や Freehand でテキストを作成して読み込みますが、ビットマップに変換された後は編集ができません。 Fireworks で tomato.png を開きます。 パスを描きます。 [ツール] パネルから [楕円] ツールを選択します ([矩形] ツールをクリックしてホールドすると、ツールのポップアップパレットが表示されます)。 ドキュメント内で、Shift キーを押しながら円を描きます。トマトの背景になる緑色の円よりも 5 ミリほど大きい円形を描きます。円の塗りやストローク カラーはテキストを適用すると消えます。 テキストを入力します。 [ツール] パネルの [テキスト
[Fireworks]オリジナルテクスチャの追加方法 : 構想雑文
構想雑文 WEBデザインとmacに関すること中心の自分向けメモ主体のブログ。 DREAMWEAVER、Illustrator、Photoshopなどのアプリケーションの設定や使い方。HTML、CSS、JavaScript、PHPのコーディングのことをあれこれ書いています。 この記事の続き「[Fireworks]オリジナルパターン画像の追加方法と、パターン画像の素材で使えそうな17サイト」も参考にどうぞ。 Fireworks8以降のテクスチャはアプリケーションフォルダ内のConfigurationフォルダの「Textures」フォルダに保存されています。 この「Textures」フォルダに直接、オリジナルテクスチャデータを追加することができます。 追加の際の注意点は、以下の点ぐらいです。 ファイルの大きさは特に制限はないファイルの縦横のピクセル比率は自由オリジナルテクスチャにできるファイル形
![[Fireworks]オリジナルテクスチャの追加方法 : 構想雑文](https://cdn-ak-scissors.b.st-hatena.com/image/square/7c44d7294d6a80e943548b0d5f644bea3215fec6/height=288;version=1;width=512/https%3A%2F%2Flivedoor.blogimg.jp%2Funahide%2Fimgs%2Fb%2F5%2Fb5cbccad.png)
Fireworks用テクスチャ・スタイルファイルのまとめ：帳：So-netブログ
Fireworks用のテクスチャファイルを配布しているサイトのまとめ。こういうのをフリーで配布していると、大変助かります。 特にphotoshopに比べFireworksはテクスチャやブラシが凄く少ないのでありがたみはphotoshopユーザー以上だと思いますw ※2011/06/22 1サイト追加。 Fireworks texture gallery http://ftg.projectdd.jp/ nansyamasimasi テクスチャ http://www16.big.or.jp/~nansya/fwmx/textures/index.html スタイル http://www16.big.or.jp/~nansya/fwmx/style/index.html シンプルなFireworksのテクスチャ findxfine -Web制作に関する覚書- http://www.findx
YUKI HARUYAMA Portfolio Site | 春山 有由希
春山 有由希 / ハルヤマ ユウキ UX / UI Design HTML / CSS Graphic Design Photography Designer & Front-end developer 福岡でプログラマとして就職後、Web制作会社に転職し、デザイナーになりました。 ECサイト、テレビ局や番組サイトのデザイン、執筆や講師業などで経験を積んだのち上京し、株式会社Fablicで フリマアプリ フリル（現ラクマ）のUI/UXデザインを担当。 その後、楽天株式会社でデザインチームマネージャを担当したのち、 フリーランスのデザイナーを経て、現在は株式会社スマートバンクでデザイナーをしています。 MORE PROFILE
fireworksでのテクスチャの使い方 | シンプルパターン研究所 | 無料で商用でも使えるシンプルパターン＆テクスチャ配布サイト シンプルパターン研究所 | 無料で商用でも使えるシンプルパターン＆テクスチャ配布サイト
作ると面倒だけど、あったらいいな♪と思う素材をせっせと作って配布しています。 使えそうなものがあったら、是非あなたの制作活動にお役立て下さい☆ ありとあらゆる制作活動に無料で許可なくご利用いただけます。 可能なこと 個人の利用 商用サイトでの利用 制作会社の使用 学校の教材としての利用 印刷物で利用していただいてもOKです！ そのほか思いつく限り自由に制作活動にお役立て下さい♪ してはいけないこと 再配布、転載、転売など制作活動以外のこと ファイルへの直リンク とくに厳しい制限はありませんが、もしご利用に当たって不明な点があればお問合せ下さい。（ご連絡はこちらから）
ProjectDD
最果タヒさんがつむぐ「詩になる直前」の言葉が並んでいるのですが、むしろ展示デザインを担当された佐々木俊さんとの「詩や言葉の、無限大の表現方法を探るインスタレーション展」と言った方がしっくりくる…それくらい言葉の表現方法のバリエーションに触れることができる展示になっています。
Fireworks texture gallery
Fireworksで使えるテクスチャファイル300種類を無料で配布しています。商用利用も可能です。ライセンス Fireworks texture galleryで配布してるテクスチャ画像（png形式）は、以下のルールを守ってダウンロードをしてください。 商用利用も問題ありません。Webサイトだけではなく、印刷物などに利用していただいても構いません。 Fireworksなどの画像加工ソフトで加工していただいても構いません。 著作権は放棄してません。許可なく素材として再配布することは禁止してます。 更新履歴 2009年5月21日 Fireworks texture galleryをリリースしました。 「水平線」「垂直線」「円」「斜線」「星」「和風」「チェック」「花」「ハート」「ダイヤモンド」「モザイク」「雪」からなる12のカテゴリ、300種類のテクスチャを公開しました。
PhotoshopとFireworksでWEB用に書き出した画像の色が違うのを防ぐには？
当方、WEBの制作業務をしておりまして、ご質問です。 PhotoshopとFireworksで WEB用に画像を書き出した際、 画像の色が違います。 また、PhotoshopとFireworksそれぞれのキャンバス上で 同じ画像を見たときも色が違って見えます。 （いずれもPhotoshopの方が少し濃い色に見えます。） これを防ぐにはどのような対策を取ればよいでしょうか？ http://bowz.info/679 を参照したのですが、 「モニタのプロファイル」というのがわからず、 設定することができませんでした。 ちなみに当方の環境ですが、 ●Windows XP SP2 ●モニター─MITSUBISHI Diamondcrysta RDT201L ●Photoshop CS4 カラー設定 作業用スペース・・・ RGB─AdobeRGB(1998) CMYK─Japan Color 200
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
YUKI HARUYAMA Portfolio Site | 春山 有由希
FireWorks.20
FireworksのマイナーなTips11個
Fireworksの共有ライブラリ作りました | Webデザインのタネ