Google Docs to HTML

(In this tutorial, we will explore a quick way to re-purpose a Google word processing document for use on the web with validated code, using a trick that will help you produce clean code.) Hey… have you used Google Documents lately? They’re getting more and more sophisticated with more and more reasons to use them […]

Cleaning Your LAMP – Troubleshooting Slow CMS Issues

Do you manage a Content Management System (CMS) like Drupal, Joomla, or WordPress to run your website? Is it running slow, and your pages take a long time to load even though you have a high-speed connection? Well, I had some performance issues, and learned quite a lot in drilling down for some solutions. I’ll […]

SVG – the Era of Scaleable (and Programmable) Vector Graphics on the Web

Scalability without loss of resolution, is definitely an advantage in SVG format images — but did you know that SVG images are also programmable? We’ll take a look at what SVG format means for Web Developers in this article. WebMasters have been living with JPEG, GIF, and then PNG graphic format choices for some time. […]

Get Introduced to APTANA — a WebMasters’ Dream Editor

This WebMaster Skills tutorial series is for webmasters who are familiar with HTML, and want to upgrade your working skills and keep current with new programs and techniques. APTANA Editor: Review a Free Template, and Get Introduced to APTANA — a WebMasters’ Dream Editor In this Lesson you will learn about the free, cross-platform APTANA […]

Where to Submit Your Photoshop Tutorials

I found this great list (from, now defunct) of places to submit Photoshop tutorials: […]

Understanding the “Blueprint” for a 3 over 4 Column Website

(In this Lesson we’re going to review an open-source template — you can download it for your own use, open it in FireFox, review a real website using the template, and learn about its hidden CSS “blueprint”.) We will be using the excellent Web Developer FireFox Add-on by Chris Pederick — a must have FireFox […]

Using the “Box Model” to Create a Layout with Columns

(In this Lesson we will review the CSS Box Model and see how it is used to create an attractive column style layout with no tables involved. You can download and use the template discussed here, in your own work.) 1. First, let’s review the CSS “Box Model” concept. Take a look at the picture […]

Setting stylized type for your website

In this Lesson you will create type for the headline, body copy and small ad on your mock-up home page. 1. Open Photoshop 2. Open the “HomePage1design.psd” document. 3. Get the type tool and click in the upper left part of your page. Photoshop gives you a new type layer after you click with the […]

Creating a Thumbnail Image

(In this Lesson you will create a small duplicate image for use as a “thumbnail” image, which when clicked opens a larger version of the image.) 1. Open Photoshop. 2. Open the file “picture.jpg” (it is available for download in Lesson 1). Above, two ways to verify the actual size of an image are displayed […]

Creating An Animated Web Banner in Photoshop & ImageReady

Learn how to create a simple animated web banner In this Lesson you will use the animation program that comes with Photoshop, (called Image Ready), to create ananimated banner, which is begun in Photoshop, then set up to animate using Image Ready.1. Open Photoshop and create a new document that is 468 wide x 60 […]

Creating a Left-bar Background in Photoshop

(In this lesson you will review several methods for optimizing graphics for use online.) Learn how to create a left bar background tile for your web page. This lesson will teach you how to create a side border bar which might be used in your design as an area in which to place buttons. 1. […]

Creating a Seamless Background Tile in Photoshop

(In this lesson, you will use Photoshop to create a square tile that will repeat in the background of your web page without showing any edges where the tiles meet.) 1. Open Photoshop. 2. Open a new document that is 110 pixels wide by 110 pixels tall. 3. Select a color for your background using […]

Create a Collage Graphic for the Web in Photoshop

(You will create a collage graphic using the grid and 3-4 images In this lesson, you will create a home page collage by combining images you import and and blend together using layer modes and opacity settings.) 1. Open the 3 images you saved in exercise 1 so you may combine them for a collage. […]

Use Browser Template and Create Navigation Bar in Photoshop

(Learn how to create a navigation button bar for a website In this lesson you will take a picture of a web browser screen to use as a template, then make a navigation bar for your website.) 1. Open Photoshop. 2. Create a browser template by opening FireFox (we prefer it for Web Development), Navigator, […]

Learn How To Use Save for Web to Prepare Graphics

This Photoshop tutorial series is for webmasters who are new to preparing artwork for the web.  Premise for Photoshop Tutorial Series: You are a web designer at a small agency, and a client has called to request that you prepare a mock-up for a new home page for is company that sells gifts in Victoria. […]

Nvu Tutorial – How to Modify A Web Template

(The Nvu Web Authoring Program is available FREE at I’ve written this Nvu tutorial so newbies to HTML can understand and immediately use Nvu productively, and also included some discussion for advanced webmasters who wish to take more control of HTML and CSS coding) At left, an HTML template from has been opened […]

Learning CSS — Important CSS Concepts

This is an introductory article to some key concepts to help you when you as you learn CSS. “Syntax” Helps You Understand the Code Structure of CSS… Just as HTML must be written in a certain sequence and requires proper brackets around tags, precise spelling, and has its own Syntax, so does CSS. It is […]

Top 6 WebMaster Tricks to Teach Your Fox (Firefox)…

Most WebMasters have heard of Firefox… the alternative Web Browser that’s giving Microsoft a run for their money. Some know about the wonderful list of “extensions” available for it including Web Developer programs. This article is for those of you who want to learn how to deploy a mighty Fox armed to the teeth with […]