TOP  >  Canvas

Tag : Canvas

2011年11月06日

HTML5でコーディングするときに役立つ10のオンラインツール

最近ではすっかりおなじみになりつつあるHTML5。ブラウザの問題もあり、まだ広くは利用されていませんが、徐々にその範囲を拡大しつつあります。今日紹介するのはHTML5でコーディングするときに役立つ10のオンラインツールをまとめたエントリー「10 online tools to simplify HTML5 coding」です。


Initializr

様々なHTML5コーディングに役立つWEBサービス、チートシートなどが集められていますが、今日はその中から幾つか気になったものをピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:30  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加
2011年10月10日

HTML5とJSで動画に画像をWEB上で合成する「HTML5 Glasses!」

HTML5とJSの組合せでWEB上でできるとこは格段に広がり、様々な実験的なコンテンツが世界では展開されていますが、今日紹介するのはアイデア次第で面白いプロモーションに使えそうなHTML5とJSで動画に画像をWEB上で合成する「JavaScript Face Detection + Canvas + Video = HTML5 Glasses!」です。

こちらはHTML5で再生されているビデオにCanvasを利用して、ビデオに追従するエレメントを表示させるというものです。
実際どんなものか動画が公開されていましたので、下記からご覧ください。

動画は以下から

ユーザーが撮影した動画に対してなにかを合成したり、動画コンテンツに合成する絵を分けてコンテンツを変化させたり、様々な事ができそうな技術だと思います。

Library」にソースコードや実装方法などが公開されています。気になる方は是非チャレンジを。

続きを読む
posted 09:00  |  
Category: WebDesign   
このエントリーをはてなブックマークに追加

過去の記事からランダムで表示

2012年02月01日

デザインの表現力が上がる チェックパターン素材セット「800+ Free Intricate Plaid Patterns to Enhance your Designs」

数種類の色が組合わさって成り立っているチェック柄だからこそ、自分の思っていた色使いのチェックがなかなか無かったり、デザインに合った配色のチェックを探し出すのは一苦労。そんな時に役立つチェックパターンのみを集めた「800+ Free Intricate Plaid Patterns to Enhance your Designs」をご紹介します。


Colorburned | 25 Woven Plaid Swatches

明るい柄から落ち着いた柄まで、その数800点。きっと欲しいパターンが見つかるでしょう。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:13  |  
Category: Design   
2011年04月19日

もっとも有名な世界のフォントのエントリーまとめ20選「20 Most Famous Fonts (And How to Get Them)」

デザインする際に重要になってくるフォントですが、その選び方でデザインの印象はガラリと変わります。日々数多くのフリーフォントが公開・制作され利用されていますが、今日紹介するのは、もっとも有名な世界のフォントまとめと、そのダウンロードの仕方のエントリー「20 Most Famous Fonts (And How to Get Them)」です。

王道のフォントや大手企業のフォントなど、参考になる様々なフォントが紹介されています。中でも気になったものをピックアップ致しましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:34  |  
Category: Design , Font   
2008年12月09日

商用可!ボール紙のテクスチャ素材パック「Cardboard Textures and Objects: High Resolution Pack」

今までDesigndevelopでは様々なテクスチャをとりあげてきましたが、今回紹介するのは2896×1944ピクセルという高解像度の段ボールのテクスチャ素材集「Cardboard Textures and Objects: High Resolution Pack」です。

タイトルの通り、20種類のボール紙のテクスチャが収録されています。収録されているテクスチャはFlickrにてアップロードされていましたので、下記にスライドショーを貼り付けておきます。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:03  |  
Category: Design , Photoshop   
2008年08月25日

グラフィカルな表現には欠かせない30のグランジフォント「30 New (Free) Grunge Fonts」

グラフィックに質感を持たすために、一つの選択肢として使えるのが、グランジフォント。汚れたような、味のある風合いが、デザインに深みを与えてくれたりします。今日紹介する「30 New (Free) Grunge Fonts」はそんなグランジフォントを30個まとめたエントリーです。

いくつか紹介されていますが、今日はその中から特に気になった物をいくつかピックアップして紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 06:56  |  
Category: Design , Font   
tag: 
2008年07月10日

オンラインバナージェネレーター「Make Free Banners」

WEBを制作している人だとなじみの深いバナー。WEBを巡回していると様々なWEBサイトで設置されており良く見かけますが、今日紹介するのはそんなバナーを簡単にオンライン上で制作できるのWEBサービスが今回紹介する「Make Free Banners」です。

