立体的で飛び出しそうな3Dテキスト描画Photoshopチュートリアル。 次のようなイメージを作成するチュートリアルです。 3D部分にはXara3D という3Dソフトを使っています。¥6200ということでこういう素材を簡単に作りたいという方は持っておいてもよいかも。 以下のエントリを参照してください。 How to make 3D spectacular text effect in Photoshop
いつもと違うよりリアルなドロップダウンシャドウを描画するPhotoshopチュートリアル。 Photoshopのレイヤー効果などで描画した影は以下のように、これはこれでよいのですが、面が宙を浮いているようにみえます。 ということで、レイヤー効果をつけた後、レイヤーをラスタライズし、次のように円形選択ツールで4つの辺を削ってみると、すこし硬めの紙を平面に置いたようなよりリアルな感じを出すことができます。 これは微々たる違いではありますが、比較するとこっちのほうがリアルに感じますね。 実際に写真を当てはめてみた図が以下です。 以下のエントリを参照してください。 Better Drop Shadows in Photoshop | Design Reviver 関連エントリ プロレベルのPhotoshopチュートリアル集 ボタン作成のPhotoshopチュートリアル集 飛び出る立体グラフィックを
注目を集めるためのCSS3を使った光るボタンサンプル実装例が公開されています。 Safari4や Firefox3.5、ChromeでみるとCSS3の機能を使ってボタンが光ります。少しだけ次世代ですがこんなことができるんだなと覚えておいてもよいかも。 アニメーションで輝くボタンはまるでイルミネーションのようです。 @-webkit-keyframes を使うことでこんなことができるんですね。 Firefox3でみると次のように光りはしませんが、それなりにきれいなボタンで表示されます。 デモは以下のエントリを参照してください。 Radioactive Buttons with CSS Animations and RGBa - ZURB Playground - ZURB.com 作成のチュートリアルは以下を参照してください Pushing Your Buttons With Practic
次のような、立体的な木の箱をテクスチャなしで描くPhotoshopチュートリアルが公開されています。 いい感じに立体感が出ており、Photoshopで立体感を出すための練習にもよさそうですね。 PSDファイルのダウンロードも可能です。 以下のエントリを参照してください。 How To Design a 3D Wooden Box in Photoshop | Tutorial9 関連エントリ Photoshopによる美麗アイコン作成チュートリアル集 ユーザの行動を喚起できそうなボタン作成Photoshopチュートリアル カラフルで美しい光の描画Photoshopチュートリアル
次のような輝く綺麗なクリスマスツリーを描画するPhotoshopチュートリアルが公開されています。 今年もあと少しですね。 以下のエントリを参照してください。 Design an awesome Christmas tree in Photoshop | Grafpedia 関連エントリ カラフルで美しい光の描画Photoshopチュートリアル
画像を配列で指定すると紙芝居のように表示してくれるjQueryプラグイン「jQuery UI FlipBook」 2009年12月18日- 画像を配列で指定すると紙芝居のように表示してくれるjQueryプラグイン「jQuery UI FlipBook」。 次のように配列でデータを渡してあげると、指定したブロック内を画像の配列でアニメーションさせられます。 サイト上では、世界の天気の移り変わりを画像で動画っぽく表示しているデモが公開されています。 複数ある画像でアニメーションさせたい場合に使えそうですね。 使い方も簡単なので簡単に実装できます。 以下のエントリを参照してください。 jQuery UI FlipBook
力強い筆で描いたようなPhotoshopブラシ集が公開されています。 次のように、まさに筆で描いたようなブラシセットになってます。 Photoshop CS4 用のようです。 ダウンロードするには以下のエントリを参照してください。 High Quality Rough and Grungy Photoshop Brushes
インタラクティブでアニメーションするグラフが描けるJSライブラリ「Highcharts」が公開されています。 マウスが上に乗るとポップアップしてヒントが出るようなグラフもこのJSライブラリで描画できます。 デモページでは、実に多数のサンプルグラフを見ることが出来ます。 それにしてもJSなのに描画するグラフが滑らかでいいですね。 以下のエントリを参照してください。 Highcharts - Interactive JavaScript charts for your webpage 関連エントリ JavaScriptだけでさまざまなグラフを描画できる高機能ライブラリ『HighCharts』 - IDEA*IDEA
次のようなクリスマス特集に使えそうなとっても可愛いクリスマスアイコンセットが公開されています。 もう数日でクリスマスですが、サイトにクリスマスの飾り付けをしたいという場合にお手軽に使えそうです。 ダウンロードパッケージには、64x64、128x128、256x256 サイズのアイコンが16種類セットになってアーカイブされています。 以下のエントリを参照してください。 Exclusive Icons for the Holidays: “Xmas Stickers” | Webdesigner Depot 関連エントリ 商用利用も出来るフリーのクリスマスアイコン クリスマス用のアイコンやWordPressテーマ等 クリスマスに使えるPhotoshopチュートリアル集
そのまま編集が可能なテーブル実装用jQueryプラグイン「Zentable」。 次のように、クリックでその場で編集できるテーブル実装用のjQueryプラグインです。 以下のような特徴があるようです。 ajaxによるデータ読み込み マウスホイールやキーボードによる操作 カラムやテーブルのリサイズ機能 並び替え、フィルタ機能付き ツールチップ機能付き コンテンツにHTMLを入れることも可能 CSSによるテーマデザインが可能 以下のエントリを参照してください。 Zentense: Zentable 関連エントリ スクロール可能なテーブルを作成するJavaScriptライブラリ「ScrollableTable」 わずか2.5KBでテーブルにソート機能を提供する「TinyTable」 テーブルの列でソートするJavaScriptライブラリ
テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」 2009年12月25日- テキスト選択後のアクションをポップアップしてくれユーザビリティ向上に使える「Search And Share」。 ページ内のテキストを選択するとポップアップメニューが出てクリックで任意のページを開くなどのアクションが設定できます。 動作を説明すると、まず、ページ内のテキストを選択します。 すると、ポップアップが現れて、コピーの他、各種検索サイトに誘導させることができます。 拡大すると以下のような感じです。 ブラウザのコンテキストメニュー拡張みたいですが、これならどんなブラウザでも同じものを見せられます。サイトの内容によっては大きくユーザビリティを上げられそうです。 で、クリックすると、ここからが面白くて、ページの上部からIFRAMEが現れてアニメーション
ハメコミ合成などに使えるPhotoshopによるガジェット画像作成チュートリアル集。iPhoneなどのSmartPhoneなどのガジェットをPhotoshopで描画するチュートリアル集です。 これらを参考に独自にガジェットを考案してみるのも面白いかもしれませんね。 以下のエントリを参照してください。 30 Gadget Design Tutorials for Photoshop 関連エントリ プロレベルのPhotoshopチュートリアル集 2009年の凄いPhotoshopチュートリアル100種 輝く綺麗なクリスマスツリーを描画するPhotoshopチュートリアル
レイアウト作成に役立つCSSグリッドレイアウトジェネレーターがまとまったエントリのご紹介です。 複雑なグリッドレイアウトもジェネレーターで下地はさくっと作っちゃうことができますね。 スピード重視のレイアウト作成時に使えます。 以下のエントリを参照してください。 6 Amazing CSS Grid Layout Generator For Web Designers | denbagus blog こういうツール以外にも、もとからあるテンプレート集やフレームワークでやっちゃうという方法もアリですね。 関連エントリ 複雑なCSSレイアウトもサクッと実装できるCSSフレームワーク「emastic」 42個のフリーCSSレイアウト-サンプル集「Free Faux Column CSS Layouts」 フリーで使えるCSSレイアウトのテンプレート配布サイト
日本語で読めるSEO/SEM情報モバイルSEOはじめの一歩 - 検索エンジンにインデックスさせるには (アイレップの SEM フロンティア)モバイル端末がアクセスしたときに、モバイル専用サイトを見せているWeb担当者も多いだろう。ここで注意すべきは、モバイル検索用のクローラにもモバイルサイトを見せなければならないということだ。さもないと、モバイルサイトがインデックスされないという事態に陥ることがあるそうだ。 モバイル検索のクローラにモバイルサイトを見せるには、検索エンジン会社が公開しているモバイルクローラのユーザーエージェント名やIPアドレスで振り分ける方法が一般的だ。 PCサイトからモバイルサイトへのリダイレクトは301? 302? (アルファSEO)モバイル端末からPCサイトにアクセスした場合にモバイルサイトにリダイレクトするときには、301と302どちらのリダイレクトを使うべきなのだ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く