デザインを開発するという視点でお伝えするクリエイティブBLOG
CSSはWebサイト構築の上で非常に便利なものですが、今回は様々な機能でデザインを形にしてくれる、CSS3をマスターするために便利なチュートリアル「10 Pure CSS3 Tutorials And Examples」を紹介したいと思います。
How to Code a Homepage Template with HTML5 and CSS3 | Medialoot
最新のCSS3を使ったチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
写真一枚でデザインの印象は大きく変わってしまうからこそ、選定にはしっかりこだわっていきたいもの。今回はそんな時に知っていると便利な「FreePhotos.cc」を紹介していきたいと思います。
複数のフォトサイトを横断検索することができる便利なフリー画像検索サービスサイトとなっています。
詳しくは以下
さまざまなデザインを手掛けるデザイナーにとって、参考となるイメージや素材、テーマをまとめたサイトはとてもこころ強いもの。そんな中今回は、たくさんのUIデザインをまとめたサイト「Sketch App Sources」を紹介したいと思います。
UIデザインを中心に、いろんなテーマでクオリティの高い参考デザインがまとめられています。
詳しくは以下
グラデーションを作り出すのは、簡単なように見えて意外に難しいもの。絶妙な色合いをイメージ通りに表現したい、今回はそんな時に便利なwebジェネレーター「Blend」を紹介したいと思います。
2色のベースカラーを使ってグラデーションを生成できる、シンプルでありながらも使い勝手の良さが魅力のwebサービスとなっています。
詳しくは以下
webサイトの背景やメインビジュアルなどに、グラデーションの美しい色を使用することもあると思いますが、美しい色合いを作り出すのは意外に難しいもの。今回はそんな時に便利に活用できる、徐々に色が変化する背景作成が簡単にできるジェネレーター「CSS Gradient Animator」を紹介したいと思います。
2色の好きな色を設定するだけで、非常に簡単にグラデーションカラーを作り出すことができるようになっています。
詳しくは以下
デザイン制作の際に、色合いにニュアンスを出すために使用されるグラデーション。きれいな色の組み合わせが成功するとデザインが一気に魅力的なものに変化することも。今回はそんなシーンで役立てたい、グラデーションを楽しみながらコード取得もできるサイト「uiGradients」を紹介したいと思います。
ひたすらグラデーションを閲覧するといった非常にシンプルなサイトですが、色の濃淡のコード取得ができるなど実用的にも活用できるサイトとなっています。
詳しくは以下
デザインの背景等に質感を出すために非常に役に立つ、テクスチャ。ただあまりにも激しかったり印象的なテクスチャを背景に利用するとかなり引っ張られてしまいデザインも制限されてしまいがちです。そこで今回紹介するのはデザインを活かしながら質感演出に使えるソフトグランジフリーテクスチャ「Light Grunge 」を紹介したいと思います。
上記のようなテクスチャが配布されています。今回はそのなかからいくつか気になったテクスチャをピックアップして紹介したいと思います。
詳しくは以下
新しく美しい雰囲気というのは比較的作りやすいものですが、カビや汚れ、ペンキのはがれる様子など、年季の入った雰囲気を作り出すのはなかなか難しいものです。そんな中今回紹介するのが、味のある雰囲気が表現できる傷ついた壁面のテクスチャをまとめた「23 Free Damaged Wall Textures For Your Designs」です。
Tormented texture by ~D-O-Z on deviantART
長年の汚れが蓄積したような壁面から、さまざまな傷が刻まれた壁面まで、さまざまな素材が紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
デザインに質感を与えてくれるテクスチャ。便利な素材だけに、世界中で様々なテクスチャが公開されていて、そのなかでもひとつのジャンルとなっているのがグランジテクスチャ。今日紹介するのは質感のあるグランジテクスチャを集めた「12 Experimental Dirty Textures」というエントリーです。
今回のテクスチャはタイトルにDirtyとあるとおり、少しくらめで、グランジも激しい感じのテクスチャが中心に集められていました。今日はそのなかから何枚かピックアップして紹介したいと思います。
詳しくは以下
デザイン制作の中で非常に便利なPhotoshoのブラシ。デザインの幅が広がる、クオリティの高いブラシは非常に心強い味方です。今回は、そんなブラシのパックを集めた「20 Subtle and Soft Textured Photoshop Brush Packs (225 Brushes)」をご紹介します。
（Dribbble – Speckle Brushes made of Cocoa (free download) by Maleika E. A.）
穀物や、錆、ウッドなど、用途や仕様によって活躍するブラシが豊富にまとめられています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
ブランディングやパッケージデザインを提案する時に重要な役割を果たすモックアップ。その精度が高ければ高いほど、クライアントにリアルなイメージを提供することができます。そんな時に役立ってくれるのが今回紹介する、クオリティの高いフリーで使えるパッケージモックアップまとめ「20 Realistic Free Food Packaging Mockups」です。
Ice Cream Cup Mockups | MockupWorld
パッケージモックアップが20種類紹介されていますが、どれも精度の高いものばかりです。中でも気になったものをピックアップしてみました。
詳しくは以下
軽量でなおかつ様々な動作が可能な人気のプラグイン「jQuery」。世界中で利用されており、そのテクニックも豊富ですが、今日紹介するのは比較的新しいチュートリアルやテクニックを集めたエントリー「25 Fresh and New jQuery Plugins and Tutorials」です。
Create Featured Content Slider
ツールチップからスライダー式のギャラリー、サウンドプレイヤーなどなどjQueryで実現できる様々なテクニックが紹介されています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザイン性の高いフォントを使用するだけで、制作物のクオリティは格段にアップします。そんなデザイン制作時に参考になる、多彩なデザイン性のフリーフォントまとめ「60+ best free fonts, Summer 2015」を今回は紹介します。
Charming Typeface – Exploring Vietnam on Behance
ベーシックなタイプから個性的なものまで、種類豊富にフリーフォントが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
暦の上でもクリスマスが迫ってきて、気がつけば街もすっかりクリスマス仕様になってきました。デザイン業界でも、クリスマスのデザインをしてるそんな方も中にはいるはずです。今日紹介するのはクリスマスなデザインをするデザイナーさんにおすすめなフリーphotoshopブラシ集「Christmas Photoshop Brushes」です。
雪の結晶から、雪だるま、クリスマスツリーなどのモチーフまでクリスマスにちなんだ、様々なフリーphotoshopブラシが集められています。
詳しくは以下
Photoshopの素材は、いろいろな形式の制作シーンで活用できるということもあり人気の素材。また手軽にクオリティの高い表現ができるのも魅力となっています。そんな中今回は、いろいろな場面で活躍するPhotoshopフリー素材まとめ「40 Extremely Useful & Free Icon Photoshop Files」を紹介したいと思います。
Blank letter template (PSD) | PSDGraphics
さまざまな種類のPhotoshop形式のアイコンや素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
ノートをモチーフにしたアナログ感のあるデザインはいつでも人気で、制作する機会も多いかと思います。今回はデザインの幅をもっと広げられる、デザイン制作に役立つノートテクスチャをまとめた「20 Free Lined Paper Textures for Designers」を紹介したいと思います。
Notebook by ~origin-missing on deviantART
キレイな見開きノートから、グランジ感のあるノートまで、さまざまなノートのテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
