タグ

colorに関するImagineerのブックマーク (8)

  • 配色パターンからWebデザインを考える

    2017年6月29日 Webデザイン, 色彩 ページを開いた瞬間にそのWebサイトのイメージを左右するほど重要な要素「色」。しかし色の組み合わせ、配色には無限のパターンがあり、正しい配色を見つけるのは簡単なことではありません。ここでは色彩の基礎と配色パターンの見つけ方の一例を紹介します。 ↑私が10年以上利用している会計ソフト! まずは色彩の三属性について 色は彩度・明度・色相の三属性(三要素とも呼ぶ)から成り立っています。 彩度 色の鮮やかさの度合いを表します。彩度の高い色は派手・華やか・目立つ色といえます。子供服やキャラクターグッズ関連のサイトには彩度の高い色が使われることが多いです。逆に彩度の低い色は地味・おだやか・上品であるといえるでしょう。和・ヴィンテージ風デザインのサイトには彩度の低い色がよく使われます。 明度 色の明るさの度合いを表します。明度が高い=明るい色はさわやかで爽

    配色パターンからWebデザインを考える
  • 日本の伝統色~@yuzen友禅ネット

    皆さんなら、自分のキモノが欲しいなと考えたとき、まずなにを選択基準にしますか? かなりの人が「色」とお答になるではないでしょうか?もちろん図柄、模様とお答になる人もいるでしょうけど、それにしても色なしでは考えられません。キモノは洋服とちがって、形そのものは基的には同じですし、身につける面積が広いので、自分らしさを出すためにも、色選びはとっても重要です。現代社会は色が満ち溢れています。でも、逆にわたしたちは色に対してあんがい無頓着になってしまっているような気がします。単純に赤だとか青だとかいって、それでわかったような気になってませんでしょうか?たとえば、青が好きといっても、その明暗、彩度、などによって全く違った印象になります。そう考えると、色は無限ですから、そのなかから自分好みの色選びをするということは実はとても大変なことなのです。 幸いにも日には、ずっと昔から大切にされてきた色の世界が

  • Photoshopのグラデーションファイル600+ – creamu

    Best Design Optionsというサイトで、Photoshopのグラデーションファイルがたくさん紹介されています。 ざっといくつかご紹介。 その他のリスト&ダウンロードは以下からどうぞ。 » How to Use Photoshop Gradients Plus 600+ Gradients to Download いい天気ですねー。ドライブ日和だな。

  • ASCII.jp:もう配色には困らない!「Adobe Kuler」

    「オリジナルのWebデザインをしたいけど、いまいち配色センスがなくて困る」「いつも好きな(得意な)色の組み合わせばかりでデザインしてしまう」「でも色彩理論を勉強するのは面倒だ」。 そんな人にぜひおすすめしたいのが、アドビ システムズが提供しているオンラインサービス「Adobe Kuler」(クーラー)だ。Kulerは、さまざまな色の組み合わせ(配色パターン、Kulerでは「テーマ」と呼ぶ)をWebブラウザー上で作成し、保存・公開もできる、ちょっと変わったサービス。いわば“みんなの力”で作られたカラーチャート集ともいえるもので、すでに7000種類以上(2009年1月現在)ものテーマが公開されている。利用料は無料だが、保存などの機能を使うにはAdobe IDが必要だ(以降の説明はログインしているものとして進める)。

    ASCII.jp:もう配色には困らない!「Adobe Kuler」
  • よりよいWebデザインにするための配色のセオリー :: Love & Design ::

    第一印象を決めてしまうほど、色はとても大切な役割を持っています。 Webデザインのイメージを決める上で、色は最も重要な要素といっても過言ではありません。 配色には様々なルールがありますが、Webデザインの配色は好みやセンスに頼らず、目的や用途に合わせて「調和」と「役割」を持つ効果的な配色をしたいものですね。 そこでWebデザインでも“ 無駄にならない ”色彩心理や色の視覚効果など、配色のセオリーをまとめました。 では、さっそく配色の基になる「色相」「明度」「彩度」「トーン」それぞれの色彩心理や視覚効果を紹介します。 色相差で配色 【イメージ効果】 暖かい⇔冷たい 動的な⇔静的な 情熱的な⇔理知的な → 色相が違う色同士を組み合わせると、色味の差が大きく感じられます。 背景色の心理補色(黄⇔青 赤⇔緑)の方向に色がずれ、左側の中のオレンジは青みを帯び、右は赤みを帯びて見えます。(色相対比)

    よりよいWebデザインにするための配色のセオリー :: Love & Design ::
  • 開発環境 Screen x PuTTY x Emacs x 256color : Hasta Pronto.org

    前々からやろうと思っていてやっていなかった Emacs の 256 色表示をついに成功させました。実はこれ、今まで何度かトライしてたのですが、コンソールまでは 256 色になるのですが、肝心要の Emacs の方が 8 色のままでどうしようもありませんでした。しまいには間違って apt-get update とかしてしまい、せっかく 256 色表示に設定した screen を初期値に戻してしまうミスなんかもあって、やる気がなくなっていたわけですw けど今回この おまえの日記 - 256 color で、表示出来たとのことだったので僕でも出来るかもと思ったのでした。しかもリンク先に EmacsWiki: PuTTY なるものがあって、なんか英語ですけど Emacs を 256 色で表示する設定が載ってます。それだけじゃなくて色々リンクを辿った結果、もっといい物まで発見!全部英語なため頑張って

  • ウェブサイトの色の心理学:phpspot開発日誌

    Find the Perfect Colors for Your Website << Vandelay Website Design Color choice is a crucial decision in every website design. 色の心理学に関連するエントリ Color Wheel Pro: Color Meaning Choosing Colors For Your Website Design The Meaning of Colour in Web Design 上記エントリでは、 赤は愛、情熱、危険、警告 青は信頼、成功、重さ、プロフェッショナリズム 緑はお金、動物、健康、ヒーリング、ハーモニー といった意味を持つといったことが述べられてます。 色の意味について知っておくことで、WEBデザイン制作の際の参考や、顧客に対する説明の際に役立つかも。 Color

  • 相性の良い色を自動でピックアップしてくれる「ColorBlender」

    ウェブサイトやブログを作る上で配色はかなり重要ですが、それ故に面倒なものです。そういった悩みを解消するのがこの「ColorBlender」。基準となる色を1つ指定すれば、それに合う色を5色出してくれます。 詳細は以下から。 ColorBlender.com | Your free online color matching toolbox まずスライダーでRGBを調節。 色が決まったら右の「Match blend from active colour」を押し、今のパレットを破棄することをOKする。 すると自動でピックアップされた色が出てきます。 Editing modeを「Direct Edit」から「AutoMatch」に変えると、スライダーを動かすだけで色がピックアップされます。 フォトショップ用やイラストレーター用のカラーパレットとして保存でき、作った配色にリンクするURLも生成可能

    相性の良い色を自動でピックアップしてくれる「ColorBlender」
  • 1