Update: Coding tut now available! Today we're going to walk you through how to create your own "juicy tabbed slider". This is a great way to add some extra depth and dimensionality to your own designs - and it's the perfect solution for an image slider!
Coding Update: You can now grab the full coding portion of this tutorial over at Nettuts! You guys asked, and so you receive :)
The Video Tutorial
The Written Tutorial
And now, for everyone who wants a play-by-play, here's the complete written version of the tutorial. You'll notice slight changes from the video (the video is done on the fly), but the same basic techniques apply to both walkthroughs.
The image used for the demo is an exclusive Envato Marketplace wallpaper from reAdactor. You can find more of these cool wallpaper images here!
Create the Background Layers
We're going to start on our a 600x400 px document. I've added a light grey background with a subtle grid pattern just so we can see our element pop off of the document a little bit better as we create it.
Start out by drawing a simple rectangle (about 450x270 px) on the artboard. We'll add a very light stroke around the rectangle through the layer options panel (Stroke = 1px Outside, #c8c8c8). The reason we're adding this stroke is to add a bit of separation between our frame and the background... this will be especially important if you are working on a white background.
Next, we'll begin our "shadow" underneath the frame. Start by simply grabbing your basic Brush tool and set the Size to 40% and the Hardness to 0%. Start a new layer, then hold down the Shift Key (to keep your line straight) and draw a short line (about half of the width of our frame). Getting this perfect doesn't matter... we'll be adjusting the size using the transform tool in the next steps.
Now let's rotate the newly brushed in layer VERY slightly; The angle I used was 2.5, but you can mess with it on your own. The deeper the angle, the more "bowed" the shadow will seem later on. You can use either Rotate or Free Transform (Ctrl+T) to do the trick.
Duplicate the first brushed in "shadow" layer (Ctrl+J) and then flip it horizontally (Edit > Transform > Flip Horizontal). The result should a shadow that's the opposite of the first one.
Move both shadow layers behind the "frame" layer and scale them (select both layers and press Ctrl+T) so that they fit just inside the total width of the frame rectangle.
Finally, merge both shadow layers together (Ctrl+E) and nudge the shadow layer into the right spot (use the basic selection tool [V] and use the keyboard to nudge). You can also adjust the opacity of the shadow layer to suit your own personal preferences. I used about 50%, you can do more or less according to what you're after.
Bonus Step: If you want, you can tinker with the shadow even more using these basic techniques plus the "Gaussion Blur" filter. The more blurred out the shadow, the more dispersed it will appear. You can also tinker around with how the shadow bows out using the warp tool.
Create the Image Layer
Alright, now we have our basic background and shadow. The next step is to create the inner "image" layer. Do this by either creating a new rectangle (using the same stroke Layer Style as the first) or simply duplicate the original layer and use the Convert Point tool to nudge in each side about 10px.
You can obviously adjust the spacing according to your own preferences. The more space, the bigger your frame's padding will appear later on. You can also add a large bottom padding to save room for an image title and description.
Next, drop the image that you'd like to use onto the document (you can drag it from a folder or use the Import tool). You'll want to scale and position the image over the "inner Image" shape layer - and then make your image a Clipping Mask over the same inner shape layer. You can make it a clipping mask by Right Clicking the image layer and pressing "Create Clipping Mask".
Add a light Inner Shadow using the Layer Styles panel (Double Click the Shape Layer). The demo uses the following settings:
- Color: Black
- Opacity: 44%
- Distance: 1
- Choke: 0
- Size: 16px
Again, this is a case where you can tinker with the effect to get the results that you want. A darker shadow will make the image seem more dramatic and deeply inset. A lighter shadow (or no shadow at all) will make the image seem more flat.
Whallah!
Create the Tabbed Buttons
The Left and Right tabbed buttons on the side are part of the main appeal of this type of slider because they break outside of the frame just a bit and create a more interesting shape to our slider.
Start by drawing a circle (hold down the Shift key to keep it a perfect circle when using the Ellipse tool). The size should be about 60px (you can look at the Info panel as you are drawing the circle to see it's size shown in text there).
Next, add a 1px stroke using the same color we used for the background frame.
As a bonus - add a light drop shadow to mimic the shadow that we drew in underneath the frame. The Drop Shadow that we used was about 15% opacity, Distance 3, and Size 4. The angle should reflect our light source in the center of the frame - so in this case it's about 130 degrees.
Now add our arrows. You can use an ordinary Photoshop Shape or a ">>" text version of the arrows using your favorite font. You can even draw your own in Illustrator if you prefer to get a truly unique shape. In our case we used ">>" using the font Lucida Sans.
Next, group together the circle Shape layer and the Arrow layer by selecting them both and pressing Ctrl+G.
Now draw a mask over the group to make it appear as if it's just barely overlapping our frame. To do this: Draw a rectangular Marquee selection, then press the "Add Layer Mask" button when you have the group folder selected.
The great thing about this "group" mask is that it also masks all of the Layer Styles. If we tried to just mask the circle itself, the stroke and shadow would be cropped as well, making them visible over the frame (which we don't want).
Lastly, just duplicate the button group and flip it horizontally. We'll move it into position over to the left side of the document. The only real tip here is that we'll also need to adjust the drop shadow's angle to about 50 degrees to match our light source in the center of the frame. Make sure you turn OFF the Global Light selector to ensure that you don't adjust the other shadow.
Create the Circle Button Module
The last element in this slider is the little "circle button module" that will show how many images you have in your slide.
Start by creating a simple 13px circle (again, hold Shift to get it perfect). We'll want to add another 1px stroke around the outside using the same color as all previous strokes (#c8c8c8 for the demo).
Lastly, add a very subtle gradient over the circle (Light grey [#D9D9D9] blending to white at the top). You can adjust the coloring of the gradient to suit your preferences, but the idea here is to make the circle feel more like a button that the user can press down on.
Duplicate the original circle a couple more times and nudge them over to the side (you should have as many circles as you have images in your slide).
Those circles are awfully tricky to see now... so let's add a background for them to be a bit more visible on light images.
Start by drawing a Rounded Rectangle with a 10px radius (you can adjust the radius to your own desires). Then set the Fill to 50% to make it slightly see through.
Last, set a 2px Stroke (#a7a7a7) with an opacity around 50% to make it also transparent. The final effect should be a transparent rounded rectangle with a subtle border.
Final step! Add a smaller circle over one of the original circles and position it in the center. Adjust the color (you can use a gradient or solid color) to suit your own branding colors. You'll notice that in the demo, we used the same colors that we use in the Webdesigntuts logo.
Congrats! You're Done!
Excellent work! Now that you have the basic slider setup, you can easily adjust the size to suit your own projects. You can also reskin this to use differently colors backgrounds, restyled buttons, or even add textures to the frame itself. The limit is really up to you - just keep in mind the basic principles that we setup here and you'll do fine.
