How to Create Image Slider With Photoshop and jQuery

Part I – Designing Image Slider

Step 1: Setting Up Background

Start by creating a new file with size 1000×700 px. Fill background with color #efc89e.

image slider with photoshop and jquery tutorial

Add Pattern Overlay using free pixel pattern.

image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial
Step 2: Slider Base

Activate Rectangle Tool. Create a rectangle with size 940×450 px. You can use any color, it doesn’t matter.

image slider with photoshop and jquery tutorial

Double click layer to open Layer Style dialog box. Add Layer Style Drop Shadow, Outer Glow, and Stroke.

image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial

This is the result. The slider base now has a nice frame with soft shadow behind it.

image slider with photoshop and jquery tutorial
Step 3

Add a photo and place it above the slider base. Hit Ctrl + Alt + G to convert it into Clipping Mask and insert the photo into the slider.

image slider with photoshop and jquery tutorial
Step 4: Ribbon

Draw a rectangle shape with color #f4e1ae to be used as a ribbon.

image slider with photoshop and jquery tutorial

Double click the shape’s layer and activate Bevel and Emboss, Gradient Overlay, and Pattern Overlay with following settings.

image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial

This is the result after adding Layer Styles.

image slider with photoshop and jquery tutorial
Step 5

Let’s add paper texture onto the ribbon to make it more realistic. Place texture on top of the ribbon shape. Convert it to Clipping Mask by pressing Ctrl + Alt + G.

image slider with photoshop and jquery tutorial
Step 6

Let’s paint some shadows and highlights onto the ribbon. Create new layer above the ribbon. Paint black on lower part of the ribbon. Convert it to Clipping Mask (Ctrl + Alt + G) and then reduce its Opacity to 10%.

image slider with photoshop and jquery tutorial
Step 7

Repeat previous process to upper part of the ribbon. But this time, add highlight by painting white and then reduce its Opacity to 50%.

image slider with photoshop and jquery tutorial
 
Step 8: Stitches

Activate Pencil Tool. Hit F5 to open Brush setting. Set brush size to 1 px and increase the spacing until we get a dotted line on the preview area.

image slider with photoshop and jquery tutorial
Step 9

Draw 1 px black line on top of the ribbon. Reduce its Opacity to 20%. Duplicate layer by pressing Ctrl + J. Hit Ctrl + I to invert its color. Increase Opacity to 50%. Activate Move Tool and then press down arrow and left arrow once to nudge it.

image slider with photoshop and jquery tutorial

Here’s the result viewed at 100% magnification.

image slider with photoshop and jquery tutorial
Step 10

Repeat this process to draw other stitches on another side of the ribbon.

image slider with photoshop and jquery tutorial
Step 11: Add Ornate Shape

Set foreground color to gray. Use soft brush with size 1 px to draw an ornate shape. Be creative, you can use any shape you like. Next to it, draw a 1 px line and then erase its outer edge using a soft Eraser Tool. Duplicate the line, flip it horizontally, and place it on the other side.

image slider with photoshop and jquery tutorial
Step 12

Select all ornate layers and merge it into one layer by pressing Ctrl + E. Duplicate shape and then place it under the original ornate shape. Hit Ctrl + I to invert its color. Activate Move Tool and then press down arrow once to nudge it 1 px down.

image slider with photoshop and jquery tutorial
Step 13: Photo Information

Type photo data inside the ribbon.

image slider with photoshop and jquery tutorial
Step 14: Navigation

Next, we’ll draw some circles for slide navigation. Draw a circle shape with color: #8d877c on lower part of the ribbon.

image slider with photoshop and jquery tutorial

Add Inner Shadow using following settings.

image slider with photoshop and jquery tutorial

This is the result. The circle is turning into a shallow hole now.

image slider with photoshop and jquery tutorial
Step 15

Hold Alt and then drag circle shape layer to duplicate it.

image slider with photoshop and jquery tutorial
Step 16

Let’s set active condition on one of these links. Select one of the circle and change its color to #bebbb5. Add Inner Shadow, Gradient Overlay, and Stroke.

image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial
image slider with photoshop and jquery tutorial
Step 17

Hold Ctrl and then click on the ribbon base thumbnail in the Layers Panel. Create new layer under the ribbon and fill it with black. Activate Move Tool and hit left and down arrow a few times.

image slider with photoshop and jquery tutorial
Step 18

Soften it by performing Gaussian Blur filter. Click Filter > Blur > Gaussian Blur.

image slider with photoshop and jquery tutorial
Step 19

Place ribbon shadow above slider frame layer. Convert it to Clipping Mask by pressing Ctrl + Alt + G.

image slider with photoshop and jquery tutorial
Step 20

Reduce shadow Opacity to 40%.

image slider with photoshop and jquery tutorial
Step 21

Paint ribbon shadow on background. Reduce its Opacity to 20%.

image slider with photoshop and jquery tutorial
Step 22

Use Pen Tool to draw back part of the ribbon. Set its color to #b68f63. Place it behind the slider.

image slider with photoshop and jquery tutorial

This is the result viewed at 100% magnification.

image slider with photoshop and jquery tutorial
Step 23

Duplicate the shape we have just created and place it behind the top of the ribbon. Flip it vertically.

image slider with photoshop and jquery tutorial
Step 24: Final Result in Photoshop

This is our final result in Photoshop. Next, we will continue to code it into a functional slider.

image slider with photoshop and jquery tutorial

Show Comments
FacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail