スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

複数の画像が自動でスライドするカルーセルパネルの作成

カルーセルパネルの作成

複数の画像を枠内でスライド表示させます。
基本的な動きは指定した秒数が経過するごとに画像をスライドさせます。
両サイドにある矢印を押すと手動で画像をスライドさせます。
画像をクリックすると詳細情報、もしくは大きな画像で表示させます。


1.HTMLで表示させる画像をlistタグを作成します。


   <div id="carousel">
      <ul>
       <li><a href="#" ><img src="images/slide01.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide02.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide03.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide04.jpg" width="150" height="225" /></a></li>
       <li><a href="#" ><img src="images/slide05.jpg" width="150" height="225" /></a></li>
     </ul>
   </div>


2.CSSで色や枠の大きさなど詳細設定を作成します。


#carousel * {
 margin: 0;
 padding: 0;
 }

#carousel {
 width: 900px;
 height: 225px;
 text-align: left;
 position: relative;
 margin-top: 0;
 margin-right: 30px;
 margin-bottom: 0;
 margin-left: 30px;
}

#carousel_prev,
#carousel_next {
 top: 0;
 width: 20px;
 height: 225px;
 background: #000;
 cursor: pointer;
 position: absolute;
}
#carousel_prev {
 left: -20px;
 background:transparent url(../images/prev.jpg) no-repeat top left;
}
#carousel_next {
 right: -20px;
 background:transparent url(../images/next.jpg) no-repeat top left;
}

#carousel ul li {
 width: 150px;
 float: left;
 display: inline;
}


/* =======================================
 ClearFixElements
======================================= */
#carousel ul:after {
 content: ".";
 height: 0;
 clear: both;
 display: none;
 visibility: hidden;
}

#carousel ul {
 display: inline-block;
 overflow: hidden;


3.スクリプトでカルーセル部分の動的な部分を作成します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
 $('#carousel').each(function(){
  var slideTime = 400;
  var delayTime = 2500;

  var carouselWidth = $(this).width();
  var carouselHeight = $(this).height();
  $(this).append('<div id="carousel_prev"></div><div id="carousel_next"></div>');
  $(this).children('ul').wrapAll('<div id="carousel_wrap"><div id="carousel_move"></div></div>');

  $('#carousel_wrap').css({
   width: (carouselWidth),
   height: (carouselHeight),
   position: 'relative',
   overflow: 'hidden'
  });

  var listWidth = parseInt($('#carousel_move').children('ul').children('li').css('width'));
  var listCount = $('#carousel_move').children('ul').children('li').length;

  var ulWidth = (listWidth)*(listCount);

  $('#carousel_move').css({
   top: '0',
   left: -(ulWidth),
   width: ((ulWidth)*3),
   height: (carouselHeight),
   position: 'absolute'
  });

  $('#carousel_wrap ul').css({
   width: (ulWidth),
   float: 'left'
  });
  $('#carousel_wrap ul').each(function(){
   $(this).clone().prependTo('#carousel_move');
   $(this).clone().appendTo('#carousel_move');
  });

  carouselPosition();

  $('#carousel_prev').click(function(){
   clearInterval(setTimer);
   $('#carousel_move:not(:animated)').animate({left: '+=' + (listWidth)},slideTime,function(){
    carouselPosition();
   });
   timer();
  });

  $('#carousel_next').click(function(){
   clearInterval(setTimer);
   $('#carousel_move:not(:animated)').animate({left: '-=' + (listWidth)},slideTime,function(){
    carouselPosition();
   });
   timer();
  });

  function carouselPosition(){
   var ulLeft = parseInt($('#carousel_move').css('left'));
   var maskWidth = (carouselWidth) - ((listWidth)*(listCount));
   if(ulLeft == ((-(ulWidth))*2) || ulLeft == ((-(ulWidth))*2)+1) {
    $('#carousel_move').css({left:-(ulWidth)});
   } else if(ulLeft == 0) {
    $('#carousel_move').css({left:-(ulWidth)});
   };
  };

  timer();

  function timer() {
   setTimer = setInterval(function(){
    $('#carousel_next').click();
   },delayTime);
  };

 });
});
</script>

