Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

  • Print
  • + Share This
Like this article? We recommend

Creating Your Own Template Graphics

The easiest way to create your own template is to simply change the background and other graphics of an existing template. First, you need to know where those graphics are actually stored by default because they are referenced in the template package using aliases that point to a different location in the iWeb package. Specifically, they point to the Shared folder inside the Resources folder inside the Contents folder (the same location in which you found the localized language folder). This is most likely because all language versions of iWeb use the same images, and it doesn’t make a lot of sense to place the same images in multiple locations throughout the application package (it is more than 300 MB to begin with).

In theory, the best place to store your own images might be in that same location. In practice, however, you can also store them in the individual template files. This is somewhat easier to accomplish as long as you are working with only a single-language version of iWeb. It is also advantageous because you will probably find it easier to simply replace the aliases in the template folder with your own images but still use their existing names (you cannot do this if you use the Shared folder because it would overwrite the files used by the existing templates).

You can use any image-editing tool you like to create your own graphics for a template/theme. In addition to creating your own image files, you might choose to open the existing files (you can simply double-click the alias for them inside the template package) and modify those files (especially for background images or icon images used in the iWeb navigation menu). If you do modify existing images, remember to use your editing application’s Save As command to save the images to a different location so that you don’t overwrite the files in the Resource/Shared folder.

Even if you want to create your images from scratch, keep the sizes of the original images in mind. For background and icon images (although not so much for placeholders), changing the size of images can have negative design effects on how the templates will look. You can mitigate such an impact somewhat by modifying the formatting of the template. But, as you’ll see, that can be a daunting challenge.

It is best to save your images to a folder outside the iWeb application until you are satisfied with their look. You might want to open iWeb and look at your base template to try to visualize how these images will look. You can even create a new page in iWeb using your base template and place your images on it to get a complete feel for how everything will appear. Once you’re satisfied with the look of your images, name them to match the names of the aliases in the template and then drag them into it in the Finder. When asked if you want to replace the existing files, choose Replace.

Repeat this process with each template type to create your new theme. If you are happy with the results to this point, you can jump ahead to creating previews of your template. Otherwise, keep reading for information about how to modify template formatting.

  • + Share This
  • 🔖 Save To Your Account