デザインを開発するという視点でお伝えするクリエイティブBLOG
デザインの印象を決定付ける、重要な要素の一つに配色があります。色の組み合わせは思っている以上に難しく、いつも同じような配色になってしまう、または配色自体が思いつかないと色で悩んでいる方も多いと思います。今回紹介するのはトレンドの配色をカラーコード付きで参照できるWEBサイト「Trendy Palettes」です。
基本的には三色の組み合わせパターンが登録されており、色の組み合わせとそれぞれのカラーのカラーコードを参照することが可能です。
詳しくは以下
視覚的要素の中で一番重要だと言っても過言ではない色。配色バランスを決めるのはなかなか難しく、それが2色、3色と増えることで難しさは増していくのではないでしょうか。そんな時に活用したい、便利で簡単なカラーパレット作成サイト「Color Supply」を今回は紹介したいと思います。
円形の色相環図をぐるぐると選択するだけで、バランスの良い配色パターンを生成できる、とても便利なwebツールとなっています。
詳しくは以下
デザインに置いて色は非常に重要な要素の一つで、その配色でデザイン全体のイメージが左右されるほど。それだけに配色というのは難しい決定頁の一つでもあります。今日紹介するのはそんな難しい配色の手助けをしてくれる、感情・ターゲットなど様々切り口から配色を提案してくれる配色ツール「Culrs 」です。
「Culrs」は左側のメニューからEmotions、Target Audience、Type of productsなど選択でき、そこからさらに細分化された項目での色彩パターンを提示してくれます。いくつか試してみましたので以下からご覧ください。
詳しくは以下
様々なデザインで活用されるグラデーション。その表現方法によっては色に深みが出たり、奥行きがでたりと単色では表現できない感覚を与えてくれますが、今日紹介するのはグラデーションを操るjavascript「Granim.js」です。
この「Granim.js」はjavascriptを利用して特定の色から特定の色までをシームレスに変化させる事が可能です。
詳しくは以下
デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。
このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。
詳しくは以下
クリスマスが間近に迫り、さまざまなクリスマスツールを制作されている方も多いと思います。今回はそんなシーンにとても便利なフリーベクターアイコンセット「Free Christmas Vector Icon Set」を紹介したいと思います。
クリスマスをイメージさせる定番のアイテムを中心に、編集・加工可能なベクタータイプにて収録されています。
詳しくは以下
幾何学模様などパソコン上で制作した素材はどこまでも素材を継ぎ足したりと、利用しやすい加工が自由にできますが、布や紙など素材感のあるテクスチャをシームレスに利用するのは難しいもの。そんな中今回紹介するのが、素材感のあるシームレステクスチャをまとめた「Handy Roundup of Free Seamless & Repeating Textures」です。
Seamless Wooden Hedge Texture | Free resources for designer and developers
木目やレザーなど、質感を楽しめるテクスチャが豊富に紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
スマートフォンサイトではすっかりお馴染みのメニューアイコン、ハンバーガーボタン。最近ではスマートフォンだけではなく、PCサイトもメニューとして利用されているのもよく見ますが、今回紹介するのは、ハンバーガーボタンにアニメーションを簡単に与えることができる、「Tasty CSS-animated hamburgers」です。
こちらはCSSのアニメーションを利用してスムーズにアニメーションするハンバーガーボタンを簡単に実装可能です。
詳しくは以下
デザイン制作時に利用する素材の中でも定番として幅広いシーンで活躍してくれるテクスチャ。種類も非常に豊富でいろいろな表現や使い道があるため、デザイナーにとっては欠かせない素材ではないでしょうか？そんな中今回紹介するのは、擦れた雰囲気を表現できるグランジテクスチャセット「Six Free Grungy Metal Texture」です。
自然に劣化した風合いを活かしたグランジテクスチャがセットになってフリーで配布されています。
詳しくは以下
いままでいくつかオンラインでPDFを生成するWEBサービスを紹介してきましたが、ついにAdobeがオンラインPDF生成サービス「Acrobat.com」を開始しました。Adobe IDを登録すればフリーで利用することが可能です。
Adobe IDは簡単な項目を入力すれば簡単に取得できます。もちろん「Acrobat.com」から取得することが可能です。このサービスはFlash再生が可能となった「Acrobat 9」との連携が計られています。
詳しくは以下
つねに最新のものをチェックしておきたいフリー素材の一つ・アイコン。日々いろいろなタイプのものが発表され続けています。そんな中今回紹介するのは、多彩なフリーベクターアイコンセットまとめ「1000+ Free Vector Icons」です。
[ Free Download ] 40 Monoflat icons collection on Behance
非常に個性的なテーマから定番まで、ベクター形式で作られたアイコンセットが多数紹介されています。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
さまざまな描写表現ができるイラストレーターは、デザイナーにとってなくてはならないもの。その表現の幅も非常に広いため、使いこなせていないと感じている方も多いのではないでしょうか。今回はそんなシーンで参考にしたい、イラストレーターを使ったベクター素材チュートリアル&テクニックまとめ「27 New Vector Illustrator Tutorials to Learn Design & Illustration Techniques」を紹介します。
How to create an engraved illustration effect in Illustrator – Transfuchsian
いろんな種類のチュートリアルやテクニックが紹介されており、どれも試してみたくなるものばかりが揃っています。気になったものをピックアップしましたので下記よりご覧ください。
詳しくは以下
WordPressの魅力の一つにデザインの豊富さがあります。日本ではテーマを配布している所は少なめですが、海外ではクオリティの高いテーマが豊富に公開されています。今回紹介するテーマ配布ブログ「Design Disease 」はクオリティの高いテーマをいくつか配布しています。
いくつか公開されていますが、公開されているテーマの中から気になったテーマをピックアップして紹介したいと思います。
詳しくは以下
iPhone、Androidを中心に、国内でも多くのスマートフォンが登場し、多くの方が利用していて、どんどんと、スマートフォン向けのサービスやアプリケーションも公開されていますが、今回紹介するのはモバイルサービスやアプリの開発者のためのテンプレート集「Illustrator Template Toolbox」。
iPadのGUIからiPhoneのモックデザイン用のテンプレートなどなど、基本的なインターフェースを始め、プレゼン用途まで幅広い素材がまとめられています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
ブラシには非常にさまざまな種類があり、簡単に複雑な描写を描き出せるということもあり、頻繁に利用しているという方も多いのではないでしょうか？そんな中今回紹介するのは、スクリーントーンをブラシで手軽に表現できる「44 Pixel Screentone Brushes」です。
網目状のスクリーントーン描写を、ブラシで手軽に作り出すことができるセットです。
詳しくは以下
![[ Free Download ] 40 Monoflat icons collection on Behance](https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/4e2b4531248465.56485818b7f24.jpg){kind=link}