How to Design a Basketball Graphic

In this tutorial, you will learn how to design a basketball. Using a reference picture and radial gradients makes this easy to achieve and this same process could be used when dealing with light reflecting off round objects.



Download the SVG file HERE


Step 1 – Import Reference Image

Download the reference image of the basketball HERE. Import the image and resize the dimensions to 214 x 217 px by using the W and H fields at the top of Inkscape.


Step 2 – Draw Circle Around the Basketball

Use the Circle and Ellipses tool(E) to draw a perfect circle around the basketball by holding down the Ctrl key as you draw the circle. Make sure the is has no fill and a 5px black stroke.


Step 3 – Draw the Seams on the Ball

Make sure to toggle on snapping to nodes then select toggle snapping to paths. Using the Pen Tool(B) trace the vertical seam and match the curve in the image. Set the stroke width to 5px and change the color to a bright red to help distinguish your line from the picture.


Step 4 – Add the Other Seams

Add the remaining seams to the basketball. No need to edit the nodes yet. Keep the lines straight and make sure they have snapped to the path and begin and end in the same place as the image. Set the width to 5px for each.


Step 5 – Edit the Seam Nodes

Make sure to turn off snapping to nodes before editing the nodes. Select add the strokes by holding down Shift and clicking on them. Go to the fill tab and set it to the same bright red as the first one. Edit the strokes to match the basketball’s seams as best you can. It’s helpful to go back and forth between a seam’s nodes and slowly get the stroke in place. Change the add the color of the seams to match the basketball stroke color.


Step 6 – Add the Basketball Color

Select the circle and go to the Fill and Stroke tab. Select the third option(Radial Gradient). Move the position of the gradient to match the picture and change the outer color to #color. Now change the inner color(highlight) to #color.


Step 7 – Add Gradient to Seams

Start with the vertical seam by clicking on it. Go to the Fill and Stroke tab and click Stroke paint. Select Radial Gradient again. Move the gradient to match where the basketball’s gradient was placed. Make sure the outer color is black and the opacity is set to 100%. Change the inner color a light black. Repeat this for each seam. Double-check the color and make sure the gradient color matches up with each other. Not having one seam really light but another overlapping a lot darker.




Leave a Comment

Your email address will not be published. Required fields are marked *

Shopping Cart