国産のSVGアイコンサイトが登場！日本人クリエイターが作成した商用無料で利用できるアイコン素材 -Icon Box
海外の素材だとちょっと不安という人でも大丈夫、日本人クリエイターが作成した商用無料で利用できるアイコン素材を紹介します。 アイコンは現在400種類以上あり、高品質で汎用性の高いものが揃っています。SVGも完備されているので、非常に使い勝手がよいと思います。 Icon Box アイコンの利用にあたっては個人でも商用でも無料で、「アイコンの編集もご自由にどうぞ」とのことです。アイコン自体の再配布は禁止です。 詳しくは、ライセンスページをご覧ください。 アイコンのフォーマットは、下記の通り。 透過PNG SVG サイズは、16px, 32px, 64px, 128px, 256pxが用意されています。 ダウンロードも簡単で、登録など面倒なことは一切不要です。各アイコンページの「PNGボタン」「SVGボタン」からダウンロードできます。
【Android デザイン】NINE Patch 画像で表現の幅を広げる
デザイナーの大西です。 Android ユーザーの皆さん、Sleipnir Mobile for Android はお使いいただけていますか？まだの方はぜひお試しくださいね。 Sleipnir Mobile – ウェブブラウザ – Android マーケット 本題ですが、Android 端末は様々な解像度があるので、ボタンなどが拡大されても汚くならないよう、画像素材を引き伸ばし可能な形にする必要があります。 Android OS 用に画像の引き伸ばしを指定したものが NINE Patch 画像です。 NINE Patch 画像の基本的な構造と作り方、応用編を紹介します。 NINE Patch 画像の作成には、Android の SDK で draw9patch というツールが提供されているのでそれを使います。 draw9patch は <Android SDK フォルダ>/tools 内に
ズルいデザインテクニックを生かして作る、汎用性のあるズルいボタンデザイン
さて今回は、ズルいデザインテクニックの集大成ともいえる「ズルいボタン」です。これまでの連載で取り上げた数々のズルいデザインテクニック、「ズルいテキストシャドウ」「ズルいグラデーション」「ズルい角丸」、そして前回解説した「ズルいボックスシャドウ」を用いたズルいボタンの作り方を解説します。 今回のズルいボタンに関しては、以前にズルいデザインテクニックのスライドで紹介したものから大幅に改定を加えて、より汎用性があり、さまざまな場面で使い勝手の良いものに刷新しました。 改良のポイントは次の通りです。 文字サイズの変更、またそれに併せてボタンサイズの変更に対応しています iタグを使ったアイコン用のWebフォントに対応しました。今回はfont-awesomeを使って解説しています フラットデザインの流行に伴うデザイン傾向に合わせ、立体感やグラデーションをより控えめに、かつpaddingを大きめに取った
こんなに簡単！きれいなガラス玉風ボタンを作る方法
今回はグラス風のボールボタン。 やることはスクエア風とほぼ同じ、そんなに難しくない。 これだけ覚えておけば大丈夫。Web2.0風のボタンを作る方法。 Web2.0風の輝くボタン １．レイヤー効果でガラス風にする ガラス風にするには２つの光を考える。 一つは直接ガラスの表面に当たる光。 もう一つはガラスを通って床に反射する光。 この２つの光を入れるとそれっぽくなる。 まずは表面の光。 これはベベル効果を使えば簡単。 次にガラスを通って床に反射する光。 これはガラス玉の下側を光らせるようにすると良い。 ちなみにこの光は「オーバーレイ」を使って表現するときれいなことが多い。 床に届く光というのは光を通す部分が薄いほど多くの光が反射する。 なので厚みの部分のいわゆる玉の縁の部分は光が届きにくいので暗くなる。 それを「光彩-内側」で表現する。 立体感をつけるためにドロップシャドウをつけて出来上がり
【実践編】少しの手間で大きく変わる、細部にこだわったWebデザインを
2013年3月23日 Photoshop 「少しの手間で大きく変わる、細部にこだわったWebデザインを」で紹介した「わずかな」加工を使ってボタンのデザインをかっこよくしよう！というチュートリアル記事です。前回の記事内にPhotoshopでの作成チュートリアルも載せたかったのですが、あまりにも長くなりそうだったので別記事にする事に。合わせて見てみてください！ ↑私が10年以上利用している会計ソフト！
[jQuery]透過PNGに対応したクロスフェードボタン – smoothRollOver.jsロールオーバーすると滑らかに画像が切り替わるライブラリ | レポート | 日本電子工藝社
ロールオーバーすると滑らかに画像が切り替わるライブラリ ボタン・リンクのロールオーバー効果を表現する際、CSSやJavaScriptによる画像の切り替えだけでは物足りない時があります。ロールオーバー時のデザインを活かすため、ボタンにロールオーバーすると滑らかに画像が切り替わるライブラリを作成しました。みなさまのデザイン表現の幅を広げるお手伝いができれば幸いです。（※個人利用・商用利用を問わず自由にご利用いただけますが、自己責任の上でご使用ください。） 動作サンプル このライブラリは、JPEG・GIF・透過PNGに対応しています。 JPEG/GIFの場合 透過PNGの場合 InternetExplorer6～8のPNG対応について InternetExplorerは、バージョン6までは透過PNG自体に対応しておらず、7・8になってもフェードイン表現の際に透過部分がギザギザになってしまう仕様で
Photoshop VIP ☞ ボタンデザイン完全版、ダウンロードしておきたいPhotoshop無料PSD素材60個まとめ
Webデザインにおいてよく利用するデザインパーツのひとつ「ボタン」デザイン。 海外デザインブログWeb and Designersで、これまでに紹介したことのないPhotoshop用無料PSDボタン素材を60個まとめたエントリー「60 Outstanding Free PSD Buttons」が公開されていたので、今回はご紹介します。 多くの素材に色違いや大きさによって複数のボタン素材が収録されているので、ダウンロードしておくと便利かもしれません。 どれもPhotoshop用PSD素材を収録しているので、自由にボタンサイズ、テキストなどの変更も行うことができ便利ですよ。 詳細は以下から。 ダウンロードしておきたいPhotoshop用PSDボタン素材まとめ Follow Buttons 3色の異なる色でデザインされたボタンデザインセット、それぞれ通常時、ホバー時、アクティブ時の3種類ずつ用意
[CSS]シンプルで使いやすいGitHub風のボタンを簡単に実装できるスタイルシート
GitHubスタイルのシンプルで使いやすいボタンをclassの指定だけで簡単に実装できるスタイルシートを紹介します。 CSS3 GitHub Buttons [ad#ad-2] 下記は各ポイントを意訳したものです。 デモページはボタンの文言を日本語にし、シンプルしたものをアップしました。 デモページ（当方日本語化） 普通のボタン 注意を促すボタン 大きいボタン グループ化したボタン グループ化したものをまとめたボタン アイコンを伴ったボタン 対応ブラウザ ライセンス 普通のボタン 普通のボタンは、a要素、button要素、input要素などあらゆる要素で作ることができます。 ボタンを作るためには、「class="button"」を加えるだけです。 デモページ（当方日本語化） <a href="#" class="button">Post comment</a> <input class="
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
