Creating a horizontal page background
We have all seen those site backgrounds with what appears to be a shadow on either side of the web page itself - this type of thing. This is really easy to create and can be done right within WebPlus itself, without the need for any other image editing program.
If you are interested in creating something similar for your website, please read on.
Introduction
Instructions:
For this exercise we will need to work within the Master Page, not a regular page.
1) In WebPlus create a Master Page 2000 pixels wide x 2 pixels high, and continue to work with this Master Page selected.
If you want a wider page alter the width of the second quick shape in step 4 bearing in mind the majority of monitor widths is 1024, so a page to fit these monitors would need a QS of no more than 960 pix to reveal the shadow either side of the page. Bear in mind though that people with narrower monitors or browsers unmaximised will need to scroll the page horizontally.
2) Create a Quick shape (QS) rectangle 2000pixels wide x 100 pixels high, no line and white fill
If we do not remove the line in this and step 4, this will appear in our finished background and look quite ugly. Also ensure the Aspect Ratio (link icon) is not selected when sizing.
3) In the transform tab set the anchor to top centre and position the QS to x=1000, y=-40
If we do not remove the line in this and step 4, this will appear in our finished background and look quite ugly. Also ensure the Aspect Ratio (link icon) is not selected when sizing.
3) In the transform tab set the anchor to top centre and position the QS to x=1000, y=-40
4) Create another QS 750 wide x 100 high position x=1000, y=-40
5) Right click the QS and choose the Filter Effects option. Add outer glow to the new shape - black for a shadow effect - or a colour for something different! Leave the blend mode as Screen - this works well on a white background - setting the Opacity to 60% - not too ‘over the top’ and finally setting the Blur to 20 pts.
5) Right click the QS and choose the Filter Effects option. Add outer glow to the new shape - black for a shadow effect - or a colour for something different! Leave the blend mode as Screen - this works well on a white background - setting the Opacity to 60% - not too ‘over the top’ and finally setting the Blur to 20 pts.
6) Make sure nothing is selected. This is correct, we are exporting the Master page, it is page size rather than an object.
7) Go to ‘File>Export picture’ (WebPlus X4 users go to ‘File>Publish site>Export as Picture’) and export as a png, avoid gif and jpg - png will provide just as small a file but with better finish, and save it in a place you will remember (I'd suggest a folder within the WebPlus project folder) - you will see the dimensions output at 2000 x 2 pixels. Make sure this is being exported as a 24 bit png image. 8 bit will produce banding and 32 bit uses unnecessary transparency for this image.
7) Go to ‘File>Export picture’ (WebPlus X4 users go to ‘File>Publish site>Export as Picture’) and export as a png, avoid gif and jpg - png will provide just as small a file but with better finish, and save it in a place you will remember (I'd suggest a folder within the WebPlus project folder) - you will see the dimensions output at 2000 x 2 pixels. Make sure this is being exported as a 24 bit png image. 8 bit will produce banding and 32 bit uses unnecessary transparency for this image.
8) Delete the Quick shapes
9) On the Master Page resize your page dimensions to 740 x 300 or 400 pix, select the Page Properties and on the Background tab, uncheck the use scheme manager settings and browse for the saved background image.
10) Preview the site - the image created will automatically tile from top to bottom of the browser window.
9) On the Master Page resize your page dimensions to 740 x 300 or 400 pix, select the Page Properties and on the Background tab, uncheck the use scheme manager settings and browse for the saved background image.
10) Preview the site - the image created will automatically tile from top to bottom of the browser window.
2000 pixels seems like an over the top amount, but please bear in mind some monitors are now able to show a larger number of horizontal pixels than this. This figure is given so that if someone with such a wide monitor decides to open their browser maximised no ugly tiling effect will appear.
We will not be using this size in our final site, this is purely for the graphic.
We will not be using this size in our final site, this is purely for the graphic.
Fancy something a bit different? Why not try creating a coloured page background like this.
This uses two QS rectangles for the background using the Linear Fill 50 from the Gradient swatches tab. The first is created at 900 x 200 and positioned on the far right side, right anchor, x=2000, y=-40. This is copied and flipped horizontally and on the far left with right anchor, x=0, y=-40.
The top QS is filled with a pastel colour (R 184, G 186, B255) and given a harder outer glow using Multiply Blend Mode, 80% Opacity and 20 pt Blur because it is sitting on a darker colour.
I hope this inspires you to experiment and have fun!
Ken (Major Confusion)
A note about colour choices - try to avoid garish schemes or anything too busy as this will detract from the main purpose of the site ... its content.