すこしズルしてリアルなアイコンを作る方法 | バシャログ。
猫も杓子も Web 2.0 的な表現がもてはやされた頃、 ツヤツヤでリアルなアイコンの作成を迫られて嫌な汗をかきました。 質のよいイラストを描くことが要求される上、小さく細かい作業がてんこ盛り。 時間もスキルも足りない！ [1] まずフリー写真を探します。 アイコン作るのに何故写真が必要なの？とお思いかもしれませんが何故ならすこしズルいからです。 今回はこの本の写真を、アイコンっぽくしてみます。 [2] 必要なサイズにぎゅっと縮小し、背景を切り落とします。 [フィルタ]→[カラー調節]→[トーンカーブ]で、強めに調節します。 さらに[フィルタ]→[カラー調節]→[明るさ・コントラスト]でかなり思い切ってコントラストを上げます。 写真が縮小された上、強く補正をかけたことで、イラストに近いテイストになってきました。 [3] ここまでくればあとは簡単。 輪郭線を書き足したり、グラデーションを上か
携帯サイト[xhtml]のコーディング前のチェックポイント │ これからゆっくり考L +α
前回のhtml版に引き続き、今回はxhtmlの場合です。 htmlと比べて出来ることが増えるので色々なデザインの再現が可能ですが、やはり3キャリア1ソースとなると気をつけるべきポイントがいくつかあります。 コーダー（もしくはディレクター？）さんは、デザインをパッと見て「このデザインで組めます！」「組めません無理です...」の判断が咄嗟にできるようになると素敵だと思います。 デザイナーさんは、これからあげるチェックポイントを頭の片隅にいれつつデザインしていただけると、コーダーからの戻しが少なくてすむようになるかと思います。 前置きはこのぐらいにして、早速本題へ。 以下が今回のサンプルデザインです。 「これをxhtml、3キャリ1ソースコーディングしてください」 と言われた場合で考えていきます。 前提条件は、 ・3キャリア1ソース ・xhtml ・文字コード：Shift-JIS ・改行コード：
PNG画像をより美しく、より軽量に最適化するテクニック | コリス
先日、紹介した「JPEG画像の最適化テクニック」に続いてSmashingMagazineから、PNG画像をより美しく、より軽量に最適化するテクニックを紹介します。 追記：2009/07/27 本エントリには続きがあります。 続：PNG画像をより美しく、より軽量に最適化するテクニック Clever PNG Optimization Techniques 下記、各ポイントをピックアップして紹介します。 最後のはCS3向けで不明だったので、途中省略しています。 はじめに PNG画像フォーマットの概要 1. ポスタリゼーション 2. 手のはいってない透過 3. 透過による分離 4. マスクを活用 はじめに ウェブデザイナーとしてあなたは既にPNGのフォーマットに精通しているかもしれません。PNGは劣化のないフォーマットとして、GIFの非常に良い代わりとなります。 Photoshop（あるいは他の画
ke-tai.org > Blog Archive > ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」
ケータイサイトのデザインをジャンル別にまとめて紹介している「モバイルデザインアーカイブ」 Tweet 2009/3/12 木曜日 matsui Posted in 記事紹介・リンク | 1 Comment » 本日は、モバイルサイトを作成しているデザイナーにオススメのサイトをご紹介します。 モバイルサイトをキャプチャし、それをジャンル別にまとめて紹介しているサイトがありました。 → モバイルデザイナーのためのアイディアエンジン モバイルデザインアーカイブ [mobiledesignarchive.jp] 着うた、携帯ゲーム、占い、クーポン、など細かくジャンル分けされて、各モバイルサイトのキャプチャ画像が公開されています。 今月オープンしたばかりのサイトのようですが、アーカイブには既に100以上のサイトが収録されているようです。 デザインの参考に使えるのはもちろんのこと、クライアントと打ち合
カラーユニバーサルデザイン（CUD） - 記憶の彼方へ
鮮やかな紅葉を味わえないのは仕方ないとしても、デジタルカメラのバッテリーの充電器の「充電中」（オレンジ）と「充電完了」（グリーン）のランプの色が識別できないときや、鉄道やバスの路線図の色の違いが識別できないときや、せっかく訪れたサイトやブログの背景色と文字色が混同して文字が判読できないときには、どこか腑に落ちないものを感じてきた。赤緑色弱の私にとっては「デザイン」の一環である一定の配色が肝腎の「情報」の伝達を決定的に阻害することがある。その気になれば、近くにいる人に尋ねたり、ブラウザの設定を変えたりすることなどによってある程度は対処できるものの、多くの場合その面倒を避けて、結局勘に頼ったり、情報を得るのを諦めることが多かった。 近年、日本国内では500万人を数えるといわれる色弱者に配慮したカラーユニバーサルデザイン（CUD）の動きが公共施設の各種の表示や製品のデザインにおいて少しずつだが着
ヒビノアワ: デザイン勉強会「ベジェ曲線で行こう！」資料公開します
昨日、Twitterな仲間たちで行われたプログラマのためのデザイン勉強会でスピーカをやってきました。 本来なら、僕はデザイナではないのでスピーカやる人ではないはずなんですけど、ベジェ曲線の描き方をお話ししてきました(この辺の事情は資料を参照のこと)。 ベジェ曲線はドローツールを使いこなす上で重要なのだけど、苦手意識を持っている人が多いみたい。 これが少しでも解消するといいなーと思って、プレゼンしてみました。 当日使った資料とおまけを公開するので、実際に自分で試してもらえるとうれしいなーと思います。 資料一式ダウンロード 解凍すると次のファイルが出来ます。 bezier.pdf プレゼンで使った資料のPDF版です drawing.svg プレゼンの実演で使った、トランプのマークの下絵入りのsvgファイルです。Inkscapeとか、Illustratorで開けます card-mark.svg
プログラマー的デザイン勉強法：UX ～ユーザーエクスペリエンス～：オルタナティブ・ブログ
プログラム言語であればどの言語でも習得出来、どんなOSでも使いこなし、データベースだって勉強すればマニアックに最適化出来るプログラマーですがいざデザインとなると「いやぁセンスないから」って感じだと思います。 プログラムは感性で書く物では無いので（私は感性で書いてますがw）いざ右脳を利用する作業になると途端に受け付けなくなってしまいます。 ですがサイト全体ではなくとも、一部にキラリと光るデザインがあるとお客さんに喜ばれる物です。少し位のバグも許してくれるでしょう（もちろん自己責任でお願いします。） デザインの主にわけて、構成、色使い、動きに分けられると思いますが、それぞれどのようにしてテクを研くか私の方法を書いてみます。 1.構成 デザインが良いとされているサイトをとにかく沢山見る。沢山見ることによって目が越えてくるのでアイデアも思い浮かびやすくなります。自分の気に入ったデザインを見つけたら
グラデーションを使ったデザインのやり方 - GIGAZINE
Web2.0のデザイン的要素として「グラデーションをかける」という重要なものがありますが、このグラデーションのかけ方が実際にやってみると実に難しい。ネット上でいろいろ調べてみるとグラデーションのかけ方自体は様々な方法やチュートリアルが見つかるものの、「何が正解なのか？」というのは見つかりません。つまり、何がそのときに最もベストな方法なのかがわからないわけです。 また、ブログのテンプレートを選ぶ際にも、どのようなグラデーションが自分の目指すテーマのブログにふさわしいのかも基本的な知識がないとなかなかわかりにくいものです。 というわけで、今回はグラデーションを使ったデザインの仕方について。デザインをしない人でもどのデザインを選べばいいかがわかるように書いてみました。 ■間違ったグラデーションなど無い まず一番わかりやすいグラデーションについての誤解はこれ、汚いグラデーションやださいグラデーショ
これで完璧！ロゴデザインのためのお役立ち資料まとめ | P O P * P O P
これがあればもう完璧ですね・・・300以上ものロゴデザインに関するサイトを集めたまとめです。 チュートリアルからロゴデザインのアイディアまで・・・かな～り使えるのではないでしょうか。300以上もあるのでさすがにいくつかのカテゴリーに分類されていますね。 どんな役立つ資料があるのでしょうか。詳しくは以下をどうぞ。 ↑ ロゴのタイポグラフィーに関する資料いろいろ。フォントは悩みますよね・・・。 ↑ お約束ですが、「2.0っぽい」ロゴデザイン集についてもいろいろ教えてくれます。 ↑ 素敵なロゴデザインを集めたサイトも紹介してくれます。 全てのカテゴリーは以下のとおりです。是非ご活用ください。 Importance of Logo （ロゴの重要性） Logo Design Software （デザインのためのツール） Logo Design Tutorials （チュートリアル） Logo Fil
teatimelogic - Why RoundRect-X?
Macintosh において、ラウンドレクト （角丸四角形）はプリミティブ（基本図形）になっている。 以下の文章によるとそれはジョブズという人のせいらしい。 クイックドローが生成する形状としてどういった形を「基本図形（プリミティブ）に含めるかを議論していたときのことを、アトキンソンが話してくれたことがある。円、楕円、四角形は入れることが決まっていたが、四角形の角をとって丸くした形（角丸四角形）は入れないことになっていた。ジョブズはこれに強く反対し、アトキンソンを屋外に連れ出して駐車場まで連れて行き、縁石や駐車禁止標識などに驚くほどの数の角丸四角形があることを示して翻意を促した。その後アトキンソンは、この形状を過小評価していたことを思い知ることになる。この形状はクイックドローのプリミティブとなったが、それを後悔することは一度もなかった。現在この角丸四角形はダイアログボックスやボタンに頻繁に使
PingMag - 東京発 「デザイン＆ものづくり」 マガジン » Archive » mixiをより良くするためには
ED治療薬（勃起薬）は様々な違いがあります。持続時間、作用時間、効果の強さ、食事の影響などの比較をご紹介しています。 サイトマップ ED治療薬（勃起薬）の比較・違い ED治療薬（勃起薬）は、現在のところ４種類販売されています。それぞれの特徴の違いを比較します。EDに効果があるメカニズムはどれも同じですが、持続時間、即効性、食事やお酒の影響などで違いがあります。お薬は個人差もありますが、ご自分に合っているものを探すことも大切です。また、状況にわけて様々なED治療薬を使い分けている方もいらっしゃるようです。正しいお薬を選択する事で、より効果を得る事ができるでしょう。 ED治療薬の通販はコチラ 勃起力で選ぶならこのED治療薬！ バイアグラ ED治療薬で最も有名なのはバイアグラではないでしょうか？ バイアグラは勃起力が強くなる薬で、ED治療だけでなくナイトライフを楽しみたい方にもオススメなED治療
sta la sta - カッコいいロゴをデザインするためのノウハウ集
Before & After | Email article: 0363 Design a logo of letters 魅力的なサービスや企業には魅力的なロゴがつきもの。例えばflickrなんかは一目でそれと分かるインパクトの強いロゴデザインを採用している。 あなたもただ英字を並べる以上のカッコいいロゴをデザインしたいのなら、こちらのサイトで配布しているドキュメントが参考になると思う。 この『How to design a logo of letters』というドキュメントでは、英字ロゴを作る際にどういう並べ方をするとカッコ良くなるかを実例を挙げて説明してくれている。 どれもこれもちょっとした工夫なのだけど、その工夫があるのと無いのとでは、見る人に結構違う印象を与えると思う。ぜひとも全部覚えておきたい。 これから新規にサービスや製品をリリースすることを考え中の方は、ロゴを考える前にぜひ
CSSでクールなタブUIを作成するサンプル:phpspot開発日誌
OSResources - How to create CSS overlapping tabs? Sometimes simulating a real desktop interface for your web application can be a real challenge, especially when dealing with tabs. CSSでクールなタブUIを作成するサンプル。 次のようなタブUIを作ることが出来ます。 サンプルのCSSを定義しておけば、後は次のようにシンプルなHTMLをコーディングするだけで上記画像のようなタブUIが作れます。 HTMLもクリーン。 <ul class="obtabs"> <li class="first"><span><a href="#">Jack</a></span></li> <li><span><a class="new
美しいレイアウトを計算してくれるツール :: Love & Design ::
以前 Webデザインと黄金比の関係 でご紹介した、白銀比、黄金比、白金比、第二黄金比を使った美しいレイアウトを計算してくれるツールが、さらに再分割できるようになりパワーアップしました。 電脳狂想曲 レイアウトの小技 使い方と説明 実際に画像を表示しながら分割ができるので、サイドバーや画像の大きさを決めるときや、ロゴやメニューを配置するときに便利です。 【使用例】段組（２カラム）するとき 横幅780px の場合 黄金比：横幅 / 552px / 228px 白銀比：横幅 / 512px / 268px 白金比：横幅 / 571px / 209px 第二黄金比：横幅 / 565px / 215px ↓もしかして黄金比？ これまでテキトーに決めていたという方も、Webデザインだけでなく、プレゼンの資料などにも活用できそうなので、ぜひ一度お試しください。 参考記事 「見えない線」に沿ってページをレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
webサイト作成時にサイトカラーを決められない人の為のwebサービスいくつか*ホームページを作る人のネタ帳
20の優れたAjax効果*ホームページを作る人のネタ帳
ロゴ・テンプレートを活用しよう - DesignWalker
有料ソフトとデザイン作業を無力化させる30のブックマークまとめ*ホームページを作る人のネタ帳
日本の伝統色を組み合わせてみた - DesignWalker
[[似非デザイン技法]]