• Increase font size
  • Decrease font size
  • Default font size

Search for tutorials

Creating Your Site Graphics

Downloading and installing GIMP - Part 1

Attention: open in a new window. PDFPrint

Subscribe

Aim:

Now that you’ve created your wireframe you’re going to need to create the graphics that you’ll use for your website. There are quite a few programs that you can use to create these graphics with 2 of the most popular being – Adobe Photoshop, and a Great Free program called GIMP.

Read more: Downloading and installing GIMP - Part 1

   

Downloading GIMP

Attention: open in a new window. PDFPrint

Subscribe

Aim:

How to Downloading GIMP to your computer

Read more: Downloading GIMP

   

Installing GIMP

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll install GIMP on your computer and set it up so that you're ready to start creating your website gaphics

 

Read more: Installing GIMP

   

Preparing the Layout - Creating a Background - Part I

Attention: open in a new window. PDFPrint

Subscribe

Aim:

How to create a background image for your web page

Read more: Preparing the Layout - Creating a Background - Part I

   

Preparing the Layout - Creating a Background - Part II

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll create a background graphic with a gradient type effect

 

Read more: Preparing the Layout - Creating a Background - Part II

   

Create Your Header

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll discover how to create a header graphic for your website

Related Content:

• Solid

• Gradient

In this lesson you’ll learn how to create the graphic that will be your webpage header.

We will once again create two different looks: A header with solid color, and a header with a gradient color effect.

 

Read more: Create Your Header

   

Add Text to the Header

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll discover how to add text to your header and create some neat text effects

Related Content:

Plain Text

Mirror reflection effect

In this lesson you will learn how to add professional looking text to your header.

Read more: Add Text to the Header

   

Create a Horizontal Navigational Bar

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll be adding a horizontal navigation bar to your new page design

Related Content:

Straight type

Tabbed type

2 more examples

Read more: Create a Horizontal Navigational Bar

   

Create a Left Vertical Menu

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll be adding a vertical menu system in a stylized box

Related Content:

Add a customed Layer

Add lines

Add Text

In this lesson you will learn how to add a vertical menubar to your site design, and how to add text to it.

Read more: Create a Left Vertical Menu

   

Create a Box

Attention: open in a new window. PDFPrint

Subscribe

Aim:

In this lesson you'll discover how to create a stylized menu box

Read more: Create a Box

   

Page 1 of 2