Web 2.0な星形バッジを5分で作る：すぐに使える画像テク - builder by ZDNet Japan
開発チームにわざわざデザイナーを入れるまでもない案件では、ある程度のデザイン設計も開発者の仕事になりがち…… 何も凝らずにぱぱっと終わらせてしまえば良いのだけれど、せっかくだからちょっとしたデザインワークも入れたいもの。 とはいえそちらに時間をとられていては本末転倒だ。実は、PhotoshopやIllustratorのちょっとした機能を知っていれば、最近ハヤリのビジュアルアイテムを簡単に作れてしまう。この連載では、グラフィックのプロフェッショナルじゃなくても簡単に実行できる、お手軽テクニックをご紹介しよう。 今回制作するのは、巷でよくみかける星形のバッジをイメージしたグラフィック。ニュースコンテンツをちょっと強調したり、画面に適度なインパクトを与えることができる便利なアイテムだ。画面の主役として使用するには食傷気味かもしれないけど、ちょっとしたアクセントにはいまだにぴったりのグラフィックで
CREAMU
Monthly Archive 2024年4月 (1) 2024年3月 (4) 2024年2月 (2) 2023年12月 (10) 2023年10月 (1) 2023年9月 (2) 2023年8月 (4) 2023年7月 (5) 2023年6月 (10) 2023年5月 (4) 2023年4月 (2) 2023年3月 (3) 2023年2月 (3) 2023年1月 (1) 2022年12月 (1) 2022年11月 (5) 2022年10月 (2) 2022年8月 (2) 2022年7月 (3) 2022年6月 (1) 2022年5月 (1) 2022年4月 (5) 2022年3月 (4) 2022年2月 (9) 2022年1月 (15) 2021年12月 (7) 2021年11月 (11) 2021年10月 (15) 2021年9月 (4) 2021年8月 (7) 2021年7月 (9)
Web2.0風デザインのための秀逸チュートリアル68選 | S i M P L E * S i M P L E
こ、これはかなり使えます・・・。 が、とっても紹介が難しいのでさらりと。今回は実験的なエントリーとして画像一切なしで。 『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あたりが好きですね。今後使えそう。 しかし、こういう海外サイトのまとめをまとめとして紹介するのは難しいですよね・・・。そのまま紹介するのも「どうなの、それ？」
【コラム】プロに学ぶWeb 2.0な画像テク (1) Web2.0的サイトのグラフィック表現 | クリエイティブ | マイコミジャーナル
Web2.0的サイトのグラフィック表現 一昔前、左右にフレームを切ったページ構成がWebサイトの主流だった頃、凸状に見える表現のリンクボタンをよく見かけました。ハイライト/シャドウ表現をうまく組み合わせて疑似的に立体に見せたボタンは、「なんかIT」な香りがして、さまざまな企業の「ホームページ」に採用されていたものです。 時は流れて「IT」という言葉も今更恥ずかしい気がする今日この頃。ここ数年ネットを賑わすキーワードに「Web2.0」があります。これも多少の「今更」感が無きにしもあらずではありますが、Web制作・アプリ開発などに携わる方にはまだまだ避けては通れないキーワードであることは確かです。 そのサービスの有効性やAjaxの技術的なお話などはその道の専門の方々にお任せするとして、この連載ではWeb2.0的なサービス・サイトでのグラフィック表現にスポットを当ててみたいと思います。 その昔、
Photoshopを使ったWeb2.0風ロゴの作り方ムービー
Web2.0風のグラデーションがあって、鏡面に映りこんでいて破裂したようなBETAマークがついているロゴの作成方法が動画で紹介されています。見たままマネしていけばいいので簡単に作れます。 詳細は以下から。 高画質版もダウンロードできますが一部しか見られず、最後までやっているのはYouTube版のみです。 Alleba Blog >> Photoshop Tutorial: How to Make a Web 2.0-Style Logo ムービーで何をやっているかの補足ですが、大体以下のようなことをやってる模様。 まずArialかTahomaかHelveticaフォントで適当に文字を入力。文字の色を3399CCに。 ↓ レイヤーをコピーして右クリック。レイヤー効果からグラデーションオーバーレイを選び、グラデーションをつける。 ↓ 楕円型選択ツールで下半分を消して不透明度を30％に。 ↓ 垂
Web2.0風サイトを作るのに必要なモノあれこれまとめ - GIGAZINE
Web2.0とは何か？というと、いろいろな解釈に基づいていろいろとあるわけですが、デザインという切り口で見てみるとある共通項が存在することがわかります。 例えばそれは、シンプルなレイアウト、中央に寄せる構図、ちょっとした3次元空間を感じさせる効果、白やパステルカラーと言ったソフトな色調の背景、アクセントには鮮やかワンポイントカラー、アイコンを多用したわかりやすい使ったナビゲーション、大きなフォントなどなどであるわけです。角の丸いテーブルなどはその代表です。 というわけで、Web2.0風なサイトデザインへリニューアルする際に参考となるサイトや、その素材を製作するためのサービスなどを集めてみました。 まず、Web2.0風デザインとはどういうものかについては以下のサイトにまとめられています。先ほど書いたのはこのサイトで触れられていることがメインです。 Current style in web d
水面に反射するような効果を画像に加えるJavaScript「Reflection.js」
上記画像を見れば分かるように、水面やなめらかな金属などに映り込んだような効果を画像に簡単に持たせることができるようになります。わざわざ画像を加工するソフトウェアを起動する必要がなくなるというわけ。映り込みの度合いも調整可能です。 Internet Explorer 5.5以上、Firefox 1.5以上、Opera 9以上、Safariで動作する模様。 Reflection.js http://cow.neondragon.net/stuff/reflection/ 「class="reflect"」というのを加えるだけで基本的に利用可能になります。画像ごとに効果を加える必要がなくなるというのがメリットらしい。ブログのアバター画像などで使うことを主目的に開発されたらしいですが、そのほかにも何か面白いことができそうな気もする。 なお、上記サイトからWordpressやphpBB、vBulle
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
hack/ » Web 2.0 Domain Name Generator
SIGNUPer(WEB2.0にサインアップ！)
https://lush-life.org/entries/eid87.html
http://club.akitomo.net/murmur/web20_logo20060803.html
ページもできちゃう、web2.0 風ジェネレータいろいろ