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.
4.6 (42 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.
7,029 students enrolled
$19
$95
80% off
Take This Course
  • Lectures 25
  • Length 3.5 hours
  • Skill Level Intermediate Level
  • Languages English
  • Includes Lifetime access
    30 day money back guarantee!
    Available on iOS and Android
    Certificate of Completion
Wishlisted Wishlist

How taking a course works

Discover

Find online courses made by experts from around the world.

Learn

Take your courses with you and learn anywhere, anytime.

Master

Learn and practice real-world skills and achieve your goals.

About This Course

Published 8/2014 English

Course Description

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.

What are the requirements?

  • A PC or a Mac
  • A standards based web browser
  • A glancing familiarity with the GIMP and HTML.

What am I going to get from this course?

  • 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

What 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

What you get with this course?

Not for you? No problem.
30 day money back guarantee.

Forever yours.
Lifetime access.

Learn on the go.
Desktop, iOS and Android.

Get rewarded.
Certificate of completion.

Curriculum

Section 1: Introduction
04:57

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

05:17

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.

07:38

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.

Accessing the Online Examples
Preview
Article
Section 2: The GIMP and Web Graphics
13:30

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.

06:46

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, CanStock.com.

07:50

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

06:58

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.

09:30

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.

10:28

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

15:28

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.

07:35

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.

08:54

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.

04:29

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

12:09

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

13:37

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.

Section 3: Adding Image Effects with HTML
09:07

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

01:57

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.

08:36

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.

10:35

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.

06:31

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

06:12

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

06:36

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.

09:01

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.

Section 4: Conclusion
04:07

Course wrap-up with hints at HTML5 changes.

Students Who Viewed This Course Also Viewed

  • Loading
  • Loading
  • Loading

Instructor Biography

Author/Publisher Brian Jackson, 26 Courses, 1,700+ Reviews, 4.60 Stars and 35,000+ Students

Born in Los Angeles 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.

Ready to start learning?
Take This Course