丸角：シェイプツールで丸角

ここではシェイプツールを使い丸角を作成し配置する方法を解説しています。

ファイルの新規作成

上部メニューのファイルから新規→白紙ファイルを選び新規にファイルを作成します。

幅：200px　高さ：100px　解像度：72px　カラーモード：RGBカラー　カンバスカラー：透明とします。

150×60ピクセルの丸角を作る

シェイプツールから丸角長方形ツールを選択し角丸の半径を6pxに設定します。塗りつぶす色は白です。
そして情報ウィンドウを見ながら150×60ピクセルの大きさを作ります。
その後ラスタライズします。

周りにグラデーションをかける

選択範囲の境界線を描くを使いグラデーションをかけます。
まず中央に1ピクセル灰色で描きます。その後外側1ピクセルにさらに薄い色で描きます。これを合計3回行います。
こうすることで浮かび上がった感じの丸角の台が完成します。

大きさを調整する

最初幅は150ピクセルでしたがグラデーションをかけたことによりずれてしまいます。実際には157ピクセルほどになっていると思います。移動ツールで縮小をするか、作る段階でグラデーションの幅を考えておくなどの必要があります。

3回切り取る

切り取りツールを使い３つのパーツに分解します。上の部分、真ん中の部分、下の部分です。
幅は150ピクセルで切り取ります。丸角の部分はある程度の高さで切り取ります。真ん中の部分の高さは1ピクセルでOKです。
いったん切り取り保存をしたら編集メニューの取り消しから前回の状態に戻します。これを繰り返します。

↓完成画像

CSSで3パーツを配置する

3パーツを配置するために3要素を作ります。
class="main"が全体を囲みます。その中にclass="sample"とp要素を入れています。

htmlです。

<div class="main">
<div class="sample">
<p>
メニュー
メニュー
メニュー
</p>
</div>
</div>

cssです。

.main{
width:150px;
padding-top:17px;
background:url("上の丸角のパス") no-repeat top;
}

.main p{
margin:0;
padding:0 10px;
background:url("真ん中のパス") repeat-y;
}

.main .sample{
padding-bottom:17px;
background:url("下の丸角のパス") no-repeat bottom;
}

結果

解説

まず上のhtmlとCSSはひとつの配置方法です。ほかにもいろいろとあります。
上下の丸角画像の高さは17ピクセルで切り取ったのでpaddingを17ピクセルで指定しています。これで画像のすべてが表示されます。
上下の丸角画像はno-repeatを使い繰り返さないようにしています。
そして真ん中の画像は縦に繰り返し表示されるようにrepeat-yを使っています。

ちなみに上下の丸角のpaddingを下げた場合画像が隠れます。

▲トップ