『Fireworksを使った大規模ウェブサイトのデザイン設計』
1 pixel｜サイバーエージェント公式クリエイターズブログ サイバーエージェントのクリエイターの取り組みを紹介するオフィシャルブログです。最新技術への挑戦やサービス誕生の裏話、勉強会やイベントのレポートなどCAクリエイターの情報が満載です。 こんにちは。アメーバ事業本部 デザイナーのパジェロです。 現在、スマートフォン版Amebaのデザインを担当しています。 今回は、大規模なウェブサイトのデザインファイルをAdobe Fireworksで制作・管理する方法を、実際に現場で使用しているファイルを元にお話したいと思います。 スマートフォン版Amebaとはスマートフォン版Amebaとは、Amebaがスマートフォン向けに展開しているサービスの中心となるプラットフォームサイトです。 Amebaにはたくさんのゲームやコミュニティサービスがあり、プラットフォームサイトはそのハブになっています。 それぞ
YUKI HARUYAMA Portfolio Site | 春山 有由希
春山 有由希 / ハルヤマ ユウキ UX / UI Design HTML / CSS Graphic Design Photography Designer & Front-end developer 福岡でプログラマとして就職後、Web制作会社に転職し、デザイナーになりました。 ECサイト、テレビ局や番組サイトのデザイン、執筆や講師業などで経験を積んだのち上京し、株式会社Fablicで フリマアプリ フリル（現ラクマ）のUI/UXデザインを担当。 その後、楽天株式会社でデザインチームマネージャを担当したのち、 フリーランスのデザイナーを経て、現在は株式会社スマートバンクでデザイナーをしています。 MORE PROFILE
noupe - THE magazine for webworkers and site owners
Saving for college is quite a daunting task. We all want to set our kids up for success, right? But, the path to financing their dreams can feel like a maze of decisions and ...
【Fireworks】 ストロークを破線で描く | バシャログ。
メリークリスマスです、toyama です。クリスマスも大切ですが、なにより病院の年末診察がいつまでやっているのかも重要に思える年頃です。 最近存在を知った Fireworks の破線機能をご紹介します。 オブジェクトを用意。 おなじみバシャログのロゴです。 こいつを破線で作ってみます。 ラインだけにします。 グラデーションの塗りをなしにして、ストロークだけに変更します。 ストロークの「ストロークオプション」の「詳細設定」ボタンをクリック。 詳細を設定 でかい設定ボックスが出てきます。 最近までこの存在をないことにして作業していました。ちゃんと見よう！ 「ストロークの編集」として「破線」のプルダウンを設定します。今回は「破線（シングル）」をえらびました。 オン･オフでそれぞれ数値を設定してあげます。オンが線の色がつくサイズ、オフが線の消えるサイズです。 できあがり。 曲線にも破線が適応されて
オリジナルのテクスチャを作って、デザインの幅を広げよう | デベロッパーセンター
はじめに Fireworksには、あらかじめたくさんのテクスチャが用意されています。もちろん、自分でオリジナルのテクスチャを作ることも出来ます。 オリジナルのテクスチャを作ることにより、用意されているテクスチャよりも太い斜線・間隔が広い斜線を実現する、チャックの大きさをより大きくするなど、デザインの幅が広がっていきます。 今回は、オリジナルテクスチャの作り方・適用の仕方を紹介します。 必要ソフトウェア Fireworks CS4 体験版 購入 オリジナルのテクスチャを作る 今回は以下のような星形のデザインを、テクスチャを使ってデザインしていきます。 （完成イメージ） オリジナルのテクスチャを作る際にポイントとなる点が2つあります。 ポイント1.「白」と「黒」を意識する 今回のデザインでは、青い背景に白い星が散りばめられています。ですので、背景色が「黒」・星の色が「白」のテクスチャを作り
爆速のためのFireworks"自動シェイプ機能" | _level0 - KAYAC Front Engineer Blog
デザイナーを挟まずに自分で素材を制作する場合、 illustrator,photoshopを使わずFlashだけで作る事が多いと 前に紹介した事がありますが、 Fireworksもイラスト書く時に使ったりします。 ※弊社のサービス、ものづくり応援サイトdododayのアバター illustrator,photoshopと比べると癖があるので、 イラストを書くには慣れが必要かもしれませんが、 絵を描けない人でも自動シェイプ は知っておいて損はないと思います。 ウィンドウ＞自動シェイプ でパネルが立ち上がります。 パネルからステージへドラッグ＆ドロップで それぞれのシェイプが自動で生成されます。 一見しょぼいイラストが生成されるので 何だこの機能と思いがちですが、 生成されたものを元に素材を作ると 1から自分で作るよりも圧倒的に爆速です！ ↑この時計もfireworksの"スタイル"を貼付けて
%26utm_content%3DGoogle%252520Reader)
【Fireworks】よく使うヒトの作り方 すごく初歩 | バシャログ。
すっかり冬っぽくなってきて焦る、シーブレインの toyama です。自宅のマシンを買い換えたときにデータの移行でありえないミスをして、年賀状のあて先データをきれいに失ったのでした。ぐぬぬ打ち直し！ Web サイトをデザインするときに、使う機会が多いのが「ヒト」のイメージです。 受付はこちら、とか、ここに悩んでる人っぽい絵を描いて、とか。 イラストをかけるスキルがあるならきっとシャランラーと描けるのでしょうが、イラストとかマジカンベンな私としては、矩形を使ってなんとかするしかありません。 サイトのテイストにもよりますが、こんな感じでヒトを書いたりします。 1. ピクトグラム風ヒト 矩形から「楕円ツール」を選択して、Shift を押しながら正円を書きます。頭です。 それを真下にコピペします。 その円の直径と同じ長さの四角を書いて、下の円に重ねます。円の下半分と、四角の上辺が重なるように配置しま
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からそのま
| test
yellow-fellowさん ともみ日記 atashipukoさん アタシの生活 bananasakanaさん 犬系男子のワンダフルライフ sonnawakanaさん 山下若菜ブログ「山下若菜の☆そんな若菜ー！！！」Powered by Ameba officeblackさん ヨーヨー世界チャンピオンBLACKオフィシャルブログ「BLACK’s Yo-Yo life」 Powered by Ameba asobiba-makibaさん 渋谷のカフェ＆麻雀・あそびば★まきば★スタッフブログ usagitabetaiさん のんたん日記 mikagamireiさん れぃの日記 amora-chanさん アモラちゃんのメンタルヘルスライフ dabo-blogさん DABO Official BLOG『PAPER MOON MAN』powered by アメブロ fankypankyさん ふぁんき
fireworksで人物の切り抜き方法 | DEZIMO.com
デザインを行っていると画像の切り抜きという作業が必ず必要となることがあります。 その中でも人物の切り抜きは髪の毛を含むので普通にパスを使って切り抜いていたら非常に手間がかかってしまいます。 Photoshopを使っている場合こんな方法でできるというのは割と有名なのですが、人物の切り抜きだけのためにPhotshopにツールを変えるというのも癪なので、fireworksで試行錯誤の上、これが一番楽だろうという方法を見つけましたので紹介します。 ※環境はfireworksCS3を想定しています。 １、切り抜く画像を開く まず切り抜く画像をそのままfireworksで開きます。今回は髪の長い女性の画像を選んでみました。髪の先端が細くて切り抜くのが難しそう ２、髪の毛以外の部分のふちをペンツールで選択 ひとまず体などのふち（外側）をペンツールで選択します。髪の毛は適当に余白をとって選択しておきま
The Ultimate Round-Up of Fireworks Tutorials and Resources — Smashing Magazine
Fireworks was originally created as an image editing and web design application by Macromedia, for quick web mock-ups, and optimizing images for the Web. It has since been transformed into a powerful environment for designing and prototyping applications that integrates easily with Dreamweaver, Flash and Photoshop &ndash making it, perhaps, the most powerful (that’s controversial) and versatile gr
リアルな現実をサイトデザインに組み込んだサイトデザイン作成チュートリアル集:phpspot開発日誌
リアルな現実をサイトデザインに組み込んだサイトデザイン作成チュートリアル集。 次のような、ノートをそのまま開いたような自由なレイアウトの作成チュートリアルをまとめてみました。 Create a realistic web layout デスクにノートを広げたようなユニークなレイアウト作成チュートリアル Nature Portfolio Layout Interior Design Layout 3D Blog Layout Create a grunge personal portfolio layout Computer Store Web Layout Professional Business Layout Desktop Style Web Layout Photoshop Tutorial 机上スタイルのレイアウト作成チュートリアル Grunge Photographer Lay
Fireworks チュートリアル⑥ ～リアルな写真～*平凡かつフツーな日記
上のような、本物そっくりの写真を作っていきまっしょー＾o＾/ まず、キャンパス（今回は、400×400）を用意し、それと同じ大きさの「長方形ツール」をつくり、 「パターン」から、「木目2」を選びます。（ここは、自分の好きな物をお選びください。） 次に「長方形ツール」で、一つ長方形を作り、 「グラデーション」を、下の図のようにします。 そして、グラデーションの向きを、下の図のようにします。 次に、先ほどの長方形よりも、一回り小さい長方形を作り、色を分かりやすい色にします。 さらに、これを透明度40％ほどにしておきます。 次は、自分の写真にしたい画像をドラッグ＆ドロップで挿入し、 先ほど作った長方形（今回は、ピンクの長方形）の一つ下のレイヤーに持っていきます。 ピンクの部分が、写真本体になるので、その部分に、自分の写したい画像を持っていきます。 そして、ピンクの長方形をカット（SCK = 「C
【Fireworks】よく使う矢印の作り方 すごく初歩 | バシャログ。
突然雨がアホみたいに強く降ってきたりして困ります。シーブレインの toyama です。 STOP！熱帯雨林化！ WEB サイトをデザインするときに避けて通れないのが矢印イメージの作成です。 テキストの頭に、ボタンの中にと、使いどころ満載。 普段 toyama がよく作る矢印の作り方をご紹介します。 1. しっぽ付き矢印 正方形を矩形ツールで書いて[修正]→[変形]→[数値を入力して変形]で回転を選択し、45°回転させます。 [数値を入力して変形]はサイズ変更、拡大縮小、回転のダイヤログボックスが一度に表示されてとっても便利です。 ダイレクト選択ツールで頂点のひとつを選択し、Delete で三角形に変形。 最初に書いた正方形が奇数×奇数の場合は三角形の頂点が 1 ピクセルになりますが、偶数×偶数の場合は 2 ピクセルの三角形になります。 パスが切れたままで気持ち悪い人は、ペンツールでパスを閉
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
caraldo.net - it転職 リソースおよび情報
Fireworksでテクスチャ作り
Fireworksで点線の囲みを作るまとめ | Webデザインのタネ
caraldo.net - it転職 リソースおよび情報
FWでビットマップの部分的な色変更 | wooyan blog (old)
