Permalink
mippe on aqua
  • vote
    90
    0 starsmippe | Shared With: Everyone - Jun 28 2008 | web design, illustrator, photoshop, aqua
    orange-A-go-go! | アイコン | TIPS | その3:アクアボタンの作り方

    「イラストレーターではどう描くの?」と言う質問が来ておりましたので、追加します。
    □そもそもイラレはこういう画像処理はあまり向いていないのでオススメしませんが、「どうしてもイラレで描きたい」という方のために。。。
    □作り方はこのファイルをダウンロードして 確認して下さい。AI10形式ですのでバージョン10以上でのみ確認可能です。再配布・改造・商用利用許可なく行っていただいてOKです。
    ▲このページのトップへ

    TOP | アイコン | TIPS | その3:アクアボタンの作り方

  • vote
    17
    0 starsmippe | Shared With: Everyone - Jun 28 2008 | web design, photoshop, aqua

    では、まず青色のアクア風アイコンを3Dソフトで作って行きましょう。

    色の付いているのは潰れた筒状の半分だけなので、半分に割って、色をつけてみました。普通の青の板です。
    (少しグラデーションがかかっていますが、光の加減です)

    次に、最も重要な照明を加えます。証明は真上から真っ白な蛍光板を当てているようなイメージです。

    黒から、青、白へのグラデーションがかかりました。
    ここで、よく見て頂きたいのは、上から光が当たっている為、半分にした筒の上の方は暗くなっているという事です。

    次に、割って使ってなかったもう半分の筒を透明にして合わせてみました。

    このように、潰れた筒状の物の手前が半透明になっていて、上から光を受けている状況がアクア風と言われる画像のイメージに近いと思いませんか?

    まだよく分からないかもしれませんが、後ろ半分が上から下へ明るくなるグラデーション、手前半分が上の真ん中あたりまで明るく、下に行くにつれて、薄れて行く白いグラデーションで出来ていますよね。

  • vote
    236
    0 starsmippe | Shared With: Everyone - Jun 28 2008 | web design, illustrator, aqua
    IllustratorでAqua風ボタンを作成する | RemovableType

    6.次に、Aquaボタンのキモである、ハイライトの部分を作成する。まず、さきほど出来上がったボタンの外形を選択し、ツールバーの「拡大・縮小ツール」ボタンをダブルクリックする。「拡大・縮小」ダイアログで、「縦横比を変更」ボックスに「横90%、縦42%」を入力し、「コピー」ボタンをクリックすると、外形が縮小された上で複製される。ハイライトは二つ作成するので、もう一度外形をクリックして選択し、先程と同様に「横86%、縦42%」のコピーを作成する。コピーできたら、図のように配置する。

  • vote
    6
    0 starsmippe | Shared With: Everyone - Jun 28 2008 | web design, photoshop, aqua
    実際にPhotoshopで作るアクア風アイコン :: Design Caption

    Quoted: 脳がSE向きのデザイナーの考えるデザイン情報ブログ

  • vote
    46
    0 starsmippe | Shared With: Everyone - Jun 28 2008 | web design, illustrator, aqua
    今更だけどAqua風デザイン分解 - tikeda::Diary

    今の所感じてるポイントとしては以下2つ
    面をはっきり出すこと
    お互いのグラデーションの終わりと始まりがはっきりしていることで面がはっきりして「パリ」っとした硬い質感ができます。これがお互いのグラデーションが溶け込み合いだすと別の質感へと変わっていってしまいます。
    上の光は明度のグラデーション・下の光は彩度のグラデーション
    トップからは白からその色へと流れグラデーションの光をあて、下から照らされている光は例えば青であれば近い色相でより明るい水色のような色。グリーンであれば黄緑や黄色で明るい色。なるべくその色は白が含まれない鮮やかな色がよいです。

1 - 5 of 5 Faves

Related Content from Around Faves

web design

VIEW ALL