Photoshop初心者さんが写真のレタッチ（色調補正）などをするために覚えたい機能

2011/01/27 1776 users 乗算 トーンカーブ 補正 スクリーン ブレンドモード

Photoshop初心者のころ分かりにくいなーと思った写真の補正に関する機能についてまとめてみました。レベル補正、トーンカーブはもちろん、オーバーレイ、乗算、スクリーンなどのブレンドモードについてもできるだけ分かりやすく書いてみました。WebテクニックbeginnerPhotoshop Share私は毎日使っているAdobe Photoshopですが、まだまだ使いこなせてません ... 初心者だっ... 続きを読む

[JS]これFlashじゃないの？ってなるナビゲーションを実装するjQueryのチュートリアル | コリス

2011/03/27 655 users ローディング グリッド jQuery メインメニュー コリス

まずは、デモページを堪能ください。 ナビゲーションの各ラベルをクリックすると、それに対応したパネルがアニメーションを伴って開くようになっています。デモページ実装HTMLの構造は、背景画像、グリッドのオーバーレイ、ローディングのアイコン、メインメニューの4つから構成されています。HTML：背景背景は、背景画像とオーバーレイとローディングをdiv要素で内包します。 続きを読む

GIGAZINE - CSSで角をもっと丸くする方法いろいろ

2006/05/25 478 users GIGAZINE CSS projects フッター ヘッダー

「スライディングドア」と呼ぶ方法で全体をヘッダー、ボディ、フッターの3つに分割して、コーナー部分などはオーバーレイとか使ってみましょう、という方法。 Another attempt at CSS rounded-corner dialogs using the sliding doors technique http://www.schillmania.com/projects/dialog/ 使... 続きを読む

これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック:phpspot開発日誌

2009/08/16 401 users phpspot開発日誌 CSSテクニック アルバム風 画像

Sexy Music Album Overlays Komodo Media これは楽しい！どんな画像もCDのアルバム風にできるCSSテクニック。 どんなサイズの画像も、次のようなジュエルケースに押し込んでしまえるCSSのテクニックです。 CSSが無い状態だと次のような殺風景な状態ですが、CSSとPNGのオーバーレイによって美しいジュエルケースに入った状態になってますね。 他にもスタイルが容易され... 続きを読む

ウェブデザインで効果的に半透明とオーバーレイのテクニックを使う方法とその実例 | コリス

2011/05/12 376 users コリス ウェブデザイン 半透明 Overlay 実例

半透明とオーバーレイのテクニックは効果的に使用すると、奥行きとリアリズムを作り出し、退屈なウェブデザインにモダンな印象を与えます。 Onextrapixelから、ウェブデザインにおいて効果的に半透明とオーバーレイのテクニックを使う方法とその実例を紹介します。 下記は各ポイントを意訳したものです。 Dark Overlay Light Overlay Color Mixes Dark Overlay... 続きを読む

[JS]大量の画像コンテンツに便利！ サムネイルを自動生成するスクリプト -NailThumb | コリス

2012/04/12 368 users コリス クロップ キャプション リサイズ サムネイル

NailThumbのデモ NailThumbの使い方 NailThumbのデモ NailThumbは元画像のアスペクト比を維持したまま、クロップやリサイズをしてサムネイルをスクリプトで生成します。 サムネイルはさまざまなフォーマットが用意されています。 キャプション テキストをオーバーレイで表示することもできます。 NailThumbの使い方 NailThumbの基本的な使い方は、サムネイル用のコ... 続きを読む

[JS]既存のLightbox系スクリプトの不満を解決したスクリプト -Lightbox_me | コリス

2010/05/30 306 users コリス jQuery lightbox ドキュメン リサイズ

IE6にも対応した、DOMエレメントをLightboxのエフェクトで表示するjQueryのプラグインを紹介します。 Lightbox_me – Stupidly Simple Lightboxing Lightbox_meは他のLigtbox系スクリプトのソリューションにはない特徴をもっています。 DOMエレメントをLightbox化。 ウインドウのリサイズ時はオーバーレイもリサイズ。 ドキュメン... 続きを読む

[JS]チェックしておきたいjQueryのプラグインのまとめ -2013年3・4月 | コリス

2013/04/21 291 users jQuery lightbox コリス キャプション 補足説明

紹介済みから未紹介のものまで、最近リリースされたjQueryのプラグインをまとめました。 Intro.js ページのガイドを表示します。 Chardin.js オーバーレイでページの補足説明を表示します。 HCaptions 画像ホバーでさまざまなアニメーションでキャプションを表示。 SuperBox レスポンシブ対応で画像を拡大表示します、Lightboxの進化形。 tosrus タッチデバイス... 続きを読む

Mozilla Re-Mix: IE Tabを高機能化したFirefoxアドオン「Coral IE Tab」

2009/05/12 280 users Firefoxアドオン Mozilla Re-Mix 部分

