タグ

fireworksに関するLayzieのブックマーク (57)

  • fireworksで人物の切り抜き方法 | DEZIMO.com

    デザインを行っていると画像の切り抜きという作業が必ず必要となることがあります。 その中でも人物の切り抜きは髪の毛を含むので普通にパスを使って切り抜いていたら非常に手間がかかってしまいます。 Photoshopを使っている場合こんな方法でできるというのは割と有名なのですが、人物の切り抜きだけのためにPhotshopにツールを変えるというのも癪なので、fireworksで試行錯誤の上、これが一番楽だろうという方法を見つけましたので紹介します。 ※環境はfireworksCS3を想定しています。 1、切り抜く画像を開く まず切り抜く画像をそのままfireworksで開きます。今回は髪の長い女性の画像を選んでみました。髪の先端が細くて切り抜くのが難しそう 2、髪の毛以外の部分のふちをペンツールで選択 ひとまず体などのふち(外側)をペンツールで選択します。髪の毛は適当に余白をとって選択しておきま

  • RedLine Magazine : Photoshopブラシ「まとめ」の「まとめ」

    Photoshopブラシ「まとめ」の「まとめ」 2009.11.22 2件追加しました。 2010.02.07 5件追加しました。 先日Photoshop用ブラシをFireworksで使うためのエントリを書いたので、その肝心のブラシまとめ記事のまとめ。ちょっと自分でもこういう系のエントリをブクマしすぎて把握できなくなってきたのでメモ的に。 勢いでまとめたのでリンクミスとかあったらすいません>< 今まで自分がブクマとかしたブラシまとめ・紹介ページ とりあえず適当にジャンル分けしてみた。 光系・キラキラ系 光が超カッコいいPhotoshopのブラシ色々まとめ:phpspot開発日誌 きらめく光のPhotoshopブラシ200選 | CREAMU 45の光を表現するphotoshopブラシ集[記事紹介]*ホームページを作る人のネタ帳 光線を描くためのPhotoshopブラシ250+ | CREA

  • RedLine Magazine : Photoshop用ブラシをFireworksで。

    Photoshop用ブラシをFireworksで。 いろんなサイトでPhotoshopの素敵なフリーのブラシ素材が配付されてて、そんな配付サイトの紹介エントリを目撃するたびに「これFireworksでそのまま使えたらいいのになぁ」なんて思います。まぁそのままブラシとしてFireworks上で使うことはできないのですが、Photoshopの素敵ブラシを使用する機会は多いのでFireworks使いの自分がどう付き合ってるのかっていうエントリです。 とりあえず前提として、Fireworks上でそのままブラシとして使うことはできない(多分)ということで、感覚的にはスタンプ画像みたいな感じで使ってます。とにもかくにも、まずはどうにかして使いたいブラシをFireworks上に移植にする事からですよね。Fireworks用にスタンプ画像的なものを用意するいくつかの方法から。 Photoshopからそのま

  • 【Fireworks】文字を 3D っぽく加工する | バシャログ。

    はい、シーブレインの toyama でございます! 今日は Firetuts.com さんのチュートリアルをやってみたいと思います。 テキストオブジェクトを立体っぽくみせる技です。 1. 文字を打ってナナメに 文字を45度回転させた後、新しい高さの 50% を引いた数をオブジェクトの高さとして入力してあげると、いい感じに奥行き感が出ます。 2. 文字に白い縁取りを 別になくてもいいですが、ここはチュートリアル通りに。縁取り線をつける場合は、[塗りをストロークに重ねる]にチェックをいれるのが好みです。塗り部分と線部分の間に変な隙間ができなくなります。 アウトライン化してグループ化しておきましょう。 3. 立体感を出すフチを作る 日のキモその 1 。オブジェクトを選択した状態で、[フィルタ]→[シャドウとグロー]→[ソリッドシャドウ]を選択。こんな効果があったのか… 角度と距離、色をを適宜設

    【Fireworks】文字を 3D っぽく加工する | バシャログ。
  • Fireworks CS4を買ったのでチュートリアル資料まとめ - IDEA*IDEA ~ 百式管理人のライフハックブログ

    ドットインストール代表のライフハックブログ

    Fireworks CS4を買ったのでチュートリアル資料まとめ - IDEA*IDEA ~ 百式管理人のライフハックブログ
    Layzie
    Layzie 2009/08/17
    ああ、ここまでまとまってるの良いな。CS3だけどさ。
  • 【Fireworks】よく使う矢印の作り方 すごく初歩 | バシャログ。

    突然雨がアホみたいに強く降ってきたりして困ります。シーブレインの toyama です。 STOP!熱帯雨林化! WEB サイトをデザインするときに避けて通れないのが矢印イメージの作成です。 テキストの頭に、ボタンの中にと、使いどころ満載。 普段 toyama がよく作る矢印の作り方をご紹介します。 1. しっぽ付き矢印 正方形を矩形ツールで書いて[修正]→[変形]→[数値を入力して変形]で回転を選択し、45°回転させます。 [数値を入力して変形]はサイズ変更、拡大縮小、回転のダイヤログボックスが一度に表示されてとっても便利です。 ダイレクト選択ツールで頂点のひとつを選択し、Delete で三角形に変形。 最初に書いた正方形が奇数×奇数の場合は三角形の頂点が 1 ピクセルになりますが、偶数×偶数の場合は 2 ピクセルの三角形になります。 パスが切れたままで気持ち悪い人は、ペンツールでパスを閉

    【Fireworks】よく使う矢印の作り方 すごく初歩 | バシャログ。
  • 【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。

    例えば Web サイトのリニューアル案件では「ロゴのデータはありません。現サイトで使っている gif 画像を使ってください」というケースがよくあります。 「ロゴを白抜きにしたデザインパターンを作りたいんだけど…」という場合には、ロゴをトレース→パス化して使い勝手の良い素材を用意するのがベストな方法ではありますが、トレースする時間が取れない時は以下の方法がお手軽でオススメです。 使用した画像加工ソフトは Fireworks です。 ↑支給された(というか Web サイトからコピーした)ロゴの例。透明化もされていないし、切り抜くのも面倒。 STEP 1 ロゴ画像をグレースケールで保存します。 STEP 2 グレースケール化したロゴ画像を背景の上に配置。 STEP 3 ロゴ画像を選択して「フィルタ」→「カラー調整」→「カラーの塗り」を設定。 カラーは何色でも良いですが、ブレンドモードは「反転」に

    【Fireworks】GIFで支給されたロゴを簡単に白抜きに加工する方法 | バシャログ。
    Layzie
    Layzie 2009/07/24
    いつもながらFireworks関係のTipsが役に立つな。ありがとうございます。
  • 【Fireworks】地味に便利なシンボル化 その2 | バシャログ。

    すっかり夏めいてきましたね。シーブレインの toyama です。最高気温 31 度とかもう、字面をみるのもカンベンです。 何度か Fireworks のシンボル機能について書いていますが、今回もシンボルネタです。 サイトのデザインに写真を配置して、よしこれでいいや!と終了しても、サイズの修正が入ることがあると思います。 拡大・縮小ツールでサイズを変更することになるのですが、縮小はともかく、拡大ともなると、そりゃもうひどい画質になってしまいます。修正のたびに元画像を探してきては配置しなおしたり補正しなおしたりマスクかけなおしたりするのダリー! そこで。 大きめな画像をシンボルとして登録しておく なんかこの画像、修正が入る気がする!とニュータイプばりの嫌な予感がする際には、あらかじめ写真画像をシンボル化しておきます。 シンボル化されたパーツは、インスタンスにどんな加工をしようと、親シンボルをい

    【Fireworks】地味に便利なシンボル化 その2 | バシャログ。
    Layzie
    Layzie 2009/07/16
    シンボルは地味に便利だよなあ。縦横比関係無く拡大・縮小出来たり。
  • 【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。

    こんにちは、シーブレインの toyama です。梅雨入りです。 サムネイル用の画像など、一定の大きさにそろえた画像を大量に書き出さないといけないときが、長い人生に一度や二度はあると思います。 私にも以前そんな瞬間があったのですが、その頃にこの技知ってればー!という技を今更知ったのでここに記しておくことにします。 1.書き出したいサムネイルのサイズにキャンバスサイズを設定します。 2.サムネイル化したい画像をざくざく読み込んで、適当に(いい意味で)画像を配置します。 3.「コマンド」→「ドキュメント」→「レイヤーに配分」。すると、適当に読み込んだ画像が一枚づつレイヤーに格納されます。 4.画像を書き出すための「最適化」を設定したあと、「書き出し」ます。 5.書き出しのダイヤログが出てきます。「書き出し」のプルダウンメニューから「レイヤーをファイルに変換」を選択します。3.で画像をレイヤーに分

    【Fireworks】トリミングした画像をたくさん書き出したいときに思い出してください | バシャログ。
    Layzie
    Layzie 2009/06/15
    おおう!これは便利!
  • 【Fireworks】ボケちゃった矩形のエッジを直す方法 | バシャログ。

    GW をゴールデンに過ごした体験がない シーブレイン toyama です。お疲れ様です。どうしたら黄金体験(G.E)できるのでしょうか? Fireworks で矩形をいじりまわしたり、バージョンの違う Fireworks で編集したり、特に何もしなくてもある日突然、エッジがイヤな感じにボケてしまうことがあります。せっかくのパスデータ、クリアな曲線だったはずなのに、どうしてこんなボケボケなことになってしまうのか不思議ですが、一度ボケてしまうとあの美しい矩形に戻ることはありません。 泣く泣く作り直しだったりします。 そこで今回ご紹介するのがボケたエッジを直す方法です。 いろいろいじってエッジがボケてしまった角丸矩形たち。 視力が落ちたのかと思うくらい、矩形のエッジがブレてボケています。一番右の角丸は生まれたての角丸矩形です。乱れがありません。 このボケてる矩形を直します。 ボケた矩形を選択して

    【Fireworks】ボケちゃった矩形のエッジを直す方法 | バシャログ。
    Layzie
    Layzie 2009/05/08
    おお!これは良いTips。ふと思ったけど、画面の描画がおかしくなってエッジがボケたように見えるのかなあ。
  • 【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ | バシャログ。

    サイトのプロトタイプをデザインするときに、ちょくちょく登場するのがフォームまわりのパーツたちです。ラジオボタン、チェックボックス、セレクトボックス、テキストボックスなどを配置して、初期値にはこんなテキストが入ってて、だけどこっちの初期値はこうで、幅は広めに、だけどこっちは狭めに、とパターンが複数登場したりするとどんどん面倒に。 そこでリッチシンボル化ですよ。 リッチシンボルとは、簡単に言うと、プロパティを編集できるシンボル機能です。 ここではセレクトボックスを例に説明してみます。 1.まずはシンボル化 シンボル化については以前記事を書かせていただいているのでそちらも参考にしていただきつつ、セレクトボックスをシンボル化します。 Fireworks CS3 のシンボル新機能に「9 スライス」というのがあります。9 スライスガイドをこんな感じに設定します。シンボル化できたら、崩れず拡大縮小ができ

    【Fireworks 】地味に便利なリッチシンボルと共有ライブラリ | バシャログ。
  • 【Fireworks】画像の傾きを直してくれる「LevelHorizon」 | バシャログ。

    以前、画像の傾きを直すカンタンな方法を「画像の傾きを直してくれる「ものさしツール」」でご紹介しましたが、これはあくまで photoshop での方法でした。今回は Fireworks でのご紹介です。 この画像微妙に傾いてやがるでもここだけを直すのに photoshop 起動するのは正直ダリー…いや効率悪い、という私に朗報です。 [1]エクステンション「Level Horizon」をインストールします。 Level Horizon はラインツールだけで傾きを修正してくれるスグレモノです。 [2]画像の傾きにあわせて「ラインツール」で直線パスを書きます。 [3]コマンド→ドキュメント→ Level Horizon を実行します。 [4]画像が直線の傾きにあわせて修正されます。 先ほど引いた直線は、自動的に削除されます。 Level Horizon は1オブジェクトに対してではなく、開いたpn

    【Fireworks】画像の傾きを直してくれる「LevelHorizon」 | バシャログ。
  • Fireworksでよく使う小技 - 19740308(TM)

    とみながです。 今日は資料も何も届かず、特にする仕事もないので、このサイトのリニューアル用のカンプをがーっと作りました。 今のもそうなんだけど、私はWeb用のデザインは全部Fireworksで作っていて、今はCS3を使っています。 Photoshopと比べると美しくないとよく言われますが、工夫次第ではかなり良い感じに使えるのでは‥‥と思うのですが。現行バージョンだとテキストのアンチエイリアスがあまりキレイじゃないかなーと思うぐらいで、フィルタ関係は使い方を工夫すれば大丈夫です。 Fireworksでうまく影をつける よくやるのが、ぼかしをフィルタでやらないで、ぼかしをつけたいオブジェクトを複製し、背面に配置してエッジをぼかす方法。 これはあれこれ試行錯誤して、どうやったらPhotoshopの「光彩(外側)」に近づけるかと考えて、結果的にこの方法になりました。 わかりにくいので図を作っ

  • ウノウラボ Unoh Labs: Webデザインする上でFireworksがステキな12のポイント

    GT Nitro: Car Game Drag Raceは、典型的なカーゲームではありません。これはスピード、パワー、スキル全開のカーレースゲームです。ブレーキは忘れて、これはドラッグレース、ベイビー!古典的なクラシックから未来的なビーストまで、最もクールで速い車とカーレースできます。スティックシフトをマスターし、ニトロを賢く使って競争を打ち破る必要があります。このカーレースゲームはそのリアルな物理学と素晴らしいグラフィックスであなたの心を爆発させます。これまでプレイしたことのないようなものです。 GT Nitroは、リフレックスとタイミングを試すカーレースゲームです。正しい瞬間にギアをシフトし、ガスを思い切り踏む必要があります。また、大物たちと競いつつ、車のチューニングとアップグレードも行わなければなりません。世界中で最高のドライバーと車とカーレースに挑むことになり、ドラッグレースの王冠

    ウノウラボ Unoh Labs: Webデザインする上でFireworksがステキな12のポイント
  • RedLine Magazine : 古びた紙素材を作成するチュートリアル

    古びた紙素材を作成するチュートリアル 今日Twitter経由でこのサイトを知った。 Lunacore Photoshop Training - Old Poster tutorial (part 1/9) これこれ。これ知りたかったー!「WANTED」とか書いてあって掲示板にはってありそうな感じの加工方法。 9ページにも渡って超丁寧にPhotoshopの加工が解説してありました。全部英語だけど、なんかキャプチャと拾える単語だけ見て想像力で解読できるはず! 元々はこちらのConveni-Ent - 味のある古びた紙素材を作成するチュートリアルで上のサイトを知ったんだけど、他にも2つ、汚れた感じの紙を作るチュートリアルがリストアップされてて参考になりましたー! ということで、やっぱりFWでやってみた なんていうか、FW使いはフォトショ使いに比べてちと肩身が狭いと感じる事が時々あるのでFWでも同

  • RedLine Magazine : グランジ系デザインもどきをFWでやってみる

    グランジ系デザインもどきをFWでやってみる ツヤツヤしたweb2.0系のデザインもいいけど、グランジスタイルのデザインもかっこいい。でもツヤツヤ系より手間ヒマがおそろしく掛かりそう。細かい部分の作りこみとか大変そうすぐる。と思ってたけど、The Secrets Of Grunge Design | Design Showcase | Smashing Magazineを拝見して、ついカッとなって「Fireworksで最速でグランジもどきを作ってみよう」という気になった。 もどき完成目安、15分。 15分くらいでこれができるはず。レイアウトはこのサイトのまんま。 1分目 色使いを考える 冒頭のSmashing Magazineにカラーパレットが掲載されてたのを参考にする。「控えめ」「汚れた感じ」「冴えない」感じの色使いがグランジスタイルのカラー使いのポイントらしい。 2~3分目 背景に使うテ

  • Fireworksのチュートリアルいろいろ - DesignWalker

    Fireworksのチュートリアルいろいろ - DesignWalker