前回、白背景で、単色でうつりこみ楽勝ー＾＾

というイメージで↑の感じでした。
次は、色と下地の色について考えます。



こんな中途半端な色で、中途半端色の下地だったら・・・？

ウェブアートデザイナーの、[色に追加]機能を使って、色を追加してからグラデーションを作りましょう。
下地の色も同じです。


グラデーションを、文字の色から下地の色に変化させないといけません。
片方だけでは↑のような失敗になります。

まったく同じ色にするには、色に追加機能を使って色を追加して置くといいでしょう♪
これは、色を扱うどの機能からでもこの画面がだせて追加しておけます。




グラデーションのところで、登録して置いた色を選べばいいのです。

中途半端な色の見本にしようと、変な色を選んで、見本変すぎですが；


お好みで、地面を描きましょう。
境界線のない四角の平面を作ります。
地面にしたい色を選びます。見本だと真っ黒です。

真っ黒だと、下が見えないので、透明度を上げていきます。
見本だと80パーセントです。

文字の上下の真ん中から下に重ねておきます。

切り抜けば完成ヽ(゜▽゜*)乂(*゜▽゜)ノ バンザーイ♪


こんな感じ↑ですね。
これは、
・黒い文字
・反転させた黒から白へと変化するグラデーションの文字
・真っ白の楕円を透明度80パーセントにして重ねたもの
・真っ黒の四角を透明度80パーセントで重ねたもの

の4つでできています。

楕円の重ね方は、透明感のあるバナーのところでも書いたので省略します。
映り込みが薄いほうがよければ、下の文字の透明度を上げると簡単です。
結構適当でも綺麗にできるよ！
おためしあれ(^▽^)ノ

ロゴ作成などで、映り込む（写り込む？）文字がほしい場合。
私のウェブアートデザイナーにはそれらしいロゴ見本がありませんでした。
一時期ほど流行っていない気もしますが、ぴかぴかの床に反射しているのは、いいものです！

イメージ的には、これ！



まず、一番簡単な白背景で単色の場合
もう、細かい説明は省きますが、ロゴにしたい文字を打ちます。
それをコピーして貼り付けで2個に増やします。
2個のうち1個を選択して、上下を回転させます。
これを適当にしてしまうと怪しくなるので、画像の上で右クリックして↓の手順でします。



上下反転させた文字を選択し、右クリックをします。



ロゴの編集画面から、色のところを選び、グラデーションを選びます。
ちょうどのグラデーションなんてないので、その他を押してさくさくっと作ります。
ひと手間かけるとオリジナル！めんどくさいけどがんば！



グラデーションを作ります。
元の文字の色と、背景の色に合わせます。
この場合、元の文字が真っ黒で、背景が真っ白なんで、こうなりました。
水平のうつり込みのイメージなので、270度にします。
おっけー！

左右と上下を移動させあわせます。
字の下は、少し隙間があってもいいし、ピタッと重なっていてもいいと思います。
小文字のYとか、長くて途中までしかいらないときは、切り抜きしましょう♪
上下同じだけ切ればおっけー！



明朝体で日本語なのでちょっと不思議ちゃんですが、こんな感じ。
フォントのぎざぎざが気になる場合、大きく作って縮小するといいかも

単色白背景の場合は、これで楽勝です。

ちょっとつづく。

映るか写るか悩んだけど、スルーしましょう＾＾

ウェブアートデザイナーに元から入っているバナーでは、こういうタイプのものが無かったので、作ってみました。
簡単に！を目標にしたので、凝ってません。
もうちょっと自由にぼかしなど使いたいとおもう部分もありますが、こんな感じならコツさえわかれば簡単だとおもうので、遊んで見てください♪
mifファイルもご用意しました。 (≧ω≦ )
オワタのカオモジは、友達がとても好きで何時もメルで送ってくるので（しかも文字化けしてくる・・・）入れてみました。どうでもいいですね＾＾




作り方は、四角形（枠と塗りつぶし）などを使い、枠線つきのベースを描きます。
次に、枠線を細め（1pixel）にして、塗りつぶしをグラデーションにします。
同色系の色で明るい→暗い　あるいは、暗い→明るいで、作るとうまくヒカリマス。
そこに、文字を重ねます。
次に、反射して白く見えている部分を作ります。
枠線なしのベタな画像を作ります。四角でも、まるでもとりあえず真っ白にします。
画像の上で右クリックして、透明度を80ぐらいにします。
一番前面に（バナーや文字の上にかかるように）おきます。
必要な部分だけ切り抜き、いらない白い部分を透明色で塗りつぶすなどして完成です。


白い透明な部分をそのまま重ねると枠線も明るくなってしまいます。 その時はベースにしたバナーをコピーして、枠線だけを表示するように変えて、最前面に重ねておきます。

↑文字すら入れていないですが、グローバルナビなどもこの方法でテカテカつくれますｗ
重なっている画像に、透明度を高くしたテクスチャー画像を重ねています。（文字が濃くてわかりづらいですが）



