Webデザインにすぐ使えるPhotoshopグラデ339選
ありきたりのテンプレートではなく、どうせWebサイトを作るならオリジナルのデザインにしたい――そんなときに悩むのが、“色”ではないだろうか。特にヘッダーやフッター、ナビゲーションバーなど、サイトのイメージを決める重要な要素の色使いは、サイト制作者の腕の見せ所だ。 「でも、どうもセンスには自信がないし……」。それなら、Photoshopのグラデーションライブラリを使ってみよう。Photoshopには標準でもかなりの種類のグラデーションが用意されているが、ネット上ではさらに膨大な数のライブラリが配布されている。グラデーションライブラリを使えばあっという間にイメージどおりの色の組み合わせが手に入るし、うまく活用できればサイト全体の完成度もぐっと上がる。 今回は、単純に「上から下に適用するだけ」でも十分カッコいい、シンプルで“使える”グラデーションライブラリをいくつかピックアップしてみた。なお、実
WebブラウザーだけでWeb制作を自動化する厳選ジェネレーター (1/2)
Webブラウザーだけで楽しめるWebページのジェネレーターがある。Photoshopで写真画像を加工したり、ゴリゴリHTMLやCSSを書いてデザインするのも楽しいけど、たまにはお気楽に、思いっきり手を抜いてWebページを作ってみるのはどうだろう？ そのまま使ってもよし、デザインやマークアップの参考にするもよし。どれも無料のサービスなので、気軽に試せる。 CSSも画像もまとめて作ってくれる角丸ジェネレーター 「RoundedCornr」 HTML＋CSS＋GIF画像を使った角丸ボックスを作ってくれる定番ジェネレーター。コーナーの大きさやボックスのカラーなどのパラメータを指定すれば、必要なファイルがすべて自動生成される。背景をグラデーションにしたり、ボックス全体を1枚の画像としても出力できる。 ■URL= http://www.roundedcornr.com/
Photoshopブラシで質感のあるWebサイトへ (2/2)
次は「BitBox」から、水彩画風のブラシ「Grungy Watercolor」を。力強いブラシが全部で10種類。それぞれ違う色で重ねていくだけでもちょっとしたイラストになりそうだ。サイトのヘッダーの背景などに 使ってみてはどうだろうか。Photoshop CS3／CS1／PNGの3種類のファイルが配布されているので幅広いバージョンのPhotoshopで使える。 Old Postcard Brushes 1 クリエイターのコミュニティサイト「deviantART」の中にあるPhotoshopブラシコーナーからは、「Old Postcard Brushes 1 」をピックアップ。 古いポストカードのデザインを再現したブラシで、ポストカードの枠、消印スタンプなど13種類がセットになっている。Webサイト用の写真画像をモノクロにして組み合わせれば、あっという間にレトロな雰囲気のサイトに印象が変わ
Smarty レイアウトテンプレート
こんにちは。先日入社しましたmiyakeと申します。新入りです。 今日はSmartyでRuby on Rails的なレイアウトテンプレート機能を実現するTipsをご紹介します。 まず、そもそもRailsのレイアウトテンプレートとはどんな物なのか、簡単に解説します。 Smartyに限らず、何らかのテンプレートエンジンでページを出力する場合、ヘッダやフッタといった共通部分を別ファイルに切り分けるというのはよくあるアプローチです。 この場合、そのページのテンプレートファイルに加えて、ヘッダとフッタのテンプレートを別途用意します。 これに対して、レイアウトテンプレートはそのページのテンプレートと「土台になるテンプレート（＝レイアウトテンプレート）」でページを出力します。 実際のHTMLに照らし合わせて図にすると、こんなイメージです。 レイアウトテンプレートのイメージ posted by (C)フォ
本文の下のほうをFade Outしてフッターを際立たせる方法 | SiMPLE*SiMPLE
本文の下のほうをFade Outしてフッターを際立たせる方法 May 9, 2007 8:08 AM written by 8maki fortuitousというブログには、ちょっと楽しい小細工が。 本文の下のほうに行くと文字や画像がFade Outしていきます。フッターのメニューがうかびあがってくるように見えてユニークです。 ちょっと実現方法がユニークなので皆さんも考えてみてください。 実はこれ、CSSやJavascriptを一切使わず、画像をちょこっといじっただけで実現しています。 なんと上半分を白の透過画像にしているだけなのです。わかってしまうと、「あー、なんだ。」と思ってしまいますが、意外と思いつかない発想かも。 たったこれだけでもブログやサイトにアクセントを加えることができる、他にもいろいろとお手軽な手法が転がっていそうですね。 » fortuitous ■ 追記（2007-05
CSSとJavascriptだけでスライド効果を実現する方法（script.aculo.usとか抜きで） | SIMPLE*SIMPLE
テキストなどがするすると現れたり消えたりするスライド効果はときどき使いたくなりますよね。ただ、それだけのためにPrototype.jsとかscript.aculo.usを使うのもね・・・という方のためのスライド効果作成講座。 細かいところはコードを見てもらうとして、素敵なスライド効果をシンプルなスクリプトだけ（CSSとJavascript）で実現できます。ダウンロードもできます。 » Firblitz: Re: How to Create Digg Comment Style Sliding DIVs with Javascript and CSS 応用例としてスライドする時間を設定したり、スライド終了時にアラートしたりする方法も紹介しています。 個人的にはまだまだJavascriptを勉強中なので、このサイトの丁寧な説明がうれしかったですね。 setTimeoutとかこう使うのねー、と読
Glittergraphics.us - Myspace Glitter Graphics, Free Myspace Glitter Graphics, Cute Myspace Graphics, Myspace Glitter Images, & More! - Myspace, Friendster, Piczo, Xanga, Livejournal & More!
glittergraphics.us 2024 著作権. 不許複製 プライバシーポリシー
無料で200個以上のウェブサイトテンプレートを配布する「OpenDesigns.org」 - GIGAZINE
現時点で約200個以上のウェブサイトテンプレートが無料でダウンロード可能になっており、ライセンスも商用利用可能なものからGPLライセンス、CCライセンスまでいろいろ。 特筆すべきは検索機能の充実具合で、XHTML準拠、ライセンス別、明るい系か暗い系か、幅は固定かそうでないか、カラムの数、色名を組み合わせて絞り込みが可能。 詳細は以下の通り。 Open Design Community - Download Free Web Design Templates - OpenDesigns.org http://www.opendesigns.org/ 強力な検索機能の利用は以下から。 Search Designs ・ OpenDesigns.org 以下からサムネイル画像でテンプレートのプレビューを見ることもできます。サムネイル画像の上にマウスを乗せれば詳細な情報が表示されるので便利。クリック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ロゴデザインに役立つPhotoshopのカスタムシェイプ (1/2)
SiMPLE*SiMPLE - ウェブ職人のための小粋なネタ帳
nvu.cc
KompoZer - Easy web authoring
http://www.nvu.com/index.php
ADP: floatレイアウトでつまづかないためのTips
Open Source Web Design - Download and upload free web designs.