タグ

designとデザインに関するshiro96のブックマーク (7)

  • CSSを書く際の5つのテクニック:phpspot開発日誌

    CSS tips and tricks at The Blog Herald CSSを書く際の5つのテクニック。 1. サイズ指定の際はピクセルを使うな。 body { font-size: 62.5% } p { font-size: 1.2em; line-height: 1.5em; } px指定してしまうとブラウザの文字サイズに反応しなくなってしまうというやつですね。 2. 階層構造はインデントして読みやすくしよう h1 {} h1#logo { font-size: 2em; color: #000; } h2 {} h2.title { font-size: 1.8em; font-weight: normal; } 確かに、これは分かりやすいかもしれません。今後導入しようと思います。 3. セクションごとにコメントを入れて構造化しよう /* Structure */ ...

  • 秋元@サイボウズ研究所プログラマーBlog 実験 - 人はどんなところをクリックするのか

    New Click Survey というページで、8枚のページに対して自由に一箇所をクリックしてもらい、人は画面のどこをクリックするのか、という実験をしている。 ただの長方形、円、「ここをクリック」、「ここはクリックするな」、などといったシンプルなページに対してクリックしていくと、最後に訪問者全員のクリック結果から、よくクリックされたところがわかるような結果画面を見せてくれる。いきなり結果だけを見ることも可能。 今のところ、18000人がこの実験に参加したようだ。 画面内に特徴があるところで人はクリックするし、「ここは押すな」と書いてあるところでも何もないとこよりはるかに押される、など、おもしろい。 [追記] 2006.8 に登場の clickdensity で、Javascript によるユーザのクリック位置の統計・ヒートマップ作成をサポートしている。無料トライアルつきの有料サービス。

    秋元@サイボウズ研究所プログラマーBlog 実験 - 人はどんなところをクリックするのか
  • Photoshop Tips - 風景写真をミニチュア写真に加工するには - by StudioGraphics

    ●ポイント1 -  [ 調整レイヤー ] 風景写真独特の霞を取り除くために、 [ 調整レイヤー ] の [ トーンカーブ ] と [ 色相・彩度 ] を使って、写真のコントラストを上げて、彩度を強くし、色鮮やかな写真に仕上げます。いつものレタッチよりも、ちょっと大げさに調整してもよいと思います。このレタッチの目的からして、不自然な感じにするくらいの方が、かえってリアルになるわけです。 [ 調整レイヤー ] を使うことで、何度でもやり直すことができます。 ●ポイント2 -  [ ダスト&スクラッチ ] 玩具っぽい雰囲気を表現するために、背景レイヤーをコピーした [ レイヤー ] に、[ フィルタ ] の [ ダスト&スクラッチ ] をかけて、写真のディテールを潰します。 ●ポイント3 -  [ 比較(明) ] [ ダスト&スクラッチ ] をかけただけの状態では、あまりにもディテールが潰れ過ぎ

  • Photoshopを使ったあなただけの星の作り方 - GIGAZINE

    よく見かけるSF的な上図のような星。これをPhotoshopで作るにはどうすればいいのかというチュートリアルです。元素材となるテクスチャさえ用意できれば割と簡単。 作り方は以下を参照。 Planet Tutorial http://skyetis.com/Tutorial/tut.html いろいろと設定を変えれば、こんな感じの惑星を作ることができます。 Science-Fiction http://skyetis.com/scifi.html 元になるテクスチャは以下のサイトでそれっぽいのを発見できます。 GIGAZINE - 1万3000枚以上の写真をロイヤリティフリーで提供する「Image * After」

    Photoshopを使ったあなただけの星の作り方 - GIGAZINE
  • クールかつリアルなアイコン配布サイト: Zyotism:phpspot開発日誌

    Zyotism:Aesthetics The first rule of Fight Club is, you download the icons! The second rule of Fight Club is you must download the icons! クールかつリアルなアイコン配布サイト: Zyotism。 デスクトップやソフトウェアアプリに自由に組み込めるそうです。 以下は配布物の一部であるFightClubのアイコン。かなりクオリティが高いです。 メールを送ってもらえると嬉しい、だそうなので使おうと思う方はメールを送ってあげましょう。 配布しているアイコンリスト

  • ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE

    まずは何も考えずに配色を考えたい人向けの「Color Wheel」から。 Color Wheel - ver 2.0.1 http://www.webwhirlers.com/colors/spinwheel.asp 「SPIN」をクリックすれば次々と配色が自動的にドンドン変わっていくので、お気に入りを見つければいいだけという超簡単仕様。各配色は背景や文字色などに割り当てられており、チェックマークを押すことで入れ替え可能。また、「HOLD」にチェックを入れればその色は「SPIN」を押しても変化しないようにできるので、気に入った色を見つけたらそれだけ固定して、さらに次の色も固定して入れ替えて…というようにすれば、いくらでも自分好みのカラーパターンを生成できるというわけ。 また、「Example1」以外にも「Example2」を押せば違うページレイアウトでの使用例も見ることができるので、同じ配

    ページ配色を決めるのに便利な無料サービスいろいろ - GIGAZINE
  • Niceformでエレガントなフォーム生成:phpspot開発日誌

    badboy.media.design :: articles :: Niceforms Web forms. Everybody knows web forms. Each day we have to fill in some information in a web form, be it a simple login to your webmail application, an online purchase or signing up for a website. They are the basic (and pretty much the only) way of gathering information on the web. 配布されているJavascriptのファイルとCSSファイルを読み込むだけで、フォームデザインが早代わり。 HTMLに組み込む例) <scrip

  • 1