DesignWalker

最近では、ウェブデザインのインスピレーション系サイトがいろいろと公開されていて、きれいなサイトを次々と見て回る事が出来ますね。

眺めているだけでも、ちょっとテンションがあがってしまうような、とってもきれいなサイトがどんどんアップされているので、暇さえあればインスピレーション系のサイトを開いて楽しんでおります…。

最近では結構ファンキーなデザインが多いような気がして、いざ企業のサイトデザインの参考にしようと思っても、なかなか企業向けの落ち着いていて、かっちりとしたデザインを探すのに意外と苦労したりします。

本日は、企業系のウェブデザインの参考になりそうなサイトをまとめてみました。

35 Professional Looking Corporate Websites

35種類のとってもきれいな企業サイトがまとめられております。

CSSelite.com

CSSeliteのCorporateカテゴリーには、きれいなサイトがたくさん集められていました。

Design Inspiration Gallery - FAVEUP

こちらも有名なインスピレーション系のサイト。落ち着いた感じのデザインがいっぱいありますね。

CSS Mania

CSS Maniaは、老舗のインスピレーションサイト。Technorogyカテゴリーなどは、企業サイトの参考になりそうなサイトがたくさんありました。

Best Web Gallery - Flash + CSS Gallery

Best Web Galleryもいろいろ参考になるインスピレーションサイトですね。

asiteaday.org

こちらも企業サイトのデザインの参考に使えそう。

11 Almost Perfect Business Layouts

Smashing Magazineさんのまとめ。企業サイトのレイアウトの参考に。

Template Monster

有料のテンプレートサイトですが、テンプレートを購入しなくても、眺めているだけでいろいろアイデアが浮かんできそう。

Pixellogo

こちらもテンプレートサイト。

最近のPhotoshopのチュートリアルはどんどんレベルがあがっていて、見てるだけでも楽しめて、なんだか上達した気分になってしまいます。。

Photoshopの上級者クラスになると、まるで光を操るかのように自然な光を表現しています。

今回は、なるべく簡単できれいに見える、光を表現するPhotoshopのチュートリアルをまとめてみました。

Design a Coldplay/Apple Inspired Portrait in Photoshop

ColdplayとAppleの広告からインスパイアされたとってもクールなチュートリアルです。

Electrifying Energy Beams

腕に巻き付くような光がかっこいい。

Create A Natural Composition with Light Shining Through a Rustic Fence

木の柵の隙間から差し込む光が自然でいい感じですね。

Super Slick Dusky Lighting Effects in Photoshop

夕日で光るエフェクトがいい。

A Cool Lighting Effect In Photoshop

光の具合が絶妙ですね。

Using Light and Shade to Bring Text to Life

光と陰をあやつるテキストエフェクト。

Space Lighting Effects in 10 Steps

抽象的な光で宇宙を表現。

Magic lighting effect in photoshop

帽子から昇る光が印象的ですね。

Amazing Photoshop light effect in 10 Steps

コーヒーカップも光を加えるととってもきれいに見えますね。

Streams of dusty light Photoshop tutorial

建物の隙間から差し込む光を表現するチュートリアルです。

How to: Recreate Vista lighting effect in Photoshop

Vista風の壁紙を簡単に作るチュートリアル。

Lighting fx in Photoshop

こういった小技を覚えておくといろいろ便利そうな光を作るチュートリアル。

Beautiful lighting FX effect in Photoshop

こちらも何かと便利そうな光のチュートリアル。

他のブログでも光のチュートリアルまとめがたくさんあります。
かぶっている物もたくさんあるのですが…。

Adobe Photoshop Tutorials - Rainbows, Glows and Light Effects

SmashingMagazineさんが集めた光のチュートリアル集。

40 Photoshop Tutorials for Lighting and Abstract Effects

こちらも有名VandelayDesignさんの光のチュートリアル集。

Dreamy, Magical and Lighting Effects Photoshop Tutorials

これまた有名。PhotoshopRoadmapさんの光のチュートリアル集。

たまに、クライアントの方で、『ロゴも適当に作っておいて』なんて、かる〜く頼まれる事もあるのですが…。

ロゴの制作ってなかなか大変です。

大抵、ロゴの制作は手書きのスケッチからはじまります。その会社の業務内容や社名などからイメージしてキーワードを拾いだして描いていきます。

本日は、ひとつのロゴが出来るまでのプロセスを紹介されているサイトをまとめてみました。最初のスケッチから完成まで、ロゴ制作に参加している気分にひたれるページを中心にご紹介。

デザイナーの方々は、デザインの参考にどうぞ〜。

Ideabook.com Tutorials | Step-by-step logo

Logo Design - The Creative Process of Designing Your Logo Design

