タグ

gradationに関するsigのブックマーク (9)

  • Gradient Magic

    A Free Gallery of Fantastic and Unique CSS Gradients.

    Gradient Magic
  • クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld

    近年見かける機会が多くなった、クールなグラデーションカラーを知りたいときに便利なサイトのまとめです。 いずれもあらかじめグラデーションカラーの一覧が用意されているので、それらから選んでカラーコードやCSSで実装するためのコードを確認することができ、さらにサイトによってはそれを自分好みに調整してからコード出力したり、デザインで使える素材でダウンロードできるようにもなっています。 uiGradients ページ左右に配置されている矢印でカラーを切り替えていく他、もっと一覧化された状態で見たい場合は左上にある「Show all gradients」から確認でき、キーカラーを選んでフィルター表示にすることもできます。 カラーコードは画面中央上部に記載、その他のオプションについては画面右上にそれぞれ配置されており、角度変更(クリックの度に角度が変わります)・CSSコードの出力・JPG形式でのダウンロ

    クールなグラデーションのカラーコードやCSSコードを確認できるサイトまとめ - NxWorld
  • Sunnychatの色について色々 - not simple

    Sunnychatというアプリを2016/8/1にリリースしました。 iPhone Android このサービスにはデザイナーとして関わっていますので、少し色の話をしたいと思います。 Sunnychatは冒頭の画像のような色相が多めな微妙なグラデーションをキービジュアルとしているのですが、この配色に至るまで思考の可視化をするという遊びです。3軸ほどあって、 他のSNSとの差別化を考える Sunnyという語感から考える 多色相のグラデーションきてるんじゃ無いか説 です。 他のSNSとの差別化を考える 僕はモノの色を決める時には、まず使わない色を決めてしまうことが多いのですが、その時のそれです。(AmigoというのはSunnychatの前身にあたるサービスです) Facebook・Twitterで使われている青系、LINEApple純正のメッセージアプリのような緑系、また特定の性別を感じさせ

    Sunnychatの色について色々 - not simple
  • Photoshopのグラデーションマップの使い方

    今回はグラデーションマップをご紹介します。 グラデーションマップは、グラデーションを使って画像の色味を調整し、通常のグラデーションと違った使い方をします。 画像の明暗に合わせてグラデーションが適用されます。特に写真の加工に便利ですが、パターンなどの色変更などにも使える便利な機能です。 目次 1. グラデーションマップとは 2. グラデーションマップの仕組み 3. グラデーションマップの使い方 4. 色々なカラーのグラデーションマップの適用例 グラデーションマップとは画像の明暗を、設定したグラデーションの色に置き換える機能です。グラデーションマップのマップは、マッピングの略で、「割り当て」や「対応づける」という意味になります。 例として、雲模様にグラデーションマップを適用してみます。 [描画色:黒]・[背景色:白]の雲模様に、[青~白]のグラデーションマップを適用しました。 雲模様がつぶれる

    Photoshopのグラデーションマップの使い方
  • Illustrator_FAQandTips

    円筒、四角柱等、立体図形は来3Dソフトで作成します。 光源、パース等が反映されたリアルな立体図形が作成されます。 ここではIllustratorでの簡易的な「円筒」「六角柱」の描き方を掲載します。 なおパース(遠近法)は考慮していません。 ■ 円柱 「画面→ポイントにスナップ」 「画面→アウトライン」で作業します。 「楕円形ツール」で適当な楕円を描きます 楕円パスをコピー、移動します。 「Altキー」(コピー機能)「Shiftキー」(垂直移動機能)を同時に押しながら、ドラッグすれば良い。 楕円に合わせ長方形を描く 「画面→プレビュー」に変更 長方形と、下の楕円を「パスファインダパレット」で「形状エリアに追加(「バージョン9以前は合体」)する。 合体オブジェクトにグラデーション塗りを設定。 上の楕円パスを「オブジェクト→アレンジ→最前面へ」で、前に出し、カラー設定。 完成 バリエーション

  • WEBデザインをプロっぽく仕上げるPhotoshopのグラデーションファイルの厳選まとめ | 日刊ウェブログ式

    フォトショップのグラデーションファイルは作業を早めるのに役立ちますし、テンプレートだと色の参考にもなります。PhotoshopやGIMPの色合いが美しいグラデーションを厳選してまとめました。 追記: 2010/12/04 グラデーション追加/リンク切れチェック Photoshop Gradients Nice photoshop gradient set Download Source Web 2.0 Photoshop gradients Download Source Ultimate Web 2.0 Gradients - FREE Download Download Source 黄金比グラデーション・白銀比グラデーション | DesignWalker Download Source 日の伝統色グラデーションファイル | DesignWalker Download Source

  • グラデーションをマスターするためのPhotoshopのチュートリアル集 | コリス

    Vandelay Web Designのエントリー「ウェブデザインのための71のグラデーションのリソース」から、グラデーションをマスターするための基的な使い方から、実践的なサンプル・実用的なダウンロードできるリソースを紹介します。 71 Gradient Resources for Web Design Vandelay Web Designのエントリーでは他にも、IllustratorやGIMP、ジェネレーターなどが紹介されています。

  • jmblog.jp - Web2.0っぽいグラデーションのコツ

    そろそろ「Web2.0的デザイン」という言い回しが恥ずかしくなってきましたが、それはそれでおいといて。グラデーションは今っぽいデザイン(ちょっと言い方を変えてみた)では外せない要素と言えるかと思いますが、プロのデザイナーの方はさておき、素人が挑戦すると、色の選択に失敗してイマイチ・・・なんてことになりがちです。 » A Gradient Tutorial » 9rules Network Official Blog こちらのサイトでは、グラデーションを作る際のポイントが説明されています。 さて、どれが一番きれいでしょう?1 は彩度(鮮やかさ)が足りません。上のサイトでは「a classic problem」と紹介されています。2 はマシですが、ちょっと素人臭さを感じます。まぁ好みは人それぞれだと思いますが、やっぱり 3 が一番きれいだと思います。 ちなみに僕は、次のようにしてグラデーション

  • グラデーションを使ったデザインのやり方 - GIGAZINE

    Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか?」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ

    グラデーションを使ったデザインのやり方 - GIGAZINE
  • 1