IDEA * IDEAドットインストール代表のライフハックブログ
ウェブデザインの幅をひろげる20のキーワード | コリス
20 Vital Techniques & Best Practices For Effective Web Design 下記、各エッセンスの簡単な説明とワンポイントとサイトの紹介です。noupeのサイトでは他にも多くのサイトが紹介されています。 1. ビビッド カラー 2. グラデーションとライトのエフェクト 3. 透過 4. グランジ 5. 手書き風のデザイン 6. 押さえた色味 7. 水彩画のエフェクト 8. ネイチャー系のエレメント 9. 写実的でリアルな背景 10. 特大のタイポグラフィ 11. デコラティブなタイポグラフィ 12. 大胆な背景 13. レトロやヴィンテージのエレメント 14. アイキャッチなヘッダ 15. コラージュしたエレメント 16. テクスチャを使った背景 17. タブ型のナビゲーション 18. ブラックとホワイト 19. 水平方向のスクロール 20.
ウェブデザインのエレメントを今風にデザインするPhotoshopのチュートリアル集
最近のウェブデザインでよく使用されているエレメントの制作方法を1ステップずつ分かりやすく解説しているPhotoshopのチュートリアルをCarsonifiedから紹介します。
手軽に導入しやすい特徴的な14のドロップダウンメニューサンプル
なかなか素敵なまとめ記事がありました。 大規模なサイトに最適なリンク案内として、ドロップダウンメニューの導入が使われる事がありますが、今回のエントリーは、こうしたメニューの導入を簡単にしてくれるものとなるでしょう。 CSS、jQuery、MooTools、JavaScript WEBサイトのメニューはシンプルであるべきと考えます。大規模なWEBサイトでは、ドロップダウンメニューを設置することで、ユーザーが容易に移動できるようになる。時にそれらの設置が難しい時は以下を開いてみると良い。 14 Easy to Implement Drop Down Menu Solutions | Web Design Ledger 14ある中で今回触った感触としてお勧めが5つ。 現れ方がカッコいいドロップダウンメニュー ClarkLab ? Animated Drop Down Menu with jQue
色々な用途に使えそうなベクターデータをまとめてみました:phpspot開発日誌
最近見つけた、色々な用途に使えそうなベクターデータをまとめてみました。 Photoshopなんかのブラシにしてみても面白いですし、背景パターンなんかにも使えるかもしれません。 皆さんのデザインワークに役立てば幸いです。 49 Vector Ornamental Stars 星型のシェイプ Vector Design Elements - Circular vectors | Grafpedia 円形のベクターデータ Code Geass Symbol Set by ~solwyvern on deviantART Vector leaves design elements 葉っぱのベクターエレメント Circular Floral Vectors Floral Banner Shape by ~eurochronix on deviantART Shapes - Letters - 2 b
Webデザイナ向けFirefoxエクステンション19 | エンタープライズ | マイコミジャーナル
SitePoint: New Articles, Fresh Thinking for Web Developers and Designers Sean P Aune氏がSitePointにおいて19 Firefox Add-ons For Designersのタイトルのもと、Webデザイナ向けのFirefoxエクステンションを紹介している。Webデザインの作業をおこなうにあたり、複数のプログラムを起動して使うのではなく、1つのプログラムで複数の処理を簡単に行いたいという趣旨の内容になっている。紹介されているエクステンションは次のとおり。 カラーツール ColorSuckr (画像から代表的な色を12色取り出して、そのデータからカラースキーマを作成する) ColorZilla (ページのみならずブラウザの任意のポイントのカラーをピックアップするツール。任意の2点間の距離も測定できる) F
Webデザイナーのための美しいjQueryプラグイン22 – creamu
Tutorial9で、Webデザイナーのための美しいjQueryプラグインが紹介されています。 ざっといくつかご紹介。 » jQuery.popeye – an inline lightbox alternative lightboxをギャラリーのようなインターフェースに代替したjQuery.popeye » jPlayer – jQuery mp3 player plugin jQueryで作るmp3ミュージックプレーヤー » jQuery form plugin jQueryで非同期通信のフォームを実装 » easyDrag jQuery plugin 簡単にコンテンツをドラッグ&ドロップできるようにするプラグイン » jQuery accordion plugin – vertical 垂直方向のアコーディオンメニュー » Switch stylesheets with jQuery
デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集:phpspot開発日誌
PHPからOffice・Photoshop・PDF等の各種ファイルを操作するためのライブラ... 次の記事 ≫：アプリケーションを有無を言わさず終了させるAlt+F4の強力版が使える... 最近話題になった、デザインに役立つ美麗サイトデザイン集やロゴデザイン・写真集をまとめてみました。 沢山にあるのですが、参考にできそうなものばかりです。 サイトデザイン・サイトの特定部分のデザイン集 15 Creative WordPress Header Designs | Web Design Tutorials | Creating a Website | Learn Adobe Flash, Photoshop and Dreamweaver クリエイティブなWordPressのヘッダーデザイン集。どれもインパクト大なものばかり 25 Inspiring Examples of Sign-Up P
[CSS]ネガティブマージンの理解を深め、活用するテクニック集
スタイルシートのmarginで使用する「ネガティブマージン（マイナスマージン）」について理解しておくべきこと、ネガティブマージンを使用したテクニックなどをSmashing Magazineから紹介します。 The Definitive Guide to Using Negative Margins 1. ネガティブマージンの理解 2. ネガティブマージンの使い方 3. ネガティブマージンのテクニック集 4. ネガティブマージンのバグフィックス 5. 終わりに 1. ネガティブマージンの理解 スタイルシートを使用する際、必ずといっていいほどマージンを使用するでしょう。しかし、ネガティブマージンになると意見は分かれ、それは悪魔の仕事であると考える人たちもいます。 ネガティブマージンをは、例えばこういうのです。
続：PNG画像をより美しく、より軽量に最適化するテクニック | コリス
上記のように半透明な箇所がある画像の場合、PNGで保存する前にモードをグレースケールにすることは非常に重要です。 グレースケールモード：[イメージ]-[モード]-[グレースケール] 2. 色数はより少なく 画像のカラーを減らす方法として、前回紹介したポスタリゼーションに代わる方法を紹介します。 この方法は256色限定で、カラーを最適化できます。 半透明の画像からイメージ箇所のみを抽出し（半透明は削除）、インデックスカラーに変換しマスクを適用します。 詳しい手順は下記の通り。 画像を開き、[イメージ]-[複製]で画像を複製します。 複製した画像に、[フィルタ]-[PhotoWiz]-[Remove Transparency]で透明箇所を取り除きます。 ※「PhotoWiz」はRemove Transparencyを参照ください。 [イメージ]-[モード]-[インデックスカラー]を選択し、イン
Firebug の使い方：(X)HTML と CSS の確認・修正方法のまとめ
Firefox アドオンの「Firefbug」はご存知の方も多いと思いますが、Firefbug を使って表示しているページの(X)HTMLマークアップや CSS を確認・修正する方法のまとめを紹介します。 特に３項に記した、(X)HTMLとCSSを一発で確認する方法はおすすめです。 動作は Firefox 3.5 + Firebug 1.4.0b7 で確認しています。 １．基本：(X)HTML マークアップと CSS を表示する 確認したいページを表示した状態で、メニューバーの「表示」→「Firebug」を選択します。または F12 を押下します。 これでページ下半分に Firebug のウィンドウが表示され、左側に(X)HTMLマークアップ、右側にそのページで使われている左側のウィンドウで選択状態になっている要素の CSS が表示されます。この手順で Firebug の画面を開くと、bo
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
都道府県選択するやつ。
メモ。 誰かの役にも立つかもしれないしってことで、いつも過去の案件のソースとか探してペタペタしてるけど、何処で使ったのか忘れたりするのでここに貼っておこう。 - コメントにて使用条件を書いてほしいとの事だったので念の為追記しておきます。 特別記載が無いエントリー以外は、どう使うのも自由です。 自分のブログにそのままソース掲載してもらっても、仕事で使ってもいいですし、あらゆる用途に対して自由に使ってください。 もちろん、改変・配布とかも自由です。 ただ、ウチで公開しているソースやサンプルに対して何らかの問題が生じても責任は負いません。各自の責任でご利用ください。 大体こんな感じです。 select要素でマークアップ済みの都道府県のやつ <select name="都道府県"> <option value="">都道府県をお選びください。</option> <optgroup label="北
[CSS]100%幅のヘッダとフッタを天地に固定表示するスタイルシート
ビギナーズ向けに解説された、100%幅のヘッダとフッタを固定幅のコンテンツの天地に固定表示するスタイルシートをNoobcubeから紹介します。 Fixed Header & Footer Layout: A Beginner's Guide demo スタイルシートはIE6をはじめとする主要ブラウザをターゲットにしており、IE6用のスタイルシートファイルやdivの入れ子でIE6に対応しています。 HTML箇所の最小構成は、下記のようになります。 <textarea name="code" class="html" cols="60" rows="5"> <body> <div id="header-wrap"> <div id="header-container"> <div id="header">ヘッダ</div> </div> </div> <div id="ie6pagewrap"
JPEG画像をより美しく、より軽量に最適化するテクニック
JPEG画像をより美しく、より軽量に最適化するテクニックをSmashingMagazineから紹介します。 Clever JPEG Optimization Techniques 1. 「8ピクセル」のグリッド 2. カラーの最適化 3. JPEG最適化の一般的なTips 1. 「8ピクセル」のグリッド JPEG画像は、あなたが既に知っているように8x8のピクセルのブロックから成り立っています。画質を低くするとよく分かります。 この8x8ピクセルを利用して、JPEG画像を最適化します。 画質10で作成したサンプル 二つの正方形は同じ大きさ（8x8ピクセル）です。左上のはきれいに見え、右下のは汚く見えると思います。 これらは、それぞれ8x8のグリッドに並べたもので、左上はグリッドに揃えたもの、右下はグリッドに揃っていないものです。 保存する際に画像は、8x8ピクセルのブロックに分けられるため
今時のデザインのウェブサイトの作り方を丁寧に解説しているPhotoshopのチュートリアル集
透明感のあるものやグランジ風・イラスト風など最近よく見かけるウェブサイトのデザインを一から丁寧に解説しているPhotoshopのチュートリアルを紹介します。
CSSでゲームのような円形メニューを作るサンプル:phpspot開発日誌
Stu Nicholls | CSSplay | A circular menu with circular sub menus CSSでゲームのような円形メニューを作るサンプル。 次のような、可愛い円形メニューが作れます。 アイコンにカーソルを合わせると、「HOME」といったメニュー内容が表示されるため、迷うことなく使えそう。 鉛筆にカーソルを合わせると、追加で２つのアイコンが表示され、次のアクションにいけます。 人型のアイコンにカーソルを合わせると、４つのアイコンが表示。 メールアイコンにあわせると次のアクションとなる４アイコンが表示。 という感じで、なかなかユニークなナビゲーションで、触っているだけでもなんとなく楽しい感じがします。 実装すると、それだけでアイデアの利いたサイトだなぁと思われそう。 こうした枠の幅を最小限にしてすべての項目を見せつつスマートに配置できるという点でＵＩと
Webデザイナーのためのスターターキット27 – creamu
HONGKIATで、Webデザイナーのための便利ツールがたくさん紹介されています。 ざっとご紹介。 » Web Form Elements タブやボタン、ドロップダウンといった要素がPSDファイルになっている » Browser Form Elements PSD MacのFirefox3とWin Vista IE7のブラウザのフォーム要素 » Deluxive Creative Pack ステッカーやバッジなどの要素がたくさん » 960px Photoshop Grid Template 960pxのPhotoshopグリッドテンプレート » (More) Browser Templates ブラウザのテンプレート集。↑のキャプチャはこちら » Photoshop Cursor Pack カーソルがたくさん » Magazine PSD 雑誌のテンプレート かなりいい感じのがそろってい
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
http://www.designwalker.com/2009/08/user-interface.html
ペーパーデザインのWEBサイトを作るときに見るべきまとめ*ホームページを作る人のネタ帳