(05/12)IE Tabを高機能化したFirefoxアドオン「Coral IE Tab」 (05/11)ページの「記事」部分だけを抽出してオーバーレイ表示できるFirefoxアドオン「TidyRead」 (05/11)Windows 7に[Adobe Flash Player]をインストールする方法。 (05/10)添付画像をポップアップウィンドウでスライド表示できるThunderbirdアドオ... 続きを読む

[JS]jQueryのプラグイン33+1選 -2009年10月 | コリス

2009/10/27 268 users jQuery コリス フェード パネル テキスト

紹介済みから未紹介のものまで、jQueryのプラグイン34選です。Image Overlay テキストなどのパネルを画像の上にオーバーレイ表示します。dumbcrossfade 打ち出し画像をフェードで次々に変更 [...] 続きを読む

犬も歩けばタグに当たる？：「電話、Eメール、次はAR」――「セカイカメラ」の最新デモを見た (1/2) - ITmedia D モバイル

2009/07/14 240 users ITmedia セカイカメラ iPhone タグ 最新デモ

ニュース 犬も歩けばタグに当たる？：「電話、Eメール、次はAR」――「セカイカメラ」の最新デモを見た (1/2) インターネットと現実世界を繋ぐ“電脳メガネ”的ARアプリとして注目を集める「セカイカメラ」。都内で開催されたARに関するシンポジウムで、新機能を実装した最新版セカイカメラのデモが行われた。 井口氏 「インターネットの豊かな情報を、現実の生活空間にオーバーレイしたい」――iPhoneやA... 続きを読む

[JS]オルトを利用して、画像にキャプションをかっこよく表示するスクリプト -Captify | コリス

2009/03/02 230 users コリス フェード オルト キャプション 常設

画像のオルトを利用して、画像の上にオーバーレイでキャプションを表示するスクリプト「Captify」を紹介します。 Captify demo デモでは、画像にマウスオーバーすると、下側からキャプションがスライドしてオーバーレイで表示されます。 オプションでは、キャプションの表示位置（上・下）、表示のスピード、不透明度、表示方法（フェード・スライド・常設）、クラス名などが変更できます。 キャプションは... 続きを読む

[JS]かっこいい！ブラウザや要素いっぱいに背景画像やスライドショーをアニメーションで表示するスクリプト -Vegas 2 | コリス

2015/03/19 161 users コリス jQuery Zepto スクリプト エフェクト

画像をブラウザやDOM要素の背景いっぱいに表示し、フル表示の画像にかっこいいエフェクトを加えたり、スライドショーを設置できるjQuery/Zeptoのプラグインを紹介します。 アニメーションやオーバーレイが数多く用意されており、画像にスタイリッシュなエフェクトを加えることが簡単にできます。 Vegas 2 Vegas -GitHub Vegas 2は以前紹介した1の単なるバージョンアップではなく、... 続きを読む

さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法 | 株式会社LIG

2013/07/12 137 users jQuery 株式会社LIG コンテンツ 方法

PhotoshopCS5以上を使っているなら…髪の毛の切り抜きは「境界線を調整」がオススメ！ 6834571002 続きを読む

[CSS]動画を背景に使い、オーバーレイでコンテンツを配置するテクニック（IE8、スマホへの対応方法） | コリス

2014/09/05 136 users video要素 レスポンシブ対応 コリス ブラウザ 自動再生

動画を背景としてブラウザいっぱいに表示し、その上にオーバーレイでコンテンツを配置するCSSのテクニックを紹介します。 動画の背景はレスポンシブ対応、video要素に対応していないIE8や、動画の自動再生に対応していないスマホへの対応方法も！ Create Fullscreen HTML5 Page Background Video 下記は各ポイントを意訳したものです。 以前紹介した時（前の記事）か... 続きを読む

[CSS]見た目は普通、でもエフェクトが抜群にかっこいいナビゲーションのデモ | コリス

2013/06/13 134 users ナビゲーション アニメーション レスポンシブ対応 アイコン

ぱっと見、よく見かけるレスポンシブ対応のナビゲーションのようなUIですが、かなりかっこいいエフェクトが仕込まれているデモを紹介します。 スクリプト無し、エフェクトはスタイルシートのみで実装されています。 エフェクトは、こんな感じです。 左上のアイコンをクリック・タップすると、オーバーレイでナビゲーションがダイナミックなアニメーションで表示されます。 ふわっとナビゲーションのアイテムが集まってくるの... 続きを読む

[CSS]動画を背景として表示させ、オーバーレイでコンテンツを配置するテクニック | コリス

2014/06/13 109 users video要素 コリス パネル モダンブラウザ ブラウザ

動画をブラウザいっぱいに背景として表示させ、その上にコンテンツをオーバーレイで配置するテクニックを紹介します。 Create Fullscreen HTML5 Page Background Video デモ 実装 デモ デモはvideo要素に対応したモダンブラウザでご覧ください、IEは9+で、IE8だと動画が画像に変更して表示されます。 デモページ コンテンツを配置した右のパネルは、動画が透けて... 続きを読む

