← Back

Web Page Graphics

Online Graphic Design Degree Guide: Web Page Graphics

As the bandwidth capabilities of the internet have increased in the last decades, so too has its visual presentation. Modern web pages feature interactive and highly visual environments designed to attract users. Graphics are one method of improving the aesthetic appeal of web pages. Web page graphics come in the form of banners, clip art, buttons, backgrounds, graphic images, animated images, customized texts and other visual elements. In the early days of the Internet, graphical production was limited to simplistic images and buttons that offered little in the way of artistic value. These primitive graphics were created by html coding, and often involved pre-made clip art and background sets. While these forms of web graphics are still around today, there have been many new advancements in web graphic design and production. New coding languages such as CSS, XML, HTML 5 and others have been created with the intention of allowing for easier and more in depth web graphic production. Currently graphic formats fall into one of 4 designations; raster, raw, vector or compound based graphics. From these 4 formats come multiple types of graphic editing softwares such as Photoshop, Paint Pro, Web GL, GIMP and more. This diversity of graphic production is a far cry from the early days of the internet when there were three main forms of images and graphics used online; GIF, JPEG and PNG.

In web page design, web graphics can be seen as the visual element that helps attract and guide users through a web page. If websites were simply collections of text, as they used to be, they would have much less visual appeal to users. A well designed web page will include functional and well placed web graphics, that keep user experience in mind. For a web designer, this can sometimes be challenging, as they must keep in my not only the technological aspect of coding, but also visual design that brings the page together into a coherent experience. This guide attempts to provide information and resources on web graphics for would-be web designers.

As a form of design that is centered on web site and online production, there are naturally many resources and much online support for web graphics. In the past, this has often involved pre-made graphic databases and collections from designers who promoted their work. While there is still a large amount of pre-made content on the Internet, ready to be plugged in to a websites code, there are also many tools and software programs available that allow for simplified production of customized graphics. Both forms of graphic content are covered in this guide, along with overviews of web graphics in general, as well as tutorials for creating web graphics using various scripts and software. As part of an ongoing effort to provide the best information and resources on web graphics, and graphic design in general, we have included the following resources. The hope is that this guide will be useful for amateur and professional graphic artists and web designers, as well as anyone else interested in how web pages and their graphics are created.

Basics of Web Page Graphics
Web graphics involve the uploading of graphic images, through code and scripts, onto hosted web pages. This process has evolved as the Internet has developed, allowing for multiple methods for accomplishing this task. The complexity of this task is largely determined by the web designer, who may either utilize simple formatting and pre-made graphics or create their own customized designs through software and scripting. The following resources give an overview of these processes.

  • Web Graphics for Beginners – An introductory overview on web graphics and design , covering the steps necessary to upload and place graphics on the web. This site also features tutorials, cheat sheets, pre-made code and color guides for enhancing the appearance of web pages.
  • Introduction to Web Graphics – A guide for web design students on web graphics from the University of Washington. Provides an introduction to web graphic creation and includes guides for specific interactive graphic elements such as banners and navigation buttons.
  • Early Web Graphics Overview – An article from 1999 that provides an overview of web graphics at the time, along with specific guides to the three popular graphic formats of the day; GIF, JPEG, and PNG.
  • Graphics on the Web – A collection of overviews on some of the popular graphics formats used on the web. Compiled by W3C, the leading Internet authority.

Tutorials and Guides

It can be rather confusing to compile an attractive web page by way of individual graphical elements. Thankfully, there are numerous tutorials and guides available online to provide guidance for accomplishing a wide variety of graphics production. The following tutorials cover the general process of creating and uploading web graphics, as well as instructions for more specialized operations and creations.

  • Website Design Tutorials – A series of tutorials on website design, including tutorials on web graphics and popular web graphic languages. This website also hosts free web graphics resources.
  • Web Graphics Tutorials – A series of 8 tutorials covering multiple aspects of web graphic creation including graphic and illustration softwares, web formatting, photo editors and more. This site also contains a tutorial for GIMP an open source photo editing and illustration software.
  • Learning Web GL – A website dedicated to educating on Web GL use, a hardware-accelerated 3D graphics editor. Includes tutorials on Web GL as well as a regularly updated blog.
  • Graphic Tips and Help – A web portal for resources on advice and help for web graphics. Covers web graphics software and tools and links to collections of graphics.

Online Graphics Resources

An enormous amount of pre-made graphics and images are hosted online. These are usually accompanied by code that can be simply plugged into a web page template. Included below are resources that provide a large selection of backgrounds, buttons, graphics, patterns, clip-art, banners and other web graphics, as well as online tools for creating your own simple web graphics.

    • Icon Bazaar – A large database of icons for use in web page design. Organized into categories such as religion, animals, cars, animated, holidays and more.
    • Free Web Design Tools – Free online hosted tools for creating buttons, text logos, menus, background textures, text boxes and icons. Creates customized html scripts for implementation into personal websites.
    • Bells and Whistles – A directory of pre-made animated and non-animated graphics and backgrounds for web design. Covers html as well as Java scripting.
    • Inkscape – Inkscape is a scalable vector graphic (SVG) editor that runs on an open source platform. The official website contains tutorials, news, downloads, clip art and more.
    • Design Resources Search Engine – A customized search engine for design resources that applies Google powered searches to a selection of prominent web design websites.
    • BG Patterns – A free online hosted web app that allows for creation of background patterns for use on web pages. Allows fo pre-made patterns, images and colors to be combined to create customized backgrounds.
    • Texture King – A large collection of pre-made textures for background use in web design. Organized into categories like stones, concrete, wood, metal, glass and more.
    • Marvelicious Free Designs – A collection of pre-made designs for background sets (with buttons), most of which follow a ‘formal’ design. Available for free use and organized into categories by themes such as holidays and characters.
    • Free Graphics World – A database of royalty free graphics from simple to complex. Includes collections of buttons, page dividers, bullet points, backgrounds, banners and templates.
    • Web Graphics Resources – An overview of web graphic production along with a selection of online graphics resources. Compiled by the Electronic Education Environment program at UC Irvine.