Color palettes made from images
初めまして。「kulerで気軽にカラーコーディネイト」の連載を書かせていただきます、ブロッコ・デリ・アーキテクツ有限会社の吉田コマキと申します。普段はWebデザインやグラフィックデザインでお仕事をさせていただいて、それ以外ではアクリル画やFlashアニメーションを休日にちまちま作っていたりします。実は沖縄在住でして、そろそろ夏が手に届く季節です。ここ日本の南西から皆様に「kuler」をもとに「色」にまつわる様々なお話をご紹介していきます。どうぞよろしくお願いいたします。 kulerって何? kuler(クーラーと読みます)は、Adobe Labsから発表されたWebアプリケーションです。現在、無償公開中でWebデザインのみならず、様々な「色」と関係した職業にしている方、生活をしている方にとっても素敵なツールです。 図1 kulerのWebサイト。様々なテーマカラーが保存、公開されています
CATK http://catk.de/ #513baa #6445e0 Frank Chimero http://www.frankchimero.com/ #00deb7 #5fe2ff #6144b0 #ff4a5d #fff3cd Prospek https://prospek.ca/ #46b085 Mixd http://www.mixd.co.uk/ #1c4bbe Flavor http://www.madebyflavor.com/ #f84c74 #9f6cc8 #4d9ff5 #4bdcb5 Build in Amsterdam http://www.buildinamsterdam.com/ #79a596 #222327 Socialist http://www.sociali.st/ #f53e2e #0b0b0b Square https://s
日頃より、h555.netをご愛顧いただきまして誠にありがとうございます。 「ホームページオプション」のサービス提供は2015年11月30日をもちまして終了させていただきました。 これまで長らくご利用いただき、誠にありがとうございました。 今後も、皆様によりよいサービスをご提供させていただけるよう、サービス品質向上に努めて参りますので、何卒、ご理解いただけますようお願 い申し上げます。 <h555.netをご契約のお客様へ> 後継サービスとして「userwebサービス」を提供させていただいております。 詳しくは、以下のリンクをご参照ください。 ▼「userwebサービス」のご案内 http://www.ejworks.info/userhp/h555/index.html 今後ともh555.netをご愛顧いただけますようお願い申し上げます。 株式会社イージェーワークス h555.net カ
iOS 7にも採用されているような落ち着いたパステルカラー、同じ明るさで異なる色合いを組み合わせたカラースキームなど、人間の目に優しくより見やすくなるように色合いを設計するためのカラースペース「HUSL」を紹介します。 HUSL -Human friendly HSL HUSL -GitHub HUSLは「Human friendly HSL」の略で、RGBのカラースペースに幾何学的な変換して設計されています。カラーの定義はHSLのように色相(hue)と輝度(lightness)を使い、彩度に「saturation」ではなく「chroma 」を使用します。 彩度のsaturationとchromaの違いは、こんな式になるようです。 Saturation(彩度:S)= Chroma(C) / 明度(V) 参考:イメージクリエーションの構築と基礎知識の習得 どんな感じかは、デモですぐに試すこと
ウェブデザインにおけるカラーのグリーンの重要性を学び、実例を見ながら制作における効果的な使い方や気をつけたいポイントを紹介します。 Anatomy of Colors: How to Create Eco-Friendly Green Website Anatomy of Colorsのシリーズは前回、ホワイトを紹介しました。 ウェブデザインにおけるカラーのホワイトの重要性と効果的な使い方・気をつけたい4つのポイント 最近はデスクトップの壁紙もベタ塗りグリーンなので、今回はグリーンを紹介します。 以下、グリーンの各ポイントを意訳したものです。 グリーンの重要性 グリーンの基礎知識 ウェブデザインにおけるグリーンの使い方 グリーンを使うことの意味 グリーンの文化的な背景 さまざまなグリーンの使い方 グリーンを使ってみよう グリーンの重要性 インスピレーションを与える最もよい情報提供元は何です
RGBaカラーを使って全体に統一感のある横メニューを作ってみます。RGBaカラーといっても使うの色は白(rgba(255,255,255,0.4)など)と黒(rgba(0,0,0,0.1)など)だけで、その透明度を変えて様々なところで使っています。 先日書いた「カラーツール「0to255」で色を決めてメニューを作ってみる」がなかなか好評でしたが、今回も出来上がりは同じようなメニューになります。 RGBaカラーについては、以前書いた「透明度を表す「opacity」 と 「RGBa」の違いと使い分け」も参考になると思いますのでぜひご覧ください。 早速コードを見てみます。まずはHTMLですが、これは特に問題ないと思います。 <ul id="menu"> <li><a href="#">IE</a></li> <li><a href="#">Firefox</a></li> <li><a href
ここで得た言葉を元に配色を組み立てていくことになるので重要な部分です。 伝えたいイメージは多くの場合、「明るい」「可愛い」「落ち着いた」などの形容詞で表現されることが多いです。 ただ、言葉から連想されるものは人により誤差がありますので、 参考となるサイトや、商品など具体的にイメージしてるものも挙げてもらうと良いです。 下記はGoogleの画像検索「高級」の結果です。人によって抱くイメージは様々です。 「○○のような高級感」と具体的に伝えてもらうと良いです。 2.調査 競合となる他社サイトの配色を調査し、それらと同じような配色になることは避けます。 ただし同業の全てのサイトと被らないようにするのは無理があるので、 商圏内で競合となる他社のみを比較対象とします。 また、既にクライアントが名刺やパンフレット、フライヤー、ノベルティやなどを制作していたら見せてもらったり、 店舗であれば外観・内装の
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く