CSSで簡単に導入できるカスタマイズも可能なSVGバックグランドセット「SVG Backgrounds」
近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。 シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。 詳しくは以下 ベーシックな縞模様から、グラデーションやポリゴングラフィック、3Dチックな立体的な背景まで全部で30種類ものSVGバックグランドが用意されております。すべての背景でパターンのカスタマイズが可能で、指定色を変更したり、模様の濃度やグラデーションの割合を調節したり、テンプレートをそのまま利用するだけでなく、デザインに合わせて調整することができます。これだけ多彩な背景をSVGで利用できるのは嬉しいですね。背景によっては
レトロな3Dマップを手軽に作成できる「Low Poly Art Maker」
さまざまな最新技術や描写表現が進化する現代でも、昔ながらのレトロなデザインは、根強く人気の高いジャンルの一つ。中でもレトロゲームの世界のようなデザイン表現はいろんなシーンで活用されています。今回はそんなレトロな質感の3Dマップを手軽に作成できる「Low Poly Art Maker」を紹介したいと思います。 種類豊富なパーツを組み合わせて、自分だけのオリジナルレトロマップを作り上げることができるアートメーカーです。使い方が分かりやすく紹介されたムービーが公開されていますので、まずは以下よりご覧ください。 ムービーは以下より 用意されたフィールドに、家や道路、看板、木などのパーツを自由に配置。独特のカクカクとした描写の素材は、さらに適度なレトロ感をデザインに与えてくれます。パーツ以外に「water」というレイヤーを使うことで川や池を表現できたり、フィールドや全体のカラーをチェックで変更できた
デザインにインパクトをあたえてくれるフリーのハーフトーンパターン70選「70+ Free Halftone Pattern Texture Resources」
TOP > Design , vector > デザインにインパクトをあたえてくれるフリーのハーフトーンパターン70選「70+ Free Halftone Pattern Texture Resources」 デザインにちょっとしたアクセントを与えてくれるパターン素材。雰囲気を出したいときや、要素を目立たせたいときなど非常に便利です。今回はそんなパターン素材の中でも、王道のハーフトーンパターンをまとめた「70+ Free Halftone Pattern Texture Resources」をご紹介します。 10 Free Detailed Vector Halftone Texture Backgrounds ヴィンテージ風やポップ風、流行の漫画っぽい加工など様々な場面で大活躍のフリーのハーフトーンパターンが、70種類以上もまとめられています。その中からおすすめの素材を3つご紹介
アナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」
Photoshopなどもフォトレタッチツールで写真は撮影後、様々な表情を見せてくれますが、今日紹介するのはアナログ感のある写真を表現するPhotoshopアクション「Anaglyph Photoshop Actions」です。 ただ綺麗にするだけでは無く、あえてアナログフィルムを現像したような版ズレや粒子などを表現したものとなっています。全部で15種類のフィルタがセットとなっており、様々な表情のアナログ感を表現できるようになっています。 詳しくは以下 こうした写真ではデジタル補正全盛の中では余り見ることが無くなってきましたが、あえて表現として取り入れることで、綺麗な写真とはまた違う方向性のクリエイティブができそうです。 配布されているフォーマットはアクションファイルとなっており、Photoshopをお持ちの方であればカンタンに利用することが可能です。 your
ベクターで利用できるグランジテクスチャ「Free Vector Grunge Textures」
制作物に加えることで質感やクオリティを与えてくれるテクスチャ素材。その中でも定番なのがグランジテクスチャ。風合いやアナログ感など制作物のクオリティをグッと引き上げてくれます。今日紹介するのはベクターで利用できるグランジテクスチャ「Free Vector Grunge Textures」です。 このグランジ素材は全部で木製、メタルなどなどのテクスチャがセットになっています。収録されているテクスチャは以下からご覧ください。 詳しくは以下 こちらはサンプル版の配布となり、6つのテクスチャがセットされていますが、フル版は20のテクスチャが収録されているとのことです。かなり細かな表現のため、オーバーレイなどでデザインに被せれば質感を創り上げる事が可能です。いくつかの素材を利用した例は以下。 ベクターで利用できるのは制作側としては便利に使えて良いですね。手軽に使えるグランジ素材を探している方は是非どう
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」
ワイヤーフレームづくりに便利なキット40「40 Free Wireframe Templates for Mobile App, Web and UX Design」 本制作をする前にワイヤーフレームで制作して、UIやUXなどをクライアントと確認するというのはWEB業界では慣習的になっていますが、今回紹介するのは、そんなワイヤーフレームづくりに便利なキットを集めたエントリー「40 Free Wireframe Templates for Mobile App, Web and UX Design」です。 Carbon Material Design eCommerce Wireframe Kit (PSD & Sketch) WEBからiOS、AppleWatchまで様々なタイプのワイヤーフレームが紹介されています。今日はその中から特に気になったワイヤーフレームをピックアップして紹介したい
CSS3 Flexbox UIパターン集「Flexbox Patterns」
CSS3で利用できるようになったFlexbox。WEBアプリやレスポンシブを想定して開発されたものですが、まだまだ現場ではそれほど普及していないのが現状です。今日紹介するのはそんなFlexboxを理解・利用するための様々なUIを簡単に利用できるCSSのFlexbox UIパターン集「Flexbox Patterns」です。 「Flexbox Patterns」は利用しやすくなるようにそれぞれのユーザーインターフェイス毎に、簡単な解説と、CSSとHTMLがセットでコピーできるようになっており、コピー＆ペーストで利用できるようになっています。 詳しくは以下 上記のようにCSSとHTMLがコピーできる形でまとめられているため、技術者でなくてもパーツだけなら簡単に組み込むことが可能です。 現在は実用的なものから、なかなかニッチなものまで全部で10のユーザーインターフェイスが登録されています。シンプ
WEBフローチャートを簡単に制作できる素材キット「Web Layout Flowcharts」
WEBサイトを制作する上で、ワイヤーフレームを書いてWEB全体の構成イメージやユーザーの流れなどを見せた上で実制作に入るという方も多いと思いますが、今回紹介するのはWEBフローチャートを簡単に制作できる素材キット「Web Layout Flowcharts」です。 詳細のワイヤーフレームまでは難しいですが、大枠のサイトの構成、流れなどは把握できるものが簡単に製作できます。 詳しくは以下 実に多くの素材があり、全部で100以上のパーツがセットされています。モーダルウィンドウやリスト、グラフなどよく見るWEBでの構成が網羅されています。 こちらのデータはAi、EPS、SVGで配布されておりせし作者にも嬉しいフォーマットとなっています。ダウンロードにはメールアドレス登録が必要になりますが普段からこういったフロー図を制作している方には心強い素材になりそうです。 Wyre: Web Layout F
フリーのPhotoshopテクスチャを豊富に揃えたwebサイト5選「5 Best Websites Offering Thousands of Free Photoshop Textures」
フリーのPhotoshopテクスチャを豊富に揃えたwebサイト5選「5 Best Websites Offering Thousands of Free Photoshop Textures」 制作時に使用する素材の中で利用頻度の高いテクスチャ。いろいろな種類を探しまわっていると、どうしても時間がかかってしまいます。今回はそんな時に参考にしたい、フリーのPhotoshopテクスチャを豊富に揃えたwebサイト5選「5 Best Websites Offering Thousands of Free Photoshop Textures」を紹介したいと思います。 Free textures – Texturelib 非常にいろんな種類のテクスチャ素材がまとめられたサイトが紹介されており、ぜひブックマークしておきたくなるサイトばかり。 詳しくは以下 TexturePalace – texture
ヴィンテージ調のフリー紙テクスチャを集めた「13 Free Vintage Paper Texture Packs」
TOP > Design > ヴィンテージ調のフリー紙テクスチャを集めた「13 Free Vintage Paper Texture Packs」 紙を素材として利用したテクスチャは、定番の種類の1つ。といっても、いろいろなタイプのものが配布されていますが、今回紹介するのはヴィンテージ調のフリー紙テクスチャを集めた「13 Free Vintage Paper Texture Packs」です。 Raw Paper Texture Pack by cloaks on DeviantArt 主に劣化した紙やクシャっとした質感の紙を素材として使用しテクスチャ化されており、アンティークなデザイン表現に合わせやすそうです。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 Old paper textures by darkdana666 on DeviantAr
アンティークなフレームのビジュアルを手に入れられるモックアップ「Framelicious」
デザインにアンティーク調の雰囲気を演出する際によく使用される額装等のフレーム。素材などを使用することが多いと思いますが、よりリアルな雰囲気を出すためにはいろんな素材と組み合わせたり、加工することが必要となってきます。今回はそんな加工などの必要がない、アンティークなフレームのビジュアルを手に入れられるモックアップ「Framelicious」を紹介したいと思います。 非常にハイクオリティなデザイン性のあるフレームビジュアルが4種ダウンロードできるようになっています。 詳しくは以下 ナチュラルな木目調から、アンティーク感溢れる銅製のものなどが用意されており、花や本などが一緒に棚の上にレイアウトされている状態で完成されているので、このまますぐに使用することができそう。メインのグラフィックとしてはもちろん、デザインイメージの提案などにも利用できそうですね。 サイズは5472×3648pxと高画質。p
魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」
TOP > plugin > 魅力ある動きを可能にしてくれる フリーjQueryプラグイン「14 Free Frontend jQuery Plugins」 webサイトを構築する際に、印象的に、サイトを魅力的に見せてくれるjQueryは非常に便利なツール。よく利用されている方はとても多いのではないでしょうか？今回はそんなjQueryプラグインをフリーで使用できる「14 Free Frontend jQuery Plugins」を紹介したいと思います。 fullPage.js One Page Scroll Site Plugin 14種の、独特な動きを見せるjQueryプラグインが紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 jquery.matchHeight Tests ディスプレイサイズによって可変するボックスレイアウトの
シームレスに使える フリーコンクリートテクスチャ「Free Seamless Concrete Textures For Your Design Project」
シームレスに使える フリーコンクリートテクスチャ「Free Seamless Concrete Textures For Your Design Project」 定番として使用できるテクスチャは、デザインの幅が広がる要素だけにできるだけ多くストックしておきたいもの。今回はそんな定番として取り入れたい、シームレスに使えるフリーコンクリートテクスチャ「Free Seamless Concrete Textures For Your Design Project」を紹介します。 seamless concrete texture by oonerspism on deviantART シンプルな表情で、いろいろなデザインに応用できるタイプのテクスチャとなっています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 (PEBBLESTONE 3) concrete
パターンを探すときに役立つリソース源20「20 Great Resources to Download Free Patterns」
TOP > Design , Photoshop > パターンを探すときに役立つリソース源20「20 Great Resources to Download Free Patterns」 さまざまなデザインの完成度を上げてくれるパターン。上手く利用すればデザインをより作りこんだ形に変えてくれますが、今回紹介するのはパターンを探すときに役立つリソース源を集めたエントリー「20 Great Resources to Download Free Patterns」です。 K10K WEBで使える背景用のパターンから、デザインデータを起こすときに使えるphotoshopパターンまで様々なパターンの配布元が紹介されていました。今回はその中からいくつか気になったサイトをピックアップして紹介したいと思います。 詳しくは以下 ■Brusheezy POPなものからシックなものまで様々なデザインパタ
是非ブックマークしておきたい フリーストックフォトサイトまとめ「Awesome Stock Images for FREE !! Even for Commercial use」
是非ブックマークしておきたい フリーストックフォトサイトまとめ「Awesome Stock Images for FREE !! Even for Commercial use」 デザイン制作をする際によく利用する写真は、自身で撮影したものだけではイメージ素材として足りないことも多く、ストックフォトサイトを活用する場合が多いと思います。今回はそんなストックフォトサイトをまとめた「Awesome Stock Images for FREE !! Even for Commercial use」を紹介したいと思います。 （Free Refe Mobile Photos） 是非ブックマークしておきたい、フリーで利用できるストックフォトサイトがまとめられています。 詳しくは以下 Pixabay – 無料の写真 写真はもちろん、イラストなども取り扱っているストックフォトサイト。フリーワード検索をする
デザイナー必見 50種のフリーフォントまとめ「50 Handpicked Free Fonts for Designers」
TOP > Font > デザイナー必見 50種のフリーフォントまとめ「50 Handpicked Free Fonts for Designers」 デザイナーにとっては制作に欠かせないフォント。実にさまざまな種類のフォントが存在しており、中にはフリーで使用できるものも多く、重宝しているという方も多いのではないでしょうか？そんな中今回紹介するのは、50種のフリーフォントまとめ「50 Handpicked Free Fonts for Designers」です。 Kirvy Font | dafont.com 定番として利用できるものから、個性溢れるタイプまで、いろんなテイストのフォントが紹介されています。 詳しくは以下 Broken Glass Font | dafont.com 割れたガラスをフォントに表現。荒々しい雰囲気を演出したい、フォントに表情を持たせたい時におすすめ。
定番フォントとして知っておきたい サンセリフフォントまとめ「20 Free Sans Serif Fonts Every Designer Should Have」
定番フォントとして知っておきたい サンセリフフォントまとめ「20 Free Sans Serif Fonts Every Designer Should Have」 文字の線の太さが一定で作り出されているサンセリフフォント。シンプルでどんなデザインにもマッチしやすいことから、定番フォントとして活用されています。そんなサンセリフフォントをまとめた「20 Free Sans Serif Fonts Every Designer Should Have」を今回は紹介したいと思います。 （Free Font TeX Gyre Adventor by GUST e-foundry | Font Squirrel） サンセリフフォントの中でも、洗練さやデザイン性を持った種類が豊富にまとめられています。 詳しくは以下 Basic Title Font | dafont.com フォントの名前の通り、ベー
最新のwebデザイン制作に役立つ フラットアイコンセット「47 Fresh and Flat Icon Sets for April 2014」
TOP > Design > 最新のwebデザイン制作に役立つ フラットアイコンセット「47 Fresh and Flat Icon Sets for April 2014」 主流のフラットデザインに合わせて、ダウンロードできる素材にもそれに合ったタイプのものが多数登場しています。そんな中今回紹介するのは、最新のwebデザイン制作に役立つ フラットアイコンセット「47 Fresh and Flat Icon Sets for April 2014」です。 （Happy Creative Easter! Download this free Easter Vector Icon set PSD | Wellgraphic） 定番で使えるものから、ちょっと変わったテーマのものまで、いろいろな種類のアイコンをチェックできるようになっています。 詳しくは以下 Flatty Icon Pac
春らしい雰囲気を表現できるフラワーテクスチャまとめ「Spring Up your Designs with Some Free Flower Textures」
テクスチャの中で、植物をテーマとしたものは比較的定番として使用されており、さまざまな種類がダウンロードできるようになっています。そんな中今回紹介するのは、春らしい雰囲気を表現できるフラワーテクスチャまとめ「Spring Up your Designs with Some Free Flower Textures」です。 （Grungy Mauve Brown Textures Free Download | QTextures – Free Quality Textures） さまざまな表現の花柄テクスチャが紹介されています。気になったものをピックアップしましたので下記よりご覧ください。 詳しくは以下 Far Far Hill: New Freebies Papers Kit – Spring Flowering ロマンティックな印象のフラワーテクスチャ。甘く、可愛らしい雰囲気を演出したい
ハイクオリティなフリーテクスチャを集めた「Free High Quality Texture Packs」
デザインの背景素材の定番でもあるテクスチャはとても種類が豊富なのも魅力の一つ。いろいろなバリエーションのデザインを簡単に作り上げることができます。そんな中今回紹介するのは、ハイクオリティなフリーテクスチャを集めた「Free High Quality Texture Packs」です。 （GOLDEN GLOW – WATERCOLOR STOCK PACK X by AuroraWienhold on deviantART） デザイン性の高いテクスチャセットがたくさんまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。 詳しくは以下 High Quality Wood Texture Pack by youthedesigner on deviantART 木目のテクスチャがセットに。使いやすい素材なので、いろいろ便利に活用できそうです。 Texture P
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
