デザインを開発するという視点でお伝えするクリエイティブBLOG
どんどんと新しい素材が配布され続けており、常にチェックされている方も多いのではないでしょうか？そんな中今回紹介するのは、デザイン性の高いフリー素材集「Freebies & Goodies For Web Designers」です。
Free Perspective Website Mockup | ZippyPixels
アイコンからUI・モックアップまで、いろいろなタイプの素材がまとめられています。気に入ったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
サイトを設計する際に必要なワイヤーフレームの制作。これを行っておくことで、web制作のクオリティやスピードを高めることができるため、できるだけ精度の高いものを作っておきたいもの。今回そんなワイヤーフレーム制作・スケッチの参考に便利な「23 Beautiful Wireframe Sketches for Web Designers」を紹介したいと思います。
Movies app wireframe on Behance
どのワイヤーフレームも、そのままwebレイアウトのベースとして使えそうなほど、ハイクオリティなものばかりが揃っています。
詳しくは以下
背景素材として活用できるテクスチャ素材。種類を豊富にストックしておけば、デザインの幅も広がるもの。今回はそんなストックコレクションに加えたい、活用頻度の高そうなテクスチャを集めた「14 Free Quality Texture Packs For Your Next Project」を紹介したいと思います。
5 Noise N Grunge Textures | AlienValley
いろいろなテーマのテクスチャセットが厳選されまとめられています。気になったものをピックアップしましたので、下記より御覧ください。
詳しくは以下
Photoshopに搭載されている便利な機能、ブラシ。ひとはけでいろいろなグラフィック演出ができ、重宝されている方も多いのではないでしょうか？そんな中今回紹介するのは、写真にニュアンス感のある演出が可能なフリーPhotoshopブラシ「20 Essential Free Photoshop Brushes For Web and Graphic Designers」です。
12 Strings And Bubbles Brushes #487 | BrushKing ♛
いろいろな種類のブラシがまとめられており、どれも魅力的なものばかり。気になったものをピックアップしましたので下記より御覧ください
詳しくは以下
もうすぐクリスマス。クリスマスをイメージさせるデザインツールやアイテムを取り入れることでもっと盛り上がる一日になるはず。今回はそんな時に活用したい、xmasデザインに活用したいフリー素材まとめ「Free Christmas Design Resources」を紹介したいと思います。
Here comes santa, card Vector | Free Download
クリスマスをテーマにした可愛らしいテイストを中心としたデザインフリー素材がピックアップされまとめられています。
詳しくは以下
webデザインを手がける際によく素材として利用するアイコンは、小さな存在ながらもそれ1つで大きな意味を集約し、ユーザーに分かりやすいように伝えてくれる重要な要素として活用されています。そんな中今回紹介するのは、アナログテイストなデザインに最適なアイコンセット「Ultimate Collection of Free Hand Drawn Icons:27 Excellent Sets」です。
ラフなタッチがデザインに表情を添えてくれる、さまざまなテイストのアイコンが収録されています。気になったものをいくつかピックアップしてみましたので、下記よりご覧ください。
詳しくは以下
シンプルなデザインが好まれることも増え、他サイトとの差別化の難しさを感じることもあるのではないでしょうか？そこで今回紹介するのが、シンプルな中でも色の使い方によって、印象的に見えるwebサイトを集めた「Minimal and Contrasty Color Schemes in Web Design」です。
差し色としてビビットなカラーを利用したサイトから、2色を効果的に利用したサイトまで、印象的なサイトが多数紹介されています。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
海外の伝統的な文字を美しく見せる手法カリグラフィ。日本の筆文字と同じく、デジタル化された文字でも多く見られる手法ですが、今日紹介するのは高品質なフリーカリグラフィフォントをまとめたエントリー「25 High-Quality Calligraphy Fonts」を紹介したいと思います。
カリグラフィと一言で言っても、様々なテイストのものが紹介されています。今日はその中から特に気になったフォントをピックアップして紹介したいと思います。
詳しくは以下
たくさんのフリーフォントが常に発信され続けており、どんどんと新しいデザインも登場してきています。そんな中今回は、デザイン性も高く、魅力的なフリーフォントが豊富に揃った「fontbundles / Premium Free Fonts」を紹介したいと思います。
さまざまな種類のフォントの配布をおこなっている「fontbundles」内にて、フリーでダウンロードできるフォントがピックアップされています。
詳しくは以下
画像加工ソフトとして有名なPhotoshop。写真の上から異なるテクスチャを被せたり一部を切り抜いて合成してみたり、色々な加工を施すことができます。今回はそんな時に是非使いたいPhotoshopのテクスチャセットをまとめた「10 Free Photoshop Textures You Can’t Live Without」を紹介したいと思います。
30+ Free High Quality Peeling Paint Textures – Designbeep
特徴のあるテクスチャが種類豊富にまとめられています。中でも気になったものをピックアップしたので下記よりご覧ください。
詳しくは以下
なにかと便利に活躍してくれるpsd素材。フリーでも多彩な種類の素材が配布されています。今回はそんないろいろな種類を厳選してまとめたフリーpsd素材集「Free PSD Files for Designers」を紹介したいと思います。
Dribbble – Free Music Player PSD With Album Light/Dark – Free PSD by Ses Vasile Daniel
さまざまなデザインシーンで利用できるpsd素材がまとめられており、是非ストックしておきたくなるものばかりが揃っています。気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
インターネット上で配布されているさまざまなバックグランドを使い、ブログやマイページの背景をカスタマイズして個性を演出している方もいらっしゃるかと思います。そんな中今回紹介するのは、白と黒にスポットをあてたバックグランド素材集「70 Useful Black And White Backgrounds」です。
（Raindrops Wallpaper by ~richardxthripp on deviantART）
モノクロの色味でありながらも、それぞれに個性や特徴をしっかりと感じることができるバックグラウンドまとめです。中でも気になったものをピックアップしましたので、下記よりご覧ください。
詳しくは以下
いろいろなデザインシーンで便利に活用できるベクターのシルエット素材。さまざまな種類をストックしておくといざという時に活躍してくれます。そんな中今回紹介するのは、600種の豊富なベクターシルエット素材「Free download: 600+ free vector silhouettes」です。
人間はもちろん、動物、乗り物など、種類豊富にさまざまなポーズのベクターシルエットがセットでダウンロードできるようになっています。
詳しくは以下
WordPressのロゴを光らせるチュートリアル「Creating A Lens Flare」を実際に試してみました。ネタ元は英語だったので手順を実際に試した結果をお見せしながら日本語で紹介したいと思います。
photoshopで新規カンバスを作ることから始まります。サイズはW1600×H800pxが好ましいとしています。そして新しく出来上がったカンパスを黒く塗りつぶします。
作ったカンバスのセンターにロゴマークを配置します。ロゴは小さすぎても大きすぎてもダメで、大体下記の画像ぐらいの割合でロゴを配置します。
まずロゴをコピーしてレイヤーを重ねます。さらに片方のロゴは背景の黒と統合してください。そして統合している方のロゴにフィルタのレンズフレア105mm Primeを70-100％の間でかけます。
レンズのフィルタをかけたレイヤーをコピーして、透明モードをカラーに設定。光らせた色でレイヤーをすべて塗りつぶします。「D」が飽いているから微妙な感じになってしまいましたが、こうする事で下記のように色を入れて光らせる事ができます。
大元のロゴをコピーして、明るさを調整後ぼかしをかけます。チュートリアルでは30pxでかけています。その後ぼかしをかけたロゴの透明モードをハードライトへ
先ほどぼかしをかけたロゴを複製透明モードをオーバーレイへこれでロゴの周りが光ったようになるはずです。
チュートリアルにはさらに続きがあり、もっとアーティスティックにする方法が書かれていますが今回は割愛したいと思います。詳しくは「Great Design: Creating A Lens Flare With The WordPress Logo- Photoshop」をご覧下さい。ちなみに最後までやり遂げると一番上の画像のようになります。
普通ではつまらないと思い「DesigDevelop」のロゴでも試みたのですが、同じ方法をとってみましたが、下記のようになり、残念な結果になりました。
ロゴによりけりなチュートリアルなので試すならWordPressもしくはそれらしいロゴで試した方が良いかと思います。
Great Design: Creating A Lens Flare With The WordPress Logo- Photoshop
ページの右端がめくれかかっていて、マウスオーバーするとページに隠されていたメッセージなり、コンテンツが出てくる手法がたまに見かけますが、今日はそういった手法を実装できる方法をまとめたエントリー「5 Extremely Simple Ways To Add Page Curl To Your Website」を紹介したいと思います。
simple-page-peel-effect-with-jquery-css
全部で5つの方法が紹介されていましたので、それぞれ紹介したいと思います。
詳しくは以下