Logo Design Project Step by Step Walkthrough | Blog.SpoonGraphics

Logo Design Process | elf-design.com

dache | The visual works of David Pache

Creating a Business Logo (Ian Landsman’s Weblog v2.0)

The new Duoh! logo identity | Veerle’s blog

Logo Design Process for Just Creative Design’s Award Winning Logo

Logo Design Creation Process from Start to Finish by Expert Graphic Designer - Angela Ferraro-Fanning

Logo Design Creation Process from Start to Finish by Expert Graphic Designer - Mark Misenheimer

Fedora Logo Development Process - Acts of Volition

Stelzner Consulting: The Creative Process - Logo Examples

Ornate Lettering Process | GoMediaZine

Digital Web Magazine - The process of redesigning a logo

The Logo Design Process - From Concept to Completion | 10e20 Blog

The Making of an Icon - art institute, vector art, art schools, web site design

こちらは、アイコンデザインのプロセスです。

How to draw girls, manga, anime, comics step by step video free tutorials at idrawgirls

こちらは、ロゴのプロセスではないのですが、絵が描かれていくプロセスを動画で見る事が出来ます。

以前このブログでもご紹介した『クリエイティブなE-コマースサイトいろいろ』

クリエイティブなEコマースサイトは、まだまだたくさんありそうですが。

Eコマースサイトの目的は、いかにユーザーの方々に商品の魅力を伝えて、商品を購入してもらえるかではないでしょうか？

今回は、いろいろなEコマースサイトを集めているギャラリー系のサイトを中心に集めてみました。

eCommerce Gallery

その名の通り、Eコマースサイトを集めてくれているギャラリーサイトです。

Cart Craze

こちらのサイトもきれいなEコマースサイトを集めてくれていて、とっても参考になります。

CSS Beauty

人気のギャラリーサイトのストアページ。こちらにもたくさんのEコマースサイトが集められています。

Design Showcase Of Creative Online-Shops

Smashing Magazineさんが集めてくれたEコマースサイトいろいろ。参考になります。

20 of the best Ecommerce Websites

TUTORIAL BLOGさんの集めたきれいなEコマースサイト20選。

Ecommerce Holiday Web Design Gallery

ホリデーシーズンのEコマースサイトが集められています。

PDG Software Live ECommerce Shopping Cart Sample Stores

PDGというソフトを使って作られたサイトのギャラリーです。このソフトを使わない方でも、デザインの参考に使えそう。

Beautiful Sites + FoxyCart = Beautiful CSS Ecommerce Inspiration

FoxyCartを使ったサイトのギャラリーです。まだまだ数は少ないですが…。

Shopping Carts Gallery: Examples and Good Practices

ショッピングカートがいっぱい集められています。

Free eCommerce icons

Eコマースサイトに使えるフリーのアイコンです。

Design Gallery: eCommerce Progress Bars

カートのプログレスバーがいろいろ集められています。

『オープンソースのEコマースソフトいろいろ』や『ショッピングカートアイコンいろいろ』もご参考にどうぞ〜。

ちょっとしたデザインのアクセントに矢印素材はとっても便利ですね。

リストに使ってみたり、タイトル部分にさりげなく飾ってみたりと、いろいろ使い道があります。

本日は、矢印の素材をいろいろと集めてみました。

Website Bullets

リストなんかに使えそうな矢印や小さなアイコンがいろいろあります。サイトのデザインもシンプルでかわいいですね。

56 Free Arrow Symbols & Icons

ベクターで56種類のシンプルな矢印素材がダウンロードできます。これは便利

FreeIconWeb.com

小さめの矢印素材がいっぱいです。

Dingsbums Bats Font | dafont.com

こちらは、矢印のフォントです。PCでもMacでも使えます。

deviantART

Photoshopの矢印ブラシもいろいろと使えそう。deviantARTで検索したら、いろいろ見つかりました。

Arrows by ~mezoomar on deviantART

こちらは、きれいなベクター素材。

300 Images From 1800 Sites

こちらは、いろいろなサイトから矢印アイコンを集められています。参考になりますね。

Bullet Madness - free bullets project at Stylegala

リストに使えそうな小さめなアイコンがいっぱいです。矢印以外にも豊富。

Mini Arrow Icon Collection

小さな矢印アイコンコレクション。右クリックでダウンロード。

Iconfinder

矢印アイコンが豊富なIconfinder

Arrow Icons | IconsPedia

こちらもきれいな矢印アイコンがいっぱいです。

Arrows Custom Shapes

前回ご紹介した、とってもかわいいPhotoshop用の矢印シェイプ

Photoshopのカスタムシェイプを使えば、ちょっとしたアイコンや飾り付けにとっても便利です。

