1. Technology
Wavy Bordered Background
Software Used: CorelDRAW 8

1.) Since we are creating a Web image we first need to make some adjustments to the options in CorelDRAW. Go to Tools -> Options -> Document -> Page -> Size

2.) Change the dimension units to pixels and size the canvas to 1050 pixels wide and 150 pixels high. Change the resolution to 72.

adjusting the size of the drawing

3.) While you're in the options go to Global -> Color Management and make sure that Calibrate colors for display is not checked.

4.) Click OK to apply the changes and return to your drawing.

5.) Bring up either the Internet Explorer or Netscape Navigator Web safe palette by going to View -> Color Palette.

6.) Double-click on the rectangle tool rectangle tool. This inserts a rectange the same size as the canvas. Set the line to none, and the fill to a pale yellow color.

7.) From the View menu enable Grid and from the Layout menu enable Snap to Grid.

8.) Zoom in to the far left of your image as much as possible. Create an approximate square about the same size as the height of your rectangle, but to the nearest gridmarks. Fill it with a blue color and set the line to none.

inserting nodes to create the wavy curve9.) Right click on the square and choose convert to curves.

10.) Invoke the shape tool and insert nodes along the right edge of the rectangle at each grid interval by right-clicking and choosing Add from the pop up menu.

 

selecting every other node11.) Next, select every other node by holding the shift key down and clicking on each node you wish to select. While they're still selected use the arrow keys to move all the selected nodes to the left.

changing the properties of the nodes to smooth curves

 

 

12.) With the shape tool, drag a selection marquee around all the nodes along the right edge to select them. On the property bar, click To Curve, then Click Smooth.

 

13.) Zoom out so you can see more of your workspace.

14.) Stretch the top and bottom of the square so that the second humps from the top and bottom are centered over the top and bottom edges of the yellow filled rectangle. This will ensure that the background tiles seamlessly when finished.

aligning the blue shape to the yellow rectangle

 

15.) If the waviness of the curve is too deep or not deep enough, use the shape tool to select the outermost nodes, then use the arrow keys to lessen or increase the depth of the curves. To the right you see my finished curve.

(I've switched the view mode to enhanced to smooth out the lines. This doesn't effect the final image, but it gives a better screen shot.)

the blue wavy shaped after adjusting the curve

 

16.) Once you have a curve you're happy with, invoke the interactive drop shadow tool. Interactive drop shadow tool

 

Click on the blue shape and and drag to the right to create the drop shadow.

dragging out the interactive drop shadow

adjusting the shadow properties
In the property bar, change the drop shadow settings to:
X offset: 6, Feathering: 5, Opacity: 70, Average, Color: Black

finished drop shadowYou should have something that looks like the image to the right.

17.) Next, create a rectangle 180 pixels wide, and 150 pixels high. Align the top and bottom edges with the yellow background rectangle and align the left edge to the left edge of the blue wavy shape.

18.) Go to Tools -> Options -> WorkSpace -> Edit and make sure that Auto-center new PowerClip contents is unselected.

19.) Select the blue wavy shape, go to Effects -> PowerClip -> Place inside container. Your cursor will change to a fat arrow. Click with the arrow on the empty rectangle. The blue shape is cropped to the shape of the rectangle.

powerclipping to the rectangle

finished powerclip, outline removes20.) Change the line color of the powerclip rectangle to none.

21.) Now we just need to add some clipart. Go to View -> Scrapbook -> Clipart. Insert the clipart CD and click OK.

22.) Navigate to clipart -> Flowers, and pick out a suitable image. I used flowr034.cdr. Drag and drop the clipart from the scrapbook docker to your page.

23.) Resize and center the flower in the blue area. At this point I changed the fill color of the yellow rectangle to better match the colors in my clipart.

adding a drop shadow24.) If desired, add a soft drop shadow to the clipart (but be aware that the drop shadow is likely to increase the file size, and therefore the download time). Make sure the edges of the drop shadow are completely inside of the blue area or the shadow will have a chopped off look when tiled.

Sunflower Image © Corel Corporation

finished background (cropped)25.) For the final step, double-click the pick tool to select all. Go to file -> export. Check off the box for selected only, and export to the format of your choice.

To see the background tiled on a web page, click here.

If you enjoyed this tutorial, why not share it with a friend?

CorelDRAW Tutorials from your Guide

More CorelDRAW Tutorials

Sue Chastain
Your Guide to Graphics Software

Questions? Comments? Post to the Forum!

Back to the Index of Tutorials


 

Images: Copyright 1999, S. Chastain, unless otherwise noted. Sunflower Image Copyright Corel Corporation.
Screen shots captured with Corel Capture 9. Image conversion and optimization with Ulead SmartSaver Pro.

©2014 About.com. All rights reserved.