How to wrap a linear picture into a circle? (not a sphere.. just a circle like typing on a path)

Posted on 2006-11-16
Medium Priority
Last Modified: 2011-08-18
I have like.. 10 thumbnails lined up next to eachother to make an image say.. 100px high and 900px wide...

I wanted to know if theres an easy way to wrap that into a circle...

Kinda like how you can make a circle path and type on it (not a sphere).

I just want the end ofthe image to match up with the beginning, and be round because its being printed on a circle template..

Question by:MattKenefick
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 11

Expert Comment

ID: 17966617
Two questions.

1) Do you want the images to remain upright, or do you want them to rotate, so that the ones around the six o'clock position will be upside down?
2) Do you have a program called Adobe Illutsrator?

I assume you want them to remain upright? You could either make the entire thing in Illustrator, then import back to Photoshop; or you could make a special guideline template in Illutsrator, which you would then paste into Photoshop as a path.

I suggest the second method, steps as follows:

1) Drawing  vertical line in Illustrator. Make sure it is selected with the black selection tool.

2) Double click on the rotate tool and type in a value of 36 degrees, and press COPY.

3) Press CTRL + D a three  times, so that step (2)  to is repeated. You should end up with 5 lines crossing in the centre to form a cart wheel

4) Select the "cartwheel" and copy it to the clipboard


1) Make a document that measures about 1200 x 1200

2) Paste your thumbnail image in

3) Paste your Illustrator graphic in AS A PATH into Photoshop. (Scale as necessary)

4) Select a thumbnail by some method (rectangular marquee will do), and using the move tool in Photoshop, drag the thumbnails so that its center lies at the end of one of the spokes of the cartwheel.

5) Repeat Step (4) until complete

If you want the thumbnails to rotate, then do everything in Illustrator. Let me and I can post you the steps for that too.


Author Comment

ID: 17966711
Its going to rotate around perfectly...

So like.. If its 900px wide.. Some of the pictures at the 6:00 position are going to be upside-down.. whereas the pictures at 12:00 will be rightside up.. the pictures at 9 and 3 will be sideways with the bottoms facing inward.

Does that make sense?

Its like if you had it printed out, and grabbed the two ends and made them touch... (which inevitably will make the top of the images wider than the bottoms, into a trapezoid style shape )


Author Comment

ID: 17966715
Yes I do have illustrator
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

LVL 11

Accepted Solution

Jason210 earned 320 total points
ID: 17967057
In that case...you need to break your original image up into 10 seperate images, and paste each one into Illustrator as a seperate object.

1) Trace a square path around one of the images. This is so we get a square template exactly the same size as one of the thumbnails. Put the square path at 12 o clock position.

2) Duplicate the square and place it at 6.00 position, as a basis for your arrangement.

3) Group these two squares.

4) Select the group and double click on rotate, type in 36 degrees, and copy.

5) CTRL + D three more times to get all the squares. Lock this template (CTRL + 2)

6) Now take each pasted image, and rotate each one by amulitple of 36 degrees, so they are all at the right angle.

7) The last step is to drag each rotated image into its position on the template. This will give you the exactly shape you want.

8) Paste the whole thing back into Photoshop as pixels.
LVL 26

Assisted Solution

by:David Brugge
David Brugge earned 180 total points
ID: 17970544
Jason's certainly has the right solution. Illustrator makes very short work of this. In case you missed Jason's point of rotating the image 36 degrees, it is because you have ten images in which to complete a circle.

A full circle is 360 degrees. 360 divided by 10 is (drum roll...) 36! If you had 11 images, you would d want to rotate the images by 32.727 (there would be a tiny overlap) because 360 divided by 11 is 32.7272727272...

But I hear you say that you don't want overlapping squares. It's still easy using Jason's method.

