ピクセル単位で正確につくられた、FacebookファンページのGUIがまとめられたPSD素材を紹介します。

iPhone 4S ホワイト ちなみにiPhone 4との外観上の違いは、側面のマナーボタンだと思います。 [ad#ad-2] ダウンロードできる素材のフォーマットはPSDで、スマートオブジェクト(psb)で作成されています。 Photoshopでのキャプチャ 素材の利用にあたっては個人でも商用でも無料で、バックリンクも必要ない、とのことです。 詳しくは、ダウンロードファイルの「license-README-FIRST.txt」をご覧ください。

当サイトでも無料のアイコンをたくさん紹介してきましたが、医療をテーマにしたものは初です。 そんな素敵なアイコンセットをSmashing Magazineから紹介します。 Free Medical Icons Set (60 Icons) ダウンロードできるアイコンセットのフォーマットはPNGで、サイズは32x32と128x128の二種類がセットになっています。 ※32x32と128x128ではデザインが異なります。

『フォトショップ・ブイアイピー』の新着記事です。フォトショップやデザインをたのしむウェブサイト。2009年３月創刊以来、3800を超えるコンテンツを更新しています。フリーフォントなどの無料デザイン素材／配色やWeb制作といった最新トレンドも公開中。

jQueryとCSS3を使って、複数のステップをアニメーションで次々に表示するフォームを実装するチュートリアルを紹介します。 How to Create A Multi-Step Signup Form With CSS3 and jQuery デモページ フォームの下部にある「プログレスバー」の存在もユーザビリティ的に見逃せない存在です。 [ad#ad-2] フォームのデモ フォームは全部で4つのステップで構成されており、さまざまなスパイスが含まれています。 2枚目のフォーム フォームの進捗状況は、下部のプログレスバーに表示されます。 ※個人的には%でなく、2/4が分かりやすいと思います。 フォームの実装 HTML：基本構造 フォームの基本構造は、4つのステップをそれぞれdiv要素に格納します。 <div id="container"> <form action="#" method="

下の画像は、左：適用前のグラデーション（ディザ有り）、右：適用後のグラデーションです。 適用前にはグラデーションにバンディングの縞模様があり汚いですが、適用後のものは縞模様がなくなり綺麗なグラデーションとなっています。 Photoshop Tip: Spatter [ad#ad-2] 上記で紹介されているのは非常に簡単な方法で、Photoshopのはねフィルターを使用します。 メニューバーの[フィルター]-[ブラシストローク]-[はね]を選択します。

Ink spill and splatter Photoshop brushes 以下、チュートリアルをダイジェストでご紹介。 エッジの作成 画像のレイヤーをコピーし、そのレイヤーに[フィルタ]-[ぼかし]-[ぼかし（詳細）]を選択し、「半径」を7.8、「しきい値」を47.7、「画質」を高、「モード」をエッジのみ、にして「OK」ボタンをクリックします。 次に、[イメージ]-[色調補正]-[階調の反転]を選択します。 エッジが作成できたら、そのレイヤーは一旦非表示にしておきます。 シャドウとなるラインアートの作成 斜めのラインを描きクロスハッチングのパターンを作成します。 「レイヤースタイル」から「パターンオーバーレイ」を選択し、クロスハッチングのパターンを「比較（明）」で適用します。

Beautiful Collection Of HTML5 Websites by Vikas on August 3rd, 2010     4 Comments » Share Html 5 is the new technology and web standard in web design. HTML 5 has tons of new features, elements and techniques which will be helpful for designers to create new design in short line code. Coding in HTML 5 is very easy compared to other programming language options available for designers. You can als

ウェブデザインで使用しているパンくずのデザイン集とパンくずの由来や概要、特長をはじめ、設置の判断基準、実装のよくある間違い、デザインのポイントを紹介します。

The Current State of Web Design: Trends 2010 下記は記事の意訳と実例をいくつか抜粋したものです。元記事では他にも多数の実例が紹介されています。 はじめに ウェブデザインとは移り変わりが激しい業界です。他のすべての芸術的な表現とまったく同じように、ウェブデザインは絶え間なく、そして驚くほど早いスピードで進化を遂げてきました。 そして現在、私たちはウェブデザインの黄金時代を経験しているところです。それはこれまでのところ、少なくとも最も良い期間です。主要なブラウザで利用できる新しいツール（CSS3, HTML5, 埋め込みフォントなど）、自由に利用が可能な多くのリソース、デザインコミュニティなど、ウェブのスタンダードの信頼性が高いサポートを持っています。 私たちはより良いインタラクションなデザインや審美的なデザインを見ています。そして同様に個人的で魅力

最近リリースされたものを中心とした、超美麗でハイクオリティなアイコンをSmashing Magazineから紹介します。 50 Free High-Quality Icon Sets

サークルタイプやバータイプのローディングに使用するアニメーション画像がオンラインで簡単に作成できる「Chimply」を紹介します。

アブストラクトな美しい光を描くPhotoshopのブラシをYou the Designerから紹介します。

多種多様なアローやショッピングカートなど、スタイリッシュにデザインされたフリーの高品質なアイコンをIcons Etc.から紹介します。

水、水流、水面、水中、滴、雨、氷、水彩など、水を効果的に使用したPhotoshopのチュートリアルの紹介です。

アイコンの効果的な使い方を実例から学ぶチュートリアルをSmashing Magazineから紹介します。 How To Use Icons To Support Content In Web Design 下記は、その意訳です。 How To Use Icons To Support Content In Web Design アイコンは、ユーザーをあなたのウェブサイトの内容に惹きこませるシンプルで、効果的な方法です。 アイコンを使用して、ウェブサイトのコンテンツをサポートする素晴らしいサンプルとベストプラクティスを紹介します。 1. How To Use Icons アイコンを効果的に使用する方法 アイコンを使用する際のゴールの一つは、ユーザーに情報を素早く、そして効率的に伝えることです。 アイコンを効果的に使用すると、説明を必要とせずに、有効なコミュニケーションを可能にし、少ないコンテ

二つの概念を組み合わせたアイデア溢れるロゴデザインをFuel Your Creativityからいくつか紹介します。 30 Dual Element Logos, Do You See Them All?

ねじれたリボンにテクスチャを綺麗に貼るPhotoshopのチュートリアルをWeb Designer Wallから紹介します。 Photo Strip (Photoshop Tutorial) チュートリアルでは、Photoshopのペンツールで描かれた「ねじれたリボン」に、画像やイラストなどをワープツール（[編集]-[変形]-[ワープ]）を使用して綺麗に貼り付け、ハイライトやシャドウ、ラインストロークを丁寧に調整します。