Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

Category Archives: Web Design

[WEB DESIGN] Hot Dates with CSS

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0先日紹介したブログにおけるクールな日付表示の応用。画像を組み合わせたり、記事とどのようにしてウマい事レイアウトするかについて記述されてます。画像については小さいのをループさせてるけど、まぁ背景一発でもイイような気もしますね。記事の横に置くアイデアはイイなぁ。けどフローズンデザインだと記事の横ピクセル変えなきゃなぁ。メンドくせぇなぁ。けど汎用性を取ってリキッドっていうのもなぁ。むーん。
Hot Dates with CSS >>

[WEB DESIGN] CSS Date Blocks for Blogs

  • Pocket
  • このエントリーをはてなブックマークに追加

Hotブログだけでなく企業向けのウェブ製作の現場でも日付という要素は書かせません。CSSによる日付の装飾の一例の紹介。カレンダーぽく見せる手法をウマい事やってます。っていうか多分コレ近日中にパクります(笑) この見せ方かっこイイなぁ。けどMTで月の表記を「SEP」みたく短縮で表記する方法ってあったっけな。と思って調べてみたらちゃんとありました。「%b」でオッケーなのね。ちなみに省略形じゃなくフルスペルの場合は「%B」だそうです。
あと別件だけどこのエントリーからサムネール画像のフォーマットを180×110に変更しました。
CSS Date Blocks for Blogs >> | MobavleType 日付フォーマット >>

[WEB DESIGN] Favicon Editor

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0ファビコン(ブックマークした時などに目印として付く小さいアイコン)のエディター。サイト内でドット絵を描いて簡単にfaviconを作成することができます。作成した画像はgif画増としてジェネレイト可。またサイトにファビコンを付加するためのタグについても紹介されているので、初めてfaviconを作る人にとっても親切です。ちなみにザクを描いたつもりなんですけどね、見えませんね。はい。自分にもザクにはまるで見えません・・・。
Favicon Editor >>

[WEB DESIGN] CSS Font and Text Style Wizard

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0最近じゃCSSによるレイアウトも当たり前になってきたけど、自分の場合「font-family」によるフォント指定ってわりとサイトをまたいで使い回す事が多いんです。このサイトの場合は主に’Lucida Grande’と’ヒラギノ角ゴシック’を使ってますが、最近じゃマックウィン問わずOSがデフォルトで持ってるフォントも増えてきた事だし、サイトごとにテキスト面でも表情を持たせたいところです。こちらではfont-familyだけでなく各属性をボタンで切り替えて、テキストがどう見えるのかのサンプルを即座に表示してくれます。serif、sans-serif、cursive、fantasy、monospaceという一般的なフォントに加えてカスタムを選べば任意のフォントも可。sizeやweightなどの指定もできます。欲を言えばtext-shadowあたりも欲しかったですね。指定したフォント定義のCSSはリアルタイムに下部フォーム内に出力されるので、あとはコピペすればオールオッケー。うーん便利だな。
CSS Font and Text Style Wizard >>

[DESIGN] How to Make Real life stuff Anime style

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0実写の写真を使っていかにアニメ調のイラストを描くか、というテーマのチュートリアル。この手のトレースとか絵起こしってわりとイラレを使う事が多いけど、ここではフォトショップでやってます。「Stroke Path」というのは日本語版では「パスの境界線を描く」というコマンド。使った事ねぇ・・・。被写体が180SXなのがタマりません。男の中の男のマシンですね。
How to Make Real life stuff Anime style >>

[WEB DESIGN] lightbox.js とPHPで手軽にフォト・アルバムを作成

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0Goodpicブログさんより。LightBox JS v2.0とPHPで手軽にフォトアルバムを作成するための手順とツール。1度設置してしまえばあとは写真を上げるだけなので生産性が高いのが特徴。ただサムネール作りにフォトショップのアクションを使ったり、ファイル名のルール付けのためにImageReadyを使ったりと多少のコツは必要かも。最近じゃflickrなどを使う事で各サムネール画像をサーバサイドで自動生成してくれたり(実際はこの昨日がめちゃめちゃ便利)するけど、どうしても自サーバ内でフォトアルバムを完結させなきゃならない場合もあるハズ。そんな時に便利ですね。
lightbox.js とPHPで手軽にフォト・アルバムを作成 >>

[WEB DESIGN – COLOR] ColorCombos

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0デザイニングの際の色の組み合わせを試したり、他の人の作った色の組み合わせを拝借する事のできるサイト。サイト内でカラーコンボを作る際は16進法のアレで1つずつ色を作成できます。またタグ機能もあって、特定の色を軸にコンボを検索することもできます。これ結構便利。あと他サイトの色の使われ方を見る「Grab Website Colors」という機能もあります。イイ色が見つかんない時のデザイナーさんに是非。
ColorCombos >>

[HOWTO] How to get that SIN CITY Look in your Image

  • Pocket
  • このエントリーをはてなブックマークに追加

BORDER=0下のエントリーと同じくフォトショップのHowToモノ。デジタルカメラで撮影された写真を、映画『Sin City』のような独特の雰囲気の画像に仕上げるためのチュートリアル。吹き出しまで入れるとまんまアメコミのような雰囲気に。かっこイイなぁこれ。
How to get that SIN CITY Look in your Image >>