Have a look at this website: http://owltastic.com/extras.html - in particular, look at the topmost part of the page. You can see a small background the bottom of which forms half circles. The same effect can be seen below the own in the "work with me" box.

I would like to create a similar background using photoshop.

Can anyone recommend a tutorials or technique that can help me create something similar? I'm very new to Photoshop.

2 Answers 2

  1. Create a new document
  2. Select the Ellipse tool (U)
  3. Hold shift, and click+drag out your circle
  4. Select the Move Tool (V)
  5. Alt+shift drag the circle layer. This will duplicate the layer, and keep it aligned while you drag it.
  6. Repeat step 5 as many times as you'd like.
  7. Select the Crop Tool (C)
  8. Select the bottom half (or upper half) of the circles, and press the enter/return key.


That should leave you with what you're looking for. Of course, feel free to delete the default white background and save it as a png/gif if you need transparency.

Now, if you want to use this type of pattern on the web, use a method similar as the above put only make ONE circle, crop it, and save it.

Then, as part of your code, use this:


This would of course make the background of that ID the half circles, looping the same image over the x-axis. This helps lower loading time as opposed to using a larger image.


I would cheat... use a round brush, create the circles, and cut the top half off. :)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.