Photoshoopでの作業時間を短縮するのに役立つ10のテクニック
10 Photoshop Quick Tips to Improve Your Workflow 下記は各ポイントを意訳したものです。 1. レイヤースタイル パネルでの操作 2. 空の選択範囲の変形 3. 斜めの画像を水平にする 4. 画像に磨りガラスのようなパネルを設置 5. キレイな切り抜きを素早く 6. 瞳のカラーを変更 7. 画質に影響を与えないで照明のエフェクト 8. 作業確認用の新規ウインドウ 9. 画像からカラースウォッチを作成 10. レイヤースタイルをレイヤーの一部に適用 1. レイヤースタイル パネルでの操作 レイヤーパレットの下の「fx」ボタンをクリックすると開くレイヤースタイル パネルで、レイヤースタイルのアクティブ時に直接微調整ができます。 操作可能なスタイルは、4つです。 ドロップシャドウ グラデーションオーバーレイ サテン パターンオーバーレイ 4つのスタイ
[JS]簡単な記述で、軽快で滑らかなアニメーションが実装できるスクリプト -JSTween
オブジェクトの移動や拡大・縮小、不透明度の変更、CSS3のシャドウや角丸などを滑らかアニメーションで簡単に実装できるjQueryのプラグインを紹介します。 アニメーションのエフェクトは、31種類！ JSTween [ad#ad-2] JSTweenの特徴 JSTweenのデモ JSTweenの使い方 JSTweenの特徴 軽快に動作し、パフォーマンスに優れています。 アニメーションを使った複雑なインタラクションが実装できます。 フレームレートを使ったスムーズなアニメーション。 実装はjQueryベースで簡単。 簡単に始められ、シンプルに実行できます。 JSTweenのデモ
[JS]Responsiveデザインでサイズ可変の画像でもクリッカブルマップ対応にするスクリプト -RWD Image Maps
実装も簡単で超軽量、Responsiveデザインで画像のサイズが変わってもクリッカブルマップの座標を計算しなおすjQueryのプラグインを紹介します。 デモページ：幅480pxで表示 [ad#ad-2] RWD Image Mapsの使い方 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script src="jquery.rwdImageMaps.min.js"></script> HTML HTMLはクリッカブルマップを通常通り記述するだけです。 <img src="powerpuff-girls.fw.jpg" width="1024" height="768" usem
[CSS]Responsiveデザイン対応のページ制作に役立つ5つのスタイルシートのテクニック
Responsiveデザイン対応ページを制作する際に役立つ、max-width, min-width, overflowなどの役立つ5つのテクニックを紹介します。 5 Useful CSS Tricks for Responsive Design [ad#ad-2] 下記は各ポイントを意訳したものです。 動画コンテンツの配置 max-width, min-widthの小技 値を相対値に overflow: hiddenを使ったテクニック 長いテキストは折り返す 動画コンテンツの配置 Responsiveデザインに対応した動画コンテンツの配置方法です。 デモページ CSS: 動画コンテンツの配置 .video { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .video iframe,
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
[JS]異なる高さのdiv要素を揃えるだけでなく、均等割付やグリッドに揃えることもできるスクリプト -jQuery.grrrid.js
CSSリセットとは異なる、Normalize.cssの特徴や使い方などの解説 -About normalize.css
Normalize.cssって何？ CSSリセットとは違うの？ どうやって使うの？ といった疑問を解決するNormalize.cssの制作者自らの解説を紹介します。 About normalize.css [ad#ad-2] 下記は各ポイントを意訳したものです。 Normalize.cssとは Normalize.cssの特徴 ノーマライズ vs リセット Normalize.cssの使い方 終わりに Normalize.cssとは Normalize.cssとは、クロスブラウザにHTMLのエレメントのデフォルトのスタイルを提供する小さなCSSファイルです。HTML5にも対応しており、従来のCSSリセットに代わるものです。 normalize.cssの関連サイト Normalize.cssの本サイト Normalize.cssのソース Normalize.cssのドキュメント Normal
[JS]タイル状に配置した画像やテキストをランダムな順番でふわりと表示するスクリプト -champagne.js
グリッドに沿ってタイル状に配置した画像やテキストなどのエレメントをランダムな順番でふわりと表示するjQueryのプラグインを紹介します。 champagne.jsを実際に使用しているサイト「Perkstreet」 [ad#ad-2] champagne.jsの使い方 champagne.jsは、3ステップで簡単に実装できます。 画像やテキストをタイル状にCSSで実装。 jQueryと当スクリプトをインクルード。 親エレメントをjQueryのセレクタで指定し、スクリプトを実行。 下記に、デモページを例に実装方法を紹介します。 外部ファイル 「jquery.js」と当スクリプトを外部ファイルとして記述します。 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery
[JS]ウェブページのUIエレメントにちょっとだけ便利な機能を加えるスクリプト -minjs
フォーム、テーブル、カレンダーなど、ウェブページで使用するUIエレメントに便利な機能を加えるjQueryのプラグインを紹介します。 minjs - Minimalist JavaScript [ad#ad-2] minjsは現在、3つのモジュールが公開されています。 minform longtable drcal minform HTML5のフォーム周りの便利な機能を非サポートブラウザでも利用できるようにします。 デモ ダウンロード minform -GitHub [ad#ad-2] minformの使い方 minformはスクリプトを外部ファイルとして記述するだけで、下記のフォーム関連の機能が非サポートブラウザでも利用できるようになります。 placeholders 入力欄にヒントのテキストを表示します。 autofocus 入力欄をフォーカスします。 required 必須入力の欄で、
Photoshopのドロップシャドウの使い方をマスターするチュートリアル
ドロップシャドウはウェブデザインで非常に人気のあるエフェクトです。 このドロップシャドウのエフェクトを使いこなすために、Photoshopのドロップシャドウの各種設定の使い方を紹介します。 How to Use Drop Shadows in Photoshop [ad#ad-2] 下記は各ポイントを意訳したものです。 ドロップシャドウとは レイヤースタイルのドロップシャドウ 描画モード 不透明度 角度 距離 スプレッド サイズ 輪郭 ノイズ ノックアウト 設定の保存と初期化 ドロップシャドウのサンプルファイル ドロップシャドウとは ドロップシャドウの主な用途は、2Dのイメージで3Dの奥行きをシミュレートすることです。これはオブジェクトが3Dの空間で背景の上に浮いていることを表すために、オブジェクトの後ろにオフセットのシャドウをつけます。 下記の例はドロップシャドウを変えることで、光源の大
overflowを使ってfloatの問題を解決するスタイルシートのテクニック | コリス
フロートした子要素を内包するコンテナが高さを拡張しない問題を解決するためのテクニックはさまざまなものがあります。 その中から、overflowを使った方法とその際に生じる問題点とその解決方法を紹介します。 CSS: Clearing Floats with Overflow [ad#ad-2] 下記は各ポイントを意訳したものです。 はじめに Demo 1: overflow:auto; Demo 2: overflow:hidden; overflowを使って生じる問題点と解決方法 はじめに フロートベースのレイアウトをする際、ラッパーとなるコンテナがフロートしている子要素に対して高さを拡張しないことは、普通によくある問題です。 デモ：１ フロートをクリアする要素を配置して解消した例 しかし、この問題を解決するために、「overflow」プロパティでもできることを知っていましたか？ これは
[JS]スライドを縦横斜めのダイナミックなスクロールで表示するスクリプト -Ascensor.js
デモページ ページ中央の「Demo and how to use」をクリックします。 操作は、左上の「prev, next」、右下の「ナビゲーション」、キーボードの「矢印キー」です。 [ad#ad-2] Ascensorを実際に使用しているサイトも紹介します。 Reverse Buro Ascensorの使い方 外部ファイル 「jquery.js」と「scrollTo.js」、そして当スクリプトを外部ファイルとして記述します。 <script src="js/jquery.min.js" type="text/javascript"></script> <script src="js/jquery.scrollTo.js" type="text/javascript"></script> <script src="js/jquery.ascensor.js" type="text/java
[CSS]スクリプト無しで、高さがバラバラの画像を隙間無く配置するスタイルシートのテクニック | コリス
ブラウザのサイズを変更してもそれに合わせて、高さがバラバラの画像をグリッドに沿って隙間無く配置するスタイルシートのテクニックを紹介します。 Seamless Responsive Photo Grid デモページ [ad#ad-2] 下記は各ポイントを意訳したものです。 画像を隙間無く配置する実装方法 HTML HTMLはimg要素をsection要素で内包したシンプルなものです。 <section id="photos"> <img src="images/dog-1.jpg" alt="Little doggie"> <img src="images/cat-1.jpg" alt="Little kittie"> ... </section> CSSをオフにすると、img要素はinline-blockなので、下記のように連続して並ぶだけです。 デモページ：CSSオフの表示 こういったエ
[CSS]画像やパネルに斜めにしたリボンを重ねるスタイルシート
「New」「新着」などのちょっとした情報を単に矩形で添えるのではなく、斜めにしたリボンで添えるスタイルシートを紹介します。 Creating CSS3 Image Ribbon Tags [ad#ad-2] デモ 実装 デモ 元記事ではimg要素にリボンが添えられており、当方でdiv要素のパネルのデモを作成しました。 まずは、img要素の画像から。 デモページ：div要素 ※当方作成 実装 実装はimg要素もdiv要素もほぼ同じです。 HTML:img要素版 リボンのテキストはimg要素と並列に配置し、div要素で内包します。 <div class="side-corner-tag"> <img src="1.jpg" alt="" /> <p><span>newest</span></p> </div> CSS:img要素版 このエフェクトの要点はラッパーの「overflow: hidd
[JS]jQueryのプラグイン33+1選 -2012年4月
紹介済みから未紹介のものまで、jQueryのプラグイン34選です。 Wookmark コンテンツをレンガ状に配置するだけのシンプルなスクリプト。 jmpress.js スライドをダイナミックなアニメー
[CSS]パネル切替時の普通のエフェクトに飽きた人用、立体的にくるっと回転させるスタイルシート
ホバー時：回転完了 実装 HTML パネルは、通常時の一枚画像、ホバー時のインフォメーションをdiv要素で内包します。 <div class="wrapper"> <div class="item"> <img src="images/contact.png"> <span class="information"> <strong>Contact Form</strong> The easiest way to add a contact form to your shop. </span> </div> </div> 実装のイメージは下記のようになります。 通常時は「front side」の画像が表示され、ホバー時に「bottom side」のインフォメーションが表示されます。 CSS まずは、ラッパーのスタイルです。 perspectiveを使用して3Dの奥行きを与え、transfor
[JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr
jQueryなどの他のスクリプトに依存せず、スタンドアローンでパララックスのエフェクトを実装できる超軽量（2.2KB）のスクリプトを紹介します。 skrollr -GitHub [ad#ad-2] skrollrのデモ skrollrの使い方 skrollrのデモ パララックスは複数のエレメントを異なるスピードで動かすことで奥行きの錯覚を起こすもので、skrollrはスクロールの量に応じて、ページ上の各エレメントにさまざまなスタイルを定義することができます。 デモではその面白いパララックスのエフェクトが楽しめます。 デモは3つあり、まずはskrollrが楽しめるメインのデモから紹介します。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
商用利用も無料、美しいページレイアウトと細部まで作り込まれたUIエレメントが揃ったウェブデザイン用のPSD素材 -Blaz.
[CSS]スタイルシートの量を少し減らした、新しいclearfix -micro clearfix
http://coliss.com/articles/build-websites/operation/design/watercolor-effects-in-web-design-and-tutorials.html?amp=&=
約200種類のデザインが揃ったアロー素材（フォント・ベクター・PSD・PNG） -Arrows