メタリック感がリアルかなりクールなブラックのボタン作成Photoshopチュートリアル:phpspot開発日誌
Stylish Metallic Button in Photoshop | Abduzeedo | Graphic Design Inspiration and Photoshop Tutorials メタリック感がリアルかなりクールなブラックのボタン作成Photoshopチュートリアル。 次のようなボタンを作成するチュートリアルです。 円のふちはレイヤースタイルで比較的容易に実現できます。 あとはレイヤースタイルとパスツールを使ってよりリアルにしていきます。 レイヤースタイル、パスツール、グラデーション機能をフルに使っていて色々と応用できそう。 関連エントリ プロレベルのPhotoshopチュートリアル集 クラウド時代にファンシーな雲を描画するPhotoshopチュートリアル ボタン作成のPhotoshopチュートリアル集
プリントして使えるクールな名刺作成Photoshopチュートリアル:phpspot開発日誌
Hi-Styled print ready business card design | hv-designs プリントして使えるクールな名刺作成Photoshopチュートリアル。 次のような名刺のデザインを作成するチュートリアルです。デザインは賛否ありそうですが、ガイドを設定して名刺を作っていく流れは参考になります。 デザインのサンプルは色々あると思いますが、こうしたチュートリアルと組み合わせていい名刺作りの参考になりそう。 関連エントリ スーパークールな名刺デザイン３６ 裏表使えるクールな名刺のPhotoshopテンプレート５ クールな名刺を作る際のチュートリアル集
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」 2009年10月26日- PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_ShortURL」が本家PEARにあがってます。 bitly, tr.im以外にも、is.gd, short.ie、digg、tinyurl の短縮サービスが現状では使えて、今後もプラグイン形式で簡単に増やすことができるクラス構造になっています。 alpha版という位置づけなので注意が必要ですが、簡単にURLの短縮ができるのでとても便利です。 サービスで、URLを短縮したい、そしてその短縮URLに好きなサービスを使いたいので選択できるようにしたい、というニーズに応じる際に非常に便利なライブラリとなっています。 では、それぞれのサンプルコード
かなりクールにデザインされたPhotoshop用のボタンテンプレート集:phpspot開発日誌
Best of Free Clean PSD Buttons ready for web2.0 | djavupixel.com かなりクールにデザインされたPhotoshop用のボタンテンプレート集。 CSS3でかなりボタンをデザインできるようになったとはいえ、そこまでやるなら画像にしちゃったほうが、という場面も多くあります。 Photoshop用のボタンテンプレートが色々まとまっていたのでデザインの際の参考にできそうです。 36 Free High Quality Web Buttons Different buttons and states with sliders and drop downs by James McDonald Download 60 glossy web buttons in PSD & PNG Grey Button with hover by Ignaci
８０種類！Photoshopのテキストチュートリアル集:phpspot開発日誌
80 Best Photoshop Text Effects Tutorials, Part III | Photoshop Tutorials ８０種類のPhotoshopのテキストチュートリアル集がまとまったエントリのご紹介です。 既にこのブログで紹介したものも多く含まれていますが、紹介していないものも多数掲載されていました。 ロゴ作成の際の参考などに使えそうです。 関連エントリ 背景がウェービーでおしゃれなテキストを作成するPhotoshopチュートリアル 2008年、使えるPhotoshopテキストエフェクトチュートリアル集 立体的で飛び出しそうな3Dテキスト描画Photoshopチュートリアル スターウォーズの映画ロゴ風テキスト作成用Photoshopチュートリアル Photoshopでテキストに3D効果を与えるチュートリアル２５
高度な画像編集が一瞬でできてしまうPhotoshopアクション集:phpspot開発日誌
25 Adobe Photoshop actions for a graphic designer toolbox | reADactor 高度な画像編集が一瞬でできてしまうPhotoshopアクションが２５種類紹介されてます。 アクションでここまで出来ちゃうのかというアクション集で、覚えておくと結構楽が出来そうです。 複数のレイヤーをカバーフローみたいに並べて次のように加工してくれるアクション CDカバーを立体的にしてくれるアクション ペーパーバック風にしてくれるアクション DVDケースにしてくれるアクション ２Dのパッケージ画像を立体的でリフレクションのかかった３D画像にしてくれるアクション 虫眼鏡で拡大する効果を得られるアクション 立体的なパネルに加工してくれるアクション キャンバスから飛び出した風の画像を作成できるアクション すべて無料というわけではありませんが、安価に高度な加工が
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ:phpspot開発日誌
年月日、時間、分までが一括で選べちゃう時間指定ウィジェット実装JSライブラリ。 次のような、時間に関する指定が一括で出来ちゃうウィジェットが公開されています。 インプットボックスにカーソルを合わせるとポップアップして表示させることも可能です。 時間指定が便利になっていいかもしれませんね。 以下のエントリを参照してください。 Any+Time JavaScript Library
Google Wave風のクールなヒストリースライダー作成サンプル＆チュートリアル:phpspot開発日誌
Google Wave風のクールなヒストリースライダー作成サンプル＆チュートリアルです。 jQueryを使ってGoogle WaveのクールなUIを実現しています。 スライドさせる位置によって表示させるコンテンツ量をスムーズに切り替えることが出来ます。 アニメーションが滑らかな点もGood。 左にスライドでコンテンツ量を抑制。最近のエントリだけを表示、のようなことが可能です。 一昔前では考えられなかったUIですが、こうしたＵＩを使って掲示板なんかを作ったらカッコいいものが出来そうですね。 以下のエントリを参照してください。 Making a Google Wave History Slider ? Tutorialzine
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」:phpspot開発日誌
テーブルの内容をリアルタイムにグラフ描画できるjQueryプラグイン「graphTable」。 このプラグインを使えば、テーブルのデータを読み込んで、リアルタイムにグラフ化してくれます。 $('#table1').graphTable({series: 'columns'}); みたいにすることで、指定したテーブルのデータを次のように描画させることが可能です。 既存の表がある場合は、ブラウザ上でグラフ化することが出来て便利ですね。 以下のエントリを参照してください。 graphTable: graph data from HTML table using flot | jQuery Wisdom 関連エントリ jQueryで実装する進捗グラフ付き複数ファイルアップローダー JavaScript用のグラフ描画ライブラリ色々 CSSだけで円グラフを表示するサンプル
「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門:phpspot開発日誌
「HiFi RegExp Tool」を使って超高速に学ぶ正規表現入門。 先日『その場で動作させて確認する正規表現入門ツール「HiFi RegExp Tool」』として視覚的に動作が分かる正規表現ツールをご紹介しましたが、このツールを使った正規表現の入門実習を実際にしてみましょう。 入力してその場でマッチングされた文字がリアルタイムにハイライトするのですぐ効果が得られ、学習ツールとして非常に便利です。 HTML5では正規表現が使える、ということで、まだやってないというマークアップエンジニアやデザイナーの方、プログラミング勉強中な方は速攻でマスターしちゃいましょう。 HTML5以外でも、Windows用のエディタ等で文字列を一括置換したり、JavaScriptやPHP、Perlなどの言語でマッチングや置換に使えて覚えておいて損はありません。 ツールのURL: HiFi RegExp Tool
ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」:phpspot開発日誌
PHPからbit.lyやtr.im等のURL短縮サービスをまとめて扱える「PEAR::Services_Sho... 次の記事 ≫：Windows7風ナビゲーション作成チュートリアル ブラウザのサイズに合わせて画像を伸縮する作業を全自動化するjQueryプラグイン「maxImage」。 このプラグインを使えば、画像のサイズをブラウザサイズの変更があったとしてもページのサイズに合うように調整してくれ、デザイン崩れを防ぐことが出来ます。 以下にその機能を紹介してみます。 活用例１ 背景画像自動 背景画像をブラウザサイズ変更に合わせて自由に伸縮 ブラウザのサイズを変えても違和感がないようにすることが可能 活用例２ ブラウザ幅にあわせた画像の自動伸縮 ページの右端に画像があって、自由に伸縮します。 サイズを変えてもこの通り、画像が残りスペースのサイズになります 活用例３ ブラウザ幅に合わせる、がオ
マウス位置を拡大して表示できるjQueryプラグイン「zooma」:phpspot開発日誌
jQuery - zooma pluging example マウス位置を拡大して表示できるjQueryプラグイン「zooma」。 次のようにカーソル位置を拡大して別のブロックに表示することが出来るプラグインです。 実際に１から実装するとなると結構大変ですが、jQueryプラグインなので次のように簡単に初期化することが出来ます。 var zoomImgUrl = $('#zoomImageRefContainer').find('a').attr('href'); $('div#slideshow').zooma('slideshow', 'zoomBlock', zoomImgUrl); あまり使うことはないかもしれないけれど覚えておけば使うことがあるかもしれませんね。
つい押したくなるようなボタン作成Photoshopチュートリアル集:phpspot開発日誌
つい押したくなるようなボタン作成Photoshopチュートリアル集が40種類ほど公開されていました。 ボタンといっても色々な種類があって、ちょっとした変り種のボタンを作る際にも参考にできそうな豊富なチュートリアル集になってるようです。 各リンク先は以下のエントリを参考にしてください。 40 Best Photoshop Tutorials for Creating Buttons and Badges | Naldz Graphics
WEBデザインに参考に出来そうなWEBデザインやパーツデザイン集:phpspot開発日誌
WEBデザインに参考に出来そうなWEBデザインやパーツデザイン集まとめ。 秀逸なデザインは沢山出てきていて、この瞬間もどんどん生まれているようで、順次、紹介していきたいと思います。 美麗WEBデザインのまとめ 20+ Sites Using Amazing Lighting Effects | Design Reviver 光をうまく使ったサイトデザイン集２０＋ 60+ Amazing Examples Of Illustrative Web Designs With Overview | Inspiration | instantShift イラスト風WEBデザインのまとめ 30 Clean and Bright Website Designs クリーンで明るい感じのサイトデザインまとめ３０ Beautiful Single Page Website Designs: 65 New Ex
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ:phpspot開発日誌
JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ 2009年08月18日- JavaScriptのウィジェット作成や各種メニュー作成等、便利なチュートリアル集のまとめ。 ここ最近で巡回したもので便利そうなチュートリアルを以下にまとめてみました。 沢山あるので使えそうなものだけ覚えておくとよいかもしれません。 Quick Tip ・Resizing Images Based On Browser Window Size ブラウザサイズによって画像のサイズを変えるjQueryチュートリアル Horizontal Sub-nav with CSS & jQuery - Subnavigation Tutorial - CSS Tutorial - jQuery Tutorial 水平サブナビゲーション実現のためのjqueryチュートリアル Making
Twitter風のドロップダウンボックスなログインフォーム作成チュートリアル:phpspot開発日誌
Perfect signin dropdown box likes Twitter with jQuery|AEXT.NET Twitter風のドロップダウンボックスなログインフォーム作成チュートリアルが公開されています。 少ないスペースでサインインリンクを表示し、クリックで画面遷移なしにフォームを表示するということでスペースを有効に利用できます。 「Sing in」をクリックすると開きます。 デモページ サインインだけでなくて、他にも応用できそうですね。 関連エントリ jQueryを使ったブラウザ上で動作するLeopardデスクトップの構築 jQueryとPHPでダイナミックな投票スクリプトを作成 これは驚きの、CSSだけで作れる吹き出しボックス jQueryを使ったタグクラウド生成チュートリアル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アメコミに使われていそうなフォント集:phpspot開発日誌
女の子が書いたような可愛い英字フォント「alliewriting」:phpspot開発日誌
WEBデザインの修飾に役立ちそうなPhotoshopテクニック集:phpspot開発日誌
Photoshopでブラシを作る方法チュートリアル:phpspot開発日誌