Ads by Google

--.--.--(--) --:--:--

カテゴリー スポンサー広告 | »

タグ

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

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

2007.03.11(Sun) 01:39:00

カテゴリー idea | コンピュータ » WEB素材

タグlifehack web2.0 画像 素材 web2.0風画像 excel

去年あたりから "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 の上達にもつながって一石二鳥なので、興味がある人は試してみてください。

Copyright ©The Stylish LifeHacker All Rights Reserved.
This template is inspired by "one_delight".

FC2Ad

| FC2ブログ
admin