The Stylish LifeHacker

Live stylish life with LifeHacks.

スポンサーサイト 

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
trackback: -- | comment: -- | edit

Excel で Web2.0 風画像を量産する方法 

去年あたりから "Web2.0" という言葉を、ネット上で見かけることが多くなりました。
ものすごく大雑把に言うと、Ajax と呼ばれる JavaScript を高度に使いこなしたインターフェースや、
光沢のある画像を使用した外観が "Web2.0" の最大の特徴です。

今回はこの「光沢のある画像」、Web2.0風画像を Excel で簡単に作る方法を紹介します。
(仕事中にさぼって研究した成果です。Web2.0風画像は需要も多そうなので、公開することにしました。)

e019_12.png
※これらは全て Excel で作成した画像です。
Web2.0 風の画像を Photoshop を使用して作成するチュートリアルを、ブログなどでたまに見かけるのですが、
どんなに簡単な作業であっても、普段それを使用しない人(自分)にとって Photoshop での作業は、かなり敷居が高いです。
そもそも Photoshop を PC にインストールしていない人が大半だと思われます。

そこでかなり敷居を下げて、インストールされている PC も多く、
かつ仕事などで使い慣れているであろうMSオフィスの Excel を使用するわけです。
(別に Word でもいいと思いますが、作業領域の広さを考慮して Excel を使用します。)


早速始めてみましょう。まずは作成前の下準備から。
非表示にしているツールバーがあったら、めんどくさいので表示しておいてください。
e019_00.png

ついでにセルの色も一時的に変更します。
真っ白の画像も扱う必要があるので、白いセルだとやりづらいです。
とりあえず薄めの色にしておきましょう。
(端にある「1」とか「A」とか並んでいるグレイの部分の、一番左上を右クリックして「セルの書式設定」から設定できます。)
e019_01.png

下準備が終わったら、いよいよ画像の作成開始です。


1.下地となる「角丸四角形」を描く
e019_base.png

色は濃い色から薄い色へのグラデーションで塗りつぶします。
線は「線なし」を指定してください。
e019_02.png e019_03.png
e019_04.png e019_05.png


2.縁取り部分を作成する
e019_outline.png

今作ったばかりの「角丸四角形」をコピーして、書式のみを変更すると簡単にできます。
塗りつぶしなしの線だけの状態にします。
e019_06.png


3."光沢部分"を作成する
e019_light.png

光沢を出すための部品を作成します。
ここではフローチャートの「端子」を使用します。
(光沢部分は作りたい画像の種類によって「楕円」を使用するなど、1で作った部品の形に合わせて使い分けてください。)
e019_07.png

光沢部品は白の塗り潰しに透明度を指定します。これは70%ぐらいでよいでしょう。
e019_08.png


4.各部品を重ねる

ここまで作成した各部品を重ね合わせます。
部品を重ねる順番に注意してください。
一番下に下地の四角形を置いてその上に光沢部品、一番上に縁取り部品の四角形の重ね順です。

だいぶそれらしくなったのではないでしょうか。
あとはこれに「塗りつぶしなし」「線なし」のテキストボックスで文字を重ねればひとまず完成です。
フォントとサイズはこんな感じにしました。
e019_09.png

できあがったものはこのようになっているはずです。
e019_11.png


5.PNG画像に変換する

完成したといっても、このままではブログなどの素材には使えません。
なので、作成した画像をPNG、JPG等の画像ファイルに変換します。
変換といっても特別なことをするわけではなく、キャプチャしてペイントに貼り付けて、
保存形式を指定して保存するだけです。

キャプチャする前に、色を白に戻してグリッドを消しておきます。
グリッドはツールバーのフォームにあるボタンをクリックすれば簡単に消せます。
e019_10.png


後はキーボードの「PrtSc」キーを押して画面をキャプチャします(※)。
キャプチャした画像をペイントに貼り付けて、必要な部分を切り取って保存してください。
保存する際はJPG形式ではなく、PNG形式にした方がいいです。
ペイントでJPG形式を指定して保存すると、画像がかなり粗くなってしまうようです。

※キャプチャなんてやったことないからよく分からない、という人はフリーソフトを使ってみてください。
 これを使えば、もっと簡単にキャプチャできるはずです。
 WinShot: http://www.woodybells.com/winshot.html


---
さて、いかがでしたでしょうか?

さすがに細かい部分は Photoshop には全く及びませんが、十分に実用可能な画像ができあがっているはずです。
オートシェイプ機能をもっと応用することができれば、さらにハイクオリティな画像も作成可能になります。
Excel の上達にもつながって一石二鳥なので、興味がある人は試してみてください。
thread: WEB素材 | janre: コンピュータ |  trackback: 0 | comment: 2 | edit

この記事に対するコメント

はじめまして。Hinoと申します。
この記事、目からウロコでした。
当拙サイトで鏡像効果を追加して記事にさせていただきました。
とりあえずごあいさつまで。

Hino #SFo5/nok | URL | 2007/07/04 21:25 * edit *

>>Hinoさん
はじめまして。
記事を拝見させていただきました。

非常にすばらしい応用です。

SUNONE #I9hX1OkI | URL | 2007/07/09 19:00 * edit *

コメントの投稿

Secret

トラックバック

トラックバックURL
→http://lifehacker.blog86.fc2.com/tb.php/19-937c4a5d
この記事にトラックバックする(FC2ブログユーザー)

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。