Resources for Website Design - Create a Custom HeaderThere are many resources available either free or at low cost if you wish to enhance your website design. Please see below for instructions on how to design a custom header for your website. You can also create custom images to display in your website using the Pixlr editor.
Image Editing with PixlrPixlr is an excellent on-line image editing tool. Click the following link to use the Pixlr image editor in a separate tab so that you can easily switch between the Pixlr editor and the tutorials below: Pixlr editor
Pixlr - The Importance of Layers
Pixlr uses a concept known as Layers. This enables an image to be controlled independently as a separate layer when composing a new image that comprises several individual images. This means that you can move layers around eg as for repositioning text, since each block of text will be in its own layer. When you save a Pixlr image to your PC, then the image gets flattened and all the layers are merged as a single layer. It is recommended to turn layers on and off when editing in Pixlr and then saving each stage as a separate image on your PC - in case you need to go back and rework an image from a given point.
Opening and Saving Images
1. Save Images from InternetFind and save a suitable image for your website header:
- Locate an image
- Download image to PC
- Rename and save the image
1. Crop to the Header SizeCreate a header image the exact size for your website:
- Load an image
- Select an area for your header
- Crop and save the image
2. PC-PixlrUpload and download images to Pixlr from your PC:
- Load an image to Pixlr
- Edit the image
- Save the image to your PC
2. Add Text to the HeaderAdd and position text in your header image:
- Create a text layer for your image
- Select a font and write your text
- Reposition and resize your text
3. Web-PixlrLoad an image to Pixlr directly from the Web:
- Locate and image on the Web
- Load into the Pixlr editor
- Edit and download image and save to your PC
3. Add a Logo to the HeaderAdd other images such as a logo to your header design:
- Select another image
- Copy the image to the header
- Resize the new image layer and reposition in the header
- 1-Select a stock image library to find a suitable image
- 2-Select an image from a stock image library
- 3-Download an image to your computer from the internet
- 4-Save image to your computer
1 Locate and search on a stock image libraryNote. Some stock image libraries require you to register as per the Stock.Xchng library featured here. Most of the image libraries have two useful features for locating a suitable image; a list of categories and a search bar. There is a list of stock libraries shown on this web page when you close this slideshow.
2 Retrieve a suitable image for your website headerOnce you have found a suitable image, then click (or double click) on the image or select from the options for downloading. Select the largest image size available where there is a choice of image sizes.
3 - Download an image to your computer before editingThere may be a download option provided, if not then right-click on your mouse and choose the Save option to save the image to your computer - Note. Your save/download options may vary depending on the web browser you are using. You can also try double-clicking on the image to open the image file and then right-click for the save option.
4 - Save the image to your computerSelect the directory/folder where you wish to save your images - such as My Documents/My Pictures on a Windows PC. You can modify the file name at this point although you must leave the file extension such as .JPG . PNG or .GIF as is.
- 1-Open the Pixlr Image Editor and select the option: Open Image From URL
- 2-Locate an image on the web and copy the URL shown for the internet image
- 3-Paste the image URL in the Pixlr Image Editor and load the image
- 4-View the image in the Pixlr Image Editor
- 5-Save an image to your computer from the Pixlr Editor
- 6-Name your image and apply the quality setting
- 7-Locate a folder on your computer and save the image file
1 Open image in Pixlr from a URLIf you wish to open an image directly from the internet in the Pixlr Image Editor then go to the Pixlr Image Editor main page and click on the Open Image from URL option. This is useful if you are testing out images so you only need to save an image to your PC once you are sure it is suitable for your purpose - this is very useful when adding clipart to existing header designs.
2 Select and copy the image URLGo to the browser tab/window containing your chosen image. Highlight the URL (Uniform Resource Locator) in the browser address bar. Note. The last characters in the URL must read .JPG (or JPEG) .GIF or .PNG. Place your mouse arrow/cursor inside the highlighted are, then right-click the mouse and select COPY.
3 Open an Image in the Pixlr Editor directly from the internetThere are three simple tasks in sequence: 1) Paste the URL as copied from the image website into the space provided (the URL previously copied is shown highlighted red) 2) Click the OK button after pasting the URL 3) Wait for the progress bar to finish and then you will see the image as loaded.
4 View your loaded imageThe image is now loaded into the Pixlr Image Editor. The image has no title as it was loaded from a website. Note the image size below showing the width and height. Note also that the image has been reduced for display purposes to a percentage of the original size.
5 Save the image to your computerIf you think that the image is suitable for your requirements then you can save it to your computer to then upload directly to your website and/or modify it at a later time if you require. Keep a copy of the original image so that you can create multiple header designs.
6 Save image - provide a name for your imageIf your image already has a name then you may leave as is or add a version number so that you can go back to the original image if required eg myimagefile-v1.jpg. Select the same format as your existing image file (probably JPG). Use the slider bar to set the image quality at 100%.
7 Locate a folder on your computer for your image fileThe example shown is for Windows XP. Locate the folder for your image file. You can change the name for your file by overwriting the current file name if you require.
- 1-Select the Open Image From Computer option in the Pixlr Image Editor
- 2-Locate an image file on your computer
- 3-View the image in the Pixlr Image Editor
- 4-Save an image to your computer from the Pixlr Editor
- 5-Name your image and apply the quality setting
- 6-Locate a folder on your computer for your image file and save
1 Select the Open Image From Computer option in the Pixlr Image EditorGo to the Pixlr Image Editor and click on the option labeled "Open image from computer".
2 Locate an image file on your computerThe example shown is for Windows XP. Select the folder where your image file resides and click on the required image file. Click on the button labeled Open.
3 View the image in the Pixlr Image EditorThe image will appear with the file name at the top of the image. The image size is shown in pixels at the bottom left below the image. The image has been reduced for display purposes down to the percentage shown of the original size.
4 Save the image to your computerAfter editing, select File/Save from the menu options. If the image is suitable for your requirements then you can save it to your computer to upload to your website and/or modify it in Pixlr at a later time.
5 Save image - provide a name for your imageIf your image already has a name then you may leave as is or add a version number so that you can go back to the original image if required eg myimagefile-v1.jpg (recommended). Select the same format as your existing image file (probably JPG). Use the slider bar to set the image quality at 100%.
6 Locate a folder on your computer for your image file and saveThe example shown is for Windows XP. Locate the folder for your image file. You can change the name for your file by overwriting the current file name if you require. If you have modified the image then save as another name (recommended).
- 1-Use the zoom to take a closer view of the image
- 2-Change zoom and move around the whole image
- 3-Set the image output size
- 4-Select an area for your website header
- 5-Crop the selected area
- 6-Select zoom to view the cropped area at full size
- 7-View the header at full size
- 8-Save the image and rename if necessary
- 9-Locate a folder on your computer and save your image file
1 Zoom in for a closer view of the imageIf you have a very large image then you may want to zoom in for a closer view. Click on the magnifying glass in the Tools bar to use the zoom control and then right-click the mouse on the image to view the zoom options.
2 Zoom using the Pixlr NavigatorYou can also adjust the zoom by moving the slider bar in the Pixlr Navigator box. The Navigator shows how much of your image is being displayed in the current window. You can adjust the zoomed image postion in the window by using the vertical and horizontal navigation bars (seen highlighted in pink).
3 Set the image output sizeSelect the crop tool from the Tools bar and change the settings as indicated above for the exact website header size. The image displayed here is 2500 pixels wide and your website header needs to be 896 pixels wide. You can select any area on the page and the width will be scaled up or down automatically (although scaling up will reduce image quality).
4 Select an area for your website headerClick on the image (keep the mouse click button down) and drag the mouse to create an area for cropping. You can click on the rectangle created and move it around and adjust the size by clicking on a corner and dragging. The Navigator box shows the width and height of your current selection. NB Ensure that the width is at least 896 for the best quality.
5 Crop the selected areaDouble-click on the selected area to crop the image. The image will be automatically resized to the Output Size settings you applied previously. The new image size is circled in red.
6 Select zoom to view the cropped area at full sizeClick on the magnifying glass symbol in the Tools bar and select Actual Pixels in the display as shown in order to view the header at full size.
7 View the header at full sizeThe percentage indicator indicates 100% so the image header is viewed at full size.
8 Save the image and rename if necessarySelect the File/Save option. You may leave the name as is or add a version number so that you can go back to the original image if required eg myimagefile-v1.jpg. Select the same format as your existing image file (probably JPG). Use the slider bar to set the image quality at 100%. Note that in the above example the name has been changed from that shown in the title bar (shown in red).
9 Locate a folder on your computer and save your image fileThe example shown is for Windows XP. Locate the folder for your image file. You can change the name for your file by overwriting the current file name if you require.
- 1-Select the option to add text to the image
- 2-Add text to the text layer
- 3-Change the font style
- 4-Modify font options
- 5-Reposition your text
1 Select the option to add text to the imageNote. Text is added as a separate layer to the image background. Layers can be turned on and off independently of the main background image. Click anywhere on the main image - the text can be repositioned later. Select the Text symbol (A) in the Tools bar. The box labeled 'Layers' will show the text item as a separate layer.
2 Add text to the text layerEnter text into the text box provided and the text will appear on the header. The list fonts for your text are from those held on your computer. More fonts are available from various resources on the internet.
3 Change the font styleClick on a font in the font drop-down list and use the up/down arrows on the keyboard to browse through the fonts. Click on the chosen font to select it and the font will change on the main image.
4 Modify font optionsYou can change the font style, size and color. Click OK when you have finished. You can modify at any time - make sure that you select the Text layer in the Layers box as shown in slide 2 in order to modify the text.
5 Reposition your textYou can move the text by left-clicking on the text and keeping the button depressed and dragging the text to a new position. First you must click on the Select icon at the top right of the Tools bar as shown.
- 1-Add an image for your logo
- 2-Open an image from your computer
- 3-View the new image
- 4-Change the size of the new image
- 5-Add the new image to the header
- 6-View the updated header
- 7-Move logo to a new position
- 8-Select a filter to modify the background
- 9-View the modified header
1 Add an image for your logoThe text is now repositioned from the previous slide. Select File/Open Image (or Open Image URL if selecting from a website) to add a logo or any other image to the design.
2 Open an image from your computerSelect an image from your computer to add to the design.
3 View the new imageThe new image is now available. There are now two separate images displayed in the Pixlr Image Editor. Make sure that you are on the correct image to edit by making a single click on the image.
4 Change the size of the new imageSelect the Image/Image Size option to resize the image before copying it to the main image to as close to the final size as possible. The logo will be copied to the main header image as a new layer. NOTE. A layer may be resized but NOT proportionately (you will need to resize by eyeballing) so get the logo to a reasonable approximation of the required size before copying.
5 Add the new image to the headerYou can copy the logo image to the main header design by clicking on the main layer in the Layers box and dragging it to the main header image. The copied image will appear as a separate (new) layer on the main header image.
6 View the updated headerThis is a view of the main header design with the text moved to a new position and the logo copied to the header. Select the tool at the top right side of the Tools bar (see above) and click on the new logo to drag it to a new position.
7 Move logo to a new positionThe logo has been moved to a new position. Note that the logo layer is highlighted in blue in the Layers box. You need to click on the correct layer in the Layers box before editing or repositioning of the layer content.
8 Select a filter to modify the backgroundClick on the background layer (or any other layer) and test some of the filters. You can undo the changes by using the Edit/Undo option. The example shown has the Glamour Glow filter applied to the background option. Note that there are two dropdown boxes just under the title in the Layers box and you can use these to create a number of different effects.
9 View the modified headerNB!!! When you save this image it will be 'flattened' and the layers will be merged, so please make sure that you SAVE AS A DIFFERENT NAME in case you need to start from scratch or create several variations. If you have many layers then CONSIDER SAVING IN STAGES AS DIFFERENT VERSIONS so you can modify your design from any stage.
Image ResourcesThere are many high quality images available that you can download and use on your website for free. Please check the terms and conditions for the image you intend to use just to ensure that you are not breaching any copyright agreements and contact the owner of the photograph if in doubt.
The following websites and blogs provide free images for your own use. Most websites have a list of categories and also a search option.
- - Select the largest image size available where more than one size is listed.
- - When using view/save (by double clicking or by using the right hand mouse button + the view/open image option) check that the filename in the browser address bar ends in .JPG