PhotoshopとjQueryを使ってイメージスライダーを作成する方法

間違いなく、イメージスライダーはビジネスWebデザインで最も一般的に使用されている要素の1つです。比較的サイズが大きいため、サイトに到着すると訪問者の注意を引くことができます。ウェブはイメージスライダーの使いやすさについて再考し始めていますが、それはまだウェブデザイン業界の新参者のための必需品として考えられています.

このWebデザインのチュートリアルでは、Photoshopを使用して上記のカスタムイメージスライダーを作成する方法を学習します。ここから最終結果をプレビューできます。それをPhotoshopで説明するだけでなく、それをHTML / CSSに変換し、その素晴らしいスライド効果のためにjQueryを追加することによって、機能的なデザインに変えるつもりです。.

複雑なことがたくさんあるように思えますが、実際には非常に簡単で理解しやすいので、それから始めましょう。!

イメージスライダーを採用し、それを途中でカスタマイズすることについてもっと興味がありますか？ここにあなた専用の投稿があります.

画像スライダー：23のjQueryスライダー
画像スライダー：18ワードプレスプラグイン

入門

このチュートリアルでは、次の資料が必要になります。

PSDfreemiumからの26の反復可能なピクセルパターン.
jQueryライブラリ
Nivo Sliderプラグイン
Modernizr
VandelayPremierから見つけた紙のテクスチャ
（代替）13本部古紙テクスチャ
Rinjani by Ciaciya
Stupa by Agnes Sim
Nino Satriaによる集計
Timo Balkによるオファリング
ウルワツ - バリバイアリスジェイ

パートI - イメージスライダーの設計

ステップ1：背景の設定

サイズ1000×700 pxの新しいファイルを作成することから始めます。背景色を塗りつぶし＃efc89e.

PSDfreemiumのフリーピクセルパターンを使用してパターンオーバーレイを追加.

ステップ2：スライダーベース

長方形ツールを有効にします。サイズ940×450ピクセルの長方形を作成します。あなたはどんな色も使うことができます、それは問題ではありません.

レイヤーをダブルクリックしてレイヤースタイルダイアログボックスを開きます。レイヤースタイルのドロップシャドウ、外光、および線を追加する.

これが結果です。スライダーベースは後ろに柔らかい影のある素敵なフレームを持っています.

ステップ3

写真を追加して、スライダーベースの上に置きます。 Ctrl + Alt + Gを押してクリッピングマスクに変換し、写真をスライダに挿入します。.

ステップ4：リボン

リボンとして使用するために色＃f4e1aeで長方形を描きます.

図形のレイヤーをダブルクリックして、以下の設定でベベルとエンボス、グラデーションオーバーレイ、パターンオーバーレイを有効にします。.

これはレイヤースタイルを追加した結果です.

ステップ5

よりリアルにするために、リボンに紙のテクスチャを追加しましょう。リボンの形の上にテクスチャを置きます。 Ctrl + Alt + Gを押してクリッピングマスクに変換する.

ステップ6

リボンに影やハイライトを塗ってみましょう。リボンの上に新しいレイヤーを作成します。リボンの下部に黒を塗ります。クリッピングマスク（Ctrl + Alt + G）に変換してから、不透明度を10％に下げます。.

ステップ7

リボンの上部まで前の手順を繰り返します。しかし今回は、白を塗ってハイライトを追加してから、不透明度を50％に下げます。.

ステップ8：ステッチ

鉛筆ツールを起動します。 F5を押してブラシ設定を開きます。プレビュー領域に点線が表示されるまでブラシサイズを1ピクセルに設定し、間隔を広げます。.

ステップ9

リボンの上に1ピクセルの黒い線を引きます。不透明度を20％に下げます。 Ctrl + Jを押してレイヤーを複製します。Ctrl + Iを押すと色が反転します。不透明度を50％に上げます。移動ツールを有効にしてから、下矢印と左矢印を1回押してそれを動かします。.

これは100％の倍率で見た結果です。.

ステップ10

この手順を繰り返して、リボンのもう一方の面に他のステッチを描きます。.

ステップ11：華やかな形を追加する

前景色をグレーに設定します。華やかな形を描くためにサイズ1ピクセルの柔らかいブラシを使用してください。創造的になりなさい、あなたはあなたが好きな形を使うことができます。その隣に、1ピクセルの線を引き、次に柔らかい消しゴムツールを使用してその外側の端を消去します。線を複製し、水平に反転して反対側に配置します.