角の丸の角度が変えれたらいいんですが・・・。
図形として大きく作って画像として縮小すれば好みの角度になるかもですが；
めんどくｓｌｋじゃｋぁｊｋｌ

グリッドを表示して、グリッドにポイントを合わし、図形を描けば結構イケル！


なんとなく透明ぽく光ってるバナーのmifファイル(zip）をdownload




　　　　　　

今回説明が手抜きですいません；

デスクトップの壁紙をデザインする！

手順を先に説明すると、

• 自分のデスクトップの解像度（面積と比率みたいなもの）を調べる
• ウェブアート デザイナーを開き、調べた解像度でキャンバスを作る
• 四角形の塗りつぶしでキャンバスの背景を作る
• お気に入りの画像を並べたり、文字を入れる
• キャンバスを.mif以外の形式で保存する
• 作った画像を、デスクトップの壁紙に設定する

めっちゃ簡単ですｗ

重たいですが、簡単と書くからにはネチッコイ説明が必要とおもいまして、画像にしました。 しかも、複数枚貼り付けるのが面倒なので1枚です。


出来ましたでしょうか！？
ウェブアートデザイナーを意地でも使うというコンセプトにぴったりの一品ですね！？ｗ

水玉の素材を貼ったので、今回はストライプです。

写真に効果をつける。（ストライプ）

↑こんなかんじとか！

手順（みずたまと全く一緒）

• 下にある画像をクリックして出てきた画像を保存します。
• ウェブアート デザイナーを開き、効果をかけたい写真をキャンバスに配置します。
• テンプレートギャラリーで、保存したフォルダを表示させます。
• ダウンロードした画像を選び、画像の上に呼び出します。
• 透過のpngというただの画像ですので、透明度など調整して遊びます。
  （ウェブアートデザイナーは透明な部分を含んだ画像の拡大縮小回転には向いていないので、そのままのほうが綺麗です！たぶん）
• 好きな位置で切り抜いたら出来上がりです

同じものをずらして重ねたり、透明度を変えたりすると変わった模様になってたのしいです！。



クリックして出てきた画像を保存してください。白だと枠しか見えていませんが、透過PNGになっていて、模様があります。

今回はストライプです。イラレで拡縮しているので、アンチェイリアスがかかってて、少しぼけて見えます。
幅の広い順↓
　　　

　　　

　　　

　　　


どうしてこんなに意地になって使うんでしょうね・・・。　このソフトがいまだに好きなのが悔しいぐらいです(ﾉω｀)ｗ

どういう時に使うかというと、ロールオーバーに使う部分（半透明から透明になるイメージ）や、写真がメインでなく、文章の穴埋めの時とか（にぎやかし？ｗ）。 あとは、質感を変えたい時などがおすすめです。
素材を作るのにも便利かもしれません。
このソフトで素材を作るのは切抜きが難しいけど使い方が直感的なので初心者さんにはおすすめですね♪

写真に効果をつける。

手順

• 下にある画像をクリックして出てきた画像を保存します。
• ウェブアート デザイナーを開き、効果をかけたい写真をキャンバスに配置します。
• テンプレートギャラリーで、保存したフォルダを表示させます。
• ダウンロードした画像を選び、画像の上に呼び出します。
• 透過のpngというただの画像ですので、透明度など調整して遊びます。
  （ウェブアートデザイナーは透明な部分を含んだ画像の拡大縮小回転には向いていないので、そのままのほうが綺麗です！たぶん）
• 好きな位置で切り抜いたら出来上がりです

同じものをずらして重ねたり、透明度を変えたりすると変わった模様になってたのしいです！。


説明してもわかりづらいとおもうけど、楽しいと思う！
ウェブアートデザイナー意地でも使いましょう！(´∀｀)

クリックして出てきた画像を保存してください。白だと枠しか見えていませんが、透過PNGになっていて、模様があります。
みずたま大
　　　

みずたま中
　　　

みずたま小
　　　

ストライプも作ったのでまた貼ります！とりあえず水玉でした＾＾

追記です。

みずたま極小（ここまでいくと潰れ気味かも？）
　　　

ストライプまで貼ると長く伸びちゃうので別の投稿にしますｗ

フォトフレームを追加する♪

こんな感じの単純なものですが、気に入ったら使ってみてください^^

• Solid4.zipをここからダウンロードします。
• 解凍します。4枚の.tifという画像が出てきます。
• 4枚の画像を指定のフォルダにいれます。
  C:\Program Files\IBM Homepage Builder V12\gallery\Frame\Solid4
  普通なら、このへんです。インストールされているフォルダのgalleryのフォルダの中の、フレームのフォルダの中の、4つのフォルダの中のどれかに入れます。
  （ここではSolid4)
• 準備OKです。ウェブアートデザイナーを開きます。
• 写真をセレクトした状態、またはしていない状態で、フォトフレームの作成をクリックします。
  
