Slicejar Heading Banners
“Slicejar”:http://www.slicejar.com is an exciting/fun project that we started working on recently (early-beta now). And today, I want to share a quick and easy way to create a Slicejar-like heading banner with basic knowledge in Photoshop.
First, set the foreground color to #2D2823, then insert the “Banner 1” shape at any size you like but make sure to maintain the size proportions (hold the shift key). Rename this shape layer to “original”.
Now using the Marquee Tool, select one of the banner folded endings (I’ll go with the right one). Zoom in and use the arrow keys to pixel-move your selection and make sure you are only selecting the right part as shown below.
Once you have selected the right area, hit cmd+J (mac) or ctrl+J (pc) to create a new layer from that selection. Name that layer “right fold”. Use the Eraser tool to remove any unwanted parts if any.
Select the “right fold” layer, hit cmd+T (mac) or ctrl+T (pc) for free transform and rotate it by (-15) degrees.
Now that we have the “right fold” ready, let’s move to the flat middle part of the banner.
Select the “original” layer again. Use the Marquee Tool to select about the right quarter of the middle area of the banner as shown below. Again, make sure your selection is correct (specially from the right side) by zooming in and nudging the selection as required.
Once you have the right area selected, hit cmd+J (mac) or ctrl+J (pc) to create a new layer from that selection. Rename that layer “flat”. Then rotate it by (-15) degrees. The result so far should look like this:
Now… get the Single Column Marquee Tool and make a selection similar to the one shown in the screenshot below (right after the curving ends). Then click cmd+T (mac) or ctrl+T (pc) for free transform and drag to the left creating half the banner. Then use the Marquee Tool or the Eraser Tool to remove the unwanted part at the bottom.
At this point, we have half the banner shape done. So first, duplicate (cmd+J or ctrl+J) the “flat” layer, flip the duplicate horizontally (Edit > Transform > Flip Horizontal) and place it on the right position next to right half (as shown below) then select both halfs/layers and hit click cmd+E (mac) or ctrl+E (pc) to merge them into one layer (make sure it is still named “flat”)
After that, duplicate the “right fold” layer, flip it horizontally, rename it to “left fold” and place it on the right position as shown.
Now that we have the banner shape complete, select the “right fold”, “left fold” and “flat” and group them: cmd+G (mac) or ctrl+G (pc). Name the group “banner”. Then duplicate (right click > duplicate) the group and select the duplicate and click cmd+E or ctrl+E to flatten it.
Rename the flattened layer to “stripe” and move it (drag it) to be the bottom layer of the “banner” group. Now, we have the “stripe” layer exactly behind the 3 banner layer we made earlier. The layer structure should now look like this.
All we need to do now is to select the Move Tool and nudge “stripe” 5 pixels down using the arrow key. Now that we have all the shapes in place, what’s left is to give these shapes some styling.
Select the “right fold” layer and give it an Inner Shadow at 180 degrees Angle. Change the Distance to 7px and the Size to 10px (these numbers work well with size of banner I am working with, feel free to increase/decrease them to achieve a similar look on bigger/smaller banner sizes ).
Add the same Inner Shadow style to the “left fold” but change the Angle to zero. Then select the “stripe” layer and add a Drop Shadow style to it: change the Opacity to 50%, Distance to 2px and Size to 4px. After that add a Color Overlay style and change the color to #FFC717.
If you made it this far, then, congrats! you’re done :) now add your custom text and enjoy.