Start by drawing a line straight up and down. (hold down the shift key when you place your ending point.
Select this line and double click your rotation tool. Type in 90 degrees and copy. (this is just a quick shortcut to find the center point of the first line. Lock your new line in place (Ctrl+2) and reselect the first line (the one that is up and down)

Now rotate this line half of 36 degrees (18 degrees). by clicking your rotation tool where the two lines cross. With this line still selected, click your rotation tool again where the two lines cross and type in -36 degrees, only this time make a copy. You should end up with two lines that are 36 degrees apart, and one that is locked in a horizontal position.

These two lines are the sides of a wedge that will fit into a perfect circle when spaced 36 degrees apart.

To finish, select your circle tool and holding down the ctrl key start dragging from where all of the lines cross. This will be the circumference of your circle. You can then repeat this step to set the bottom edge of your circle.

To finish your wedge, lock all of your straight lines. And zoom in on where a circle crosses a straight line. Use your Scissors tool ( C ) to cut the circle where it intersects a straight line. Do this for all four intersection points.

Now delete the circle segments outside of your wedge. Select the two endpoints of the curved lines on the right side of the wedge and joint them (ctrl+J) then do the same with the left side.
That’s it. You have a wedge shape template for 10 images that will fit together to form a circle.

The rest if fun. Assuming that you have you’re your ten images on your desk top, select your wedge and move it to the front of the stacking order (Shift+Ctrl+] ) Now make a copy of it (for use later)

Drag an image and position it under your wedge. Select the image and the wedge and make it a clipping path (Ctrl + 7) Presto! You have a wedge shaped image. (assuming that you wanted to crop the image instead of distorting it to fit the wedge) Now, with your new image cropped, use your rotation tool and click where your straight lines intersect and type 36 degrees. This moves the image to the first spot on your circle.

Press (Ctrl+D) (The repeat last command shortcut in Illustrator) and the image will move into the second location. Do this seven more times and it will be in the tenth location. (or just keep pressing (Ctrl+D) and watch it march around the circle as much as you like.

To do the next image, press ( Ctrl + F) (The paste in Front command) Remember that you saved a copy of the wedge before you made it into a clipping path? Here is a copy pasted in the exact same location, and it is already at the front of the stacking order. Again drag your image, make a clipping path, rotate into position and (Crtl +F) to start again.

To tidy up, release straight lines that you used as guides (Alt+Ctrl+2) and delete.

This can all be done in PhotoShop, but it’s more time consuming and you don’t get to watch your images march around the circle with just a key press.

I would appreciate you giving all of your points to Jason 210 (unless someone else comes up with a better solution) I got some of Jason's points on another question and this will be an easy way to pay him back.

- David B
LVL 11

Expert Comment

ID: 17971577

Lol....we can share the points...you've put much more time into your explanaion...and added a bit too....thanks!
LVL 11

Expert Comment

ID: 17977621
Thnx for the points...may be u can let us know how it worked out?

Expert Comment

ID: 24568478
D_Brugge: Drag an image and position it under your wedge. Select the image and the wedge and make it a clipping path (Ctrl + 7) Presto! You have a wedge shaped image. (assuming that you wanted to crop the image instead of distorting it to fit the wedge) Now, with your new image cropped, use your rotation tool and click where your straight lines intersect and type 36 degrees. This moves the image to the first spot on your circle.

Hi, my question is, what if I want to distort the image to fit the wedge? Please help, thanks in advance!

Featured Post

New benefit for Premium Members - Upgrade now!

Ready to get started with anonymous questions today? It's easy! Learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Read about why website design really matters in today's demanding market.
The Summer 2017 Scholarship Winners have been announced!
In this Micro Tutorial viewers will learn how to create a CSS image sprite (In a later tutorial, viewers will learn how to use CSS and HTML to create a navigation menu using this sprite) Open a new Photoshop document with a width of (Icon width)x(N…
In this tutorial viewers will learn how to create a Photoshop action to apply adjustments and effects to multiple images. Open a photo for editing in Photoshop: Open the Actions window by going to Window > Actions: Start a new action by selecting th…
Suggested Courses
Course of the Month8 days, 22 hours left to enroll

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question