商用利用無料、紙・キャンバス・布・水彩・電子基板など高解像度で高品質なテクスチャ素材のまとめ | コリス

2016/01/18 101 users クライアント 質感 ポスター コリス 用途

Webデザインに背景として使ったり、写真や文字にオーバーレイで重ねたり、同人誌やポスターの紙のデザインで質感を加えたり、高解像度・高品質なテクスチャ素材を紹介します。 紙やノート・キャンバス・布・水彩・木・モニター・電子基板など、さまざまな用途で利用できるものをまとめました。 ここで紹介しているテクスチャ素材はすべて、個人・商用利用ともに無料で、クライアントのプロジェクトや同人誌などの販売品に利用... 続きを読む

[CSS]パラパラ漫画のように画像を次々に表示させるCSS3アニメーションを使ったスライドショー | コリス

2012/05/11 84 users コリス Alt CSS パラパラ漫画 スライドショー

マウスのホバー時に、画像を次々に表示させるスタイルシートを紹介します。 デモはモデルのかっこいい写真ですが、これはパラパラ漫画だ！と思いましたｗ デモ：With titles 実装 HTML HTMLはシンプルで、複数のimg要素とオーバーレイで表示させているテキストをdiv要素で内包します。 <div class="hs-wrapper"> <img src="images/1.jpg" alt... 続きを読む

Webデザインで魅力的なビジュアルを作りだすパステルカラーの効果的な使い方 | コリス

2014/12/24 82 users パステル イエロー 淡いピンク デザイナー トレンド

Webデザインでパステルカラーを使うのは最近のトレンド、またはそれ以上といってもよいでしょう。魅力的なビジュアルを作るために、デザイナーがマスターしておきたいパステルカラーの効果的な使い方を紹介します。 「パステル」と聞くと、淡いピンクやイエローを思い浮かべる人が多いかもしれません。ここで紹介するパステルにはもっと多くのカラーがあります。 Solasie パステル調の写真やパステルをオーバーレイさ... 続きを読む

[JS]実装は簡単！ページの使い方の説明などをかっこよくオーバーレイで表示するシンプルなスクリプト -Chardin.js | コリス

2013/04/04 82 users コリス stylesheet スクリプト 実装 rel

デモページ：オーバーレイ非表示 Chardin.jsの使い方 Step 1: 外部ファイル 「jquery.js」と当スクリプト・スタイルシートを外部ファイルとして記述します。 <link href="chardinjs.css" rel="stylesheet"> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>... 続きを読む

[CSS]画像にかっこいいアニメーションでオーバーレイのメッセージを表示するスタイルシート | コリス

2012/06/27 79 users コリス パラグラフ slider CSS スライダー

CSSで作成したイメージスライダーに、ホバー時にメッセージを半透明のパネルに表示するチュートリアルを紹介します。 実装 実装のポイントだけピックアップ。 HTML メッセージの見出しとパラグラフをdiv要素で内包し、さらにa要素で内包したものを1コンテンツとして、スライダーを実装します。 画像はそれぞれの背景として配置します。 <div class="slider"> <a href="#"> <... 続きを読む

[JS]普通のとはちょっと違う、オーバーレイのスライド方法が面白いホバーエフェクト | コリス

2012/04/25 79 users コリス class エフェクト div要素 img要素

画像を配置したパネルをホバーすると、各アイテムをまたいでオーバーレイのパネルがスライドするエフェクトを紹介します。 デモ：Inverse 反対の面からスライドするデモです。 実装 HTML 各パネルは画像のimg要素とオーバーレイのdiv要素が一組になっており、リスト要素で実装します。 <ul id="da-thumbs" class="da-thumbs"> <li> <a href="http... 続きを読む

10分で分かる！Adobe XDの新機能や実践的な使い方が学べるAdobe公式チュートリアルファイル中級編 | コリス

2018/06/21 75 users コリス ブッダ 四則計算 固定ヘッダ Adobe XD

Adobe XDは毎月アップデートされ、6/19のアップデートでは待望の固定ヘッダ・フッタ、アートボードのオーバーレイ、数値フィールドの四則計算に対応しました。Webサイトやスホマアプリの制作に役立つ機能ばかりで、作業がどんどん便利になっています。 そんな新機能も含めた使い方が学べる「Adobe XDスターターキット中... 続きを読む

ITmedia News：YouTube、オンラインビデオ編集ツール公開

2007/06/18 74 users ITmedia News Ado YouTube 音声 ツール

ニュース YouTube、オンラインビデオ編集ツール公開 「YouTube Remixer」を使えば、YouTube上でビデオをテキスト、音声、グラフィックス、オーバーレイ、特殊効果などで加工できる。 2007年06月18日 10時46分 更新 YouTubeは6月15日、同サイト上でビデオを編集できるツール「YouTube Remixer」をリリースした。 YouTube RemixerはAdo... 続きを読む