タグ

colorとtipsに関するko-ya-maのブックマーク (7)

  • 濁りなし!美しいグラデーションの基本ルールとCSSオンラインツール

    デザイントレンドは変わっていますが、グラデーションはとてもナチュラルな見た目と多様性に富んでおり、いつの時代も愛されるデザインスタイルです。 この記事では、美しいグラデーションを作成する基ルールと、手軽に利用できるグラデーション作成オンラインツールをご紹介します。 全シリーズはこちら。 しっかりマスター!美しいグラデーション作成徹底ガイド【Illustratorグルーバルカラー編】 しっかりマスター!美しいグラデーション作成徹底ガイド【Illustrator実践デザイン編】 美しいグラデーションって、なんだろう? グラデーションには良くて美しいものもあれば、悪くてひどいものもあるでしょう。 良いグラデーションとは、ナチュラルで調和のとれた美しいなめらかな色の変化のことを指します。 プリント印刷でグラデーションを表現するときの技術的な問題を防ぐのにも役立ち、画面スクリーン状で見たときにも魅

    濁りなし!美しいグラデーションの基本ルールとCSSオンラインツール
    ko-ya-ma
    ko-ya-ma 2021/03/03
    くすむなら間にカラーストップを追加する…言われてみれば確かにそうしている
  • CSS変数による配色はcontrastとrgbも用意したら捗るぞ

    DESCRIPTION CSSの基調色は変数化しよう そうすることで部分最適で「同じような色を複数生み出すこと」が避けれるよ 「基調色」はcontrastとrgb値も用意するといいよ! 文 プライマリーカラーやセカンダリーカラーは変数化するのが一般的になりました。配色をいろいろなコンポーネントプロパティに書き散らかすと部分最適化した結果「気づいたら青色が32種類」ということになる事例もありますので、全体を最適化して保守性を高めるために、配色の変数化は一般的です。こんな感じですね。

    CSS変数による配色はcontrastとrgbも用意したら捗るぞ
  • アクセシビリティの高いデザインを実現するのに重要な「色選び」の方法とは?

    by Alice Achterhof イーロン・マスクをはじめとする投資家から4億5000万ドル(約490億円)以上の資金を調達し、1万3000以上のウェブサイトで使用されるようになったオンライン決済処理サービスの「Stripe」が、自社プロダクトのデザインにおける「色選び」で重視したポイントを自社ブログ上で解説しています。 Designing accessible color systems https://stripe.com/au/blog/accessible-color-systems ソフトウェアやサービスにおける色のコントラストは、アクセシビリティに大きな影響を与える重要な側面です。正しいコントラストを用いることで、視覚障害を持つ人でもプロダクトが利用しやすくなり、「低照度のディスプレイ」や「古い機材を使用しているユーザー」といった、推奨されない環境でプロダクトを利用している

    アクセシビリティの高いデザインを実現するのに重要な「色選び」の方法とは?
  • CSSブレンドモードで画像を彩ろう

    2018年11月12日 CSS Photoshopをはじめとしたグラフィックツールに搭載されている「ブレンドモード(描画モード)」機能。複数の画像や色を様々な手法で重ね合わせ、独特の効果をうみだします。そんなブレンドモード、実はCSSでも実装できるんです!今回はそんなCSSブレンドモードにフォーカスしてみようと思います! ↑私が10年以上利用している会計ソフト! 対応ブラウザー Can I use…によると、IE以外のモダンブラウザーに対応しています。 ブレンドモード一覧 基的な実装方法は、background プロパティで背景色と背景画像を同時に指定。続いて background-blend-mode プロパティに、以下で羅列するブレンドモード名を記述するだけです。 body { background: #0bd url(beach-footprint.jpg) no-repeat;

    CSSブレンドモードで画像を彩ろう
  • 「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」

    グラフィックデザイナーがドキュメントをデザインするにあたって特に重要な要素を「Color(カラー)」「Contrast(コントラスト)」「Repetition(反復)」「Arrangement(アレンジ)」「Why(なぜ)」「Organization(組織化)」「Negative Space(ネガティブスペース)」「Typography(タイポグラフィ)」「Iconography(図像学)」「Photography(フォトグラフィ)」という10のカテゴリに分類し、各カテゴリに5つずつ、全部で50のルールを盛り込んだインフォグラフィックが「Color CRAYON-TIP」です。 The 50 Most Important Rules of Document Design: Color CRAYON-TIP Method http://thevisualcommunicationguy.co

    「ドキュメントデザイン」で最も重要な50のルールをまとめた「Color CRAYON-TIP Method」
  • 「K=100は濃い灰色!」「リッチブラックはC90% M90% Y30% K100%」で印刷関係者が騒然

    概要 ▶ PhotoshopVIPのK=100は黒ではありません? K=100は濃いグレー? リッチブラックはC=90, M=90, Y=30, K=100?…疑問に思ったので調べてみました。 K=100は黒ではありません。 Photoshopでやってしまいがちな10個の間違い - PhotoshopVIP 「Photoshopでやってしまいがちな10個の間違い」(PhotoshopVIP)で「K=100は黒ではありません」「K=100は濃い灰色」とあったので印刷関係者が騒然となった(一部)。 名指しはしていないけど、こちらのブログでも K100%は「濃いグレー」か? 日に限って言うならはっきりと、「いいえ。違います」 K100%はグレー???いいえ、「黒」です。それでもリッチブラックを使うなら… | やもめも とある。(違ったらすみません) 日と欧米ではブラックのインキの濃度が違う

    「K=100は濃い灰色!」「リッチブラックはC90% M90% Y30% K100%」で印刷関係者が騒然
  • 配色初心者でも効果的なカラーデザインが出来るようになる4つの工程 / Maka-Veli .com

    タイトル間違えました。 「僕みたいなクソデザイナーが配色する時に騙し騙しデザインする手法」です。 配色には色々作法があります。そして言葉もあります。加法、減法、色の三属性、伝統、政治的意味合い、などなど。厳密に出したらキリがありませんし、プロじゃないので、細かい事は抜きにして、個人的に抑えておく簡単なポイントをまとめてみました。 雰囲気のキーワードを出す なんとなくのキーワードを出します。 カッコイイ! うぉ!すっげ!って感じ クール とにかく渋く。鳥肌立つ感じで 可愛いっぽく。 やっぱ少し可愛くが良い ラブリー♡ もうワクワクーって感じで♥ シンプルに。 余計な物はいらん インパクトどーん とにかく覚えてもらいたい! 爽やかーーー キレイに見せたい! 楽しい! チョーハッピ スーパーハッピ ノ…(ry など。 ここで決めたキーワードがベースになります。 常に頭に入れてお

  • 1