It’s football season in the United States, and many Americans are spending their free time in the fall captivated on their couch watching an oddly-shaped ball being thrown and wrestled back and forth on a field. Few things are as strange as this sport, but the strangest facet of all may be the football itself. If you can design a convincing American football — complete with realistic shape, shadows and texture — you can call yourself a truly versatile designer.
Are you game?
In this tutorial, I’ll walk you through the process of create a gorgeous American football from scratch. We’ll make everything in Photoshop except for the grass field. Along the way, you will learn to use various shape tools, pen tools, filters, and different blending options to achieve the final result. So, let’s get started!
Create a new document in Photoshop with an 800px width and a 550px height.
First of all, we’ll draw the basic football shape. Set #641002 as your foreground color and select the pen tool (Tool mode: Shape) to draw the shape shown below.
Double-click on this layer to open the layer style window and apply the following settings.
Now, draw the top half of the football using the pen tool (Tool mode: Shape). This time, use color #6e1802.
Double-click on this new shape layer and apply the following inner shadow settings.
To accentuate the top highlighting effect, create a new layer and press Ctrl + <thumbnail of the football’s upper half layer> to make a selection around it. Now, select the soft round brush tool and apply it on this new layer near top edges of the selection, as shown below.
Now, change the blending mode of highlighting layer to “Overlay” and reduce its opacity to 35% to get the effect shown below.
Next, we’ll add white stripes to both sides of football. Select the rectangle tool to draw a horizontal rectangle and then go to “Edit” > “Transform” > “Warp.” Choose “Arch” with a 30% bend at the top properties bar.
Now rotate these stripes 90⁰ using the free transform tool (Ctrl+ “T”).
Apply the following settings for inner glow on this arched layer.
Duplicate this layer and flip it horizontally by going to “Edit” > “Transform” > “Flip Horizontal.”
Now, duplicate both of these layers. Click on one of these layers and then press ctrl + <click on lower half of football layer> to make a selection around it. After that, click on the “Add layer mask” icon, which is present at the bottom of the layers panel. Add layer masks to the rest of the copies covering all halves of the football, as shown below.
Next, we’ll draw a partition between these halves. To do so, firstly, select the 4px hard round brush tool and press “D” to set default colors. Now, select the pen tool (Tool mode: Path) to draw the curved line shown below on a new layer.
Once you are done, right click and choose the option of “Stroke path” > “Brush” to get a black curved line. Press “Delete” to get rid of the path.
Reduce the fill of the partition layer to 45%. Now, apply the following settings for Bevel and Emboss and Drop Shadow on this new layer.
Let’s create the football’s texture now. Create a new layer at top of the rest of the layers and fill it with pure white using the paint bucket tool. Press “D” to set default colors and go to “Filter” > “Filter Gallery” > “Texture” > “Stained Glass.” Use the following values here.
Now go to “Filter” > “Filter Gallery” > “Brush Strokes” > “Ink Outlines.” Apply the following settings here.
Now press Ctrl + “I” to invert the texture. Merge both layers of the texture.
Now, resize the texture according to the football’s lower half and arrange it over it using the free transform tool. Duplicate this layer and place it over the upper half of football. Now, confine both the texture layers to the respective football halves by adding layer masks as we did in step 7. Change the blending mode of these layers to “Soft Light” and reduce their opacity to 25%.
Next, select the pen tool (Tool mode: Path) and draw the path shown below.
Select the hard round brush tool and apply the same settings in the brush panel as applied in step 5 of the Diary vector tutorial. After that, select the pen tool once again and right-click on the “Path” > “Stroke Path” > “Brush.”
Set the fill of the stitches layer to 0% and apply the following layer style settings.
Select the rounded rectangle tool with a 15px radius and draw two vertical rectangles as shown below. Use color #b09450 for the larger rectangle and apply the following inner glow settings.
Collect both rectangles into a single group and duplicate this new group seven times. Arrange these copies as shown below.
Create a rectangle as shown below and apply the following layer style settings to it.
Right-click on this layer and select “Covert to Smart Object.” Now go to “Filter” > “Noise” > “Add Noise.” Use a 2px value here.
Duplicate it and place the copy just below the original layer.
Select the pen tool (Tool mode: Shape) to draw the shape shown below. Apply the same settings for inner glow and noise on this shape a wes applied for the rectangle in step 16. Also, add some drop shadow.
Keep on duplicating and arranging these shapes to create the intended stitching.
Place one copy of the shape formed in step 17 below the two rectangles, flip it horizontally and arrange it as shown below.
Create a new layer below these layers, select the soft round brush tool, and apply it to form the shadow in pure black color.
Collect all these layers in a group, resize it, and place it as shown below.
Next, to form the shadow of the football, create a new layer just above the background and make the shape shown below using the ellipse tool. Once you are done, reduce the opacity of the shadow layer to 65%.
Our football is ready; now we’ll create a background for it. Paste the grass image just above the background layer and create a Hue/ Saturation adjustment layer above it. Apply the following Hue/Saturation adjustment settings here.
You can make a white stripe using brush tool on a new layer. Change the blending mode of this layer to “Color.” Duplicate this layer and change its blending mode to “Overlay” to get the effect shown below.
Now, we’ll create a glow in front of the football. Select an appropriately-sized soft round brush tool and apply it on a new layer at the top of rest of the layers in pure white color.
Change the blending mode of this layer to “Overlay,” duplicate this layer and change its blending mode to “Vivid Light” to get the effect below.
Lastly, create a “Levels” adjustment layer at the top of all the layers and use the following settings for it.
That’s it guys. Hope you enjoyed the tutorial and learned something new. Do share your thoughts!
User Interface Design with Sketch 4
Photoshop for Web Design
Introduction to Photoshop
Researching UX: Analytics
Designing UX: Forms
Jump Start Sketch
Jump Start Sketch
- 1 Adobe XD Tutorial: A Pain-free Way to Import Assets
- 2 "Learn by Doing" - How Foxley Disrupted the Web Design Industry
- 3 8 Distinctive Headline Fonts to Make Your Content Sizzle
- 4 Type Nugget: Good Typography is About Finding the Right Playground
- 5 Adobe XD or Sketch: Which Will Result in the Best UX?