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

サンプル

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

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

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

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

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

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

 ■ 浮き出しボタンの作成

さて、基本的な操作がわかったら..(え、解ってないって?)
それはさておき..(おくのかい!!(笑))

まずは、次ような簡単な浮き出しボタンの作成をしてみましょう。

◆浮き出したように見える立体的なボタンの作成
まず、新規キャンパスを用意し、新しいレイヤーを1つ作成します。
次に、 お好きな色を選択し塗りつぶし長方形でキャンパスに細長い長方形を描きます。

次に、「自動選択」を使用してその長方形を選択します。

そして、コマンドメニューから「フィルタ(T)」−「4: 特殊効果」−「4: 立体枠...」をクリックします。
すると、次のような画面が表示されます。

「枠の大きさ」は描画した長方形によりますが「4」〜「8」ぐらいが平均的ではないかと思います。
以前解説した{Ctrl]+[Z]で何度でもやり直すことが出来ますので、何度か試して最もよさそうな数字を設定してください。

実行結果は次のようになります。

 

◆立体ボタンの文字入れ
次は、作成されたボタンに文字入れを行いましょう。

まずは、「レイヤー」から「新規レイヤーの作成」をクリックして新しいレイヤーを作成します。

文字入れしたい文字列の文字色を「パレット」で選択した後、「描画ツールバー」の「文字列」をクリックします。

文字を入れたい位置の左上隅をボタン上でクリックしますと、次のような画面が表示されます。

フォント名やサイズ、その他の設定を指定して「文字列」欄に文字を入力し、「OK」ボタンを押します。
この時、「アンチエイリアス」にチェックマークをつけると滑らかな文字になりますが、縁が弱冠ぼけたようになります。
また、「アンチエイリアス」を外しますとくっきりはしますが、文字の縁にガタつきが見えるようになってしまいます。

今回は、アンチエイリアスを付けて作成してみました。

文字の表示位置が問題なければコマンドメニューの「イメージ(I)」−「トリミング(T)」を行って出来上がりです。

 

◆文字の表示位置がずれてる場合
文字の表示位置がずれてる場合は、さらにもう少し操作が必要になります。

入力した文字の表示位置を変更したい場合は、「描画ツールバー」の「移動」をクリックし、描画した文字列をドラッグして移動させます。

文字列の表示位置をずらせた場合、選択範囲も一緒にずれてしまいます。
そのままでは、うまくトリミングできませんので、選択範囲を正しく選択しなおさなければなりません。

選択位置をずらすのは、「描画ツールバー」の「選択範囲」をクリックして選択範囲をマウスでドラッグさせる方法もありますが、元の正しい位置に戻せない場合もあります。

そこで、次のような方法を取れば正しい選択範囲を指定することが出来ます。

 

◆正しい選択範囲の指定方法
まず、キーボードの[Ctrl]+[D]を押して、選択範囲を解除します。
コマンドメニューの「選択範囲(S)」−「選択範囲の解除(N)」をクリックしても同じことです。

次に、「レイヤー」から立体ボタンを描画した「レイヤー1」をクリックして選択します。

そして、「描画ツールバー」の「自動選択」をクリックして立体ボタンの外側の白い部分をクリックします。
キャンパス上は白い部分を選択したように見えますが、実際には画像が描かれていない透明部分を選択したことになります。

次に、コマンドメニューの「選択範囲(S)」−「選択範囲の反転(I)」をクリックしますと、正しい選択範囲が選択できます。

その後、コマンドメニューの「イメージ(I)」−「トリミング(T)」を行って出来上がりです。

※操作が慣れてくれば、新規レイヤーをいくつも作ってそれぞれのレイヤーに文字入力をし、表示・非表示を切替えながら文字列の違うボタンをいくつも一度に作成することが出来ます。
また、それらをすべて『
PictBear』形式として保存しておけば、いくつものボタンをひとつのファイルで管理することができるようになります。


 <用語の説明> 
トリミング 画像の必要な部分のみ残すために、不要な部分をカットすることを言う。

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


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