Wordart を使った Web 用タイトルの作成手順
Word にある Wordart(ワードアート)や Clipart (クリップアート)の機能を用いて見栄えの良いタイトルを作る
方法を以下に示します。例として Wordart をとりあげますが、Clipart でも手順はほとんど変わりません。画面上 に良い絵柄を作り出せれば、それを取り込んで再利用することが出来る、ということを体験してください。さまざ まな応用が考えられるでしょう。
■ WordArt を使ってタイトルを描く
タイトルを決めましょう。「How to make a happy day」でどうでしょう。
□ Word を起動して新規の文書を用意します。
ここにタイトルをWordart を使って描きます。「挿入」メニューの「図」から(階 層メニューになっています)、ワードアートを選んでください。右図のようなウ ィンドウが開くでしょう。
好みのスタイルをクリックして選択し、OK ボタンを押します。ここでは 一番上の列、左から三番目の円周上に文字が並ぶデザインを選びました。
すると右図のようなウィンドウが開き、加工する文字、その字体、サイズ を指定することが出来るようになります。
文字、字体、サイズを設定して OK を押すと、Word 文書に指定した文字 が円周に並んで置かれます。(下図、左側)
ここで、文字の部分をクリックすると四角い枠が表示されますから、その 頂点(カド)や四辺の真ん中の点をドラッグするなどして、全体のサイズ、
丸みなどを決めます。今回私は Web ブラウザで見たときに画面に大きく、
半円状に並んで見えて欲しかったので下図右側のように調整しました。
□ 表示されている画面を取り込む
以下の手順にて、今見えている画面表示をそのまま写 真を撮るように画像データにすることが出来ます。
1. 撮りたい画面が表示されている状態で、Control キ
ーを押しながら、PrtScr と書かれたキーを押す。
これで一時的に画面イメージが記憶されました。
2. 「スタート」メニューから「プログラム」の「アク セサリ」をたどって、「ペイント」を起動。
3. 起動されたペイントの「編集」メニューの「貼り付 け」を実行。
これで右図のように画面表示の内容がペイントで扱え るようになりました。
□ 必要な部分を切り出す
ペイント画面左側のツールパレットから自由選 択ツール をクリックして選びます。その後 で切り出したいところだけをマウスで囲むよう にドラッグします。(右図の状態)
すると四角い点線で囲まれた表示になると思い ます。(右下図に似た状態)
ここで「編集」メニューの「カット」を行いま す。これで切り抜いた画像が一時的に記憶され たはずです。
切り抜きに失敗した場合は「編集」メニューの
「元に戻す」を実行してマウスで囲むところか らやり直して、もう一度「カット」です。
うまく切り抜ければ、残った画像に用はありませんから、
ここでいったんペイントを閉じます。(保存するかと聞か れますから、保存は不要と指示しましょう。)
もう一度「スタート」メニューから「ペイント」を起動さ せ、再び「編集」メニューの「貼り付け」を実行します。
これで切り抜いた部分だけが画像データとしてペイントの ウィンドウに現れたと思います。
一発でうまく切り取れることはまずありませんから微調整 します。右図は少し余白が多い状態なので、これを詰めま しょう。
ペイント画面左側のツールパレットから矩形(四角い形)
選択ツール を選択して、正確に残したい領域だけを
四角く選びます。左上から右下に斜めにドラッグするとどう選択されるかわかるでしょう。
選択された後で、マウスを選択した点線内に移動し(マウスポインタが 表示になる)左上にドラッグして左 と上の余白を詰めます。続いて、ペイントのウィンドウ内の白いイメージの右下のカド(右上図の黒い矢印)を左 上にドラッグして、画像の右端と下端を詰めます。これで必要
な範囲だけをうまく取り出せたと思います。
□ できあがった絵の保存。
ペイントの「ファイル」メニューの「名前を付けて保存」を実 行します。すると右図のようなウィンドウが開いて、どこに保 存するか尋ねてきます。
ファイル名には URL で使えない文字(漢字や一部の記号)を 使わないように。また、「ファイルの種類」を指定してくださ い。Web 用であれば GIF もしくは PNG 形式が良いでしょう。
保存の際に右図のような小さなウィンドウで色の情報が失われるという警告が出 ますが、画面イメージを処理している範囲では問題有りません。OKと答えます。
これで のようなアイコンがついて、目的とする画像ファイルが作成された でしょう。
□ 完成したロゴマーク画像の使い方
たとえば title.gif という名前で上の画像を保存した場合は、以下のように HTML ファイルに記述します。
どうですか?うまくできましたか?
<IMG ALT=”[How to make a happy day]” SRC=”title.gif”>
選択部分を左上に寄せる
このカドで全体を切りつめる