TOP  >  svg

Tag : svg

2018年05月09日

豪華な花柄が美しいSVGフォント「Flower Bouquet SVG Font」

タイポグラフィ自体にデザイン性を持たせることで、ぱっと華やかなものにしてくれます。今回ご紹介する「Flower Bouquet SVG Font」は、美しい花とともに可変性の高いSVGに対応しているフリーフォントになります。

FlowerBouquet_SVGFont_top

バラやパンジーなどの色鮮やかで華やかな雰囲気が特徴。デザインを彩り鮮やかに演出してくれます。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:09  |  
Category: Design , Font   
このエントリーをはてなブックマークに追加
2018年02月17日

CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」

Webサイト内でよく見かけるアイコンですが、みなさんはどのように制作しているでしょうか。IllustratorやPhotoshopを使い、JPEGやPNG形式で保存している方も多いかと思いますが、今回紹介するのは、CSSとSVGで作るアイコンセット「Let’s make multi-colored icons」です。

SVG_CSS_icon02

SVGのメリットを活用したアイコンの生成方法が分かりやすく解説されています。

詳しくは以下

(続きを読む…)

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

CSSで簡単に導入できるカスタマイズも可能なSVGバックグランドセット「SVG Backgrounds」

近年Webデザインに導入する機会が増えてきた「SVG」。拡大や縮小が容易にできる為、レスポンシブ性が求められるWebデザインに適応するフォーマットとして注目を集めています。今回ご紹介するのはそんなSVGを利用した背景を容易に生成できる「SVG Backgrounds」です。

svg-backgrounds1

シームレスで拡大と縮小に適応したSVGバックグランドをCSSコードで入手することができます。

詳しくは以下
(続きを読む…)

続きを読む
このエントリーをはてなブックマークに追加
2018年01月02日

商用利用も可能 カラーチェンジができるSVGアニメーションを配布するサイト「unDraw」

webサイト制作にいまやなくてはならない存在になっているSVGアニメーション。デザインする際に活用されている方も多いかと思います。今回はそんな方におすすめのSVGアニメーションを配布するサイト「unDraw」を紹介したいと思います。

undraw1

既存のイラストをベースに好きな色にカラーチェンジができる、嬉しい機能が搭載されたイラストサイトとなっています。

詳しくは以下

(続きを読む…)

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

ハロウィーンに合わせて使いたいキュートなアイコンセット「Spooky Halloween: 40 Icons, 4 Styles」

ハロウィーンが間近に迫っていることもり、ハロウィーン関連のデザイン業務を手がけている方もいらっしゃるのではないでしょうか。今回はそんな方におすすめの、手軽にハロウィーンの雰囲気を演出してくれるキュートなアイコンセット「Spooky Halloween: 40 Icons, 4 Styles」を紹介します。

spooky-halloween-40-icons1

シンプルなデザインで非常に使いやすい、ハロウィーンをモチーフとしたアイコンセット全40種類です。

詳しくは以下
(続きを読む…)

続きを読む
posted 06:21  |  
Category: vector   
このエントリーをはてなブックマークに追加
2017年08月30日

便利で優秀なSVGツールとアイコンセットのまとめ「40 Excellent SVG Tools and Dozens of Icon Sets」

レスポンシブが盛んな昨今。PCとスマートフォン両方で使用することができ、かつ綺麗に表示させることが可能なSVGファイルは、非常に便利。今回ご紹介する「40 Excellent SVG Tools and Dozens of Icon Sets」ではSVGに焦点をあてた便利なツールがまとめられています。

svg_top
Plain Pattern

SVGファイルを編集してアニメーションを制作できるツールなどこれから必要になるコンテンツが多数収録されており、その中から気になったものをいくつかピックアップしていますので下記よりご覧下さい。

詳しくは以下

(続きを読む…)

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

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

2009年05月04日

JQueryで作る機能拡張したテーブルのまとめ「10 Best jQuery Plugins for working with Tables」

レイアウトではあまり使わなくなってきましたが、データの一覧などを見せる時の表作りには非常に力を発揮してくれるテーブルですが、今日紹介するのはそんなテーブルにJQueryを使って機能拡張したテーブルを集めたエントリー「10 Best jQuery Plugins for working with Tables」を紹介したいと思います。

jquerytable01
TableSorter

ソート可能なテーブルやツリー式のテーブルまで様々なテーブルを使ったサンプルが紹介されています。今日はその中からいくつか気になった物を紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:53  |  
Category: WebDesign   
2011年07月18日

グラフィティアートをイメージさせるフォント集「50 Awesome Graffiti Fonts」

街などで見かけることグラフィティアートは、独自のフォントを使ったデザインが特徴です。そんな中今回は、グラフィティアートをイメージさせるフォント集「50 Awesome Graffiti Fonts」を紹介したいと思います。


MY TURTLE font by Billy Argel – FontSpace

シンプルなフォントとは対照的に、使用するだけで個性を演出できるデザインフォントが多数紹介されています。中でも気になったものをピックアップしてみましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 04:36  |  
Category: Design , Font   
2017年09月13日

Photoshopで作るWebデザインチュートリアル集「35 High Quality Photoshop Web Design Tutorials」

