超初心者のホームページ作成 by atom
プルダウンメニュー左端 トップ はじめに/バナー 新着情報 HP作成 サンプル 関連サイト フリー素材 掲示板 その他 Google 余白 プルダウンメニュー右端
 《WEB素材の作成》
【メニュー】

サンプル

前置き
PictBearの入手
基本操作
画像の選択
画像の切り抜き
画像の保存
正確な画像の描画

浮き出しボタンの作成
影付きボタンの作成
ボタンの文字色変更
ボタンの表示色変更
ボタンの影の色変更
影つき文字の作成
縁取り文字の作成1
縁取り文字の作成2
縁取り文字に影を付ける
囲い枠のバナー作成
立体枠のバナー作成
切り抜きボタンの作成

円柱(円筒形)の作成
球体(ボール)の作成
円柱(円筒形)の影付け1
球体(ボール)の影付け1
円柱(円筒形)の影付け2
球体(ボール)の影付け2

クリスタルボールの作成
クリスタルボールの作成2

写真の型抜き
写真を浮き上がらせる
写真に影をつける
写真の縁をぼかす

※一度説明した内容は後になるほど簡略して解説されてる場合がありますので、出来る限り順番に読んでくださいね。

 ■ クリスタルボールの作成2

前回、「クリスタルボール」と言いながらあまりクリスタルっぽくなかったですかね?(苦笑

では、今回、もっと本格的なクリスタルボールを作成してみましょう。
ただし、そのためにはPictBearの標準機能だけでは無理なので、プラグインを追加します。
他にもいろいろ方法はありますが、できるだけ少ないステップでそれなりに見える方法を解説します。

今回使用するプラグインはフィルタプラグインの「模様フィルタ」−「チェッカー」、「変形」−「球」、「カラーフィルタ」−「単色効果」の3つです。
フィルタプラグインは、「BearFactoryのホームページ」で入手できます。

今回の出来上がりは次のような感じです。
クリスタルボール

◆立体的に見える球体(ボール)の作成
1.まず、新しいキャンバスを「幅 300px、高さ 300px」で作成したら「レイヤー」「新規レイヤー」をクリックします。

2.パレットから「#FFAA25」の色を選択し、「描画ツールバー」「塗りつぶし長方形」をクリックし、キャンパスの左半分を塗りつぶします。
キャンバス

3.そのまま「フィルタ(T)」−「模様」−「チェッカー...」をクリックし、「横サイズ(H)」、「縦サイズ(V)」ともに「12」をセットし、「OK」ボタンをクリックします。
チェッカー

4.キャンバスは次のようになります。
キャンバス

5.再び、「新規レイヤー」を作成し、パレットから「黒」を選択し、「描画ツールバー」「塗りつぶし楕円」をクリックした後、キャンパスのやや上方部に正円を描画します。

6.次に、「レイヤー」の今描画した「レイヤー2」を非表示にし、コマンドメニューの「選択範囲(S)」−「不透明部分の選択(T)」をクリックし、続けてチッカー背景の「レイヤー1」を選択後、「フィルタ(F)」−「変形」−「球」をクリックします。
キャンバス

7.さらに、「新規レイヤー」を1つ作成したら、パレットから「#FE00FE」を選択し、コマンドメニューの「編集(E)」「塗りつぶし(F)」をクリックします。
※この時キーボードの「BackSpace」キーを使っても可能です。
キャンバス

8.次に、そのまま「新規レイヤー」を1つ作成し、「描画ツールバー」「グラデーション」をクリックします。

9.そして、「オプション」「グラデーション」の設定値を次のように変更します。

10.次に、パレットから「白」を選択したら、次の図のような位置を参考にマウスでドラッグします。
キャンバス

キャンバスは次のようになります。
キャンバス

11.次に、今描画した「レイヤー4」を非表示にし、コマンドメニューの「選択範囲(S)」−「不透明部分の選択(T)」をクリックしたら、選択範囲を1ドット(1ピクセル)上に移動します。(見た目は変わらないように見えます。)
※PictBearのバージョンが「RC4」以上ならキーボードのカーソルキー「↑」を1回押すだけです。
キャンバス

12.その後「レイヤー3」を選択し、コマンドメニューの「編集(E)」−「削除(D)」を1回行った後、このレイヤーの「不透明度」「80%」ぐらいまで下げます。
「編集(E)」−「削除(D)」はキーボードの「Delete」キーを使っても可能です。
キャンバス

13.次に「選択範囲(S)」−「選択範囲の解除(N)」後、「新規レイヤー」を1つ作成し、パレットから「白」を選択した後、「描画ツールバー」「グラデーション」をクリックして、次の図のような位置を参考にマウスでドラッグします。
キャンバス

キャンバスは次のようになります。
キャンバス

さらに影も付けておきましょう。

◆クリスタルボールの影付け

14.新しく「新規レイヤー」を1つ作成し、パレットから「黒」を選択した後、「描画ツールバー」「塗りつぶし楕円」で次のような細長い楕円を描きます。
キャンバス

15.今作成したこのレイヤーを非表示にしたら、コマンドメニューの「選択範囲(S)」−「不透明部分の選択(T)」をクリックし、続けてコマンドメニューの「選択範囲(S)」−「境界のぼかし(B)...」をクリックし、ぼかしの大きさに「24」を指定し、「OK」ボタンを押します。
作成するボールの大きさに応じてぼかしの数値は変更してください。
キャンバス

16.そのまま、新しく「新規レイヤー」を1つ作成した後、パレットから「#FF25FF」を選択し、コマンドメニューの「編集(E)」「塗りつぶし(F)」をクリックします。
※この時キーボードの「BackSpace」キーを使っても可能です。
キャンバス

17.そのまま、「レイヤー」「背面に移動」をゆっくり4回クリックして、「レイヤー3」の下に移動したら、「不透明度」「75%」ぐらいまで下げ、コマンドメニューから「選択範囲(S)」−「選択範囲の解除(N)」をクリックすればクリスタルボールは完成です。
キャンバス

このクリスタルボールの色を変更する場合は、「フィルタ(F)」−「カラー」−「単色効果...」を使用して色変更をします。

クリスタルボール クリスタルボール
クリスタルボール クリスタルボール

 


 <用語の説明> 
プラグイン 「HTMLサンプル」−「サウンドについて(音声、音楽、BGM、MIDI、wav)」を参照してください。
ドラッグ マウスの左ボタンを押したまま、マウスを動かすことを言います。

■ 有料デザインテンプレート


Home  ↑ページトップ
page update:2007/11/12
Copyright (c) 2000-2004, All Rights Reserved & Produced by atom
技術提供:株式会社ピーオーピー
SEO対策 & ツール