■以下の二つの値を変える事によりスライドのスピード調整ができます。
var slideTime = 400;  これは次回動作までの時間
var delayTime = 2500; これは動作そのもののスピード

■スクリプトの中で両サイドのボタンを定義しています。
carousel_prev
carousel_next
ボタンの位置、画像等は前のCSSで定義しています。

■jqueryを使用します。
1行目に記述しているのは、WEBからJqueryを読み込むパターンのもの。
私は自サイトでjquery-1.10.2.min.jsを定義していますので、1行目の代わりに下記の記述をしています。
<script src="js/jquery-1.10.2.min.js"></script>

Google Libraries APIをみんなが共通で使用すると同じjqueryファイルを一度読み込むと
jQueryファイルがキャッシュされ、次回以降はサイト表示スピードが向上するというメリットがあります。
ただし、バージョンが常に変わっていく為、最新版に対応できる記述をしないといけないなど面倒な点もあるみたいです。
詳細は以下のサイトへ

WEBからJqueryを読み込む
http://kihon-no-ki.com/load-jquery-using-google-libraries-api



出来上がりのイメージはこちらの学習サイトのLOOKBOOKコーナーを参照してください。




スポンサーサイト

実践トレーニング(GU) 5 ジャンル別ニューアイテムの紹介(タブ付きパネル)

ジャンル別ニューアイテムの紹介
  女性向け、男性向け、キッズ向けの三種類でニューアイテムをピックアップし商品の紹介をします。
  タブを使って切り替えられるようにします。


まずは、ひとつひとつの商品画像の作成です。

デザインは商品名と値段がわかりやすいようなレイアウトにしました。


商品が目立つような効果的なデザインができれば、もっとインパクトがあるデザインができるのかもしれませんが

初心者なら商品のバックはあまり目立つ色を入れないほうが良いと感じました。




下二つはグラデーションを薄くかけてみました。あんまりしっくりきてはいないですが、、、。

色をしっかりいれた場合はこんな感じでしょうか

kids_2.jpg

続いてタブです。

タブの作成の詳細は過去記事

20140222_1.jpg

これは画像なので、クリックしても切り替わりませんが、シンプルにWOMEN,MEN,.KIDSとタブを作成しました。

GUのサイトではロゴマーク以外であまり目立つ色を使わず、シンプル且つ洗練された構成のイメージがあります。
そのイメージに合わせてタブの色も薄いグレーを使いさりげない感じにしました。

商品画像の並べ方ですが、商品の後ろに入っている色のラインがすべて同じだと短調なイメージになってしますので
隣同士の色がかぶらないように配置しました。

※写真の素材はGUさんの商品写真をお借りしています。




実践トレーニング(GU) 4 トップのイチオシ商品紹介画像(3)

桜の画像にモデルを加え、さらにキャッチフレーズも追加しました。

あとはモデルが着用している服の情報を真ん中の下に入れて完成です!

商品の情報は、シンプルでわかりやすく値段がはっきりわかるようなレイアウトにしました。

完成画像がこちら。

20140217_1.jpg
クリックすると拡大表示します。

dreamweaverCC ひとつの画像に対し任意の箇所に複数のリンクを貼る

クライアントサイドイメージマップ

ひとつの画像に複数のリンクを設定したい場合は、画像にマップを設定します。
画像の特定の箇所にリンクを指定する事ができます。
 


例)


ひとつの画像の中にWOMEN,MEN,KIDSという文字が入っています。
それぞれの文字付近をクリックしたらそれに対応したページにリンクされるように作成してきます。

1.画像を選択し、プロパティのマップに任意の文字を入力する。(今回はcategoryにしています)
2.マップの下に四角や丸のアイコンがあるので、四角を選択する。
3.クリックできる範囲を指定する。
  →"プロパティインスペクターの「代替」,,(中略),,提供する事ができます。" のメッセージが出るのでOKを押す。