デザイナーにとって必要なスキルは幾つかありますが、中でもPhotoshopの操作は必須。今回はそんなPhotoshopでのWEB制作のチュートリアルがまとめられた「35 High Quality Photoshop Web Design Tutorials」を紹介したいと思います。

tutorial01
How to Make a Light and Sleek Web Layout in Photoshop

基本的な枠組みから手の込んだサイトまで、35種類のチュートリアルが集約されています。

詳しくは以下

(続きを読む…)

続きを読む
2015年09月14日

世界地図をカスタムしてデータとしてダウンロードできる「Pixel Map Generator」

デザインの仕事でマップデータを使用することは意外に多く、素材として作成するのに一苦労されたという経験のある方も多いのではないでしょうか?今回はそんな時に便利な、世界地図をカスタムしてデータとしてダウンロードできる「Pixel Map Generator」を紹介したいと思います。

mapgene

塗りや線、スタンプなど、要素も自分が好きなように追加をすることができる、カスタムエリアの範囲が広い嬉しいジェネレーターとなっています。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:41  |  
Category: Design   
2012年11月27日

レトロな質感を表現できるペーパーテクスチャまとめ「23 Free High Quality Old Paper Photoshop Textures」

古い紙の質感をデザインソフトで再現するのは難しく、試行錯誤しているという方もいらっしゃるのではないでしょうか?そこで今回紹介するのが、レトロな質感を表現できるペーパーテクスチャまとめ「23 Free High Quality Old Paper Photoshop Textures」です。


Old Paper Photoshop Brush Set by ~gojol23 on deviantART

古い洋書の一ページから、グランジ感のあるペーパーまで、さまざまなテクスチャが紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 11:56  |  
Category: Design   
2015年01月30日

バレンタインデザインに利用したいフリーベクター素材まとめ「15 Free Valentine Vectors You’re Gonna Love」

もうすぐバレンタインデー。デザインでバレンタインテイストの制作を手がけているという方もいらっしゃるのではないでしょうか?今回はそんな方におすすめ、バレンタインデザインに利用したいフリーベクター素材まとめ「15 Free Valentine Vectors You’re Gonna Love」を紹介したいと思います。

valen1
Free Vectors: Happy Valentine's Day vector illustration

ハートや花柄といった可愛らしいモチーフのベクター素材がまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:19  |  
Category: Design   
2012年07月25日

繊細なデザインに最適な細い線のフォント「30 Excellent Thin Fonts for Free」

フォントにはさまざまな形が存在しており、デザインに合わせて最適なものを選ぶことがとても重要になっています。そんな中今回紹介するのは、繊細なデザインに最適な細い線のフォント「30 Excellent Thin Fonts for Free」です。


OPTICAL FIBER font by weknow – FontSpace

細いラインをベースにしたフォントが、個性的なものからシンプルなものまで、多數紹介されています。気になったものをまとめましたので、以下よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 12:58  |  
Category: Design , Font   
2014年07月04日

さまざまなデザインに応用できる 美しいスクリプトフォントまとめ「10 Free Script Fonts to Download」

欧文の筆記体フォントとしてさまざまな種類が展開されているスクリプトフォント。洗練されたテイストだけにとどまらず、いろんなデザインに応用することができます。今回はそんなスクリプトフォントをまとめた「10 Free Script Fonts to Download」を紹介したいと思います。

font140704_1
Braxton free font | Fontfabric™

表情の美しさが感じられるスクリプトフォントが10種類紹介されています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 10:00  |  
Category: Font   
2011年05月09日

高解像度のマーブルの模様の石テクスチャまとめ「30 Free High Quality Marble Textures」

デザインの現場では毎回さまざまなテクスチャを利用すると思いますが、それぞれのデザインにぴったりのテクスチャを探し出すというのは、なかなか時間のかかる作業ではないでしょうか?そんなとき役に立つのが、テクスチャを分類ごとにまとめて紹介してくれているサイトです。今回紹介するのは、マーブルの模様の石テクスチャをまとめた「30 Free High Quality Marble Textures」です。


Marble Texture

はっきりした柄のテクスチャから、淡い優しいテイストのテクスチャまで、さまざまなテクスチャが多数紹介されています。中でも気になったものをいくつかピックアップしましたので、下記よりご覧ください。

詳しくは以下

(続きを読む…)

続きを読む
posted 09:09  |  
Category: Design   
2009年11月23日

jQueryで実現するナビゲーションテクニック「15 Excellent jQuery Navigation Techniques and Solutions」

様々なエフェクトを可能にしてくれるjQuery。その用途は幅広く、様々なシーンで使われていますが、今回紹介するのはjQueryで実現するナビゲーションテクニック「15 Excellent jQuery Navigation Techniques and Solutions」です。

jquery_navigation_8
Create Vimeo-like top navigation

タブメニューからツリー表示、などなどなかなかHTML+CSSだけではできないアニメーションや仕組みを使ったナビゲーションのテクニックが紹介あれています。今日はその中から幾つ描きになったものを紹介したいと思います。

詳しくは以下

(続きを読む…)

続きを読む
posted 02:26  |  
Category: WebDesign   

Sponsor

このブログを購読する

facebook
twitter
rss

Designdevelopについて

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

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

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

関連サイト

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