デザインを開発するという視点でお伝えするクリエイティブBLOG
様々なデザインで活用されるグラデーション。その表現方法によっては色に深みが出たり、奥行きがでたりと単色では表現できない感覚を与えてくれますが、今日紹介するのはグラデーションを操るjavascript「Granim.js」です。
この「Granim.js」はjavascriptを利用して特定の色から特定の色までをシームレスに変化させる事が可能です。
詳しくは以下
WEBGLをjavasuriptで制御するためのライブラリThree.js。ブラウザで3D表現などを行う際には国内でも有名なライブラリですが、今日紹介するのはThree.jsを利用した実験的なサンプルを集めたエントリー「20 Exceptional Three.js Experiments」です。
Many Icons in 3D Using Three.js
全部で20個の実験的なサンプルが公開されていますが、今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
デザインにおいて配色はとても重要な要素であり、かつ難しいものでもあります。単色同士の掛け合わせのみならず、写真にも色は数多く使われており、利用する写真によっても合う色、合わない色があります。今日紹介するのは画像に併せて最適なグラデーション背景を出力できる「Grade.js」です。
このjavascriptはgradient-wrapというclassで指定した要素内の画像に応じて、その配色を読み取り、画像を引き立てるのに最も有効なグラデーション背景を生成してくれるjavascriptとなっています。
詳しくは以下
Instagramなどを始め写真共有アプリでは気軽に写真に豊富なフィルタがかけられ多くの方が利用しており、フィルタによって創られた色味や風合いは写真のクオリティを大きく向上させてくれます。今日紹介するのはjavascriptとCSSで写真にフィルタ効果を与えるライブラリ「Philter」です。
パラメーターを調整するだけWEB上で表示された写真にフィルタと同じような効果をかけることが可能です。
詳しくは以下
WEBサイトでは、もはや定番化したTOPで重要な情報をフラッシュ的に見せるスライドショー。定番化しているだけに注目をそれだけ引くのは至難の業ですが、今日紹介するのはそんなスライドショーの中でも特異な、様々な表情を見せてくれるスライドショー「Multi-Layout Slideshow」です。
こちらのスライダーはサークル、スクエアなどなど、一つの表現では無く、様々なフォーマットを切り替えてスライドできるスライドショーとなっています。
詳しくは以下
WEBサイトでも頻繁に利用されるモーダルウィンドウ。詳しく情報を表示したり、アラート的に利用したり、コンタクトフォームなどで利用したりなど様々な使い方が可能ですが、今回紹介するのはレスポンシブで小気味の良いアニメーションが特徴的なモーダル「IZIMODAL」です。
モーダルウィンドウとしての機能は一般的なものですが、モーダル内のオブジェクトが細かく動作しクオリティが高い印象を与えてくれるモーダルウィンドウです。
詳しくは以下
Photoshopでさまざまなグラフィック表現ができるブラシ。フリーでダウンロードできるものも多数あり、活用されている方も多いのではないでしょうか？そんな中今回紹介するのは、輝く光の動きが表現できるフリーPhotoshopブラシをまとめた「13 Free Photoshop Brush Packs For Complex Fractals」です。
Abstract Brush Pack Vol. 11 – Fractal Photoshop Brushes | BrushLovers.com
暗闇に走る鋭い・柔らかい・幻想的な光表現を簡単に実現できるブラシが紹介されています。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
デザイン制作シーンで欠かせない存在となっているPhotoshopブラシは、さまざまなコンセプトのものが発表されており、実際のデザイン制作に利用している方は多いのではないでしょうか？そんな中から今回は、Photoshopで利用できる鳥のブラシセットをまとめた「30 Cool Bird Brush Sets for Photoshop」を紹介したいと思います。
Bird Brushset by ~paranoidstock on deviantART
さまざまな種類の鳥が表現できるブラシ素材が多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
クリエイティブ系の仕事だと、Macを使って業務をしていると言う方は多いかと思います。クライアントがWindowsで環境の違いで問題がなんてことは最近ではなくなってきたとは思いますが、まだまだあるかと思います。
windowsでの文字化け例Macの手書き説明書(さんより)
環境の違いで起きる問題の一つとして、Macではファイル名の文字コードにUnicodeが使われていて、Windowsとの文字コードに違いから解凍した圧縮ファイルの中身が文字化けしてしまうと言う事象が起きます。今日はそんな問題を解決してくれるツール「MacZip4Win」を紹介したいと思います。
詳しくは以下
WEBデザインにおいて非常に使い勝手が良いアイコンセット。クオリティ、ユーザービリティの向上に一役買ってくれます。今回紹介するのは利用しやすいクリーンなアイコンセットを集めたエントリー「31 Clean and Usable Icon Packs」。
キレイ目で、どんなデザインにでも違和感なく利用できそうなアイコンセットが多々集められています。今日はその中からいくつか気になったものをピックアップして紹介したいと思います。
詳しくは以下
■Simply Professional
丸みを帯びたシンプルでPOPなアイコンセット。
■Retrofukation
少しレトロ感のある、アイコンセット。POPではないけど、違うやわらかい表現がしたい時に。
■Red Little Shoes Icon Set
手書きのアイコンセット。利用出来るシーンは限られていますが、ハマったときはいい世界観を作ってくれそうです。
上記の他にも様々なアイコンセットがまとめられています。アイコンをお探しの方は是非原文もご覧ください。
販売する製品をアピールするためには、魅力的なビジュアル作成が必要。製品自体をそのままサイトなどに掲載するのももちろん良いのですが、より良く見えるように加工を施すことで効果がアップすると思います。今回はそんな時に使用したい、製品背景を簡単に変更できるバックグラウンド変換ツール「Hue」を紹介したいと思います。
ロサンゼルスのデザイナー・Vladimir Kudinov氏によって開発された、選択するだけで登録されているバックグラウンドに簡単に差し替えすることが可能となっています。実際に操作している様子を撮影したムービーが公開されていますので、まずは下記より御覧ください。
ムービーは以下より
フォント・文字・テキストを使ったデザインはとても魅力的で、いろいろな表現方法でデザインがされていますが、今回はテキストに動きを取り入れより印象的なデザインに仕上げることができるエフェクト集「11 Beautiful Text Effects Created With CSS」を紹介したいと思います。
そのままだとデザイン文字といった印象ですが、CSSで動きを加えることにより、もっと魅力が増したデザイン文字に仕上げることができます。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WordPressでWEBマガジンやニュースサイトなどのメディアを作りたいそんな方にピッタリなのが今回紹介するニュースサイトやWEBマガジンで使えるwordpressフリーテーマ集「27 Stunning Yet Free Premium WordPress」です。
Comfy Magazine Style Theme – Live Demo
スタンダードでキレイ目なものが多く汎用性があるテーマが多い気がします。これなら自分のサイトに併せてカスタマイズもしやすそうな気がします。沢山のテーマファイルが公開されていますが、今日はその中からいくつか気になったものを紹介したいと思います。
詳しくは以下
ハロウィーンが間近に迫っていることもり、ハロウィーン関連のデザイン業務を手がけている方もいらっしゃるのではないでしょうか。今回はそんな方におすすめの、手軽にハロウィーンの雰囲気を演出してくれるキュートなアイコンセット「Spooky Halloween: 40 Icons, 4 Styles」を紹介します。
シンプルなデザインで非常に使いやすい、ハロウィーンをモチーフとしたアイコンセット全40種類です。
詳しくは以下
(さらに…)
デザインのクオリティや良し悪しを決めるのに非常に重要な存在であるフォント。フリーで使用できるものも豊富に配布されていますが、数が多いだけにその中から最適なものを探そうと思うととても大変なもの。そんな時に参考にしたい、デザイン性の高い100種のフリーフォントまとめ「The 100 best free fonts」を紹介したいと思います。
100種という豊富な種類のフォントがまとめられており、どれもデザイン性の高いものばかり。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
WEBデザインには欠かせない素材の一つアイコン。多くの問題を解決してくれる、素晴らしい素材です。今日紹介するのは、psdで配布されて、カスタマイズ可能な160のアイコンが収録されたフリーpsdアイコンセット「Tiny Icons」です。
WEB上で必要なアイコンをほぼ網羅してくれており、シンプルなのでかなり使い勝手が良いアイコンセットです。
詳しくは以下
