Photoshop と CSS Shapes でレイアウトに形状と深みを加える手順

この記事は、Web Platformチームブログに2014/３/11に投稿された記事「Add Shape and Depth to Your Layout with Photoshop and CSS Shapes」を翻訳したものです。

現在の Webkit の CSS Shapes の実装には、shape-outside の値として画像を指定機能が組み込まれています。この場合、基本シェイプ関数を使い形状を指定する代わりに、画像のアルファチャンネルから形状が計算されます。その際に使われる不透明度のしきい値は shape-image-threshold により指定可能です。透明な背景を持つ画像を使うことで、CSS Shapes を利用して、その画像により定義される任意の形状の周囲にテキストを回りこませることができるのです。

デフォルトでは、画像内の 0％ 以上の不透明度を持つ領域が形状の定義となります。そのため、ドロップシャドウのような半透明の領域も形状の一部となります。この記事では、Photohsop を使って画像をつくり、アルファチャンネル内にドロップシャドウを定義し、そして CSS Shapes を使って下の単純なエンサイクロペディアのレイアウトに深さと輪郭をつくる方法を順を追って説明します。

Photoshop でアルファチャンネル内に形状を定義する

まず Photoshop で、上のごくシンプルな画像を開きます。

1. 新しいレイヤーを作成し、‘shadow’ と名付けます。このレイヤーにはドロップシャドウをつくるため、メイン画像の下に移動します。

2. レイヤーを黒く塗りつぶし不透明度を 50％ に設定します。

3. shadow レイヤーが選択された状態で、クイック選択ツールを使って画像を選択します。「境界線を調整」ダイアログボックスを開き、ぼかしを 5px に設定します。

4. 新しいレイヤーマスクをつくります。移動ツールで shadow レイヤーを右下に移動します。

5. チャンネルパネルを開き、作成したレイヤーマスクの新しいアルファチャンネルを確認してください。これが CSS Shapes を使って周囲にテキストを流し込む形状になります。

6. 画像を PNG として保存してください。

CSS Shapes を使い画像の周囲をテキストで囲む

まずは、オリジナルのページレイアウトに対して、画像の周囲に回り込むように修正をします。

#gears { float: left; shape-outside: url(“gears.png”); }

今回は画像に元々透明な背景があったため、ギアの輪郭が形状の定義となります。shape-outside を使うことで、テキストが以下のようにギアを囲むのが確認できます。

shape-margin を使うと、画像とその周囲のテキストの間のマージンを指定できます。

何も指定しないと shape-margin の値は none です。上の例では、周囲のテキストがギアに近すぎるようです。以下のように修正してみましょう。

#gears { float: left; shape-outside: url(“gears.png”); shape-margin: 10px; }

これでずっと良くなります：

しかし、shape-margin: 10px; と指定するよりも、上でつくったドロップシャドウ付きの画像を使い、アルファチャンネル内の shadow により形状の輪郭を定義してみたいと思います。

#gears { float: left; shape-outside: url(“gears-dropshadow.png”); }

これにより以下のような結果になります。

以上です。ほんのいくつかの手順だけで、平坦で四角張ったレイアウトに、新しい CSS 機能の助けを借りて、深さと豊かさが加わりました。

もし、画像から形状を計算する詳細な方法に興味があれば、Hans Muller のブログに書かれているアルゴリズムを読むと良いでしょう。

このサンプル内のテキストは Wikipedia からの抜粋です：

Gear. (2014, March 9). 2014 年 3 月 9 日 20:41 に Wikipedia の以下のページより。
http://en.wikipedia.org/w/index.php?title=Gear&oldid=598819607