17でうつり込む写真のところで、グラデーションを作るのがなんだか難しいと書きました。
透明から色へのグラデーションです。
写真の加工にはグラデーションが黒白2枚と、PNGで作った模様がいくつかあれば、幅が広がりんぐ！と思いました。

そしてphotoshopで作りました。

これってどうなの！？ですが、いいのです。
一回作ればずっと便利なんですから！！


以前もいろいろ書きましたが、オリジナルの画像や写真にかけるエフェクト系は、ショボイんです。

書き方わるいかな・・・。使いづらいものが多いんです。

ロールオーバーという技術は、今も健在で使われているものだと思いますが、 画像の上にポインターが重なると違う画像に変わるものです。
そういう時に写真を使う場合など、画像にちょこっとだけ変化をさせたい時などがあります。

単純なものほど使い勝手もいいと思います。

透明から黒、白へのグラデーションです。
縮小して表示されますので、クリックして出てきた画像をそのまま保存してください。
拡張子はpngです。
半透明が維持されたままウェブアートデザイナーで使用できます♪


　←見えないけどここに白いグラデが！！ とりあえず便利なので、写真とかのフォルダに一緒に入れておけばいいでしょう♪
前回書いた、うつりこみに見える加工などに使うと楽勝です！

そして、ちょっとした使い方の提案です。

今回、ついでに作ったのは格子の透過されているただの画像です。

白と黒があります。



←真っ白で見えないけどここ白の格子！！

こちらをダウンロードします。
加工したい写真をキャンバスに呼び出し、この画像を重ねます。
そのまま重ねたらただの格子ですので、格子の透明度を上げていきます。
1枚だと単純な模様なら2枚重ねたり、大きさを変えてみたり回転させてみたりします。
影をつけてみるのも面白いです。

また、強調したい場所など、消しゴムツールの筆を大きくして、模様を消します



一番上に貼り付けた画像と少しイメージが変わります。


消しゴムツールで、サイズのでかくてぼやけたのを選ぶと楽にできます。


↑消しかけです。こんな風に使うのもいいんじゃないかなーｗ
十分遊べるソフトだと思うんだ！


おためしあれ♪

自分の撮った写真をデスクトップの壁紙にしたりする時に、ちょっと工夫して映り込みとか彩度も下げられていいかもしれないと思いました！

今回古いPCでホームページビルダーバージョン6のウェブデザイナーで挑戦しました。

一番悩んだのは、透明からカラーへのグラデーションです。
透明から・・・というのが簡単に設定できない？？

探したけど見当たりませんでした。

意地でも作ります！！

ぼやけるペンとか、なんでもいいのですが、今回は真っ白な適当な白い四角を切り抜き、そのぼかしを使って透明からカラーへのグラデーションを作りました。


↑こんな感じで、上の青から透明のグラデーション部分を切り抜いて使うのです。
意地でも使う！というコンセプトそのものです。


白く切り抜いた画像を右クリックして、上に影を設定するだけです。

そして、影の部分だけ、背景の透明を維持したまま切り抜きをします。

そこからはロゴのところと同じで、
写真を好きな大きさにする。
コピーして、上下を反転させる
写真をピタッと丁寧に合わす
先ほど作ったグラデーションを最前面に移動させ、下半分に重ねる
必要なところだけ切り抜く。




ちょっと色を日中の色とかにしたら、なぜか夜ぽくなりましたが、こういう楽しみ方もあるってかんじで！

切り抜く見本は青ですが、実際は黒で作っています。
黒か白が一番目をだましやすい気がします♪
ちょこっと使うのに結構便利なソフトなのよ？古くてもｗ

■図形ツールを使って、アイコンを作ってみます。
単純な形になってしまうけど、表情など変化がつけやすく便利です。





適当に重ね合わせてくださいね。



複製する前に、2つのオブジェクトをグループ化すると作業がしやすいかもしれません。



切り抜いて、余白を取り除き保存してください。

この画像をmif保存したものをダウンロードしてみてみたい方は、
こちらをクリックしてください。　
拡張子mifは、ウエブアートデザイナーで開くことが出来ます。69キロです。
version6で作っています。他のversionでは試していません。
（何て不親切な・・・ｗｗ自己責任でお願い(人’д｀o)

