昨日のエントリーで例に挙げた右下にある私の写真。
妙なカメラ保持装置を握っている白黒の画像です。
角を落として円くしてあります。
画像自体を加工しています。
具体的に言いますと、まず、画像で四角を作ります。
真ん中に白い丸を乗せます。
スライスツールで4つに切って、写真の四つ角にそれぞれ載せます。
この白黒写真はテキストで挿入しています。
角丸、画像のほうで加工。
画像の角に背景とおなじ色の矩形を4つ配置して角丸に見えるようにしています。
画像 (JPEG 画像, 165×486 px)を見たらもうちょっと凝ったことをしてます。
Adobe Fireworks CS5 Windows版
使用したのはファイヤーワークス。
レイヤーのオブジェクトに透明が使えてPNGで保存できればどんなアプリでも可。
小粋空間: Photoshop で角丸を作る
フォトショップですとこうなります。
GIMPで画像を角丸にしたときに四隅の切り取った部分を透明にして保存する方法を教… – Yahoo!知恵袋
GIMP2.6で画像の角を丸くして保存する手順を詳しく教えてください。 – Yahoo!知恵袋
GIMPならこう。
最初からメニューに「角を丸める」があるのね。
CSS3で角丸の四角が作れるみたいです。
写真も元データをそのまま載せて見栄えだけ変えられると便利です。
記事内の画像の角を丸くする。border-radius(CSS3)｜無責任な大人の自由研究
クラス指定をしないと、全部の角が円くなりそうです。
CSS3に対応してないブラウザで無理矢理見せる方法もありそうですが
ボックスの角にレイヤーで押し込んだりする無理な方法かな。
想像するだけで心臓に悪いので探しません。
楽な方を使いましょう。