GIMP & HTML: Free Web Graphic Design
3.5 (49 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8,417 students enrolled
Wishlisted Wishlist

Please confirm that you want to add GIMP & HTML: Free Web Graphic Design to your Wishlist.

Add to Wishlist

GIMP & HTML: Free Web Graphic Design

Learn to use the GNU Image Manipulation Program (GIMP) to produce web graphics and HTML to display them on web pages.
3.5 (49 ratings)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
8,417 students enrolled
Created by Brian Jackson
Last updated 8/2014
Current price: $10 Original price: $95 Discount: 89% off
1 day left at this price!
30-Day Money-Back Guarantee
  • 3.5 hours on-demand video
  • 1 Article
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn to use the GIMP to create free and inexpensive web graphics
  • Learn to use an HTML editor to add your graphics to a web page
View Curriculum
  • A PC or a Mac
  • A standards based web browser
  • A glancing familiarity with the GIMP and HTML.

Make Your Web Page Shine

If you've always wanted to snaz up your web pages with some fancy graphics but couldn't afford the software licensing fees, image costs, or consulting service expenses, then let me show you how to get the project done simply and with little or no expense. This course combines the free GIMP image editor with a free HTML aware text editor to show you how to produce professional looking web pages on a budget.

Create Free and Inexpensive Web Graphics

In this course I'll teach you how to use the free Gnu Image Manipulation Program (GIMP) to produce stunning web graphics on a PC or a Mac. Learn to produce common web graphics such as bullets, logos, banners, separators, and buttons. Learn where to find free and inexpensive images on the Internet.

Display It All on Your Web Page

In the second half of the course I'll show you how to use HTML and a browser to display and animate those images. Learn to use table and div tags to position graphics and text on the screen in order to lay out entire web pages. Learn how to use mouse events to make pages react to the user’s actions.

It’s the Ultimate Web Graphics Course

The course begins simply enough with how to install the GIMP and then includes suggestions on selecting a user friendly HTML language editor. It ultimately leads you step-by-step through how to create each graphical element in the course and how to display those elements on a web page.

This Course Is Not For The Absolute Beginner

This course assumes a glancing familiarity with the GIMP and HTML. This is effectively an intermediate course on both topics. If you’re ready, come with me on a graphical journey of discovery.

Who is the target audience?
  • Web page administrators who would like to learn how to improve the pages they maintain through the use of graphics
  • Graphics developers who would like to learn how to embed their graphics into an HTML web page
Students Who Viewed This Course Also Viewed
Curriculum For This Course
Expand All 25 Lectures Collapse All 25 Lectures 03:18:03
4 Lectures 18:03

In this lecture we provide an overview of the course outlining its structure and both the GIMP and HTML topics covered.

Preview 04:57

A live demonstration (with sustained periods of intolerable waiting removed) of me downloading the latest version of the GIMP, installing it, starting it, and stopping it. Get this far with your own copy of the GIMP and we're ready to play.

Preview 05:17

In this lecture we review PC based HTML editing options including the built in and free Notepad utility, Emacs which included HTML aware colorization and indentation, Sublime Text 2 which at $70 provides command and variable completion and other advanced features, and Notepad++, a fast, free HTML aware replacement for Windows Notepad.

Preview 07:38

The GIMP and Web Graphics
12 Lectures 01:57:14

Learn to make 3D sphere's and fancy bullets in the GIMP and how to display those bullets using the HTML table element. This lecture uses the GIMP, Emacs, and Chrome to show you how to implement a fancy web based unordered list.

Creating 3D Sphere's and Bullets

In this lecture we visit the Getty Museum online, an excellent source for free images, and then visit my favorite inexpensive pay per image site,

Obtaining Free and Inexpensive Images

In this lecture we examine multiple methods, known as the easy and hard way, to separate and image from its background.

Cutting Out Images

In this lecture we look at the use of the many filters provided in the GIMP to manipulate images. In the end we turn our simple tree into an elaborate piece of modern art.

Image Manipulation

In this lecture we review several options for replacing the HTML horizontal rule with graphical elements and conclude with making our own separator using geometric shapes.

Creating Graphical Horizontal Rules and Separators Pt. 1

In this lecture we finish two filigree style separators using cutouts of various geographic shapes.

Creating Graphical Horizontal Rules and Separators Pt. 2

In this lecture we create a floral separator using multiple selection techniques, resizing, flipping, and rotating to make image look slightly different, and conclude with the finished bouquet to which we add a flower that we turn yellow using the Colorize menu item.

Creating Graphical Horizontal Rules and Separators Pt. 3

We look at how to improve my face using photo touch-up techniques and then how to mess with it by applying various old photo techniques to my picture.

Touching Up Photos and Adding Effects

We begin to create a web page header logo for, well ultimately, me. I therefore get the benefit of recording what I was going to do anyway. You get the benefit of being able to watch real GIMP usage in action. I've always believed that you can best learn something by watching it being done. I hope that's true because I'm going to show you the ugly details of cranking out my future personal web banner.

Creating Banners Pt. 1

And here it is, my finished banner (after I go away to do a few touch ups).

Creating Banners Pt. 2

In this lecture we use a text path and layer mask to produce a logo for my publication company, IIB Publications.

Creating Company Logos

In this lecture we extend the width of an image so that we can use it as a banner across the top of a web page.

Creating Banners and Overlaying Images Pt. 1
Adding Image Effects with HTML
8 Lectures 58:35

A quick overview of HTML turns into a discussion on well formed HTML.

Writing Well Formed HTML

A review of the HTML img tag shows the most basic way to include images into a web page while showing some CSS based options for configuring the image.

Inserting Images Using the HTML "img" Tag

In this lecture I show how to layout images on a page, even overlay them, by using HTML "div" tags and CSC positioning. A brief set of slides leads to web page examples and finally to the HTML source displayed in an editor.

Creating Banners and Overlaying Images Pt. 2 ("div" Tag Positioning)

A formal review after our earlier session on using the HTML table tag to align bullets and text to produced graphical unordered lists. This less shows how to use table tags to layout entire web pages.

Review of "table" Tag Based Positioning

In this lecture we view a slide presentation explaining Cascading Style Sheets (CSS).

An Introduction to CSS

In this lesson we learn how to include GIMP images in our HTML pages as background images using the CSS background attributes.

Using Background Images

In this lecture we look at using image maps to map regions of an image to particular actions based on user activity. The sample page show how to display timezone information for a map of the United States.

Creating Image Maps

In this lecture we see how to use the img tag onmouseover and onmouseout events to swap images on the fly to produce a button rollover effect.

Creating Button Effects
1 Lecture 04:07

Course wrap-up with hints at HTML5 changes.

Course Wrap-up and What Now
About the Instructor
Brian Jackson
4.4 Average rating
2,280 Reviews
48,185 Students
30 Courses
Author/Publisher 30 Courses, 2250+ Reviews, 48,000+ Students

Born in Los Angeles, California, in the middle of the last century, I have always wanted to be a writer. After twenty-five some odd years spent working in the computer industry in the heart of the Silicon Valley, first for Lockheed as a Systems Programmer and later for Cisco Systems as a test tool developer, I managed to retire early and begin my next career as a self-published author.

Along with writing and publishing my own novels I also publish the works of my wife, Melanie Jackson. During the past four years I’ve published well over 100 books in paperback and eBook formats. Oddly enough this includes eBooks on how to self-publish books and how to create professional looking book covers using the GIMP. I’ve also recorded and distributed a pair of audiobooks available for purchase on Amazon and Audible. Finally, I spend a portion of my time maintaining both my website and my wife’s website, which was developed using WordPress.

My latest endeavor, begun in July of 2014, is to record training courses for distribution via Udemy. My goal is to provide low cost high quality screen cast based educational material focusing on my area of expertise; namely, self-publishing and book cover design using the GIMP. As time permits, I plan to expand my catalog to cover Web page development and Udemy course preparation.

I currently live in the beautiful California wine country with my wife, published author Melanie Jackson, and Butterscotch the cat.