4.プロパティのリンク欄にクリック時のリンクURLを入力する。



20140216_1.jpg

これで特定箇所にリンクを指定する事ができました。

では実際にどんなコードが作成されたのか確認してみましょう。


 <img src="images/pricedown.jpg" width="300" height="200" usemap="#category"  />
        <map name="category">
          <area shape="rect" coords="41,148,115,171" href="women.html">
          <area shape="rect" coords="116,148,182,171" href="men.html">
          <area shape="rect" coords="183,148,250,171" href="kids.html">
        </map>

画像の属性にusemap="#category" が追加されています。
mapを使用するという宣言と共にcategoryで使用するmapを紐付けています。

2行目以降の<area shape="rect" coords="41,148,115,171" href="women.html">
これは、特定箇所の座標、リンク先が指定されています。
画像の左上部分が 41,148 → 右に48px下に148px
   右下部分が115,171 →右に115px下に171px
これは四角形の場合の座標です。

三角形の場合は3辺の座標を指定しますので、数字が6個並びます。
例)<area shape="poly" coords="184,177,138,177,161,137" href="#">
丸の場合は中心部の座標と半径の長さで表すので、3個の数字が並びます。
例)<area shape="circle" coords="157,159,20" href="#">


この様にしてひとつの画像に対して任意の箇所に複数のリンクを貼る事ができました。




CSSのpositionを使用し位置を自由(下揃え右揃え等)に設定する

CSSでの表示配置を調整する際に使用する
「psotion」についてまとめてみました。

■positionは4つ
position:absolute; 絶対配置
position:relative; 相対配置
position:static; 通常配置(指定しない場合はこれ)
position:fixed; 固定配置(IE7以降で対応)

絶対配置とか相対配置とか意味がわからないという方もおわれるでしょう。
まずは図を見てください。

20140216.jpg


この図形はすべてdiv要素で作成しています。
ソースはこちら
<div id="base_yellow">
  <div id="orange"></div>
  <div id="pink"></div>
  <div id="blue"></div>
</div>


ベースとなるのが黄色の四角です。
いわゆる親の図形です。
この四角形のどの位置に配置させていくのかを設定していきます。
親の四角にはposition:relative;を指定します。

黄色い四角(div)のなかに図形を置くと通常は左上に配置されると思います。


絶対配置とは
元々ある場所に関係なく、ここ!と指定した場所に配置する。

相対配置とは
元々ある場所から指定した分だけ上下左右に移動(ずらす)させた位置に配置する。


簡単に言うとこんな感じでしょうか。

上下左右の設定
top  → 上辺から下にずらす数値
bottom →下辺から上にずらす数値
left →左辺から右にずらす数値
right →右辺から左にずらす数値


まずはオレンジの四角。
CSSの記述はこちら
#orange {
position: absolute;
right: 10px;
bottom: 10px;
background-color: #F60;
height: 20px;
width: 20px;
}

positionをabsoluteに設定し、右から10px、下から10pxの位置に配置します。
この時、通常置かれた場合の位置は考慮されません。

続いてピンクの四角。
CSSの記述はこちら
#pink {
background-color: #F6F;
position: relative;
top: 10px;
right: 5px;
height: 20px;
width: 20px;
}


positionをrelativeで設定し、通常置かれた位置から計算し
上から10px、右から5px移動させた位置に配置されています。
右から左に移動している為、黄色い図形を飛び出しているのがわかります。

最後にの四角。
CSSの記述はこちら
#blue {
background-color: #63F;
position: relative;
left: 10px;
height: 20px;
width: 20px;
}

positionをrelativeに設定し、すでに上にpinkが置かれている為
通常の位置はpinkの分だけ下にきている状態から
左に10px以上した位置に配置されています。
pinkは上から下に10px移動している為、少しかぶっている状態になります。






Javascriptで画像をかっこよく表示させる