• 先ほど入れた4枚の画像が最後のほうに表示されますので、お好みに色など変えてもらえば終了です。
• 縦位置の写真は、はじめに横位置でフレームを出した後、90度回転させると模様の比率がマシです

文字化けしちゃいそうなので、tif画像をいれるフォルダの位置を貼ります！


私のPCでは全く不具合など出ていませんが、マニュアルにある使い方ではないので、保障は出来かねます＞＜；
どきどーーーきで試してくださいｗ
まあ、画像増やすだけなので、平気だとおもいますが。
はじめから入っているframeの数をもっといっぱいにすればいいのにな！
単純な模様が増えたら2枚重ねたりしてまた楽しめるのにｗ
10年前と同じっていう部分がさすがウェブアートデザイナーなのですね・・・

悔しいので意地でも使う！(;_;)

写真に効果を加えてみましょう♪

わかりやすく大きめに作ってありますが、ただの花の写真を加工しています。不思議な立体感が出ているとおもいます。

元画像はこちらです。

綺麗だけれど、色が鮮明なので、素材としては扱い辛い物となります。
ウェブアートデザイナーについている元々の効果だけではなく、少し工夫して作ります。

• 画像が大きすぎる場合は縮小します。
• 画像の大きさが決まったら、複製します。
  複製された画像（上に重なっているオブジェクト）を選択し、効果パレットから、ぼかし・ズーム・セピアを適用します。
• オブジェクトの編集を開き、透明度を20?40％程度にします。
• 元の画像（背面に配置されているオブジェクト）を選択し、効果パレットからシャープをかけます。
• この2枚を重ね合わせます。
• 使いたい部分をトリミングします。
• 保存します。

画像1枚に効果を加えるのには限界があるので、2枚使おうという感じです。また、この重ねる方法で部分的なぼかしなども可能です。
ぜひ挑戦して見てください^^

ツールの出し方などは、過去のサイトから移行中です。

上の説明を画像にしました。


ただのセピアでもなく、少し甘い雰囲気に仕上がります。
まあ、お好みの問題ですけどｗ

サイズを指定して画像を作る

ブログなどのタイトル画像（タイトルの背景になる画像）など、テンプレートにあわせたサイズで画像を作成したい時があります。
オブジェクト（素材）をベースにしてサイズをあわせることもできますが、画面を見ながらわかりやすく作業する方法があります。
キャンバスのサイズを指定して作成する機能を使います。

まず、作りたい画像のサイズを調べます。
ピクセル（pixel）での入力になります。
今ある画像を差し替えたい時は、元の画像のプロパティでサイズを見ることが出来ます。


ウェブアートデザイナーを開き、
ファイル→キャンバスの新規作成（サイズ指定）（S）
を選びます。


作成したいサイズを入力します。
入力ができたらOKを押します。


仕上がりのサイズで表示されているので、ここに画像やロゴなどを配置していきます。見えていない部分は作成する画像には保存されません。


完成！と思ったら1枚の画像にしてみましょう♪ｗ
ファイル（F）→名前を付けてキャンバスを保存（V）
を選択します。


ファイル名はご自由にお付けください。
ファイルの種類を選びます。
ブログなどのタイトル画像は、一般的にjpeg(jpg)かgif,pngでいいと思います。
選択できたら保存を押します。


ウェブアートファイル(mif)以外を選んだ場合、このダイアログが出ます。
はいを選択します。
（もう一度編集をする可能性がある場合は、別途ウェブアートファイルでも保存して置いてください。）
ここでははいを選んで続けます。

JPEGを選んだ場合

jpegを選んだ場合は、こちらの画面が表示されます。
画質はわかり辛いと思うので、画質の違うものを何枚か作って見比べるといいですｗ

OKを押せば完成です。

GIFを選んだ場合（PNGもほぼ同じです）

GIFは色数を減らすことによって軽くなります。
プロパティや背景色を選択しOKを押せば完成です。

ぜひ挑戦してみて下さい(≧ω≦)

でっかくて反射のナビゲーションバナー

単純な作りなので、downloadしていただくと一目瞭然だと思うので、
mifファイルとしてUPしました。
グラデーションの色を変更していただくと、色違いが簡単に出来ます。拡大縮小もできます。文字の変更ももちろん・・・ (≧ω≦ )
お好きにいじり倒してください♪
微妙でわかり辛いかもしれませんが、下が明るく、上が暗いグラデーションがベースになっています。
↓コレは見本でgifです。

↓コレは見本でjpgです。


このファイルは、ホームページビルダーのversion6の付属のウェブアートデザイナーで作成しているので、古いversion6以降ならでも開くと思います。version12で試すと開きました。

フォントはArial（アリアル、エーリアル）なので、
あなたのPCに入ってなければ、違う形の文字で出てくると思います。
(Windowsなら結構入っていると思う！）


オレンジ色と黒色のバナーのmifファイル(zip）をdownload