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

Browse By

Category Archives: Web Design

[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 >>

[HOWTO] How To Make Digital Photos Look Like Lomo Photography

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

BORDER=0デジタルカメラで撮った写真を、フォトショップの力を借りて後加工によりLOMOのLC-Aで撮影された写真みたくするHowTo。レベル補正と彩度あたりイジれば良さそうなもんだけど、こちらで紹介されている手順はかなり手がこんでいます。手間だけど1度やってみる価値はありそう。
How To Make Digital Photos Look Like Lomo >>

[WEB DESIGN] rendr – ウェブベースのHTMLエディタ

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

BORDER=0ブラウザ内でHTMLとCSSの記述ができるエディタ。マック環境だとSafariではちゃんと動作しないのでFireFoxで試してみましょう。左の画像クリックでFFで編集中の画面が大きく表示されます。丸角ボーダーなんかも使ってますね。まぁそれはいいとして、このウェブアプリがスゴいのは記述内容がリアルタイムに反映されるという点。「Markup」だけでなく「CSS」の方も、書いた内容がすぐにページ内に反映されます。試しにCSSタブ内の「body {background:#624847;}」を#000にしたりすると挙動が分かると思います。また編集用の小ウィンドウは右下の緑色のハンドルをドラッグすると大きさを変更でき、ウィンドウ上部をドラッグすれば移動もできます。正直感動モンの簡単さ。こういうウェブの記述の仕方って、例えばiWebとかのコンシューマー向けエディタにも向いてるような気もするんだよね。といってCSS直書きはさすがに敷き居が高いかもしんないけど。うーんそれにしてもスゴい。
rendr >> | Site top >>

[WEB DESIGN – JAVASCRIPT] Ajax Edit In Place (EIP)

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

BORDER=0Flickrを使った事のある人ならすぐにピンとくる、編集したい場所をクリックして、画面切り替えなしで編集→セーブするというスクリプト。exampleからサンプルを見る事ができます。Prototype.jsのライブラリを使っていますが同梱されてます。便利な機能だと思うけどなかなか使いどころが難しいよね。例えば管理者画面でのテキストの再編集とかなのかな。 0.2.0 releaseをクリックすればソースをDLできます。
Ajax Edit In Place (EIP) >> | Example >>

[WEB DESIGN – JAVASCRIPT] Bubble Tooltips

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

Bubbleリンク部分にマウスオーバーした際にマウスポインタに追従する形でのToolTips。exampleのページ内でサンプルを見れます。ページ下部のdownloadのリンクからソースをDLできます。外部.jsファイルを置いて、HTMLヘッダとCSSに加筆すればオッケー。適用するdivとか選べるのかな? example内のソースでは特にrelやclass指定なしで適用されてますね。ToolTips内に表示されるテキストはtitle属性で指定したものが出るのでちょうどイイ感じ。
Bubble Tooltips >> | example >>

[WEB DESIGN] Total Tutorial

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

BORDER=0ウェブのデザイニングなどで使うアプリケーションごとに、チュートリアルを各種取りそろえてる投稿サイト。Adobe Photoshopあたり結構イイネタがありました。英語版での解説にはなるけど、使い慣れた人ならだいたい分かるような内容。コレとか好きだな。まぁだいたいどれもちょっと考えれば作れるものばかりではあるけど、ネタ帳として便利だねここ。PHPやJavaScriptのTipsもあります。
Total Tutorial >>