How to Create Image Slider With Photoshop and jQuery
Undoubtedly, image slider is one of the most commonly used elements in the business web design, due to its relatively large size that is able to draw the visitor’s attention once they arrive the site. Though the web has started to rethink about the usability of the image slider, it’s still considered as a must-learn for the newcomer of the web design industry.
In this web design tutorial, we will learn to create custom image slider above using Photoshop, which you can preview the final result from here. Not only will we illustrate it in Photoshop, we will also turn it into a functional design by converting it into HTML/CSS and adding jQuery for its awesome sliding effect.
Sounds like a lot of complicated bits involved, but in fact it’s pretty straightforward and very easy to understand, let’s get started then!
More interested about adopting an image slider and customize it on the way? Here are posts dedicated for you.
Getting Started
For this tutorial you will need the following resources:
- 20 Repeatable Pixel Patterns.
- jQuery library
- Nivo Slider plugin
- Modernizr
- Paper Textures from VandelayPremier
- (Alternative) 13 HQ Old Paper Textures from overdosse
- Rinjani by Ciaciya
- Stupa by Agnes Sim
- Tally by Nino Satria
- Offerings by Timo Balk
- Uluwatu-Bali by Aris Wjay