FC2ブログ
ただ今テンプレ調整中

--
--.--.--

スポンサーサイト


上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


to Top▲
23
02.2008.Sat

Web2.0的なバッジをPhotoshopで作ってみた


iPodTools Logo
Web2.0に思いっきり影響されたロゴ↑を作ってみたわけですが。
そのときについでに作ったバッジ↓が応用効きそうだったからメモ。
Web2.0的なバッジをPhotoshopで作ってみた

今のテンプレにこのロゴは明らかに合わないな。。。

作り方は長くなるからつづき。


とりあえず300×300px 背景:透明 で新規作成。
(こんなでかいバッジはあまり実用的ではない。)
Web2.0的なバッジをPhotoshopで作ってみた


ペンツール>カスタムシェイプツール>バナーと賞に入っている
「記章」を選択しておく。
Web2.0的なバッジをPhotoshopで作ってみた


それをキャンバス一杯に広げる。
Web2.0的なバッジをPhotoshopで作ってみた


アンカーポイントの削除で、山を一つ飛びに間引いていく。
(文章では説明しづらいので画像参照。)
Web2.0的なバッジをPhotoshopで作ってみた

Web2.0的なバッジをPhotoshopで作ってみた


全部出来たらこんな感じ↓
Web2.0的なバッジをPhotoshopで作ってみた


パス選択ツールで全てのアンカーポイント選択して
コピー(Ctrl+C)→ペースト(Ctrl+V)
そのまま右クリックで「パスの自由変形」
Web2.0的なバッジをPhotoshopで作ってみた


ワークスペース上部の変形値の(W)に-100%を直接入力すると
勝手に左右反転される。Enter押して変形確定。
Web2.0的なバッジをPhotoshopで作ってみた


パス選択ツールで全部選択して、右クリック→「カスタムシェイプの定義」で
カスタムシェイプに登録しとくと後々色んな大きさで使えて便利。

そのままバッジ作成続行。
パス選択ツールのまま、右クリック→「パスを塗りつぶし」
取り合えず「白」で塗りつぶしてみた。
Web2.0的なバッジをPhotoshopで作ってみた


塗りつぶしたレイヤーを選択して、レイヤー効果を適用。
Web2.0的なバッジをPhotoshopで作ってみた

Web2.0的なバッジをPhotoshopで作ってみた

Web2.0的なバッジをPhotoshopで作ってみた

Web2.0的なバッジをPhotoshopで作ってみた


上の四つを全部適用するとこんな感じ。
色はカラーオーバーレイ、濃さはグラデーションオーバレイの透明度で調整。
Web2.0的なバッジをPhotoshopで作ってみた


仕上げに黒の罫線をソフトライトとかで被せてやると↓
Web2.0的なバッジをPhotoshopで作ってみた


これといって新しいことはやってないけど
ネタに困ってやったなんて言えない('A`)
スポンサーサイト

to Top▲
Next>>アクセス解析を眺めて。
Top >>iPodTools
Back>>抽出スクリプトもうできた('A`)
comment


Name

URL

Comment

Pass

Lock
非公開コメント

submit

trackback

trackback url
Profile

らみえる

Author:らみえる
webデザインやったり
プログラム組んだり
色んな事に広く浅く
首突っ込んで中途半端な
ダメな奴です。




FC2ブログへようこそ!


Archive

Category


上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。