非デザイナーにも知っていて欲しい「色」と「特性」 - Qiita
はじめに 数年前から「デザインの民主化」「非デザイナー向けの〇〇」といったワードをよく見るようになりました。それに伴い、デザイナー不在でも制作ができる便利なツールも増えてきましたね。 ReactなどのUI制作に便利なライブラリが広く使われたり、Canvasを使ってのバナー制作を行う人も増えてきた印象があります。 一方で「たくさんあるテンプレートから何を基準に選べば良いのか分からない」「アレンジしたけど、なんだか上手くいかない」という人もいるのではないでしょうか。 「非デザイナー～」シリーズでは「知っているとちょっと得するデザインTIPS」や「話のネタになるデザイン豆知識」をお伝えしていこうと思います。 今回のテーマ「色」と「特性」 今回は色の見え方、なかでも色覚特性について書いていこうと思います。 色覚特性はさまざまな理由から、多数派とは違う色の見え方・感じ方をする状態のことを言います。色
４年間、7色だけでUIをデザインし続けた話｜コウノ アスヤ
2019年にフリーランスとして独立した時すぐに声をかけていただいて、そこからずっとUIデザイナーとして関わってきた株式会社FLINTERSが今年で設立10周年なんだそうです。それを記念して、なんとメンバーでリレーしながら133日間ブログを書き続けるチャレンジに挑戦中とのこと。今回はその101日目の記事となります。 漫画アプリ「GANMA!」漫画アプリGANMA!僕が関わっているのはGANMA!のスマホアプリです。iOS向けとAndroid向けがあり、その両方のデザインを担当しています。 オリジナルの作品ですと、最近アニメ化された山田くんとLv999の恋をするなどが有名でしょうか。作品自体はいろんな漫画アプリで読めますが、原作はGANMA!発。最新話が最速で読めるのもGANMA!だけです。 GANMA!のデザイナーはずっと僕1人だけなので、僕の思想や判断がけっこう大きめにデザインに反映される
COLORS | Chart Color Generator
COLORSは、ビジネス文書に適したグラフの配色作りをサポートするWebアプリです。会社のコーポレートカラーやプロダクトのテーマカラーを基に配色を生成し、これらと親和性の高いグラフカラーを効率的に作成できます。
知らないうちに事故ってるかも…！Photoshopカラー設定を「全部」見てみよう
事故る、はホント 「編集」メニュー＞カラー設定、触ったことはありますか？もし初期設定の「一般用 – 日本2」のまま使っているとしたら、今までの仕事のなかに、色が違ったまま納品していたものがある、かもしれませんよ…WEBでも印刷でも同じです。 全ての内容を知っておくと、何かあったときにすぐ原因が分かるようになる、かもしれません。 全部の項目を見てみましょう。 「高度なコントロール」以外の設定を保存（※1）したプリセットを選びます。 印刷向けは「プリプレス用 – 日本2」、WEB向けは「WEB・インターネット用 – 日本」をベースにカスタマイズしましょう。 内容を理解していれば、カスタムすることで作業効率がもの凄く上がります。逆に、理解しないでいじると大変なことになります。 カスタムした内容は「.csf」ファイルとして保存され、InDesignやIllustratorでも同じ設定を使用できます
いつから「本機色校正」が絶対正しいと錯覚していた…？実は結構ありがちな、印刷ミスを見分けよう！
「本機色校正」だから信用していいのか……というとそうでないこともある、というエントリです。 だいたいまともなんですけどね。たまにあるから油断できない。 キングof色校正、本機校正 校正の中でも「色」を見るためのものを「色校正」といいます。単に「色がついてる校正紙」じゃーなくて、印刷製品の見た目をできるだけシミュレーションして、色についてもっとああしたいこうしたい言えるだけの精度をもった校正のことです。 ご予算に応じて次のように分かれております。………が、これ印刷会社の商品であって、商品としていろんな呼び方してたりします。ですので同じ用語であっても違うものを指していることもあるので、必ず確認してください。 DDCP direct digital color proof。インキを使わない校正専用機。本紙に出せるもの、専用紙（印画紙）のものがある。そろそろ材料も販売終了してきている。コンセンサス
画像編集ソフトの覆い焼きやソフトライトといった「レイヤー合成モード」は一体何をしているのか？
Photoshopなどのデジタル画像編集ソフトウェアでは、「覆い焼き」や「ソフトライト」といったさまざまなブレンドモード(レイヤー合成モード)を用いて画像を編集することが可能です。このレイヤー合成モードは一体何をしているのかを、プロダクトデザイナーのダン・ホリック氏が解説しています。 Blending Modes | Dan Hollick https://typefully.com/DanHollick/blending-modes-KrBa0JP レイヤー合成モードは、2つの入力カラーに基づき新しいカラーを作成するというものです。以下の画像の「Foreground(前景)」と「Background(後景)」が異なるレイヤーであり、「Result」部分がレイヤー合成モードにより出力された新しいカラーを指しています。 レイヤー合成モードの中で最も単純なのが、「Darken(比較(暗))」と
【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。 - Qiita
概要 このグラデーションは、#ff0000 → #00ff00のグラデーションになります。 みなさんは、このクラデーションを見てどう思いますか？ 真ん中あたりの色が茶色っぽくなって あまり綺麗なグラデーションとは感じないですよね? この記事では、これが発生する原因と綺麗なグラデーションの作り方を 解説していきます。 この記事を読んで理解すれば、綺麗なグラデーションが簡単に作れるようになるでしょう。 原因 1. RGBについて理解する RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を それぞれ、0~255の値を指定することで、色が作られます。 例えば、 R: 255, G: 0, B: 0 → 赤 R: 255, G: 255, B: 0 → 黄色 このように色が指定されます。 では、RGB全てが同じ値の時はどんな色になるでしょうか？ 答えは、↑このようにグレースケールカ
入稿データの配置画像は濃度300%以下にしてください言われたら | REACH_rh.com
印刷物は色濃度が濃すぎると印刷に支障をきたすので、濃度オーバーにならないデータが必要で、 配置画像の濃度を300%以内にしてください なんて言われ、入稿ファイルが通らない場合もあったり。。。 私も以前、後から濃度を抑える調整をするハメになったことがありますが、無事印刷できたので、 その内容、やり方を記録しておこうと思います。 ただし、以下のやり方は、最後の手段であり、ものによっては色ころびが激しくなり、意図した色から大きく変わってしまう可能性もあります。 基本は、データを作る前に入稿先（印刷屋さん）を決め、入稿規定をしっかり確認してからそれに法ったやり方でデータを制作するのが絶対的にベストです。 （規定や注意事項が記載されていなければ直接問い合わせて確認しまくるべしw） 安易にとらえず、少なくとも本刷りの前に色校正はしっかり出してもらうことをおすすめします。 ということで、 ◆イラレで濃度
印刷用データについてのご質問です。
/t5/photoshop-%E3%83%87%E3%82%B9%E3%82%AF%E3%83%88%E3%83%83%E3%83%97-mobile-web-%E7%89%88-discussions/%E5%8D%B0%E5%88%B7%E7%94%A8%E3%83%87%E3%83%BC%E3%82%BF%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6%E3%81%AE%E3%81%94%E8%B3%AA%E5%95%8F%E3%81%A7%E3%81%99/td-p/9845069 May 08, 2018 May 08, 2018 印刷用CMYKデータについてのご質問です。 データを開いた時、 「CMYKプロファイルが埋め込まれてません。」と毎回出ますが、 処理方法は ・そのままにする（カラーマネジメントなし） ・作業用CMYKを指定：Japan Colo
総インキ量（TAC値）を落とすためだけにJapan Color 2001 Uncoatedを使ってはいけない理由
総インキ量を落とす方法については過去にも書きましたが、改めてJapan Color 2001 Uncoatedの使用について。 インキ総量を落とす「テク」、色が変わってしまうから、どれがいいとは安易には勧められない CMYK画像にインキ総量マスクを追加するPhotoshopCS6専用アクション・簡易計算機付き 間違いだらけのPhotoshop｜CMYK変換に関する二つの「デマ」を検証する プロファイル変換が何をしているのか、についてはこちら。 PhotoshopのCMYK変換設定のキモ、プロファイル、マッチング方法、ほかを「10分で」簡単に説明してみた（154回バンフーセミナーフォローアップ） 総インキ量を落とすためだけにUncoatedを使うのは危険 それまでJapan Color 2001 Coatedを使っていて、それで入稿した後に、印刷屋さんから「TAC値を落として欲しい」と連絡が
CMYK画像の総インキ使用量の調整方法 プロファイル変換で調整される
オフセット印刷などでCMYKの４色すべてベタ塗りにするときれいに印刷できないので、インクを減らす オフセット印刷などを行う時、印刷用のデータの絵柄でC100M100Y100K100の部分を作ると、その部分はCMYKの４色が全てベタ塗りになります。 そうすると、インクが多すぎてベタベタになるなどして、きれいに印刷できません。 オフセット印刷に限らず、インクジェットプリンターでも習字でも、インクを塗りすぎるとべちゃべちゃになってきれいに仕上がりません。 そこで、印刷用のデータを作るとき、CMYKの合計が400％になってしまわないように調節します。 印刷の方法や用紙など、条件によって適正な総インキ使用量は異なる インクをどのくらい塗るとべちゃべちゃになってきれいに印刷できなくなるか、その境目は印刷の方式、用紙など、条件によって異なります。 枚葉オフセット印刷とオフセット輪転機での印刷では少し異な
Photoshopの「ドキュメントプロファイル」の意味や扱い方
ドキュメントプロファイルは、その画像データが現在展開されている色空間の名前 ドキュメントプロファイルというのは、その画像が現在展開されている色空間です。 ドキュメントプロファイルがsRGBになっていれば、RGBのデータがsRGB色空間で表示されています。 ドキュメントプロファイルがAdobeRGBとなっていれば、RGBのデータがAdobeRGB色空間で表示されています。 ドキュメントプロファイルがJapan Color 2001 Coatedとなっていれば、CMYKのデータがJapan Color 2001 Coatedの色空間で表示されています。 同じデータでも展開する色空間が違うと色が変わる ドキュメントプロファイルがsRGBになっている場合、RGBデータはsRGB色空間を使って表示されます。 もしこのデータのドキュメントプロファイルをAdobeRGBに変更したら、同じRGBデータがA
グラデーションの中央がグレーに濁ってしまう仕組みをくわしく解説、美しいグラデーションをCSSで実装する方法
グラデーションを作成した時に、中央がグレーに濁ってしまうこと（グレーデッドゾーン）があります。なぜこの現象が起こるのか、どうすれば回避できるのか、鮮やかで美しいグラデーションをCSSで実装する方法を紹介します。 Make Beautiful Gradients in CSS by Josh W Comeau 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSグラデーションが算出される仕組み おすすめのカラーモード これらの知識を活用する 美しいグラデーションを生成できるツール 終わりに はじめに さっそくですが、CSSで実装したイエローからブルーの線形グラデーションをご覧ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Publish Online
ColorMagic | AI Color Palette Generator
Colormind - the AI powered color palette generator
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
「赤の下着は意外と透けない、薄ピンクは信じられないけど透けまくる」下着ブランド代表が投稿した意外な比較画像に反響
HTML,CSS カラーコード一覧表 ｜ 背景色や文字色の設定
カラーマネジメント実践ブログ 〜フォトレタッチの現場から〜