例えばサムネイル画像をクリックして拡大表示させる場合、

画像タグにtarget="_blank"を指定して新しい画面で表示させても味気なくて美しくないですね。

画面上にかっこよくポップアップ表示させる方法を紹介します。


20140205_1.jpg

作成する上でのポイント
1.スクリプトをダウンロード。
2.HTML上でスクリプトを紐付ける。
3.HTMLタグ記述

1.スクリプトをダウンロード
Lightbot2を使用するので、下記サイトからV2.6(2/5現在)をDownLoadし解凍後任意のフォルダに置いておく。
Lightboxサイト

2.HTML上でスクリプトを紐付ける。
スクリプトを紐付けてHTMLから呼び出せる様にします。

HTMLファイルのソースの head 内に以下の3行を追記する。

<script src="lightbox/js/jquery-1.7.2.min.js"></script>
<script src="lightbox/js/lightbox-2.6.min.js"></script>
<link href="lightbox/css/lightbox.css" rel="stylesheet" />




ファイルのパスは自分が任意で置いた場所を指定してください。

3.HTMLタグ記述

HTML上で表示させたいリンク部分「a href...」に 「rel="lightbox"」属性を追記する。

例)
<a href="images/sample.jpg" rel="lightbox" title="画像タイトル">リンク</a>

表示させたい画像が複数あり手動でスライドさせたい場合は
先ほどのrel属性の中に  [グループ名] を追記する。グループ名は任意の文字を設定する。

例)
<a href="images/picture01.jpg" rel="lightbox[group]" title="タイトル01">リンク1</a>
<a href="images/picture02.jpg" rel="lightbox[group]" title="タイトル02">リンク2</a>
<a href="images/picture03.jpg" rel="lightbox[group]" title="タイトル03">リンク3</a>


これで完成です。




Photoshop CCで立体的なボタンを作る

Photoshop CCを使用して立体的なボタンを作ります。

完成画像
20140204_09.jpg

作成のポイント
1.円を描く
2.円のパスを結合する。
3.立体的にする

1.円を描く

まずベースとなる円を描き、描いた円のレイヤーを複製しもう一つ円を作成する。
二つ目の円は約80%ほど縮小する。

20140204_1.jpg

2.円のパスを結合する。

作成した二つの円レイヤーを選択し、「選択ツール」で二つの円を選択する。
オプションバーの右側にある四角が二つ重なった様なアイコンをクリックし、「シェイプが重なる領域を中マド」を選択する。
そのあと、Ctrlボタン+ E を押す。
20140204_2.jpg
この時点で縁が重なり合っていない部分だけ黒が残る。
そしてレイヤーが結合された状態になる。
このレイヤーを複製する。
複製したレイヤーは「パス選択ツール」を使用し、外側の円をパスをDeleteボタンで削除する。
これで複製したレイヤーの円は中の小さい円になる。
小さい円の色を水色にする。
色の変更は、「楕円形ツール」を選択しオプションバーの「塗り」の色を変更する。
20140204_3.jpg


3.立体的にする

・ラスタライズ
これから円にいろんな加工をしていく為、まずラスタライズをする。
レイヤーメニュー → ラスタライズ → 全てのレイヤー

・大円の質感
大円のレイヤーを選択しレイヤーメニュー → レイヤースタイル → パターンオーバレイを選択
詳細設定画面が表示されるのでパターンを石の様な柄に設定する。

20140204_04jpg.jpg

・立体化
そのまま続けて、ベベルとエンボスにもチェックを入れて、深さやサイズ、ソフトの値等を設定し立体的にする。
20140204_05.jpg

立体的になったところでさらにドロップシャドウにもチェックを付けて影を付ける。
20140204_06.jpg

続いて小円のレイヤーを選択して同様にベベルとエンボスの設定をする。輪郭も追加する。
20140204_07.jpg

・文字入れ
文字を入力し、ボタンに合わせ立体的にする。
レイヤースタイルを設定していく。
文字では、ドロップシャドウ(内側)、光彩を設定する。

