アドレスバーやブックマークの左側に表示されるFavicon（こんなの↓ですね）に関する記事がありました。 参考になりそうなきれいなデザインやツール類があったのでご紹介。これからFaviconつくるぞー、という人はよろしければどうぞ（それよりもこのブログのFaviconをなんとかしなくては・・・）。 » Inspire Yourself: 50 Remarkable Favicons | Smashing Magazine 下記に一部をご紹介。 ■ 花びら系デザイン ↑ カラフルですね。 ■ 丸系デザイン ↑ 丸を上手に使ったデザインはWeb2.0ぽい気がします。 ■ 文字系デザイン ↑ Googleの「G」やmixiの「m」もそうですね。はてなはブックマークは「B」、ダイアリーは「D」などと分けているようです。 ■ 模様系デザイン ↑ 凝ってますね。 ■ 四角系デザイン ↑ Appleは四
Web2.0的サイトのグラフィック表現 一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。 時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。 そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。 その昔、
ブラウザ一つで何でも出来る ノンジャンル Internet Archive Google Notebook ToDo・スケジューラ Google Calendar checkpad.jp スタートページ・デスクトップ Googleパーソナライズドホームページ スタートフォース オフィス Microsoft Office Live ThinkFree Online beta メール Gmail Windows Live Mail Webメール2.0β RSSリーダー livedoor Reader はてなRSS Bloglines ニュース Google ニュース CEEK.JP NEWS NewsWatch ブックマーク 2件追加！ はてなブックマーク livedoor クリップ del.icio.us 地図 Google マップ livedoor 地図 検索 Google Yahoo!
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
はてなユーザーならおそらく既に知っている方もいるかもしれませんがhttp://www.bittbox.com/からのまとめ。 bittboxで提供されているフリーのベクトル画像ダウンロードページを11ページ抽出してまとめました。 フォトショップやイラストレータなどの、加工できる段階のベクトル画像と言うあたりがいいですね。 Photoshop CS (1) PNG (1) AI (2) EPS (1) SVG (1) PNG (1) AI (2) EPS (1) SVG (1) PNG (1) AI (2) EPS (1) SVG (1) PNG (1) AI (2) EPS (1) SVG (1) PNG (1) AI (1) EPS (1) SVG (1) PNG (1) AI (1) EPS (1) SVG (1) PNG (1) AI (1) EPS (1) SVG (1) PNG
liquidicity 165 Vector Icons, Now in 5 Colours You seemed to like our original set of 165 vector icons, so we thought you might like them again. 次のような165のフリーなWeb2.0風ベクターアイコンが配布されています。 イラストレーターのベクター形式なので、ちょっと変更したり、色を変えたり拡大したりと自由自在ですね。 サイト作成用の素材によさそうです。 関連エントリ ブログに使えるフリーな超キュートアイコン集「Tiny Little Icons」 12500以上のハイクオリティなアイコンをまとめたサイト「IconArchive」 iPhone風アイコン作成用PhotoShopテンプレート 16x16ピクセルの芸術的favicon集 小さくて可愛
またかよ・・・という方もいらっしゃるかと思いますがｗ、Web 2.0風のロゴジェネレーターをご紹介。いろいろ設定できて便利ですよ。 ↑ 設定項目はこちら。フォントの色、サイズ、星の形などいろいろできます。文字ごとに色も変えられますね。 ↑ この設定で作ってみたのがこちら。 ↑ ちなみに別メニューでボタンジェネレータもありますね。こちらも便利。 似たようなジェネレータは他にもありますが、かなり柔軟に設定できるので個人的にはこれが今のところ一番かも。よろしければどうぞ。 » Web2.0 – Logo Creatr こちらもあわせてどうぞ。 » 簡単に2.0っぽいロゴがつくれるメーカー | i d e a * i d e a
filament group inc. || Styling the Button Element with Sliding Doors Particle Tree recently posted an article describing a technique they've come up with the style the button element. For those who aren't familiar, form buttons are notoriously difficult to customize. CSSでWEB2.0風ボタンを作成するサンプル。 buttonタグで、次のようなWEB2.0風なカッコいいボタンが作れるサンプルが提供されています。 HTMLタグはこんな感じ。 <button value="submit" class="submitBtn"><s
2006-05-05T20:05:06+09:00 Illustrator などを利用してベジェ曲線で書いた絵に Photoshop を利用してつややかな表現を加える方法は何通りもあり、すでにたくさんのノウハウが存在しますが、それなりのものならほんの少しの作業で実現できます。いつも違う方法でやってしまいあとで苦労する事があるので、自分自身の忘記録も兼ねてその Tips をまとめておきたいと思います。Photoshop CS で作成したデータですが、サンプルファイルも用意しているのでもしよろしければダウンロードして使ってみてください。 サンプルファイルをダウンロード(tsuyayaka-sample.psd) サンプルファイルはせっかく角丸の四角形で作成したので、Feed Icon として利用できるように、オレンジで描いたレイヤーと、アンテナ部分を描いたレイヤーも追加してあります。 レイヤー
こ、これはかなり使えます・・・。 が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。 『Web2.0風デザインのためのチュートリアル68選』です。 » Web 2.0 Webdesign-Tutorials | Dr. Web Weblog 以下の7つのカテゴリーにわかれています。 サイトをこれから作るぞー、という人には大いに参考になる素晴らしきチュートリアルかと思います。 ビジュアル効果系（1～11） ロゴ系（12～25） テキスト（26～33）系 バッジ系（34～39） ボタン系（40～46） レイアウト系（47～60） Web2.0まとめ系（61～68） 個人的には1、2、12、13、40、41あたりが好きですね。今後使えそう。 しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ？」
はてな社員はてなダイヤリー かなりWeb2.0風なのがそろっていて好きです。 webデザイナーが作るフリーホームページ素材 商用利用が可能なフリー素材をかなりの量排出しています。 72 Free Vector Glass Buttons and Bars 海外ですが、フリーで使える上、ベクトルデータなので加工がしやすい。 FireworksZone Fireworkのエクステンションで自動でアクア風ボタンを作るアプリケーションのダウンロードサイト。かなりクオリティの高いものができる。 Opus-i.plus アクア風の画像を作るアプリケーションを紹介しているブログ記事 直接サイトを紹介するよりも、作成後の画像があったのでこちらを。 allef.com アクア風のアイコンを作るマニュアル的サイト。 photoshop6、Windows版にて紹介されている。 レイヤースタイルで作る簡単アクア風
Deziner Folio Blog Archive Ultimate Web 2.0 Layer Styles - Free Download Photoshop Layer Styles are the easiest way to speed up the design process. I found that my previous article - Ultimate Web 2.0 Gradients v3.0 was a lot helpful to many.Web2.0風のボタン等がクリック一発で作れるPhotoShop用レイヤースタイル。 サイトの「Download」ボタンでダウンロードし、.ASLファイルをダブルクリックでインストール完了します。 インストールしたら、「ウィンドウ」メニューから「スタイル」を表示します。 すると次のようにインストールされたスタイルが表
説明 昔にInkscapeで作ったフィードアイコン素材です。 特に規約はありませんが、素材ファイルの再配布はご遠慮ください。 商用・非商用問わず、ご自由にお使いください。 中にSVGファイルを同梱しているので、ベクターファイルを編集できるソフトで改変しても構いません。 上のサンプル画像は圧縮していて、ちょっと荒くなっていますが、素材自体はきれいです。 今でも、たまーに個人サイト・企業サイトとかで見ます。 使っていただいてありがとうございます！
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く