2007.03.11(Sun) 01:39:00
去年あたりから "Web2.0" という言葉を、ネット上で見かけることが多くなりました。
ものすごく大雑把に言うと、Ajax と呼ばれる JavaScript を高度に使いこなしたインターフェースや、
光沢のある画像を使用した外観が "Web2.0" の最大の特徴です。
今回はこの「光沢のある画像」、Web2.0風画像を Excel で簡単に作る方法を紹介します。
(仕事中にさぼって研究した成果です。Web2.0風画像は需要も多そうなので、公開することにしました。)
※これらは全て Excel で作成した画像です。
Web2.0 風の画像を Photoshop を使用して作成するチュートリアルを、ブログなどでたまに見かけるのですが、
どんなに簡単な作業であっても、普段それを使用しない人(自分)にとって Photoshop での作業は、かなり敷居が高いです。
そもそも Photoshop を PC にインストールしていない人が大半だと思われます。
そこでかなり敷居を下げて、インストールされている PC も多く、
かつ仕事などで使い慣れているであろうMSオフィスの Excel を使用するわけです。
(別に Word でもいいと思いますが、作業領域の広さを考慮して Excel を使用します。)
早速始めてみましょう。まずは作成前の下準備から。
非表示にしているツールバーがあったら、めんどくさいので表示しておいてください。
ついでにセルの色も一時的に変更します。
真っ白の画像も扱う必要があるので、白いセルだとやりづらいです。
とりあえず薄めの色にしておきましょう。
(端にある「1」とか「A」とか並んでいるグレイの部分の、一番左上を右クリックして「セルの書式設定」から設定できます。)
下準備が終わったら、いよいよ画像の作成開始です。
1.下地となる「角丸四角形」を描く
色は濃い色から薄い色へのグラデーションで塗りつぶします。
線は「線なし」を指定してください。


2.縁取り部分を作成する
今作ったばかりの「角丸四角形」をコピーして、書式のみを変更すると簡単にできます。
塗りつぶしなしの線だけの状態にします。
3."光沢部分"を作成する
光沢を出すための部品を作成します。
ここではフローチャートの「端子」を使用します。
(光沢部分は作りたい画像の種類によって「楕円」を使用するなど、1で作った部品の形に合わせて使い分けてください。)
光沢部品は白の塗り潰しに透明度を指定します。これは70%ぐらいでよいでしょう。
4.各部品を重ねる
ここまで作成した各部品を重ね合わせます。
部品を重ねる順番に注意してください。
一番下に下地の四角形を置いてその上に光沢部品、一番上に縁取り部品の四角形の重ね順です。
だいぶそれらしくなったのではないでしょうか。
あとはこれに「塗りつぶしなし」「線なし」のテキストボックスで文字を重ねればひとまず完成です。
フォントとサイズはこんな感じにしました。
できあがったものはこのようになっているはずです。
5.PNG画像に変換する
完成したといっても、このままではブログなどの素材には使えません。
なので、作成した画像をPNG、JPG等の画像ファイルに変換します。
変換といっても特別なことをするわけではなく、キャプチャしてペイントに貼り付けて、
保存形式を指定して保存するだけです。
キャプチャする前に、色を白に戻してグリッドを消しておきます。
グリッドはツールバーのフォームにあるボタンをクリックすれば簡単に消せます。
後はキーボードの「PrtSc」キーを押して画面をキャプチャします(※)。
キャプチャした画像をペイントに貼り付けて、必要な部分を切り取って保存してください。
保存する際はJPG形式ではなく、PNG形式にした方がいいです。
ペイントでJPG形式を指定して保存すると、画像がかなり粗くなってしまうようです。
※キャプチャなんてやったことないからよく分からない、という人はフリーソフトを使ってみてください。
これを使えば、もっと簡単にキャプチャできるはずです。
WinShot: http://www.woodybells.com/winshot.html
---
さて、いかがでしたでしょうか?
さすがに細かい部分は Photoshop には全く及びませんが、十分に実用可能な画像ができあがっているはずです。
オートシェイプ機能をもっと応用することができれば、さらにハイクオリティな画像も作成可能になります。
Excel の上達にもつながって一石二鳥なので、興味がある人は試してみてください。
Copyright ©The Stylish LifeHacker All Rights Reserved.
This template is inspired by "one_delight".
| FC2ブログ
admin