デザインを開発するという視点でお伝えするクリエイティブBLOG
写真加工は現在様々なアプリケーションに搭載されており、もはや写真とは切手は切れない関係にありますが、今回紹介するのはWEB上でも動作する写真加工フィルタを生成できるCSSで実現するフィルタジェネレーター「CSSFILTERS.co」です。
このサービスでは、予め登録されたフィルタもしくは、パラメーターを指定して任意の画像にフィルタをかけるとと共に、WEB上で実現するためのコードも出力してくれるというものです。
詳しくは以下
Instagramなどを始め写真共有アプリでは気軽に写真に豊富なフィルタがかけられ多くの方が利用しており、フィルタによって創られた色味や風合いは写真のクオリティを大きく向上させてくれます。今日紹介するのはjavascriptとCSSで写真にフィルタ効果を与えるライブラリ「Philter」です。
パラメーターを調整するだけWEB上で表示された写真にフィルタと同じような効果をかけることが可能です。
詳しくは以下
インスタグラムやスマートフォンアプリで一気に身近になったフォトフィルター。写真に色を乗せたり、色を抜いたり、様々な加工を施して写真の印象を簡単に変えてくれるものですが、今回紹介するのはフォトレタッチソフトを利用したものではなく、CSSで実現するphotoフィルタ「Create a Trendy Retro Photo Effect Purely with CSS」 です。
こちらは現状webkitベースのsafariやChromeしか正しく動きませんが、CSSのみで実現しているため。classを指定するだけで、WEB上の写真にフィルタがかけられるようになります。
詳しくは以下
WEBデザインをよりリッチにそして作り込んでいる感を与えてくれるドロップシャドウ。ドロップシャドウをつける方法は沢山ありますが、様々なブラウザで同じような見せ方をするためには画像を作成したり、背景が複雑な場合は透過PNGをIEでもよみこませるようにして、背景にしたりと色々と面倒です。今日紹介するのはCSSのみでクロスブラウザに対応したドロップシャドウを作るテクニック「Cross-browser drop shadows using pure CSS」を紹介したいと思います。
上記が、各ブラウザでのドロップシャドウの見せ方のサンプルとなります。色の濃さなど細かなところは違うものの、ほぼ同じような見え方でドロップシャドウを実現しています。
詳しくは以下
インターネット上では非常にさまざまな種類の素材が配布されており、中でもテクスチャは非常に重宝される素材の一つ。手軽に素材の質感を表現することができます。そんな中今回紹介するのは、ノイズ感のあるテクスチャ「Dust & Noise Overlay Textures」です。
がさがさとしたアンティークな雰囲気を、このテクスチャを利用することでデザインに取り入れることができます。
詳しくは以下
様々なFlickrセットやコレクションが公開されていますが、今回紹介するのはWEBのユーザーインターフェイスに特化したコレクション「Design Solutions」こちらではWEBページの役割毎にユーザーインターフェイスのセットを作っています。
かなりのセットが用意されていて、404ページ、フォームページ、フッターなどの基本的なページから、コメント、ヘッドライン、カレンダーと言った少し変わったUIまで全部で34セットのユーザーインターフェイスが公開されています。
詳しくは以下
紙ものデザインでも、webデザインでも必ずといっていいほど使用するフォント。デザインに個性を持たせたい時には、フォント自体がデザインされているものを利用すると手軽にクリエイティブな雰囲気を表現することができます。今回はそんなシーンにおすすめのデザインフォント「18 New Free Fonts for Graphic Designers」を紹介したいと思います。
（BUILDING | Free Typeface on Behance）
シンプルなものから、グラフィック要素の強いものまで、18種のフォントがまとめられています。
詳しくは以下
イラストレーターで色々なデザインに使えるブラシですが、ディフォルトでセットされているものだと今一もの足らないそんな人が多いのではないでしょうか？そこで今回紹介する「30 Sketchy-Style Brushes For Illustrator」手書き風のillustratorのブラシセットが無料でダウンロードできます。
収録されているのは上記の30のブラシで、様々な種類のブラシが収録されています。ブラシはイラストレーターCS2のai形式でまとめて配布されています。
詳しくは以下
iOSの大型アップデートがあり、フラットデザインへの大幅なUI変更が話題を呼びました。そしてその波はiPhoneアプリにも及んできています。今回紹介するのはインスピレーションを得ることができる美しいフラットデザインiPhoneアプリ集「23 Flat Design iPhone Apps」です。
Dribbble – Musix App – Albums by Scardi Shek
どれもシンプルで美しい、バランスのとれたUIたち。全部で23ものアプリがまとめられていましたが、その中でも気になったものをピックアップしましたので、下記よりご覧ください。
Photoshopを使うことで、難しいグラフィック表現も可能に。しかしどのように操作したら良いかわからないということも多いのではないでしょうか？そんな時に参考したい、デザイン性の高い表現を手に入れられるPhotoshopチュートリアル「12 Fresh & Creative Photoshop Tutorials」を紹介したいと思います。
Create a Pizza Food Text Effect in Photoshop – Photoshop tutorial | PSDDude
非常に高いクオリティのデザインチュートリアルがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
商業広告のデザインに便利なピクトグラムアイコン。一つの記号でユーザーに対して簡単に説明できるので、様々なところで重宝しますが、今日紹介するのはそんな制作に便利なフリーピクトグラムアイコン集「8 Free Pictogram Icon Libraries and Collections 」です。
Symbol Signs – Free collection – DesignWorkPlan-Creative Commons Attribution 3.0
地図や看板に使えそうなピクトグラムのアイコンが紹介されています。全部で8セットまとめられていますが、いくつか気になるものをピックアップして紹介したいと思います。
詳しくは以下
テクスチャの中でも定番として、非常に便利に利用できるペーパーテクスチャ。そのまま使用するのはもちろん、他の素材と組み合わせたり、ニュアンス的にパーツに素材感を出すために加工したりと、いろいろな使い方ができます。そんなペーパーテクスチャが12種セットになった「12 Paper Textures」を今回は紹介したいと思います。
非常にシンプルで、ベーシックなタイプのペーパーテクスチャがまとめられています。
詳しくは以下
自然の織り成す風景の中でも特に撮影や表現が難しい稲妻は、画像ソフトでの合成が必須な素材。そんな中今回紹介するのが、手軽に稲妻を合成できるPhotoshopブラシをまとめた「A Collection of Free Photoshop Lightning Brushes」です。
Lightning Pack by ~Kida-Ookami on deviantART
光り方やラインの走り方など、テイストの異なるPhotoshopブラシが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。
詳しくは以下
