How can I create a half-circle patterned background in photoshop?


Question

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.

1
3
3/3/2011 1:33:00 AM

Accepted Answer

  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.

EDIT

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:

#mySpecialBackground
{
   background-image:url('halfCircle.gif');
   background-repeat:repeat-x;
}

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.

5
3/3/2011 11:38:00 AM

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


Licensed under: CC-BY-SA with attribution
Not affiliated with: Stack Overflow


Website under construction!!!
^