Web 2.0な星形バッジを5分で作る:すぐに使える画像テク
瀧上園枝(CYAN)
2008-01-25 08:00:00
エンジニアでもささっと画像を作ってしまえると便利ですよね? グラフィックのプロフェッショナルじゃなくても簡単に実行できる、お手軽テクニックを紹介します。
分岐点のカラーを変更するためのダイアログボックスが、さらに表示される。縦のカラーバーで色相を選び、左のカラー領域から好みの明度・彩度のカラーを選んでダイアログを閉じる。
Web 2.0な星形バッジを5分で作る:すぐに使える画像テク
瀧上園枝(CYAN)
«
»
-
開発チームにわざわざデザイナーを入れるまでもない案件では...
-
まずはPhotoshopを起動して...
-
指定したサイズで、新規ドキュメントが作成される
-
星形バッジの輪郭は、[多角形ツール]で描画する
-
星形を描くための設定の秘密は、[オプションバー]にある
-
ドキュメントウィンドウ内をドラッグすれば...
-
とりあえず形が描けたところで、次のステップは色の編集だ
-
これが[グラデーションエディタ]だ
-
分岐点のカラーを変更するためのダイアログボックスが...
-
グラデーションの左端の[カラー分岐点]が...
-
[レイヤースタイル]ダイアログに戻る
-
さらに...
-
設定内容が切り替わったら、[描画モード:通常]に変更する
-
[光彩のカラー]を選択するための[カラーピッカー]が表示され...
-
[レイヤースタイル]ダイアログに戻ったら...
-
黒い色だった星形の輪郭がグラデーションで塗りつぶされ...
-
[レイヤーパネル]を見てみると...
-
[ツールボックス]で[長方形選択ツール]アイコンをプレスして...
-
[ツールボックス]下部のカラーサンプルで[描画色と背景色を入...
-
[オプションバー]で[ぼかし:10px]と入力し...
-
ドキュメントウィンドウ上で...
-
[編集→塗りつぶし]メニューコマンドを実行する
-
選択範囲が白で塗りつぶされる
-
このままではハイライトが強すぎることは一目瞭然
-
[ツールボックス]で[グラデーションツール]を選び...
-
画面上を星形バッジに重なるように...
-
白い楕円形の不透明度が、右下〜左上方向へ変化するのだ
-
最後に...
-
星形バッジのグラデーションのベース色を[レイヤースタイル]で...
- ホワイトペーパー
