こんにちはhashimotoです。

僕はwebデザインをするときはイラストレーターを使っています。これから不定期でイラレでwebデザインをする人のためにいろいろと実験をしていこうと思います。

オブジェクトに影をつける。

つかみの第１回目はオブジェクトに影をつける、についてです。

てっとり早くオブジェクトに影を落とす場合、"効果＞光彩(外側)" を使うととても便利です。もちろんドロップシャドウを使ってもできますが角度を付けずに影を落とす場合が多いので光彩(外側)を使います。この便利な光彩 (外側)ですが、とあるシャドウの表現をするのが難しい事に気がつきました。

この画像のような極小幅のシャドウをかけるのが難しい、のです。
光彩(外側)の値 1pxでやってみても、ぼやけた感じになってしまう。
もっとシュッとしつつシャドウをかけたい！のです。

試行錯誤の末、オブジェクトの線に "効果＞ぼかし" をかけることで期待の効果を得られることを発見しました。オブジェクトのアピアランスパネルで線を選択し、効果をかけてください。
いろいろ数値を変更したものを実験しましたのでご参考にどうぞ。
※CS4で作成しています。これ以外のバージョンでは表現が違う可能性があるかもしれないのでご注意ください。

数値をいろいろ変更してみる。

塗り：白、線：緑のオブジェクトで、線にぼかしをかけています。
一番上の段が光彩をつかったシャドウ。その下が線にぼかしをかけてつくったシャドウです。
光彩と線のぼかしで大きく違う部分はオブジェクトの角のシャドウの落ち具合です。光彩は面に対してシャドウが落ち、線のぼかしは線自体がぼやけるので角にもシャドウが落ちます。

いい具合のシャドウがありましたでしょうか？
テキストに対してこの方法をつかうと効果が高いようです。

次回もピンポイントで気になるところを実験していきます！