とみながです。 今日は資料も何も届かず、特にする仕事もないので、このサイトのリニューアル用のカンプをがーっと作りました。 今のもそうなんだけど、私はWeb用のデザインは全部Fireworksで作っていて、今はCS3を使っています。 Photoshopと比べると美しくないとよく言われますが、工夫次第ではかなり良い感じに使えるのでは‥‥と思うのですが。現行バージョンだとテキストのアンチエイリアスがあまりキレイじゃないかなーと思うぐらいで、フィルタ関係は使い方を工夫すれば大丈夫です。 Fireworksでうまく影をつける よくやるのが、ぼかしをフィルタでやらないで、ぼかしをつけたいオブジェクトを複製し、背面に配置してエッジをぼかす方法。 これはあれこれ試行錯誤して、どうやったらPhotoshopの「光彩(外側)」に近づけるかと考えて、結果的にこの方法になりました。 わかりにくいので図を作っ
FireWorksで縁取りされた文字を作るのには、どうしたらいいでしょうか? グローを短く濃くかけるとそれらしいものができるのですが、 この方法だと少し縁取りが汚くなるように感じます。 他にいい方法はないものでしょうか? また、FireWorksの他、Photoshop, Illustoratorでの方法も知りたいです。
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード:[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し(半透明は削除)、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記:2009/07/27 本エントリには続きがあります。 続:PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop(あるいは他の画
前回、超速!楽チンな雪の結晶画像の作り方で、フリーフォントを使って雪の結晶を作りましたが、今回は自力で描く、一番簡単な雪の結晶の描き方です。 四角が描けて、テキストが打てれば、描ける(はず)ですので、PCお絵描き初心者の方も大丈夫です。 画像ソフトは、Illustratorをはじめとするドロー系ツールでも、Photoshop等のペイント系ツールでもOKです。角度指定(今回は60度)で回転できる画像ソフトが望ましいです。ほとんどの画像ツールはレイヤー構造を使える(はず)ですので、それを前提に書いてます。 長方形と三角とテキストだけを使って雪の結晶画像を描く ごく基本的なソフト操作ができる方、だいたい流れはお分かりいただけましたでしょうか? 手順1:パーツの制作について。 自分で線を引いたり、ペンツールで複雑な形を書いたりするのは苦手なかたでも、細い長方形はソフトの付属機能で描けますよね。 星
こんにちは、花粉症がすっかり治ったシーブレインの toyama です。 大学生の頃はとても酷かったのに、アレか、歳のせいか。 画像のシルエットを生かして影を作りたいなー、なんて思うことがありますよね。 一つ前のエントリでもシルエットを生かした影を作ったりしていますが、面倒で投げています。だめだこんなことしちゃ!ちゃんとパス抜け! というわけで、画像のシルエットをちゃんとパスで抜こうじゃないかというお話です。 1. 透過画像を用意 透過画像を用意します。透過画像がそもそもなかなかないので、透過画像がなければ背景を切り抜きます。なんだか本末転倒な気もしますが。 むかーしの「素材辞典」は写真によってはパスデータつきだったのにどうしてやめちゃったのかしら。 2. 範囲選択 画像をレイヤーを選択した状態で [Alt] (Mac なら[Option])を押すと、カーソルが破線の□マークになります。範囲
マルチメディア工房には、Web サイトデザインのプロが利用するものと比べても見劣りしない機器とアプリケーションが揃えてあります。これを有効に活用することで、デザイン的に優れた Web ページを作成することが可能になります。そのためには、いろいろな事を学ばなくてはなりませんが、ここでは、クールな Web サイト構築への最初の一歩としてFireWorks を用いてシンプルな Web ページを作成してみます。 実習課題 ロールオーバーボタンのあるWeb ページの作成 このページを、Fireworks の機能を利用することで、できるだけ短時間で作成しましょう。 作成に要する時間は1時間程度です。 目次 Web サイト構築 利用するアプリケーション 準備 ベクトルオブジェクトの操作 ビットマップオブジェクトの操作 テキストの挿入 ボタンの作成 ファイルの書き出し 修正 アップロード 次のステップ 2
紙がやぶれた感じを表現するPhotoshopチュートリアルいろいろ – DesignWalkerにて紹介されていたテクニック集のうち、最初のPhotoshop Page Tear | AdrianHerritt.comで解説されている方法を、Fireworksで再現してみました。 練習なので下手くそですが、 ↑この画像が、 ↑こんな感じになります。なんとなくそれっぽいですよね。 では、やってみましょう ↑なげなわツールで適当にギザギザをつけて選択し、カットします。 ↑「Ctrl + Shift + I」で選択範囲を反転させます。 ↑右クリックして「コピーして新規ビットマップにする」を選びます。ビットマップが2個になります。 ↑再びなげなわツールで紙の切れ端部分を選択します。 ↑「コピーして新規ビットマップにする」を実行します。ビットマップが3個になります。 ↑「フィルタ > カラー調整 >
Webデザイナとして仕事をする上で、ここ数年、個人的にFireworksが手放せないツールになっています。 twitterで某人に「書いて」と言われたのもあるのですが(笑)、Web画像を作るのによいソフトをさがしている人、これから画像編集のためのソフトを選ぼうとしている人の参考に、ということで、個人的にFireworksの気に入っている点など一通りまとめてみようと思います。 ベクター画像とビットマップ画像が等しく扱えるので作業がスムーズ Fireworksは、ベクター画像とビットマップ画像を同時に扱えます。ベクターでちょっとしたアイコンを作るとか、ビットマップ画像を読み込んで編集するとか、すべてが一つのソフトの中で完結できます。IllustratorとPhotoshopを行き来したりするような手間は不要ですし、また複数のソフトを同時起動しなくていいのでマシンにも優しいです。 ビットマ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く