Web Graphics Tutorial

From Camera to Browser: Optimizing Images for the Web

Over the years, the world has seen a change in the way that cameras are made and how they store image data. In the past, it was film. Now, for the most part, it's digital information. In this article, we'll look at the ways that images make it from the camera to the web.

Working with Images in HTML and CSS3

You’d be hard pressed these days to find a website that doesn’t use images. However, not all sites use images in the best possible way. In this article we'll show you how to properly use images on your site, as well as a couple of CSS3 tricks that you might want to experiment with.

How To Add a YouTube Video to Your Web Site

Embedding a video from YouTube in your website is quite simple these days. In this tutorial we'll show you how to do it, and how to use the more advanced embedding features that YouTube now provides to web developers. Updated with YouTube's new iframe embedding functionality.

How To Use Text Over Images with HTML

Place text over your images with HTML commands alone!

How Can I Select the Best Images for My Website?

Why do you want an image? Is it for a web page as a dominant image, a background or a series of images that are part of a gallery? In this tutorial we will show you how to select the best images for your website.

Do Web Safe Colors Make a Difference?

Web Safe colors, also known as browser safe colors, were introduced many years ago, when the web was in its infancy. A guestion that comes up every now and then is whether modern web designers should be using this type of palette - or not?

How Can I Create Images for Mobile Devices?

When you think about mobile devices, the idea of creating images would seem to be a straightforward process. Unfortunately, it's not, but in this tutorial we will cut to the chase and show you how it's done!

Graphics Tutorial: 10 Tips to Get the Most Out of Photoshop

If you've been working with image editors for any amount of time, you probably know that Photoshop is a great tool. The downside is its complexity. You can easily get bogged down in tasks which can really hurt your productivity. With these 10 tips, you'll learn how to make the most of your time.

Graphics School: How to Customize Web Photo Galleries in Photoshop CS3

In the last lesson we looked at the process of building Web galleries in Photoshop CS3. The result, while functional, isn't pleasing to the eye and needs quite a bit of customization to give us a result that we can use in real life. This tutorial will show you how to do just that!

Tutorial: How to Create Hotspots and Rollovers in Paintshop Photo Pro

Image maps are where the designer has created a special region or hotspot to act as a trigger to another web page. The hotspot could be a circle, triangle, rectangle or polygon. In this article we're going to look at how you can create Hotspots and Rollovers in Paintshop Photo Pro.

How to Build Web Galleries in Photoshop CS3

One of my favorite aspects of Photoshop is its ability to create custom web galleries. In this tutorial you'll learn the basics of the process, and we'll give you a few tips to save you some time.

How to Correct Image Distortion in Paintshop Photo Pro

In this tutorial, we're going to look at several ways of correcting distortion in an image. The topics we'll be covering are image straightening, perspective distortion and lens distortion.

How To Use Photoshop To Change Colors in an Image

Many times as a web designer I find that some of the colors in a photo are not suitable for use with a site’s color scheme. To solve this problem, I use Photoshop to change the photo's colors to better suit my application.

Web Developer Tutorial: GIF and PNG-8 Compression

In our last tutorial we looked at compression using the JPEG format. This time around we’re going to look at GIF and PNG-8 compression. These two types of compression are best for screen shots of dialog boxes, lettering and line art.

Web Developer Tutorial: Create Animated GIFs with CorelDRAW and PHOTO-PAINT

Animated GIFs can add a great deal to your project and are a favorite item in online advertising, where one creates banners of various types. In this tutorial we will create a GIF animation using CorelDRAW and PHOTO-PAINT.

Web Developer Class: Use Image Slicing to Load Web Images Quickly

In this article, we’re going to look at another way of loading Web images quickly by using image slicing. For this, we will use Paintshop Photo Pro X3.

Web Developer's Review: Paintshop Photo Pro X3

If you want to work with image manipulation software, there are many choices. One of these is Paintshop Photo Pro X3, a relatively inexpensive image editor from the Corel Corporation, which we look at in this review. There are many options available in this program, so for the sake of brevity, we will look at a few.

Web Developer Class: How to Mask Images

There will be times when you want to manipulate your images to create something new. One of your options is to remove part of an image to use in another project. The process of removing an image from the background is known as masking, and in this tutorial we'll show you how to do just that.

Web Developer Class: How to Create Fast Loading JPEG Images for the Web

One the most important considerations when designing a web site is when working with images. In this article, we’re going to look at compression of the JPEG image format.

How to Make Your Web Images Load Quickly: Introduction To Web Images

Web graphics can increase your pageviews and generate a lot of interest. The down side is these graphics can also be the source of many issues. In this series, you will learn how bitmaps work, when to use JPEG, GIF, and PNG formats and how to create web page graphics that load quickly.

Web Developer Tutorial: Making Banners Using Swift 3D

There are many programs out there that you can use to create awesome graphics. One such program is called Swift 3D. It is a program made by Electric Rain. Swift 3D v6 is a standalone 3D modeling and animation tool that comes along with preset animation movements, lighting schemes, environments, materials and other things. Right now we’re start out by showing you how to do something simple--we will make a banner that has a beautiful reflection on the bottom.

So, You Want An Animated .gif, Huh?

Perhaps you've seen them on other sites, and you want to create your own animated gifs? This tutorial shows you where to download the software you will need, then walks you through the creation of your first animated gif.

How to Upload Your Photos onto the Web

Want to create galleries to show off your photos online? Check out the various services in this article.

Digital Video: Relative Size

File sizes for different video formats. All based on a 10 second video.

So You Want Another Image Flip, Huh?

This Javascript rollover effect works best in Netscape browsers.

Clicking On Images In Forms

So you want an active image on your site that does not produce an hand cursor when you move over it with the mouse? It can be done, in MSIE at least!

Image Formats

This tutorial/essay goes into great depth regarding images in general. BMP, GIF, and JPEG formats are then explained with loads of examples. The scans are from my trip to Turkey. Come look at my vacation photos!

Image Tutorials

So, You Want Text Commands, Huh?

So You Want A Thumb-Nail Image, Huh?

Please be kind with your large images. Big ones take a long time to download. Let the viewer see a smaller version to check if he/she even wants to spend the time waiting for it.

So You Want A Transparent GIF, Huh?

So, you ask... how exactly do you make parts of images transparent? Read on for all the gory details.

So You Want A Transparent Image, Huh?

Pages look dull if everything's square. Find out how to eliminate the white space around your images so they appear to just 'float' on your pages.

So You Want A Video, Huh?

If you've ever thought about adding a video to your site, here's your chance to learn!

So You Want Your Own Bookmark Icon, Huh?

You've seen them on other sites...you bookmark a site and a neat little icon appears in the URL bar in your browser and in your bookmarks. Find out how you can have a bookmark icon for your own site!

So, You Want A 1 X 1 Image, Huh?

Here's a great way to cut down on bytes and speed up the loading of your page. Use a 1 x 1 pixel image and shape it just about any way you want.

So, You Want A Sound/Embed, Huh?

This article from our archive shows you several ways of adding music to your website!

So, You Want An Active Image, Huh?

This will help you along with the process in making any image an active hypertext link.

So, You Want An Image Flip, Huh?

This is a great effect. When the mouse passes over the image, it changes. It's JavaScript-driven and a little tricky, but you'll get it.

So, You Want Faster Loading Pages, Huh?

If there's one thing that will drive your visitors away, it's a slow loading web site! Read on to find out what you can do to make your web pages load more quickly!!

So, You Want LowSrc, Huh?

This command allows you to help the viewer out by loading a lesser version of a picture before the big color version comes in. Log into the page to see an example of what I'm talking about.

So, You Want To Pre-Load, Huh?

Set up your pages so that the images are in the cache waiting to be used rather than downloading each image as you need it.

So, You Want To Screen Capture, Huh?

Use PaintShop Pro to capture any image on your computer's screen.

Transparent Gifs with LView Pro