ステップ12

すべての華やかなレイヤーを選択し、Ctrl + Eを押して1つのレイヤーに結合します。図形を複製してから、元の華やかな図形の下に配置します。色を反転するにはCtrl + Iを押します。移動ツールを起動し、それから下に1回押して下に動かす。.

ステップ13：写真情報

リボンの内側に写真データを入力.

ステップ14：ナビゲーション

次に、スライドナビゲーション用の円をいくつか描きます。色付きの円形を描く：リボンの下部に＃8d877c.

以下の設定を使用して内側の影を追加.

これが結果です。円は今浅い穴になっています.

ステップ15

Altキーを押しながら円図形レイヤーをドラッグして複製します.

ステップ16

これらのリンクの1つにアクティブ条件を設定しましょう。円を1つ選択して、色を＃bebbb5に変更します。内側の影、グラデーションオーバーレイ、およびストロークを追加する.

ステップ17

Ctrlキーを押しながらレイヤーパネルでリボンベースのサムネールをクリックします。リボンの下に新しいレイヤーを作成し、黒で塗りつぶします。移動ツールを起動して、左と下の矢印を数回押します.

ステップ18

Gaussian Blurフィルタを実行してそれを柔らかくします。クリックフィルタ>ぼかし>ガウスぼかし.

ステップ19

スライダーフレームレイヤーの上にリボンの影を付けます。 Ctrl + Alt + Gを押してクリッピングマスクに変換する.

ステップ20

シャドウの不透明度を40％に下げる.

ステップ21

背景にリボンの影を描きます。不透明度を20％に下げる.

ステップ22

ペンツールを使用してリボンの一部を引き戻します。その色を＃b68f63に設定します。スライダーの後ろに置きます.

これは100％の倍率で見た結果です.

ステップ23

作成したばかりの図形を複製して、リボンの上に配置します。上下に反転.

ステップ24：Photoshopでの最終結果

これがPhotoshopでの最終結果です。次に、それを機能的なスライダーにコーディングし続けます。.

パートII - HTML / CSSへの変換

ステップ25 - ファイルを設定する

という名前の新しいフォルダを作成します。 マイフォトスライダー. このフォルダの中に、新しい空白のHTMLドキュメントを作成します（index.html）、空白のスタイルシート（style.css）、および画像のフォルダ（img）また、jQueryライブラリとNivo Sliderプラグインをフォルダに含める必要があります。 HTML5マークアップを使用するので、IE 8以下でHTML 5要素を有効にするためにIEハックを追加する必要があります。 IEに対応するためにModernizrというスクリプトを使用します。.

ステップ26 - 基本的なHTMLマークアップ

開いた index.html あなたの好きなコードエディタで。を定義する 文書タイプ （HTML5を使用しています）, 頭 要素（ここでは文書のタイトルを追加し、CSSとJavaScript（jQuery Library、Nivo Slider、およびModernizr）をリンクします。 div ラッパー（レイアウトを中央揃えにする）, ヘッダ 要素とスライドラッパー.

      私の写真スライド

ステップ27 - PSDをスライス

PSDモックアップを開き、必要な画像をすべて切り取ります。写真として、sxc.huから次の写真を入手しましょう（まだアカウントをお持ちでない場合はログインが必要です、無料でサインアップできます）。すべての画像を920×430ピクセルにサイズ変更します。すべての画像を画像フォルダに入れます（img）.

Rinjani by Ciaciya
Stupa by Agnes Sim
Nino Satriaによる集計
Timo Balkによるオファリング
ウルワツ - バリバイアリスジェイ

ステップ28 - ヘッダーを作成する

次のコードを

そして

  私の写真スライド

それではヘッダにスタイルを追加しましょう。 body要素とwrapper要素のスタイルも追加します。すべてのスタイルをスタイルシートに入れる, style.css.

 / *基本的なスタイル* / body 背景：透明なURL（img / bg.jpg）;フォント：15px / 2 'Adobe Caslon Pro'、ジョージア、セリフ。マージン：0。パディング：０。  outline：0なし #pagewrap マージン：120px自動;パディング：０。位置：相対;身長：100％。幅：960ピクセル。 ヘッダー表示：ブロック;フロート：右。右マージン：40px。幅：192ピクセル。 ｚ指数：５２。位置：相対;  h1 背景：透明なURL（img / separator.png）中央には何も表示されません。 / *タイトルの下に区切り線を追加します* / font-size：18px;フォントの太さ：太字。高さ：70ピクセル。行の高さ：1.1。マージン：55px 10px 0。 text-align：center。テキスト変換：大文字。

