http://www.graphicdesignsinspiration.com/2014/12/best-free-fonts-for-your-graphic-design-projects-2015/
無料でできる！オリジナルアイコンフォントを作ってみよう | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
みなさんはじめまして！ アートディレクター兼デザイナーの長岡と申します。 社内では、ひろさんと呼ばれています。 入社したばかりですが、どうやらLIGの最年長記録を更新したようです(^^;) 2児の父親として、プライベートでは、子育てに奮闘中なのですが、最近乗り物に興味を持ちだした息子。 電車や車が大好きなようで、テレビに映る度に指をさして「でぇ～んしゃ～♪」とか「ぶぅ～ぶぅ～♪」と叫んでます。 そんな息子の姿を見て、毎日癒されてます(^-^) さて本題に入りますが、スマホサイト・レスポンシブデザイン・Bootstrapなどで度々目にするアイコンフォント。 モバイルファーストを考えながらの制作ですと、表示速度も意識しなければなりませんね～。 フリーのアイコンフォントは、たくさんあれど、「アイコンが多すぎる！」「もっと少なくしたい！」「オリジナルでアイコンを作ったけれども、これをどうにかアイコ
Material Design Iconsをアイコンフォント化しました
少し前のことですが、Googleが（？）GitHubで750ものマテリアルデザインなアイコンを配布したと一部で話題になっていました。 これはかなり緩い利用条件で使うことができます。商用でも非商用でも利用できて、改変とかも可だったはず。クリエイティブ・コモンズのCC BY-SAというもので、複製・再配布・改変OK、適切なクレジットを表示する必要があり、改変した場合は同じライセンスで配布すること、というものです。 それをダウンロードして普通に使ってもいいのですが、今回はAndroidで…というかGlaejaとかZooper Widgetでも使えるようにアイコンフォント化してみました。そのやり方を紹介します。
WEBフォントで簡単に！STINGER3の細かいところにアイコンを入れてみた - 32style
WEBフォントを使って、簡単にアイコン装飾を行う方法をご紹介します。細かいところまでに気をつかえば、サイト全体の印象がグッと良くなりますよ！ サイトのちょっとした装飾に使ったりする「アイコン」ですが、わざわざ画像を作成したり、素材を探してきたりするのは結構大変です。それにアイコン画像のサイズや色をあとで変えたいと思っても、画像自体を作りなおさないといけないので、それはそれで面倒な話になっちゃいます。 でもそんな面倒な話は、「Font Awesome」というWEBフォントを使えば一気に解決します。これを使えば、簡単にアイコンを挿入することができるうえ、WEBフォントなので、あとでサイズを大きくしたり色を変えたりといった作業も、CSSを触るだけで簡単にやれちゃうんです。 ということでわたしも「Font Awesome」を使って、STINGER3を使った当サイトの細かいところにアイコンを入れて装
css3から追加されたremを使ったフォントサイズ | 柴原ホームページ
これまでcssでフォントサイズを指定するときはpxや%を使っていたが、css3から「rem」という新しい単位が使える。 remは「root+em」の省略で、「ルート」である「html」に指定されたフォントサイズを基準にした単位のとこらしい。 これを使うと親要素のフォントサイズの継承なんて気にしないで常にルートのhtmlで指定したサイズを意識すればいいことになり便利である。但し、IEについてはIE9以降しかサポートされていないので、IE8にはこれまでとおりpxで指定しなければならない。 //①ルートであるhtmlに基準となるサイズを指定する html{ font-size:62.5%; } //②rem要素で指定しつつIE対策もする h2{ font-size:1.4rem; font-size:14px; } ルートであるhtmlに基準となるサイズを指定する まずは基準となるサイズだが、「
ハリーポッターシリーズの映画の見る順番はこれで完璧！原作と違うの？
★こちらも注目！ → シングの映画の登場人物（キャラクター）の名前一覧！ ハリーポッター映画シリーズは、魔法の世界を舞台にした冒険物語であり、多くの人々を魅了してきました。その中でも、最終章となる「ハ リーポッターと死の秘宝 Part2」は、感動的なエピローグを描いた作品として、多くのファンから高い評価を受けています。 この映画は、ハリーたちがヴォルデモートとの最終決戦に挑む姿を描いたものであり、シリーズの中でも最も重要な作品の一つです。ハリーた ちは、過去の出来事や自分たちの運命に向き合いながら、勇気と友情を胸に戦いを繰り広げます。 また、この映画は、シリーズの中でも最も感動的なシーンが多く含まれています。ハリーたちの友情や愛情、そして最後には、ハリーたちが成 長していく姿が描かれています。そして、最後には、ハリーたちが自分たちの運命に向き合い、勝利を手にする姿が描かれています。 「ハリ
illustratorで描くシルクのリボンで作ったようなテキスト – creamu
102776852/ iStockphoto/ Thinkstock オリジナルのテキストをデザインしたい。 そんなときに参考になるのが、「Create a Silky Ribbon Text Effect」。illustratorで描くシルクのリボンで作ったようなテキストです。 まず、「Giddyup Std」というフォントで、テキストを打ち、ペンツールでラインをトレースします。塗りを透明にして、0.25pxのカラーの線を指定。 その後、「効果 / 3D / 押し出し・ベベル」で立体感を出し、「オブジェクト / アピアランスを分割」…といった手順で解説されています。 リボンをくるくるっと巻いたときに光と影ができますが、そのグラデーションのかけ方が一文字ずつ詳しく解説されているのがいい感じです。 illustratorのスキルを上げたい方は、一度見てみてください。 Create a Sil
花火で文字をかたどり鮮烈な印象を演出する - MdN Design Interactive
ロゴ／タイポグラフィ／文字レイアウト 文字を主役にするか！ 名脇役として扱うか！ 文字を自由に操る72のデザイン手法 まずは、Photoshopで背景レイヤーを黒で塗りつぶし、横書き文字ツールで文字を入力。この文字に沿ってペンツールでパスを描いていく 1-1 。続いてツールパネルの描画色を白にし、ブラシツールを選択。ここで、ツールオプションバーのブラシプリセットピッカーで［ソフト円ブラシ（27pixel）］を選び、［マスター直径：30pixel］に変更する。さらに新規レイヤーを作成したのち、パスパネルのメニューから“パスの境界線を描く...”を選び、表示されるダイアログの［強さのシミュレート］をチェックして適用した 1-2 。
30 of the Best Web Typography Resources Online
It seems there are two camps among web designers: those who embrace web typography, experiment with it, and try new things in virtually all of their designs; and those who avoid it like the plague, opting to use standard, web-safe font stacks with little variation. It also seems like a lot of the designers who fall into the second group wish they were more like the first. The resources below can h
The New Lens Flare · David DeSandro
White hot glowing text is the new lens flare By abusing the text-shadow property, you can turn any ho-hum bit of text into a magnificent, radiant beacon of allure and awe. But getting your bling-bling on has never been for the cheapskates. Expect to pay a boatload in refresh rates, as your browser buckles under the weight of rendering that glorious halo. Here’s how it was pulled off: #content h2 e
フォントサイズの比率をemや%を一覧で表示する - MdN Design Interactive
作業効率がアップする隠れた使い方教えます！ WEB制作、プロの無料サービス活用術 ──コーディングに使えるツール（2） [technique 09] フォントサイズの比率をemや%を一覧で表示する 文＝ハヤシユタカ（（有）ムーニーワークス） Tool PXtoEM URL http://pxtoem.com/ デザイン作成時において、テキストはpxかptで作成し、コーディング時には%かemが主流になっているが、pxかptでの文字サイズは「PXtoEM」を使用すれば、デフォルトのフォントサイズを決め、その数値からフォントサイズの大小比率をemや%を一覧表で表示してくれる。そのほか「Get CSS」でCSSファイルを参考にしたり、カスタムフィールドで細かい数値の参考値を計算したりしてくれるので、まだ文字の調整に自分のルールを持っていない人にオススメのツールだ。 左のリストからベースにしたい文字
[JS]スタイリッシュなボタンを画像を使用しないで実装するスクリプト -styledButton
Googleで使用されているようなグラデーションのスタイリッシュなボタンを画像を使用しないで実装するスクリプトを紹介します。 jQuery imageless buttons a la Google デモページ サポートしているブラウザも多く、下記の通りです。 Opera 10 beta Opera 9.6x Firefox 3 Firefox 2 Safari 4 Safari 3 Internet Explorer 8 beta Internet Explorer 7 Internet Explorer 6 Chrome Adobe AIR 1.5+ 実装方法は簡単で、スクリプトとスタイルシートを外部ファイルとして記述し、適用するボタンのpaddingやfont-sizeを指定します。 UI的にはあまり浸透していないものもあるので、その際は文言など一工夫が必要かもしれません。 styl
立体感で魅せるクールな文字演出 - MdN Design Interactive
制作・文 ドルバッキーヨウコ［D-design］ URL http://www.dholbachie.com/design/ 使用ソフト Photoshop CS2/CS3 まず、Photoshopの新規ファイルを開き、背景レイヤーを黒で塗りつぶす。次に、新規レイヤーを作成し、横書き文字マスクツールでテキストを入力したら、出来上がった選択範囲内を白で塗りつぶした 1-1 。その後、レイヤーメニュー→“レイヤースタイル”→“ベベルとエンボス...”と“ドロップシャドウ...”を任意の値で実行する 1-2 。 1-1 ▼ 1-2 続いて、選択範囲を保持したまま文字のレイヤーを複製し、選択範囲メニュー→“選択範囲を変更”→“拡張...”を［拡張量：10pixel］として適用 2-1 。レイヤーパネルで背面のほうの文字のレイヤーを選択し、描画色を薄いグレーに変更して、編集メニュー→“塗りつぶし..
Home - 100besteschriften.de
Es gibt etliche Anlässe, die im Nachgang eine Danksagung nach sich ziehen. Da dies meist...
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Glyphter: The SVG Font Machine
Arctext.js - Curving text with CSS3 and jQuery
Creative Web Typography Styles
Grid System Generator (v0.94) | Generate complete css / xhtml grid systems according to your own unique specifications
Photoshopでつくるタイポグラフィのチュートリアル -Part18
宇宙ワンダー | 文部科学省