ウェブサイトでよく使用されるホームや検索やショッピングカートなどのアイコンを描くPhotoshopのブラシとシェイプを紹介します。 Web Icons Brushes（Photoshop用のブラシ） Web Icons Shapes（Photoshop用のシェイプ） 素材はブラシとシェイプなので、サイズやカラーなど好みのものに変更して使用することができます。 アイコンの種類は、下記のようになっています。
シンプルなデザインのウェブサイトでよく使用されるアイコンのPhotoshopのフリー素材
ウェブサイトでよく使用されるホームや検索やショッピングカートなどのアイコンを描くPhotoshopのブラシとシェイプを紹介します。 Web Icons Brushes（Photoshop用のブラシ） Web Icons Shapes（Photoshop用のシェイプ） 素材はブラシとシェイプなので、サイズやカラーなど好みのものに変更して使用することができます。 アイコンの種類は、下記のようになっています。
差がつくメニューアイコン 25個のCSSアニメーション (1/2)
随所に使用されているアニメーション 美しい建築写真が、存在感のあるタイポグラフィとともに目に飛び込んでくるサイト「Studio Songes（ステュディオ・ソンジュ：スタジオ夢）」。ダイナミックなページ全体の動きに加えて、ページの右上にある小さなメニューアイコンにもユニークな動きが取り入れられている。 メニューアイコンをマウスホバーすると、≡の3本のラインが整列し、クリックすると1本のラインに変化するギミック。CSSアニメーションを活用したサイトでは、こんな小さなメニューアイコンの動きにまでこだわるサイトが増えている。 今回は「Studio Songes」を参考に、CSSアニメーションを使ったメニューの開閉アイコンを作成する。アニメーション自体は小さな動きだが、メニューの開閉という大きな動作への導線でもある。覚えておくときっと役に立つはずだ。 STEP 1：アイコンの初期状態を作る メニュ
アイコンフォントからSVGへ！より手軽にベクター画像を表示しよう
2014年7月3日 SVG ベクター画像を表示する際とっても便利なSVG。名前を聞いたことのある方も多いのではないでしょうか？SVG自体は10年以上前から存在するのですが、HTML5の普及とともに多くのブラウザーでサポートされるようになり、今年に入ってから徐々に見かける機会が増えてきました。今回はそんなSVGにフォーカスしようと思います。 ↑私が10年以上利用している会計ソフト！ 2014年7月3日 追記：SVGスプライトの書き方について修正＆追記しました。 SVGってなに？ SVG（Scalable Vector Graphics）はIllustratorで作成したようなベクター画像を表示する技術です。Web上で一般的に使われる画像形式であるJPEGやPNGなどのビットマップ形式とは違い、ベクター形式の画像は、拡大縮小しても画質が劣化しません。 Appleがレティナディスプレイを発表して
夏のアイテムをモチーフにしたアイコン・パターン素材のまとめ -2013年夏
ビーチやキャンプ、スイカ、アイス、カクテルなど、夏のアイテムをモチーフにしたアイコンを紹介します。 アイコンは商用利用可のものからデザインサンプルまで、最後には夏をイメージしたパターン素材全62種も！まずは、フラットなアイコン素材から。
カード状のドロップダウン
上記はデモをアニメーションgifにしたもので、初期はアイテムがカード状に重なっており、クリックすると中身がするすると表示されます。 最初にぱかっと開くの面白いですね、各アイテムはホバーでハイライトもします。 実際の動きは、下記ページでご覧ください。 CSS3 Card Deck Drop Down HTML 各アイテムはリスト要素でシンプルな実装です。 <div class="card-drop"> <a class='toggle' href="#"> <i class='icon-suitcase'></i> <span class='label-active'>Everyting</span> </a> <ul> <li class='active'><a data-label="Everyting" href="#"><i class='icon-suitcase'></i> Ev
ビジネスからホビー、楽器や洋服や医療や肉球まで揃ってるピクトグラムのアイコン素材 -1000 Free Icons
ビジネスからホビー、楽器や洋服や医療や肉球まで揃ってるピクトグラムのアイコン素材 -1000 Free Icons
無料で商用利用OKなお買い物アイコン250種類詰め合わせパック「The ultimate free eCommerce icon pack」
円などの単位マークや買い物カート・プレゼントボックス・ディスカウントの印といった定番のお買い物アイコンからインターネット上で買い物を行うeコマースで使えそうなQRコード・スマートフォン・タブレット・ダウンロードのマークなど250種類の商用無料アイコンがセットになっているのが「The ultimate free eCommerce icon pack」です。 The ultimate free eCommerce icon pack by Freepik & WooThemes http://www.woothemes.com/2013/06/freepik-free-ecommerce-icons/ 買いものカートや電卓、ドル・ユーロ・ポンド・円といった単位のマークなど、商品販売サイトなどで利用できそうなアイコン250種類は以下から。 実際にスマートフォン画面にアイコンが表示されるとこんな
商用利用無料、シンプルなデザインの天気のアイコン素材（ベクター） -Simon Lockyer
ソリッド版 素材のフォーマットはベクター2種です。 .ai .eps 利用にあたっては、詳細が書いてなかったのでメールで問い合わせしたところ、個人でも商用でも無料で、寄付をしてくれたら嬉しい、とのことです。 気に入った方はページ下にある寄付から！
無料で1000個以上のアイコンフォントがダウンロードできる「WebHostingHub Glyphs」
「ビジネス」「コミュニケーション」「コンピューター＆モバイル」「デザイン＆ライティング」など14のカテゴリーに分けられたアイコンフォント1000個以上が無料でダウンロードできるのが「WebHostingHub Glyphs」。アイコンはPNG形式、TFF形式の他、ウェブフォントとしても使用可能です。 WebHostingHub Glyphs http://www.webhostinghub.com/glyphs/ ダウンロードは右端の青とオレンジ色のボタンから行います。なお、青色の「DOWNLOAD ALL ICONS IN ONE FONT」からはTTF形式とウェブ用のアイコンフォントをダウンロードでき、オレンジ色のボタンからはPNG形式のアイコンがダウンロード可能。 アイコンフォントは「ビジネス」や「コミュニケーション」など14のカテゴリーに分けられています。以下はビジネスカテゴリーの
白黒ベースのサイトを作りたい時に役立ちそうなWeb素材やWebデザイン例などのまとめ
最近、白黒カラーベースのサイトを 作成したのですが、その際に色々と 参考にしたアイコンやバナーなど のWeb素材やインスピレーション 向上の為のWebデザイン例に なりそうなサイトをまとめておきます。 結局アイコン等は使わなかったんですが、また作る時の備忘録としてメモ＆シェアしたいと思います。ライセンスはそれぞれご確認を。多少重いかもしれません。アイコン、ボタンやバナー、その他の素材、ギャラリーと続きます。 アイコン白黒やグレーのアイコンいろいろ。 40 greyscale icons グレースケールアイコンパック。 40 greyscale icons twotiny 白黒のミニアイコンが沢山。 twotiny 165 vector icons 165のうち、66が白黒のアイコン。 165 vector icons bwpx.icns かなりの数の白抜きミニアイコンが揃っています。 bw
2012年のベストフリーPSD「Best Free UI PSDs of 2012」
サイトを制作する上で、便利な素材PSD。photoshopで扱えるファイルで、細かなカスタマイズも可能で、扱いやすいファイル形式は制作者としてはありがたい形式ですが、今日紹介するのは、2012年に公開されたフリーPSDを集めたエントリー「Best Free UI PSDs of 2012」を紹介したいと思います。 Mini glyphs (12 px) ベーシックなアイコン素材から、ローディング用のプログレスバーなど、制作に利用できそうな様々な素材がまとめられています。今回はその中から特に気になったPSD素材を紹介したいと思います。 詳しくは以下 Circular Progress Bar 立体的で円形のプログレスバー。ローディングを印象的に見せたい時におすすめです。 Free Footer Detailing フッターに利用するTOPに戻るボタンをリアルなリボンで表現したPSD Pric
アイコン関連ブックマーク激増の2012年を振り返って、今年見てきたアイコン系リソース全部紹介！ | バンクーバーのうぇぶ屋
今年はアイコンWEBフォント系のサイトが本当に増えましたねー。知らずの間に僕のブックマーク内のアイコンカテゴリも、もはや収集がつかない勢いで増えている事に気づいて、さぁちょっと個人的に整理が必要だと思いましたので、今日はこれまでも利用／参考にさせてもらってきたアイコンリソースサイトと、今年僕が知ったアイコンWEBフォントを紹介しているサイト交えて、完全にオンリーアイコンネタで今日は記事を書かせて頂ければと思います！ 半分以上は僕の備忘録になりますが、こういったリソース関連は今年も来年もやっぱりできる限り周りのWEB屋同士でも共有させて頂ければと思っています！念のためライセンスは一個一個のアイコンに対して表記してあったりパッケージで表記してあったりまちまちなので、ご自身でご確認頂けますと幸いです！っていうか、まとめ出してちょっと公開したのですが、とんでも無い量になってしまってホントすいません
無料で商用利用可なフリーアイコン素材サイト13選【デザイナー厳選】 | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
こんにちは、デザイナーの花ちゃんです！ Webサイトのデザインをしていると、アイコンを取り入れる場面がよくあると思います。アイコンには文字だけではわかりにくい情報を、ユーザーに対して直感的に素早く伝える効果があります。また、モチーフを簡略化しているので、限られたスペースでもしっかりその機能を果たしてくれます。 今回は、Webサイトはもちろん、図版や資料作成にも欠かせない、無料で使えるアイコン素材サイトをテイスト別にまとめてみました！ 独学でつまずいていませんか？ Illustratorの使い方を効率的に学びたい、誰かに教えてもらいたい……という方は、「スクールでの勉強」もおすすめです。LIGでもWebクリエイター育成スクール「デジタルハリウッドSTUDIO by LIG」を運営しております。「今すぐスクールの概要を知りたい！」という方は、ぜひこちらより資料をご請求ください。 ※この記事は2
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
WEBALYS | Web Designer Freelance - Design Interface Application - France
Web Icon Set - Offers Professionally Designed Web Icons and Stock Icons
apple-touch-iconやbrowserconfig.xmlなどWebサイトのスマホ用アイコン指定の最新情報を調べてみた | 初代編集長ブログ―安田英久
素朴でかわいいイラストが揃ってるシルエットのアイコンフォント -Bariol Icons
個人・商業サイトで利用可のフリーのアイコン集 -Fine Icons | コリス
ミニマルでフラットがかわいい全300種のアイコン素材、PSDもAIもフォントも揃ってます -Metrize Icons
Iconfinder | Download free icons