ベースになる大きさを作ります。
グリッドを表示・グリッドに合わせるに設定してください。
四角形（塗りつぶしのみ）ツールを使い、自分の好みの大きさにしてください。
マスの数は縦横とも偶数で作ってください。
中心に点を取れるようにするためです。

それに、ペンツールや、ブラシツールで、水玉になる部分を描きます。



オブジェクトを選択した状態で、ペンツールやブラシツールを押すと、
イメージに変換しますか？と聞いてきますので「はい」を選びます。





オブジェクトの四隅と、真ん中に自分の好きな色、大きさ、透明度、形などで、
水玉部分を書きます。

グリッドが表示されていて見え辛いと思う時は、
グリッドの表示をOFFにしてください。
グリッドに合わせるはそのままにしておいてね。



こんな感じに出来上がりました。
色や大きさなど変えて作ってみてくださいね♪

■自分で作った壁紙などを利用して、少しでもほかにない雰囲気のlogoを作ります。



壁紙作成（市松）で作った、この壁紙をしつこく利用します。
（縮小した壁紙を使うと模様がわかりやすいかも知れません。）

まず、ロゴの作成ボタンを押し、Logo作成ウィザードを出します。



↑のような、簡単なものを作りたいと思います。



好きな文字列を入れ、フォントを選びます。
フォントはお使いのPCによってインストールしているものが違うと思いますので、気に入ったものがなければ、Freeのダウンロードサイトからいただいてくるか、買うことになります。

年賀状ソフトや、スキャナ、プリンターに付いているCDにはよくおまけで入っているので、確認してみるといいですよ♪

私が買った筆まめキッズ２(笑)には、たくさん入っていました。

次に、色で、テクスチャーを選び、その他を押し、壁紙を開きます。



後は、適当に好きな効果をかけ、
（上の場合は、縁取り・通常、効果・影です）保存してください。

■ウェブアート素材を活用する

Hello!というロゴがほしいなあ・・・。と思ったとします。
とっても簡単な方法があります。



ウェブアート素材の、ロゴをクリックして、
綴りは気にしないで、好きな効果のついたもの（色合いや、影など）を選びます。

それをドラッグして編集画面までグ???っと（参考上図）まで引っ張って、
手を離します。
出てきたオブジェクト（この場合SHOP）の上で右クリックします。




■ロゴの編集画面ダイアログが出てくるので、
shop!と入っている文字列を消し、hellow!と変更すれば、OKです。
（つづりが・・・・・・・・・orz　　okなの？ｗｗ）
大きさ等お好みで変えて（角の四角を引っ張りましょう）保存してくださいね。（；^ω^）

■ボタン作成ウィザードと、壁紙で小さなボタン（アイコン）を作ります。

ボタン作成ウィザードを開きます。



好きな形を選びます。
今回は比較的綺麗に出来る丸を選んでみました。
決まれば次へを押します。



種類でテクスチャーを選び、その他をクリックします。
壁紙を指定します。
ここでは、壁紙の作成（市松）で作った壁紙を使用してみました。

完了を押せばキャンバスにオブジェクトが表示されます。



好きな大きさに変更してください。

　今回は、縮小して、影をつけてみました。

キャンバスにオブジェクトが大きく表示されている状態で切り抜き、
イメージオブジェクトに変換します。
（切り抜いたら勝手になるよｗ）
それを縮小すれば、壁紙も縮小されるので、↓のようなものになります。
色調補正もしています。



保存してください。
影を使用した場合は、白背景向けになります。
オブジェクト保存をしておけば、背景色が変更になっても対応できます。

■付属されているボタンの見本を使用して、変更を加え作成します。



テンプレートギャラリーのウェブアート素材のボタンを選択し、
下に表示される画面から、適当なものをキャンバスにドラッグします。

キャンバスに表示されたオブジェクトのボタンオブジェクトを選択します。


オブジェクトの編集を選択し、形状や、色をお好みで変更します。



