Creating Puzzle Pieces with Illustrator and Photoshop

Learn to create puzzle pieces of any size or shape for use in your latest project or App using Photoshop & Illustrator
5.0 (3 ratings) Instead of using a simple lifetime average, Udemy calculates a
course's star rating by considering a number of different factors
such as the number of ratings, the age of ratings, and the
likelihood of fraudulent ratings.
334 students enrolled
Instructed by Shane Hogan Design / Design Tools
Take This Course
  • Lectures 9
  • Contents Video: 1 hour
    Other: 6 mins
  • Skill Level All Levels
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works


Find online courses made by experts from around the world.


Take your courses with you and learn anywhere, anytime.


Learn and practice real-world skills and achieve your goals.

About This Course

Published 11/2013 English

Course Description

This course will show you how to create puzzle pieces of any size or shape using Adobe Illustrator and Photoshop.

You will learn how to create a square puzzle template in Adobe Illustrator, then we go on to creating a circle puzzle template in Adobe Illustrator and import the template into Adobe Photoshop where we break it up into pieces, apply effects and export the individual puzzle pieces, which we then batch re-size and rename for use in your standard and retina iPad project.

Recommend for anyone that has purchased 's Story Tellers Kit and would like to know how to create puzzle pieces the easy way or anyone that would like to have an easy to use reference on how to create puzzle pieces or templates for use in their latest project or App.

Create puzzles quickly and easily with minimum effort and without having to use the pen tool or purchase expensive limited plug-ins.

Use the shape tools, line tool and shape builder in Illustrator.

Use Photoshop's trim and save for web tools.

Preparing your images for use in your project or App.

Learn how to create a re-size action.

Batch rename in Photoshop, adding -ipadhd extension to your images with minimum effort.

This course is just over an hour long and includes examples for creating a square template and a complete circle puzzle, and also includes templates for a triangle, a star and an ellipse, and includes the working Photoshop and Illustrator files.

What are the requirements?

  • Knowledge of Illustrator and Photoshop would be helpful but not required as everything is fully explained
  • Trials of Illustrator and Photoshop are available from

What am I going to get from this course?

  • Once complete you will be able to create a puzzle of any size or shape imaginable.

What is the target audience?

  • Anyone who wishes to design a puzzle for a project or an App.

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.


Section 1: Introduction

This introduction video shows what the course covers, we will be using Adobe Illustrator to create puzzle templates, and Adobe Photoshop to break up, re-size and rename the pieces, using the techniques in this course you will learn how to create a puzzle of any size or shape.

1 page
Section 2: Creating the puzzle template using Adobe Illustrator

Here we create a square puzzle template using Adobe illustrator, you will learn how to split a rectangle or square into sections and make use of the shape builder tool to create puzzle pieces.


Here we create a circle puzzle template using Adobe illustrator, and make use of the shape builder tool to create the puzzle pieces.

Section 3: Breaking up the puzzle using Adobe Photoshop
5 pages

This document shows how to setup some handy keyboard shortcuts for faster workflow.


This video shows how we break the puzzle up into individual pieces using Adobe Photoshop.


Here we add effects, like bevel and emboss and inner shadow to the pieces and also add some effects to the background image which will be used for reference.


This video shows how the pieces are exported as individual files making use of trim and save for web.

Section 4: Organising the pieces

Finally we use Photoshop to re-size and rename the images using automation and batch rename the pieces, adding -ipadhd to the file names for use in an iOS App project.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Shane Hogan, Independent App developer

My first iOS App ScaleViz created entirely in ActionScript 3.0, went live July 2011, and shows how music theory relates to your guitar fretboard, you can check it out here http://appstore/scaleviz I have also created Annual Reviews for companies like Mind, FAQ's for Epson UK, taught ECDL and I'm a zombie in the feature film Wasteland UK

My hobbies include playing the guitar, watching horror films, astronomy, snorkeling and expanding my knowledge in all areas of programming and graphic design.

Ready to start learning?
Take This Course