‘Metro Style Slider Template’ is three styles sliders template which designed to pimp-up your site, newsletter, software, etc. Its stylish and colorful design is more than enough to add a clean, modern, fresh and professional look to your web / device application.
The basic idea of ‘Metro Style Slider Template’ design is to focus more on the content of your application. It will be nice if the icon block reveals image thumbnail everytime pointer placed over it (hovered). A little CSS3 animation can be applied to make it zoomed, swiped, flipped or rotated, but that’s just one shot of many ideas you can have. Feel free to play with this slider template. Let’s pour a little freshness and some fun to our sites / apps. It will be fun and easy to dig and reveal the design formula of metro’s balance, proportions, shapes and color schemes with this template.
Files in the Downloaded Package..
3 .PSD files (Well-organized.. All layered, grouped and labeled)
20+ .PNG files (Sliced version of some basic image elements)
1 extensive documentation file (help.html)
The Flexibility ‘Metro Style Slider’ Design..
This template designed to be very flexible. You can do many thing with it, there are so many options:
Three styles options:
Layout 1 : Detailed, with icons.
Layout 2 : Simple radio button, without icons.
Layout 3 : Designed with scroll bar.
Two options of ‘Next-Previous Arrows’:
Arrows style option 1.
Arrows style option 2.
Two options of ‘featured label’ (altenatively you can use this as category label):
Two cool image overlay patterns if you want to add special ‘cinematic effect’ to images slide (optional):
Soft grid / subtle blocks pattern overlay.
Icon set is very flexible. The rounded containers will match / suit with any 16 pixel icon sets. In preview above, we use free Iconsweet2, but you can replace it with your own icons.
We also include ‘color scheme palette guide’ to help people who want to develop this template further. Just use Photoshop’s eyedropper tool and you can create your own design.
100% vector, to make the slider more scalable..
Any design elements (like icons, color, texts, images, shapes, etc.) can be easily edited, changed, scaled, moved or removed.
Using Photoshop smart-object, images and icons can be inserted / replaced just in seconds.
Packed with extensive documentation, so no need to be a ‘Photoshop Guru’ to use this graphic template.
Custom fonts can be obtained for FREE (You’ll find the download links inside the package.). Alternatively, we can use Segoe UI or Calibri font too, but it’s not free.
Backward compatibility! PSD files can be opened with “old-school” Photoshop CS3.. or greater..
Guide lines have setted and information about element’s size is also included.. these will help you save your time in developing the slider.
‘Color Adjuster Layers’ inside! Very handy to quickly fine-tune the whole color scheme of the illustration.
Beautiful content photos which used as demonstration above are made by professional photographer Christophe Robert (Many thanks!). Those images are published under Creative Commons license and not included in the download package. Links to each photo are available inside download package, if you want to download and use those photos too, please make sure that you have read and learn the license carefully.
Documentation & Free Support
Inside the downloaded package you will find that things are well documented and well organized, but if you meet any difficulties in using / customizing this slider template just let us know. We’ll be happy to assist you.
About The Author
This ‘Metro Style Slider Template’ is professionally designed by Candeed Street Team.