最近では、無料でブラシ並みにカスタムシェイプが公開されているので、いろいろ試してみるのもいいかも。

カスタムシェイプの利点はベクターなので、どれだけ引き延ばしても画質が荒れないということ。

プリントにも使えるので、みなさんお試しください。

インストールのやり方が分からない方は、以前ご紹介したこちらからどうぞ〜。

Nate’s Shapes - Photoshop Custom Shapes

アイコンっぽいシェイプがいっぱい。どれもすぐに使えそうです。

Custom Shape Mix

ちょっぴりクールなシェイプがいっぱい。

Arrows Custom Shapes

とってもかわいい矢印シェイプ

photoshop Shape Sets

ロゴっぽいシェイプがいろいろです。

LOUNGE Photoshop Shape Set 001

リアルなシェイプですね。

Photoshop Custom Shapes - Ornaments

ちょっとした飾りに使えるきれいなシェイプセット。

Atv Silhouettes

クールな四輪バギーのシェイプです。

Butterfly Shapes

とってもきれいな蝶のシェイプ。

Foliage Shapes

種類がとにかく豊富な木の葉のシェイプ。いろいろ使えそう。

People Silhouettes

人のシルエットシェイプ。こちらもかなりの量ですね。

Bones photoshop custom shapes

こちらも、人のシルエット。

Animal Pattern

意外と使えそうな、アニマルパターンのシェイプ

Browsing Photoshop Custom Shapes on deviantART

deviantARTで、シェイプを検索すると、かなりいろいろ見つかりますね。

以前にも、同じようなまとめをやってました…。『Photoshopカスタム・シェイプいろいろ』こちらも合わせてどうぞ〜。

以前、ご紹介した『Photoshopチュートリアル　テキストエフェクト』

Photoshopを使って、テキストを格好良く見せたい！そんなときに使えそうな、Photoshopのテキストエフェクト・チュートリアル　第２弾です。

Create a Spectacular Grass Text Effect in Photoshop

芝生が浮き出るテキストエフェクト。とってもきれいですよね。

Dramatic Text on Fire Effect in Photoshop

メラメラと燃えさかる炎がかっこいエフェクト。

Create a Layered Glowing Text Effect

光るラインが浮かび上がるテキストです。

How to Put Smokin’ Bullet Holes and a Wanted Sign into a Piece of Wood

板に焼き付けたようなテキストです。

Design Soft Stylized 3D Type

とってもかわいらしい、3Dのテキストエフェクト。

6 Quick’n’Dirty Photoshop Text Effects From Scratch

お手軽に、ゴールドなエフェクトがかけられます。

Using Light and Shade to Bring Text to Life

光と陰をあやつれば、とってもきれいなテキストになります。

Shining Neon Text Effect in Photoshop | Abduzeedo

ネオンサインのようなテキストエフェクト

Wood Inlay Text

木製のパズルのようなテキストが表現できます。

Watercolor Text

水彩画風なエフェクトがかわいい。

Transformers Effect

トランスフォーマーなクールなテキスト。

Wet Window Text Effect

雨の日の窓のようなエフェクトです。

Electrifying Text

電気ビリビリな感じがいいですね。

Decorating Text

ほわ〜んとした、かわいらしいエフェクト。

Kaboom! Exploding Text

とってもかっこいい3Dエフェクトです。

Swirl Text Logo

炎の渦巻きっぽいテキストです。

Photoshop Tutorial: How To Create Killer Metallic Text

メタリックでクールなテキスト。

Graffiti with Photoshop

壁にスプレーで落書きしたようなテキストが作れます。

以前、このブログでご紹介した『UIパターンいろいろ』

いろいろな見せ方を見て勉強するのはとっても大切なのではないでしょうか。

Pattern Tap

『Pattern Tap』は、ウェブデザインの要素ごとに分けられた、パターンライブラリのサイトです。例えば、ヘッダー部分のデザインや、フォームのサンプル、カレンダーのサンプルが集められていたりと…。何かと便利なサイトです。しかもサインアップすれば、自分のお気に入りパターンライブラリを作ることもできます。単純に見て回るだけでも十分参考になりそうなサイトですね。

Elements of Design: A Web Design Showcase

こちらも、デザインを要素に分けてまとめてくれている、ありがたいサイト。

Web Patterns: A UC Berkeley Resource for Building User Interfaces

こちらは、UCバークレーのリソースページ。参考になります。

ちょっとしたデザインに背景素材を加えると、それだけでかなりいい感じに仕上がることが多いです。

特にベクター素材は、ウェブでも、プリントでも使えるので便利ですよね。

今回は、そんな背景に使えるベクター素材をいろいろとまとめてみました。