これで完成です!
20140204_09.jpg




Photoshop ccで画像に影(シャドウ)を付ける

2014019_1.jpg

このような画像があります。
この服の部分に影を付けて立体的に見せてみようと思います。

”レイヤースタイル”を使用します。

レイヤーパネルで影を付けたいレイヤーを選びます。

パネル下の「レイヤースタイルを追加」 (fxという文字の部分)を選択し
ドロップシャドウを選択します。

すると以下の画面が開き、影の長さや角度等設定ができます。


20140202_4.jpg

適用後でも種類、設定を変更する事が可能です。


不透明度を75%、角度を120°で設定してみた結果がこちらです。

20140202_3.jpg

影が入りました。





実践トレーニング(GU) 4 トップのイチオシ商品紹介画像(2)

前回は、両サイドに桜とモデルを配置しました。
今回は、センターにセールのタイトルとその下にモデル着用の服を紹介する画像を配置します。

まずは、タイトルです。
ファッション系のサイトを見てみると
割とベタなタイトルが多いように思います。
例)
WINTER CLEARANCE SALE
EARLY SPRING New Arraival
Spring Collection
オータムフェア
SPRING STYLE
新春SALE


それに見習いベタなタイトルを考えてみましたが、、、、

20140202_1.png


全然ピンとこないしなんか寂しい。


そこで、せっかくはじめて作るのでベタすぎるものどうかと思いましたので
自分らしさを出してみようかなと(笑)
それがこちらです。

top_message.png


パリコレに引っ掛けてハルコレにしてみました。
ハルコレで大体どういう意味かおわかりいただけると思いますが
は?どういう意味?という方の為に下にSpringCollenctionを添えてあります。


メインタイトルとは別にもうひとつ添えるように付けたいキャッチフレーズは、
「きれい目カジュアル」「今すぐ欲しい!冬アウターSALE」の様な
服に関する現実的なものにするか、
ポエムチックで抽象的するか悩みましたが、ポエムチックにする事にしました。

「ほら、春はすぐそこ。」

春は過ごしやすく気持ちがいい季節なので
暖かくなってきれて浮かれる・ワクワクする感情を表現しました。
ワクワクウキウキしてきそうです♪

このキャッチフレーズはちょっと範囲が異なりますが、
ブランドのイメージで使用されているキャッチフレーズも今後考えていきたいですね。

あした、
なに着て
生きていく? (アースミュージック)

ファッションを、もっと自由に(GU)




実践トレーニング(GU) 4 トップのイチオシ商品紹介画像(1)

トップの一番目に付く場所に配置する画像は

イチオシであったり目玉商品であったりその時に一番伝えたい内容をパッと見てわかるような画像を作成します。

その部分に今回は目に付くイチオシの商品を配置して、全体の雰囲気を春らしくしていきます。

安易ではありますが、春と言えば桜!(笑)

桜バックで商品画像を前に出した感じにしようと思います。

商品画像の邪魔にならないように薄めの色で大きさ、形、色、角度を微妙に変化させます。

20140201_1.jpg


この桜をいい感じに増殖させて柄にします。両サイドに男女のモデル画像を貼り付けるので、

両サイドに桜を集めた画像がこちら。

20140201_2.jpg
クリックで拡大

これにモデル画像を合成していきます。

幸いGUで使用されているモデルの写真はバックが白い場合が多いので、抜きやすいですね。

gu_back_3.jpg



今日はここまで。

次回は真ん中にセールの名前とキャッチフレーズ、期間限定の内容を付け加えていきます。





スポンサードリンク

最新記事

最新コメント

プロフィール

かっこいいデザイン、にぎやかなデザイン、きゅ~となデザイン、シンプルで洗練されたデザイン。
想像するだけで心がモワモワしてきます♪
いいデザインにいっぱい出会いますように★

好きな言葉は、旋律と色彩

ブログランキングに参加しています。こちらにも是非♪

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。