Color palettes made from images
注釈 60分のセミナー用のスライドです 60分間ひたすらしゃべるための資料なので、目次はありません セミナーのフォローアップのために公開しています 文字が大きいのは、会場の後ろの席でも見えるようにするためです Cascading Style Sheets .header { margin: 8px; color: #f00; } マジックナンバーの良くない例 .main { float: left; width: 640px; } .main h1 { width: 640px; } .main p { width: 640px; } .main ul li { width: 620px; margin-left: 20px; } 数値が乱立 .aaa { width: 640px; } .bbb { width: 324px; } .ccc { width: 216px; } .ddd
Pantoneが2015年セレクションしたカラーは、紫みの赤と茶を合わせた「Marsala(マルサラ)」。好みがはっきり分かれそうなカラーですね。 今回はダウンロード素材として、Marsalaを含む2015年 春のトレンドカラー16色をPhotoshop用のスウォッチにして用意しました。 Pantone Color of the Year PANTONE 18-1438 Marsala Marsala(マルサラ)はイタリアのシチリア島西海岸に位置する港湾都市で、有名なのがマルサラワインです。その美しいワインレッドを表現したのが「18-1438 Marsala」だと思われます。ワインは長い時間をかけてじっくり熟成され、深い味わいが生まれます。重厚感があり、表情が非常に豊かなカラーで、その色味は成熟した深みのある雰囲気を演出します。 光沢を加えると艶やかになり、マットにするとオブジェクトの本質
感情をあらわしたキーワードとカラー、国ごとの色合い、月ごと・曜日ごと・時間ごとの色合いなど、2010年のカラーをまとめたインフォグラフィックを紹介します。 Color of the Year 2010: By The People [ad#ad-2] 「Color of the Year 2010」は、世界137ヵ国1,088人の人々を対象に2010年のカラーについて調査を行ったもので、カラーの流行について具体化したインフォグラフィックとなっています。
前回は自己紹介をの制作を題材にして、参考資料を活用することにフォーカスしてお送りしました。今回はさらに細かいところにフォーカスしていきます。 カラースキームを固める 前回考えたプロセスの中で、自己紹介に関連するキーワードを書き出してみました。 それらのキーワードをもとに、今度はページのカラースキームを考えてみましょう。 基本のベースカラーが決まれば、そのカラーを基準にパレットのバリエーションも増やすことができます。 配色については、色彩理論[1]を身につけておくとカラースキームを考えるときに役立ちます。 また、色彩に関するセンスは経験によってより洗練されていくものだと考えています。いろいろなパターンを作りながら、試行錯誤していくことが大切です。 Web 上だけを見ても自動的にカラースキームを生成してくれる、便利なカラースキームジェネレータなどが多くあります。ゼロからつくれなくても、こういっ
By etaKate マーケティングにおいて「色」の果たす役割は非常に大きく、「購買行動の9割を目から得た情報によって決定している」という研究結果があるほどで、色をいかに上手く使うかがマーケティング成功のポイントの1つです。企業は実際のところどのように色を使っているのか、それはどのような効果を生んでいるのか、SNS専門のコンサルティング会社Bufferのレオ・ウィドリッチ氏が実例を使ってまとめています。 Why Facebook Is Blue: The Science of Colors in Marketing - The Buffer Blog http://blog.bufferapp.com/the-science-of-colors-in-marketing-why-is-facebook-blue 多くのウェブサイトや企業のロゴイメージにおいては、ある明確な目的があってその目
CSS3でアニメーションを実装するTransitionsをウェブページで効果的に使用するためのチュートリアルをWeb Designer Depotから紹介します。 CSS Transitions 101 TransitionsはSafariやChrome上で動作するCSS3のアニメーション機能で、JavaScriptやFlashを使用せずにウェブページに実装することができます。 ※Firefoxでも将来的にはサポートされる予定です。 チュートリアルでは3つのデモが掲載されています。 ※Safari, Chromeでご覧ください。
「Stylify Me」は指定したウェブサイトで使われている配色を抽出してくれるサイトです。ウェブサイトではさまざまな色が使われていますが、その色を抽出して一覧にしてくれます。「このサイトの配色を参考にしたいな」といったときに便利です。配色に加え、使われているフォントの種類も教えてくれますよ。 以下に使ってみた様子を載せておきます。まずStylify Meへアクセスしましょう。配色を知りたいウェブサイトのURLを入力して「Stylify Me」ボタンを押します。 するとこのように使われている配色の一覧が表示されます。ライフハッカーで使われている色は少なくシンプルですね。 さらに使われているフォントの一覧も作ってくれますよ。お気に入りのサイトの配色やフォント情報がまとめて手に入るので便利ですね。この結果をPDFで出力することも可能です。ぜひウェブサイトのデザインを考える際にご活用ください。
Flatuicolorpicker gives you the perfect colors for Flat Design
デザインの原則をWebデザインにどのように取り入れるのか、それを言葉に表すのはなかなか難しいことです。デザインの原則を理解して手を動かす、またクライアントにデザインの説明を行うといったこともあるでしょう。 デザインにはなぜそうなるのかという理由があります。 実際のWebページのデザインを元に、デザインで大切な原則とそれらをWebデザインにどのように取り入れるのかを紹介します。 7 Undeniable Design Principles You Can't Ignore 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 photoshopvip.netというブログにも同記事の翻訳がありますが、あちらは無断翻訳・画像の使用も無断であると、元記事の作者から連絡を受けています。 使用するデザイン 1. Hierarchy -階層 2. Rep
This tool was inspired directly by the excellent Creating Color Palettes article by Andy Clarke. It will create 10 shades of the base color, located top-left, at varying degrees of opacity. The top row emulates opacity over a white background, the bottom over black (or colors of your choosing as of v1.4). The opacity values are 100% opaque, 75%, 50%, 25% and 10% on the top row. The bottom row begi
To get started, choose a preferred color using the color picker below, and a 6-color matching palette (a "blend") will be automatically calculated. You may swicth to Direct Edit mode to tweak or edit individual colors of your blend. Saved blends will be associated with your account if you signed in or stored in your browser cookies if you are not a member yet.
Generate a color palette from PNG, JPG or GIF image/photo. Receive color suggestions, download Photoshop swatches (.ACO)
Close Modal About BrandColors BrandColors was created by DesignBombs. The goal was to create a helpful reference for the brand color codes that are needed most often. It's been featured by Smashing Magazine, CSS-Tricks, Web Design Depot, Tuts+, and over 2 million pageviews. There are now over 600 brands with 1600 colors and the collection is always growing.
いい感じのスライド、作るのむずいので、大体いい感じになるKeynoteテンプレート作った。ここからダウンロードできる。 Azusa - 大体いい感じになるKeynoteテンプレート解説サンプルも兼ねた解説スライド作った。 Introducing Azusa // Speaker Deckだいたいスライドに書いたけど要約すると下記のようなことを考えた。 スライド作るの難しい色とか難しいかっこよくしたいAzusaっていうのを作ったAzusaは、大体いい感じになるKeynoteテンプレートです Azusaの特徴大体いい感じになるカラースキーム大体いい感じになるフォント大体いい感じになるマスタースライド色カラースキーム考えた 白っぽい色(白っぽいクリーム色とか白っぽいねずみ色) 黒っぽい色(赤っぽい黒とか青っぽい黒とかそういうの) 緑とか青とかピンクとかのアクセントカラー1色 原色すぎないほうがイ
そんなSassが町田先生のCustomizedTwitterBootstrapに含まれていたので、これをTwitter Bootstrap3に対応させてみたのでした。 ソース こちらが良い感じにしてくれるベースの変数です。 $base-color、$main-color、$accent-color、$base-text-colorを決めることで良い感じにしてくれます。僕は下のファイルみたいなテイストが好きです。ほんわかしている。仕事では使えない感じがある。 実際に読み込むときには、Twitter Bootstrapより先に変数を読み込んでおきます。 //--------------------------------------------------------- // Color Scheme for Bootstrap @import colors/try @import color
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く