Resources for Website Design - Create a Custom Header

There 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 Pixlr

Pixlr 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

Editing Images

 

1. Save Images from Internet

Find 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 Size

Create 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-Pixlr

Upload 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 Header

Add 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-Pixlr

Load 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 Header

Add 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
 
 
SOHO Webmaker - Pixlr Tutorial
CLOSE

1 Locate and search on a stock image library

Note. 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 header

Once 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 editing

There 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 computer

Select 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.
SOHO Webmaker - Pixlr Tutorial
CLOSE

1 Open image in Pixlr from a URL

If 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 URL

Go 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 internet

There 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 image

The 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 computer

If 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 image

If 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 file

The 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.
SOHO Webmaker - Pixlr Tutorial
CLOSE

1 Select the Open Image From Computer option in the Pixlr Image Editor

Go to the Pixlr Image Editor and click on the option labeled "Open image from computer".

2 Locate an image file on your computer

The 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 Editor

The 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 computer

After 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 image

If 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 save

The 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).
SOHO Webmaker - Pixlr Tutorial
CLOSE

1 Zoom in for a closer view of the image

If 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 Navigator

You 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 size

Select 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 header

Click 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 area

Double-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 size

Click 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 size

The percentage indicator indicates 100% so the image header is viewed at full size.

8 Save the image and rename if necessary

Select 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 file

The 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.
SOHO Webmaker - Pixlr Tutorial
CLOSE

1 Select the option to add text to the image

Note. 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 layer

Enter 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 style

Click 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 options

You 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 text

You 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.
SOHO Webmaker - Pixlr Tutorial
CLOSE

1 Add an image for your logo

The 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 computer

Select an image from your computer to add to the design.

3 View the new image

The 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 image

Select 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 header

You 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 header

This 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 position

The 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 background

Click 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 header

NB!!! 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 Resources

There 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.

Tips

Free and paid images:

Low priced high quality images: