Advertisement

 

Webサイトやブログなどでよく見かけるデザインのひとつとして、コンテンツ、写真スライダーを利用しているケースがあります。

グラフィカルなデザインに動きを加えることで、より一層コンテンツにユーザーの目を惹くのではないでしょうか。

 

海外デザインブログDesignModoで、色々なスライダー素材をデザインしたPhotoshop用無料PSD素材を30個まとめたエントリー「Huge Collections of Different Kinds of Free Slider (PSD Files)」が公開されていたので、今回はご紹介します。

 

そのまま利用したくなるほどハイクオリティーなデザインが多くまとめられており、お気に入りのひとつを見つけてみてはいかがでしょう。

 

 

詳細は以下から。

 

 

スライダーの使い方いろいろ

 

最近のWebサイトに見かけるスライダーの利用方法の多くは、コンテンツやギャラリーなどにスポットをあてた情報を順番にスライドさせています。

 

[download_box]特にjQueryを利用することで、アニメーションを加えたダイナミックな動きを表現可能となります。

jQueryについて詳しく触れた以下の記事は、個人的にもとても参考にさせてもらっています。

 

クライアントワークでよくお世話になっているjQueryプラグインいろいろ – Webデザインレシピ[/download_box]

 

 

印象的な画像スライダーをデザインするPSD素材まとめ

 

Custom Slideshow (PSD)

 

立体的な影をデザインしたスライダー素材、写真ギャラリーなどに活用することができそうです。

2210psd

 

 

 Web Slider PSD

ページ送りにサムネイルを利用したスライダー素材、特集コンテンツなどの展開にいかがでしょう。

303psd

 

 

Nemo Slider PSD

シンプルな質感を高めた横型ワイドなスライダー、☞ボタンもポイントです。

1010psd

 

 

 Free Slider – Showcase PSD

こちらもシンプルでどんなデザインにも合わせやすいスライダー用デザイン素材。

613psd

 

 

 Elegant Photo Slider

写真を多く利用するWebサイトやブログなどを中心に利用したいスライダー素材。

1311psd

 

 

 PSD/HTML Sliders vol.1

スライダーをデザインしたPSD素材と一緒に、HTMLであらかじめコーディングされたデモも一緒にダウンロード可能。

910psd

 

 

 Create Your Juicy Tabbed Slider (Free PSD)

細かい部分まで作り込まれたUIデザインの作り方を紹介したチュートリアル、一緒にPSDフィアルもダウンロードできます。

293psd

 

Slider Design

画像と一緒に合わせて立体的なリボン素材を組み合わせたスライダーデザイン。

198psd

 

 

Slider 365 PSD

写真を無造作に重ねたような様子を表現したスライダーデザイン、矢印やページ送りなどもスッキリとした素材。

283psd

 

 

Clean Slider PSd

こちらもシンプルで使い勝手の良いスライダー各2種類、淡いグラデーションがナイス。

1212psd

 

 

Free PSD: Clean & Simple Image Slider

個人的にお気に入りのデザイナーさんが作成したスライダー素材、まさに即戦力な一品。

140(2)psd

 

 

 Fancy Slider + Toggles

トグル部分のみとなりますが、アプリなどに利用したいグラフィカルなPSD素材。

159psd

 

 

Percent Slider

本物そっくりに再現されたメタリックなつまみとスライダー、色使いも鮮やかです。

2113psd

 

 

 Free Slider PSD

ネオン管のようにぼんやりと輝くデザインが印象的なスライダー用PSD素材、各3色揃っています。

811psd

 

 

 Slider – Progress Bar

立体感たっぷりにデザインされたスライダー用PSD素材、ツールチップもセットになっておりそれぞれノイズテクスチャを適用。

208psd

 

 

 Options Slider (PSD)

思わず触りたくなる様なトグルデザインを利用したスライダー素材、そのまま活用してもよさそうです。

188psd

 

 

Free PSD: Horizontal Accordion Slider GUI

水平方向に展開するダーク系スライダーデザイン、コンテンツ紹介などにいかがでしょう。

427psd

 

[fancy_box][参照元 : Huge Collections of Different Kinds of Free Slider – DesignModo][/fancy_box]