ドロップ&ドラッグで簡単にオリジナルのバナーを作ることができます。カスタムは文字のサイズの色とクリップアートが使えるだけなので、クオリティの高い物を作るのは大変ですが、さっと作りたい時には便利なWEBサービスです。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:06  |  
Category: WebDesign   
2009年08月18日

クオリティの高いボタンやバッジを作る為のphotoshopチュートリアル「30 Useful Photoshop Buttons and Badges Tutorials 」

WEBページでもよく利用するボタンやバッジ。細かな所ですが、そういった所のレベルを上げる事でサイト全体のクオリティも上げる事ができます。今日紹介するのはクオリティの高いボタンやバッジを作る為のphotoshopチュートリアル「30 Useful Photoshop Buttons and Badges Tutorials 」です。

psbutton01
Slick and Clean Button in Photoshop

立体的なものから、クリアなものグラデーションで質感を表現したものまで様々なボタンが用意されています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:49  |  
Category: Design , Photoshop   
2015年08月16日

webサイトデザインの設計・デザイン・参考として活用できる「Free PSD Website Templates for Web Designers and Developers」

webサイトを一からデザイン・設計するのはなかなか大変なもの。さらにそこから、トレンドを押さえたクオリティの高いものが求められる場合、時間もデザインセンス・技術も必要になってきます。今回はそんなシーンで活用したい、webサイトデザインの設計・デザイン・参考として活用できる「Free PSD Website Templates for Web Designers and Developers」を紹介したいと思います。

template00
Freebie PSD: Perth – A Free Flat Web Design.

デザイン性にすぐれたpsd形式のテンプレートがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Design   
2008年08月09日

ディテールまでこだわって背景画像が作れるジェネレーター「Tiled backgrounds designer」

WEBデザインの演出として、便利なのが、背景素材。背景素材を効果的に使うことでサイトの世界観が生み出せます。今日紹介するのはそんなWEBで使う背景を簡単にしかも細かいところまでこだわって生成できる背景画像ジェネレーター「Tiled backgrounds designer」です。

色や、背景のパターンはもちろんのこと、画像の素材感や背景パターンの角度まで選択することができます。自分自身でphotoshopなどで作らずとも、かなりこだわって背景画像を作ることができるかと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 08:27  |  
Category: WebDesign , WebService   
2014年09月11日

シームレスに利用できるアスファルトテクスチャ「Most Useful Collection Of Free Seamless Asphalt Textures」

シームレスに継ぎ目なく使用できるテクスチャは、非常に便利で重宝する素材。今回はそんなシームレスに利用できるアスファルトテクスチャ「Most Useful Collection Of Free Seamless Asphalt Textures」を紹介したいと思います。

asp1
[GH Free Texture Library]: (ASPHALT 1) seamless tarmac road tar texture

いろいろなデザインに活用できそうなアスファルトをテーマにしたテクスチャがまとめられています。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:11  |  
Category: Design   
2010年07月15日

WEBデザイナーのためのワイヤーフレームスケッチテンプレート集「Printable Web Browser Sketching and Wireframe Templates」

制作の手順や方法は人によって様々で、一概には決まっていませんが、ソフトウェアで制作を始める前にラフを書き、イメージを固めてという手順を踏むという方も多いかと思います。今日紹介するのはWEBデザイナーのためのワイヤーフレームスケッチテンプレート集「Printable Web Browser Sketching and Wireframe Templates」です。


Web Design Sketchbook

ブラウザのウィンドウが最初から描かれていて、グリッドが引いてあるなど、WEB制作において、ワイヤーフレームが書いていきやすい工夫されたテンプレートが多々公開されています。今日はその中からいくつか気になったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:56  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

デザインを開発するという視点からデザイン、WEBデザインに役立つ情報をお伝えします。

ご意見、ご感想、連絡事項があればFacebookページよりお願いたします。

※当サイトのに掲載されている一部画像、スクリ-ンショットに文章に置いては第三十二条で定められる引用の範囲で使用していますが、万が一問題があればFacebookページからご連絡ください。即刻削除いたします。
※本ブログの「プライバシーポリシー」です。

関連サイト

Designdevelopの姉妹ブログ、毎日のインスピレーションに!をコンセプトに、グラフィックデザインからプロダクトデザインまでクリエイティブをテーマに取り上げていくブログ「DesignWorks」を運営中。
VR・ウェアラブル・センシングなど様々な技術が一般化され、手に届く範囲で製品化が進んでいます。VR MEDIAは拡張する現実から未来を探るBLOGです。
Template deisgn by iDEACLOUD inc.
トップに戻る