ボタンのオブジェクトを、
拡大縮小、回転、反転などを利用して
自分がイメージする形にします。



ボタンのオブジェクトを拡大縮小、回転、反転などを利用して
自分がイメージする形にします。
必要であれば、ロゴ部分も変更してください。

切り抜いて、余白を取り除き、WEB保存してください。

■バナーの文字入れをしてみます。

バナーの上にロゴを配置して、重なった部分を保存するのですが、
ロゴの効果によっては、切り抜いて保存するのが好ましい場合があります。



例として、壁紙（市松）→バーナーベースで作成したこのバナーに、
色調補正と、明るさコントラストをかけて

この色にしたものを使います。

←のような文字をのせてみます。

ファイルから貼り付けか、
テンプレートギャラリーから、バナーベースをキャンバスに出します。



ロゴの作成を押すか、
操作ツールバーの文字を押し、文字を入力します。
（文字を押して入力した後、オブジェクトの編集を選んでください。）

ロゴの編集ダイアログが開きます。

文字列を入力、フォントを選び、スタイルを選びます。
他もお好みで変更してください。



色を選びます。
その他を押せば、この画面上にない色も選べます。
他、グラデーションと、テクスチャーでも選べます。
（この見本の場合は、透明になるのでどの色でも同じです）



今回は、100％に設定し、透明にして、縁を目立たせました。
この場合では白抜きを選んでも同じ効果になります。



影は、同色系の濃いものがそれらしく見えると思います。
影の位置をずらしすぎると（数値を+-大きくすると）
バナーからはみ出てしまうかも知れませんが、
今回は切り抜くつもりですので気にしないで進めます。



出来上がったロゴをバナーの上で大きさなどを調整します。



画面表示を4倍にし、縁を綺麗にあわせて切り抜きます。
慎重に作業してください。

今回「重なり合ったオブジェクトを保存」を使わないのは、
影が広くバナーからはみ出しているからです。



こんな感じに出来ました。



影で、少しバナーの凹凸が目立たなくなったので、もう一度ボタン効果をかけました。

拡大表示して、バナーにあわせて切り抜けば、
ロゴがロゴの効果等によって、バナーより大きい場合でも、
縁に意味のないスペースや白のこりを作らないで完成させることが出来ます。

Web保存して完成です^^

■自分で作成した壁紙を使って、バナーの土台を作ります。

壁紙の作成（市松）で作った、この壁紙を使って、バナーを作ります。



こんな簡単なバナーを作ってみます。


まず、キャンバスの背景に、壁紙を敷き詰めます。



編集のキャンバスの設定でテクスチャーを選び、
その他から、背景に出したい壁紙を選び、開くを押します。



キャンバスの背景が選んだ壁紙になったら、
好きな大きさ（バナーにしたい大きさ）に切り抜きます。
あるいは、大きく切り取って、縮小したり、工夫してください。

必ず、キャンバスを含むにして、切り取ってください。
これを選んでいないと、ただの透明のオブジェクトになってしまいますｗ



そのままでは作業するのにみえにくいので、背景色を白に戻しておきます。
編集のキャンバスの設定で変更してもいいですし、
カラーパレットを出し、背景色を選び、選択している色を適用してもOKです。



そして、ボタン効果で、立体的にします。

コツは、一度に深い凹凸効果をつけないで、
影の濃さを薄くして、少しずつ何度も効果をかけます。
1回ごとに凹凸効果の目盛りをずらせてください。




こういうバナーが出来ました。
この方法なら、好きな壁紙でいつでもシンプルなバナーが作れます。

壁紙も自分で作ったら、オリジナルです♪

バリエーションのヒント☆　


この壁紙を効果パレットでセピア色にした

この壁紙で作ったバナーです。

かなり大きく切り抜いておいて、縮小しました。

こんな風に色々試してみてください＾＾

キャンバスの背景として作成すると、
模様を見ながら切り抜けるのがいいのですが、
図形ツールの面オブジェクトを作成し、
テクスチャーのその他から壁紙を選んで出す方法もあります。
参考はこちら 。どちら？→バナーの作成（サイズ指定）へ続く。
移行中･･･。