designersrevolution

かなりクオリティの高いベクター素材がアップされているサイトです。

DesignBum: Living Today’s Tomorrows

背景に、この素材を置くだけでそれだけで雰囲気が出そう。そんな抽象的な素材です。

Vector | Dezignus.com

こちらは、背景素材ではありませんが…。ちょっと開いてみたくなるベクター素材がいっぱい。

Webdesign-easy

ロシア語のサイトなので、何を書いているのか分かりません。。でも、とってもきれいな素材がいっぱいです。

Vector Junky

フリーのベクター画像ダウンロードサイトです。こちらは、パターン・カテゴリです。他にもいろいろベクター素材がいっぱいありますね。

FreeVectors.com - grunge

こちらも、ベクターの素材サイト。こちらは、グランジ・カテゴリ。ちょっぴり汚したいときに重宝します。

Vectorportal

ベクターポータルのバックグラウンド・カテゴリです。かなりいっぱいありますね。

Vecteezy!

こちらも有名ですね。Vecteezy!さんのパターン・カテゴリ。

Vector Resources on deviantART

deviantARTのベクターページでも、検索してみました。いろいろ見つかりますね。

Free Vector World Maps Collection

世界地図をうっすら背景に置いても、なかなかいい感じになりそうです。

Free Vector Graphics - Web Design Blog

Web Design Blogさんの、ベクターカテゴリ。背景素材だけではありませんが、いろいろと使える素材がいっぱいです。

CreateSk8

ちょっぴりかわいいベクター素材がいろいろあります。

先週、発売されたiPhone 3G。購入された方も多いのではないでしょうか？

わたくしも、週末買ってしまいました。。

購入したのは、16GBのホワイトです。購入直前までブラックにしようと思っていたのですが、お店の人にどっちがいいと思う？って聞いたら、『絶対ホワイト！』と言われ。。

理由は、ブラックの方が指紋が目立つ…。

ただそれだけの理由なのですが、店頭に置いているiPhoneを実際に見てみると、確かにブラックの方がベタベタと指紋が目立っていたので、ホワイトにしてしまいました。

結局ホワイトにしてよかったなぁ〜なんて思ってますが。みなさんは、どちらを購入されましたか？

今は、iTunesのApp storeでApplication入れてみたり、いろいろと設定したり、当分iPhoneで遊べそうです。

大切に扱っているiPhoneなんですが、実際の強度はどんなもんなんでしょう？

iPhone 3G Torture Tests PC World Video

こちらのVideoでは、iPhoneを落としてみたり、シリアルのなかに落としてみたり、個人では恐ろしくてとても出来ないようなテストをやってくれてます。

本日は、iPhoneに使える着信音、壁紙をダウンロードできるサイトをいくつかご紹介。

着信音

iTunse Storeで購入したファイルは、iPhoneの着信音用に変換できるのですが、こちらはお手軽にダウンロードできるサイトをご紹介。

Audiko

アップロードしたファイルを編集して、iPhoneの着信音用に変換したり、他のユーザーが変換したファイルがダウンロードできたりします。便利。

iPhone Ringtones | macmost.com

カテゴリに分けられた、たくさんの着信音がダウンロードできます。

壁紙

mobile.sciphone

iPhone用に作られた壁紙ダウンロードサイトです。

Veer: Ideas: Wallpaper: iPhone

クールなものから、とってもかわいらしい壁紙まで、どれにしようか迷ってしまいます。

Iconfactory

こちらは、ワイド、フルスクリーン、iPhone用の３パターンの壁紙がダウンロードできます。

Pixelgirl

かわいい壁紙がいっぱいありますね。

Poolga

イラスト系の壁紙いっぱい。

iPhone Wallpapers | chrisglass.com

こちらは、おしゃれな写真系の壁紙がたくさんあります。

iPhone Wallpapers - Airbag Industries LLC

こちらも写真系の壁紙いろいろ。

iphone-wallpapers.us

映画やセレブの壁紙が充実してます。

5ubox.com

アニメ系も充実している壁紙サイトです。他のカテゴリーもたくさんありますね。

ThemeMyPhone

ちょっぴりセクシーなものから、クールなものまで、いろいろなジャンルの壁紙がそろってます。

iPhone Wallpapers | flickr

flickrのiPhone Wallpaperのページ。いろいろあって楽しいですね。

先月創刊した、DESIGN IT!magazine―デザインからITを考えるビジネスマガジン。このなかでも、iPhone3Gは大きく取り上げられていました。興味のある方はどうぞ〜。

DESIGN IT!magazine―デザインからITを考えるビジネスマガジン (vol.1(2008))

DESIGN IT!magazine