メインメニュー


[スポンサードリンク]


Web Art Designer の使い方
「ウェブアートデザイナー」は、IBMの「ホームページビルダー」についているソフトです。
photoshopやillustlatorはプロ仕様なので、あちらのほうが機能は充実していますが、
使いやすさからいうとこちらのほうが好きです。
ここでは、この「ウェブアートデザイナー」の簡単な使い方を解説します。

準備編 画像編 タイトル画像編 色変更編
バナー編 動くバナー編


準備編
  1. ウェブアートデザイナーを開く
    とにかく開かなきゃ、加工は出来ません!(笑)
  2. 出来た素材を形式別に保存する
    いきなり保存方法なのですが…これも知っておかないといけません(笑)
    画像には大きく分けて「GIF」「JPEG」「PNG」の種類があります。
    それぞれ長所・短所を持っているので、素材に合った種類で保存します。
  3. 透過処理と背景色
    「GIF」形式で保存する場合、一部の色を透明にして保存できます(透過処理)。
    また、文字を画像にして保存する場合には背景色に気をつけなければいけません。
  4. 出来た素材を保存する
    出来上がった素材に名前をつけて保存する方法です。
    直接ホームページビルダーに貼り付ける方法と、名前をつけてフォルダに保存する方法を紹介します。

画像編
  1. 画像のファイルサイズを変える
    写真画像って、どうしてもファイルサイズが大きくなりがち。。
    細々の回線でもスパッと見れるように、画像のファイルサイズを小さくします。
  2. 画像のサイズを変える
    デジカメで写したものってファイルサイズもデカイけど、画像自体の大きさも結構デカイ(笑)
    そこで表示させる大きさにサイズを小さくする方法を紹介します。
  3. 画像に枠をつける
    フレームみたいな枠で画像を囲ったり、画像の周りをぼかしたりできます。
  4. 画像に縞模様をつける
    素材屋さんで配布されている写真に、横の縞模様が入っているものがあります。
    これをウェブアートデザイナーで作ってみます。

タイトル画像編
  1. 文字を画像に変える
    文字を入力して、それを画像に変換します。
    やっぱりタイトルロゴとかには、いつも使っているフォントとは違うフォントを使ってみたかったりして。。(笑)
    でも、同じフォントがサイトを見ている人の側のPCに入っていなければ表示されません。
    そこで、特殊な(?)フォントで文字を打って、それを画像に変換してやります。
    そうすることで、どの環境でも見ることができるようになります。
  2. 文字を装飾する
    文字に影をつけたり、枠線をつけたりします。
    他にも色々と文字を装飾することができます。
    これだけでも随分と雰囲気が変わってきますよ。
  3. もっと文字を装飾する
    ウェブアートデザイナーで用意された画像以外のものを使ってフォントを装飾します。
    また、背景と併せることで少し技アリな感じになります。
  4. もっと文字を装飾してキレイに見せる
    文字に影をつけて画像化したとき、文字の周りが浮き出た感じになってしまうので、
    ちょっと技を使ってキレイに見せます。

色変更編
  1. 好みの色に変える
    ちょっと素材の色を変えたいな…って思うときに使うやり方です。
    簡単な操作で色が変えられますよ。
  2. 色んな色にする
    上のは全体的に色を変えるときの方法なのですが、こちらは部分的に色を変える方法です。
  3. 透過GIFを作る
    背景に色や画像があるときには、素材に透過処理がされてないと馴染まない場合があります。
    そこで、透過処理を使って、どんな背景にもマッチするようにします。
    (あ…どんな背景にも…っていうのは語弊があるかも。。)

バナー編
  1. とりあえずバナーを作る
    サイトを作るとやはりバナーを自作してみたくなるのでは?
    色々なサイトを見てみるとわかると思いますが…バナーは一定の大きさになっています。
    小さい枠の中に色々と詰め込むのって…意外と難しいのです。。
  2. 文字を工夫する
    「ウェブアートデザイナー」を使って文字を小さくすると滲んで読みにくくなります。
    ここではクッキリ見える文字にする方法を2つご紹介します。

動くバナー編
  1. 動くバナーを作る
    ちょっと…これは「ウェブアートデザイナー」だけでは作れません。。
    同じ「ホームページビルダー」に付属しているソフト「ウェブアニメーター」も使います。
  2. 複数の画像ファイルを使う
    複数の画像ファイルを使った動くバナーを作ってみます。