img  

WEB素材&デザイン

RDF RSS XML
 
NAVI: トップ > 無料でWEB素材を作成する(PictBear編) > 立体枠のバナー作成

立体枠のバナー作成

次は、立体枠のバナー作成です。
と言っても、込み入ったものは説明も操作も難しくなるから割と単純なものを作ってみましょう。

今回は、次のような素材を作成します。

画像

立体枠の作成

まずは、「レイヤー」の「新規レイヤー」をクリックして新しいレイヤーを作成したら、パレットから「黒」を選び、「描画ツールバー」の「文字列」をクリックします。
画像

次に、キャンパス上で文字を入れたい位置の左上隅をボタン上でクリックして、フォント名やサイズ、その他の設定を指定して「文字列」欄に文字を入力し、「OK」ボタンを押します。
この時、サイズは少し小さめがいいでしょう。
画像

次に、新規レイヤーをさらにもう1つ作成した後、「描画ツールバー」の「選択範囲」をクリックし、文字を大きく囲むように範囲選択します。
この境界線の内側に立体枠が作成されますのでかなりの余裕を持って範囲選択してください。
画像

そして、パレットから濃い灰色を選んだ後、コマンドメニューから「編集(E)」−「塗りつぶし(F)」をクリックします。
※この時、「描画ツールバー」の「塗りつぶし」を使用して塗りつぶしても問題ありません。
画像

そのままコマンドメニューから「フィルタ(T)」−「4: 特殊効果」−「4: 立体枠...」をクリックし、「枠の大きさ」を指定して「OK」ボタンを押します。
今回「枠の大きさ」は「6」を指定しました。
画像

次に、コマンドメニューの「選択範囲(S)」−「選択範囲の変更(M)」−「縮小(R)」をクリックし、縮小する大きさに先ほどの半分「3」を指定し、「OK」ボタンを押します。
画像

そして、パレットから濃い灰色を選んだ後、コマンドメニューから「編集(E)」−「塗りつぶし(F)」をクリックします。
※この時、「描画ツールバー」の「塗りつぶし」を使用して塗りつぶしても問題ありません。
画面上は何も変わりません。
画像

次に、コマンドメニューから「フィルタ(T)」−「4: 特殊効果」−「4: 立体枠...」を再度クリックし、「凹ませる」にチェックマークを付けたら「枠の大きさ」を指定して「OK」ボタンを押します。
今回「枠の大きさ」は「6」を指定しました。
画像

枠の設定が問題ないようなら、「パレット」の「下のレイヤーと結合」をクリックして外側の枠と内側の枠をひとつにします。
画像

そのままコマンドメニューの「選択範囲(S)」−「色指定(C)...」をクリックし、 「許容範囲」を「1」にして、「OK」ボタンを押し、そのままキーボードの「Delete」キーを押して完成です。
※この時、コマンドメニューの「編集(E)」−「削除(D)」をクリックしても同じです。
画像

まずはこのままの状態を『PictBear』形式で保存しておきましょう。

素材の文字列に色を付ける

素材に色を付ける場合は、枠の色と文字列の色を別にすることができます。

まず、「レイヤー」で「レイヤー1」をクリックします。
画像

次に、コマンドメニューの「選択範囲(S)」−「不透明部分の選択(T)」をクリックし、新規レイヤーを新しく1つ作成した後、塗りつぶしたい色をパレットから選択後、 コマンドメニューの「編集(E)」−「塗りつぶし(F)」をクリックします。
※この時、「描画ツールバー」の「塗りつぶし」を使用して塗りつぶしても問題ありません。

その後、キーボードから[Ctrl]+[D]を押しますと、画面表示は次のようになります。
画像

「レイヤー」から先ほど作成した「レイヤー3」をダブルクリックします。
画像

「レイヤー3」の「モード」を「スクリーン」に変更して「OK」ボタンを押します。
画像

素材の立体枠に色を付ける

今度は、枠にの色を付けてみましょう。

まず、「レイヤー」で「レイヤー2」をクリックします。
画像

次に、コマンドメニューの「選択範囲(S)」−「不透明部分の選択(T)」をクリックし、新規レイヤーを新しく1つ作成した後、塗りつぶしたい色をパレットから選択後、 コマンドメニューの「編集(E)」−「塗りつぶし(F)」をクリックします。
※この時、「描画ツールバー」の「塗りつぶし」を使用して塗りつぶしても問題ありません。

その後、キーボードから[Ctrl]+[D]を押しますと、画面表示は次のようになります。
画像

「レイヤー」から先ほど作成した「レイヤー4」をダブルクリックします。
画像

「レイヤー3」の「モード」を「スクリーン」に変更して「OK」ボタンを押します。
画像

Copyright (c) 2000-2011, all Rights Reserved atompro.net
update:2019/01/09