Photoshopで写真枠をサクっと作る
November 28, 2008
前回のエントリーに引き続きPhotoshopの小ネタです。
Webでよく見かけるこんな写真枠をサクっと作っちゃいます

四角い枠を書いて、その上に写真を乗っけるという方法を以前はやっていましたが、もっとお手軽です。

まず、適当に写真自体にドロップシャドーを掛けます。
次に、枠になる白い境界線を、内側に引きます。
たったこれだけで、完成です。
簡単でしょ?
スタイルライブラリーなんかに突っ込んでいれば、一瞬で枠が付けれて便利ですよ。
ただ、1点注意しないといけないのは、枠内の写真の比率をCMSなんかで固定して欲しいと要求されたときなんかは、枠の幅は一定なので中の比率が変わるので注意が必要です。その時は、元の写真を始めから枠の分大きくするなどの工夫をしてみて下さい。
Webでよく見かけるこんな写真枠をサクっと作っちゃいます

四角い枠を書いて、その上に写真を乗っけるという方法を以前はやっていましたが、もっとお手軽です。

まず、適当に写真自体にドロップシャドーを掛けます。

次に、枠になる白い境界線を、内側に引きます。
たったこれだけで、完成です。
簡単でしょ?
スタイルライブラリーなんかに突っ込んでいれば、一瞬で枠が付けれて便利ですよ。
ただ、1点注意しないといけないのは、枠内の写真の比率をCMSなんかで固定して欲しいと要求されたときなんかは、枠の幅は一定なので中の比率が変わるので注意が必要です。その時は、元の写真を始めから枠の分大きくするなどの工夫をしてみて下さい。
- デザインカンプを作る時に便利なブラウザエレメント集
-
- 最近、デザインフェーズにどっぷりな、やいぶです。皆さんこんにちは。そんな中便利な、PSDを発見したので、ご紹介。 デザインカンプを作る時って、リアリティーを出す為に、ボタンや、スクロールバー、イン... MORE »
- デザインカンプを作る時に便利なサイト『GRIDMAKER』
-
- 私が、Webサイトのデザインカンプを作る時に、まず始めにやることは、大きな配置を決めを行っています。電卓片手に、メインコンテンツの幅を決め、サイドバーの幅を決め、マージン(隙間)を割り出して行きま... MORE »
- Web Designing 2008年 12月号 + MdN 2008年 12月号
-
- 本日は、天神で打ち合わせがあり、その帰りに久々に本屋さんに寄れたので、不定期購読のデザイン系の雑誌を2冊ほど買ってきました。Web Designing (ウェブデザイニング) 2008年 12月号 W... MORE »
- Photoshopで写真枠をサクっと作る
-
- 前回のエントリーに引き続きPhotoshopの小ネタです。Webでよく見かけるこんな写真枠をサクっと作っちゃいます四角い枠を書いて、その上に写真を乗っけるという方法を以前はやっていましたが、もっとお手... MORE »
- グローバルナビなんかで便利な、Photoshopで簡単な2重ラインの書き方
-
- MTネタばかり書いていると、そっち側の人だと思われるので、たまにはWebデザイナーぽいネタを。Photoshopの小ネタです。グローバルメニューでよくやるこんな感じ上と下、微妙に違うんですが分かります... MORE »
このブログ記事に対するトラックバックURL
- ヤマダヤスヒロ

-
福岡県 福岡市在住 Webデザイナー。
1973年福岡生まれ。射手座、B型。HNは、やいぶ・Yaive など。幼少期から、モノを作ることが大好き。しかし、小学生の頃の夢は弁護士。 中学生で、漫画家を志すも、高校生時に建築に強く興味を持ちあっさり方向転換。 某デザイン系大学を経て、インテリアデザイナーになる。その後建築士の免許を取得。 建設会社で現場監督を経験、建築塗装会社で営業を経てWebマスターになる。 2006年に独立開業、BULANCOとしてWeb制作に携わる。現在に至る。
只今、コメント機能が正常に機能していません。ご意見ご要望はこちらからどうぞ。
コメントする