May 20181 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31

デザイン | LOVE♪Fireworks

JUGEMテーマ:写真


【WEBデザイン】

Webに特化したFireworkはとにかくスライス業務が
とってもスムーズに行えます。

デザインを観ながら、スライスした画像の圧縮作業
画像の種類(JPEG、gif、png、アニメーションgifなど)、
画像の名前をつけたり・・・

一気に書き出しもできるし、画像のスライス部分をクリックして
右クリックから一枚一枚のスライスも可能。
photoshopの方が、正直画像の書き出しはきれいにいくのですが
その点も慣れてくるとFireworksでも綺麗な画像での
書き出しも可能です♪
JPGのみですが、一枚画像の中の一部の部分だけの圧縮率を
変更したりもできます。

あとはパーツの作りやすさもとても重宝します。
ちょっとしたボタンやバナーそ作るにはphotoshopより
簡単手軽にちょっと豪華なもの作ることができます。

↓本家サイトへのバナーも楽ちん。
photoshopで下のバナーを作るとなると
いちいち効果だけ(シャドー部分)でレイヤーわけになってしまったり
うすく見えるドットのテクスチャを別で作って登録したり
グラデーションの微妙な色合い調整に時間がかかったりと
幅内1ピクセルの白いラインを引くのがめんどくさかったり。

Fireworksだと、バナーも3分もかからずパパッと感覚だけで
作れてしまうので、photoshopより時間がかからず
ちょっぴり豪華(?)なものも作れます。

photoshop&イラレでWebサイトを作っていた際に一番
めんどくさく感じたのがビットマップとベクトル画像を行き来する事でした。
イラレでは綺麗に作ってもスライスするためphotoshopに
もってくると微妙にぼやんとした1ピクセルのぼやけた部分を修整したり
グラデーションが背景にかかった画像で上下に伸びる部分の
処理に困ったりしていました。

例えば下の簡単なテキストと画像のエリアわけのものがあるとして
コーディングをするとなった場合ですが・・・


簡単に見えるこのコーディング作業がちょっぴりめんどくさいと
思った方・・・正解です(涙

まずはテキストエリアの領域が下に伸びるため
背景のグラデーションの処理に工夫が必要になってきます。
ボタンの部分の背景の色と違和感なくつなげるために
背景のグラデーションをほんの少しだけ長めにとってあげなければいけません。
ボタンの部分は常にエリアの下に置いてあるレイアウトと考えると・・・

こんな単純そうに見える作業でもイラレとphotoshopを行き来・・・
Fireworksだと単純に背景の下の部分を引っ張って処理できるので
手間を考えたら、かなりの時間の短縮となります。

コーディングの事を考えたら、簡単なテキストエリアを上のような
デザインであげてくる事がそもそもコーダー泣かせなのですが(汗
これで背景に凝ったデザインをもってこられたら一枚画像にするか
フォントのサイズをきっちり固定して逃げます・・・私(汗

コーダーさんによってコーディングの仕方も
ファイル名の一つをとっても違うのもまた楽しい所・・・
上の画像をコーディングするとしたらどんな風に皆さんがするのか
ちょっと気になってきてしまいます。

次回はマークアップに入っていきたいと思います♪

**********

現在本家サイトリニューアル中↓


■micchi
静岡在住のwebデザイナー。
他にAtelier*Spoonにて写真教室など
しております。
コーギーのアフロと幸せな
毎日を送っております。
■好きな物
・お菓子作り
・写真撮影
・STUDIO M'の食器
・MATEUSの食器

selected entries

categories

archives

recent comment

link

search this site.

others