JGPWS Tutorials
Native icon= Native link Squidoo icon= Squidoo lens page* Wordpress icon= Wordpress blog page* Ezine icon= Ezine Article* Jason G. Designs iconJason G. Designs page*
*opens in a separate window.

Within this section, visitors will find tutorials for Adobe® Photoshop®, GIMP, HTML and CSS (Cascading Style Sheets).

HTML tutorials:

Show HTML TutorialsRight arrow

Hide HTML TutorialsDown arrow

This tutorial is a how-to on the very basics of HTML (Hypertext Markup Language)...

HTML Basics thumbnail

CSS Tutorials:

Show CSS TutorialsRight arrow

Hide CSS TutorialsDown arrow

Learn how to create the image rollovers found in the right frame of my Portfolio site.

CSS rollovers

In a follow up tutorial to CSS Rollovers, we will address fixes for Internet Explorer 6 and up.

CSS rollovers- MSIE fixes

Put together a basic layout using CSS with a titlebar, left navigation panel, and content panel.

CSS Layout screenshot

Explore various button designs along with supporting CSS code.

CSS Layout screenshot

Adobe® Photoshop® Tutorials:

Show Photoshop TutorialsRight arrow

Hide Photoshop TutorialsDown arrow

Image Tiling

In this section we will create a sand pattern perfect for use as a web page background. Using Photoshop's Offset feature, we make sure our pattern repeats with no visible seams.

Tiled Sand thumbnail

Building on the previous tutorial, but differing significantly, is this one. Here, we will create tiled sand using three layers: a background color, a shadow color, and a highlight color. Simply changing the background color will give the sand any color desired.

Tiled Sand 2 thumbnail

In this tutorial, we will create a repeating water pattern (similar to the sand tutorials) using the Offset filter.

Tiled Water thumbnail

Building on the above tutorial, in this one we will use layers to create a tiling wave pattern. If we change the background color the same effect will apply.

Tiled Water 2 thumbnail

In this tutorial, we will create photo-realistic blue slate tile.

Blue Slate thumbnail

In this tutorial, we will create photo-realistic red colored slate tile. We will also get involved with drawing shadows and highlights.

Red Slate thumbnail

GIMP Tutorials:

Show GIMP TutorialsRight arrow

Hide GIMP TutorialsDown arrow


This tutorial teaches users of GIMP (GNU Manipulation Program) how to create an object with a chrome look, similar to what has been done in Photoshop many times.

GIMP Chrome thumbnail

In this tutorial, we will create photo-realistic ripped fabric. This can be a great effect for a fashion or interior design related website...

GIMP Ripped Fabric thumbnail

In this tutorial, we will learn how to create a sand texture that can be used as a background behind a web page or for game or architecture simulation. This time we will use Gimp instead of Photoshop.

GIMP Sand Tutorial thumbnail

Web Layout

Create a nice looking, Wordpress specific, web layout in Gimp.

GIMP Web Layout thumbnail


While experimenting in Creating a Chrome Effect in GIMP 2.6, I figured out a way to fake anti-aliasing on rounded edges after drawing with Selection tools that looks convincing.

GIMP Jagged Lines thumbnail

Web Design/WordPress:

Show Web Design/WordPress TutorialsRight arrow

Hide Web Design/WordPress TutorialsDown arrow

In this tutorial, we will learn how to slice up and save graphics to be used as CSS background images in an XHTML page.

Graphic to XHTML thumbnail

In this third tutorial in a series, we are going to convert our static site into a stand alone Wordpress theme.

Static to WP thumbnail

This tutorial will be the fourth and final tutorial in a series. We will turn our content managed website into a blog.

Static to WP 2 thumbnail

This article explains how to manually update a WordPress installation on a local Windows XP computer. It also delves into some pitfalls that may be encountered along the way.

Ezine Article thumbnail

This process describes checking your theme with the Theme Check plugin, fixing problems and adding features. Emphasis is on WordPress 3.0.

Current Standards thumbnail

JGPWS's Tutorials can be found at the following locations:

© Copyright Jason Gonzalez 2004 - 2017 all rights reserved.
Questions? Contact me: jason.sgonzalez@gmail.com (Replace the word "at" with the & symbol when sending the email).
JGPWS Tutorials uses ads on some pages. For more information, see our Privacy Policy page.
[List of marks used, with 'Adobe' first, if used, followed by other Adobe marks used, in alphabetical order] are either registered trademarks or trademarks of Adobe Systems Incorporated in the United States and/or other countries.

Back to: JGPWS index page