Web 2.0な星形バッジを5分で作る:すぐに使える画像テク
瀧上園枝(CYAN)
2008-01-25 08:00:00
エンジニアでもささっと画像を作ってしまえると便利ですよね? グラフィックのプロフェッショナルじゃなくても簡単に実行できる、お手軽テクニックを紹介します。
白い楕円形の不透明度が、右下〜左上方向へ変化するのだ。これで曲面に反射するイメージのハイライトになった。
Web 2.0な星形バッジを5分で作る:すぐに使える画像テク
瀧上園枝(CYAN)
«
»
-
開発チームにわざわざデザイナーを入れるまでもない案件では...
-
まずはPhotoshopを起動して...
-
指定したサイズで、新規ドキュメントが作成される
-
星形バッジの輪郭は、[多角形ツール]で描画する
-
星形を描くための設定の秘密は、[オプションバー]にある
-
ドキュメントウィンドウ内をドラッグすれば...
-
とりあえず形が描けたところで、次のステップは色の編集だ
-
これが[グラデーションエディタ]だ
-
分岐点のカラーを変更するためのダイアログボックスが...
-
グラデーションの左端の[カラー分岐点]が...
-
[レイヤースタイル]ダイアログに戻る
-
さらに...
-
設定内容が切り替わったら、[描画モード:通常]に変更する
-
[光彩のカラー]を選択するための[カラーピッカー]が表示され...
-
[レイヤースタイル]ダイアログに戻ったら...
-
黒い色だった星形の輪郭がグラデーションで塗りつぶされ...
-
[レイヤーパネル]を見てみると...
-
[ツールボックス]で[長方形選択ツール]アイコンをプレスして...
-
[ツールボックス]下部のカラーサンプルで[描画色と背景色を入...
-
[オプションバー]で[ぼかし:10px]と入力し...
-
ドキュメントウィンドウ上で...
-
[編集→塗りつぶし]メニューコマンドを実行する
-
選択範囲が白で塗りつぶされる
-
このままではハイライトが強すぎることは一目瞭然
-
[ツールボックス]で[グラデーションツール]を選び...
-
画面上を星形バッジに重なるように...
-
白い楕円形の不透明度が、右下〜左上方向へ変化するのだ
-
最後に...
-
星形バッジのグラデーションのベース色を[レイヤースタイル]で...
folllow builer on
twitter
- 新着記事
- 特集
- ブログ
- 企画特集
-
2020年代を勝ち抜くインフラ
-
特集:ポスト2020時代のCX再考
-
ウルトラ帳票文化を乗り越える!
-
意識してますか?PCの「信頼性」
-
働き方、生産性を根底から底上げ!
-
RPAがニガテなExcelをどう使う
-
データ活用を加速するエコシステム
-
講演レポ:ポスト2020時代の基盤
-
レガシーなインフラ設計を見直す
-
Why ワークプレース?
-
AI活用が激変する新たなインフラ
-
クラウドバックアップお悩み相談室
-
「データ」こそDXの主役
-
ITシステムは永久のβ版思考で
-
ビジネスの大きな転換点で勝者に!
-
働き方改革にモニターが有効なワケ
-
下した決断は「ハイブリッドへ」
-
ビジネス成功の砦はここにあり!
-
明治創業の鉄道企業がAWSに挑戦
-
隗より始めよ
-
どこまで可能?企業を究極の自動化
-
サブスクモデルのSaaSで業務改善
-
変化への対応はリアルタイム経営で
-
特集:ビジネスを止めるな!
-
分析されたデータを活用できるか?
-
働き方改革は身近な「改善」から
-
攻めと守りのクラウド活用とは!?