ステップ29 - 写真のスライダーを追加する

それでは、ドキュメントの主要部分であるフォトスライダーにコードを追加します。まず写真を追加しましょう。次のコードを

そして

次に、写真のリボンとキャプションを追加します.

 
  写真家：
 エンリコ・ヌンジアティ
 ロケーション：
 ナミブ砂漠
 モデル：
 デッドブレイ
 日付：
 2011年3月18日 
  写真家：
 リナ・ダンマナリ
 ロケーション：
 インドネシアロンボク島
 モデル：
 リンジャニ山
 日付：
 2008年5月8日 
  写真家：
 アグネスシム
 ロケーション：
 インドネシアボロブドゥール
 モデル：
 ビッグストゥーパ
 日付：
 2008年6月12日 
  写真家：
 ニーノサトリア
 ロケーション：
 タマンサファリインドネシア
 モデル：
 タリーキリン
 日付：
 2009年8月16日 
  写真家：
 ティモバーク
 ロケーション：
 インドネシア・バリ島ウブド
 モデル：
 オファリング
 日付：
 2009年12月20日 
  写真家：
 アリスジェイ
 ロケーション：
 ウルワツバリ
 モデル：
 美しいビーチ
 日付：
 2011年7月20日

さて、開ければ index.html ブラウザでは、このようなものがあります。

ステップ30

CSSを使用してスライダーの外観を修正する必要があります.

 #slidewrap 位置：絶対; #slider 位置：相対;身長：オート。幅：920ピクセル。ボーダー：10ピクセルソリッドボックスシャドー：0 0 5px＃444。マージン：10px。 background：transparent url（img / info-bg.png）no-repeat;。高さ：482ピクセル。幅：192ピクセル。位置：絶対右：40px。トップ：-3px。 ｚ指数：５０。 #slider img position：absolute;トップ：0px。左：0px。表示：なし。

これは私たちが今持っているものです.

現在、私たちはNivoスライダープラグインをリンクしました、しかし私たちはスクリプトをフックアップしていません。それでは、次のJavaScript関数を追加してスクリプトをフックしましょう。そして素子.

ステップ31：スライダースタイル

最後のステップは、スライダーのスタイルを追加することです.

 / * Nivoスライダースタイル* / .nivoSlider position：relative; nivoSlider img position：absolute;トップ：0px。左：0px。画像がリンクで囲まれている場合* / .nivoSlider a.nivo-imageLink position：absolute;トップ：0px。左：0px。幅：100％。身長：100％。ボーダー：0。パディング：０。マージン：0。 ｚ指数：６。表示：なし。 Sliderのスライスとボックス* / .nivo-slice display：block;;位置：絶対ｚ指数：５。身長：100％。 nivo-box display：block;;位置：絶対ｚ指数：５。  .nivo-directionNav display：none！important .nivo-html-caption display：none;インビボキャプション位置：絶対;右：20ピクセル。 text-align：center。トップ：130px。幅：192ピクセル。 ｚ指数：６０。  .nivo-caption p margin：0 .nivo-caption .title フォントスタイル：斜体 .nivo-controlNav 位置：絶対値;下：10px。右：20ピクセル。高さ：15ピクセル。幅：192ピクセル。 text-align：center。表示ブロック; ｚ指数：５１。 nivo-controlNav a 背景：透明なURL（img / button.png）繰り返しのない中心の中心;表示：インラインブロック。高さ：14ピクセル。幅：14ピクセル。 text-indent：-9999px;カーソル：ポインタ。アクティブな背景：透明なURL（img / button_active.png）;。

最終結果+ダウンロード

これが私たちの最終結果です。実際のデモを見るにはここをクリックしてください。.

特定のステップを達成することはできませんか？これが結果のPSDファイルとあなたがテストして遊ぶための完全なプロジェクトです。.

イメージスライダーチュートリアルPSDファイル
イメージスライダーチュートリアル完成プロジェクト