Open the webpage that we’ve generated from the original design. It should be located in /web/index.html. Our graphics editor does a great job at eliminating the creation of HTML files and the initial programming that we did in the previous chapter. By the way, I chose this design because of its simplicity and ease of scalability. Now that we have the HTML file generated, we just need to make this web page practical.

The first thing that needs to be done is to remove the layer where the body of the page where all of the text is (in this design it is the about us section). To do this, hover over the image in your web browser, right click on about us, hit properties and find out what the image is called.

In this case, the image is called Divas_13.jpg, and it’s located in the images folder. Now, open the web page within your text editor like we’ve done earlier in the book. The easiest way to do this is to open note pad (start, run, type in notepad, and click ok) and go to file open, select the HTML file you’ve been working with, and select open.

Now what you need to do is scroll down to where the SRC is images/Divas_13.jpg and completely alter that line. The first thing you need to do is copy the width and the height to the TD tag, ad a background color to the TD tag (bgcolor) and then completely remove the image from that table column. Here is an example:

Before:

<td colspan=”6″><img
src=”images/Divas_13.jpg” width=”539″
height=”410″ alt=”"></td>

After:

<td colspan=”6″ width=”539″ height=”410″
bgcolor=”black”>
</td>

Now preview your HTML file in your web browser: The body has been completely removed and now you have the <TD></TD> space to add text. Here is the text I’m going to add:

Test Data delivers the highest quality designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.

So to achieve this, we need to apply it into the table, but we need to apply a white font to all of the text in the table. We will do this with a STYLE tag:

<td colspan=”6″ width=”539″ height=”410″ bgcolor=”black” STYLE=”color:white;”>
Test Data delivers the highest quality designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.
</td>

Now, notice that the text is in the middle of the table? We need to move it to the top of the table, and to do this, we use the VALIGN tag. VALIGN allows you to Veritically align your content to the top, middle, or bottom of the column. It defaults to the middle, so we just need to change it to the top:

<td colspan=”6″ width=”539″ height=”410″ bgcolor=”black” STYLE=”color:white;” VALIGN=”top”>
Test Data delivers the highest quality designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking.
</td>

The next step is to improve this font and add style to your text. To do this, we’re going to add <p> around our content and in the header, we are going to assign <p> to a certain font and font size.

Add this to the top of the page right below the </TITLE> tag, but above the </HEAD> tag:

<STYLE>
P {
Font-Family: Verdana;
Font-Size: 12px;
}
H1 {
Font-Family: Verdana;
Font-Size: 14px;
}
</STYLE>

And add the <P> tag to your content:

<td colspan=”6″ width=”539″ height=”410″
bgcolor=”black” STYLE=”color:white;”
VALIGN=”top”>
<p>Test Data delivers the highest quality
designs and marketing solutions at affordable prices. We Believe that you need a comprehensive strategy to catch and compel your target market. We believe in creating demand for your talents, products or services through positive Web-based technologies, Media and networking. </p>
</td>

The next step is to apply a background to the actual web page itself. This will get rid of the all of the white you see around the design. For purposes of this design, we’re going to make it black. So, alter the body tag:

Before:

<body bgcolor=”#FFFFFF” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

After:

<body bgcolor=”black” leftmargin=”0″ topmargin=”0″ marginwidth=”0″ marginheight=”0″>

The next step, how that we’ve established styles, is to associate links to the about us, events, members only, and contact us graphics. I’m also going to associate the logo, to go to a home page (index.html, which we haven’t created yet). We’re going to find these using the same method we did to select the body picture, except this time we’re not going to delete it, we’re going to add an <A> tag around it. Allow me to demonstrate:

1. Right click on about us, hit properties, and get the name of the image
2. In this case, it’s named “Divas_06.jpg”. In the future, it may be a good idea to rename all of the images in your
   navigation menu to make better sense to you, but for the purpose of this project it is not necessary. Now, open the code for the web page, and find that image. There are a few things you need to do. Notice the ALT tag on the image? You should fill this in with relevant content for a few reasons: search engines like it, it is easier for the visually impaired to use their handicap software to know what the image is, and it is also good etiquette for future web designers to take over your code. You also need to add a zero pixel border around the image, otherwise it will default to a one pixel border when you add the <a> tag.

Before:

<td><img src=”images/Divas_06.jpg” width=”99″ height=”62″ alt=”"></td>

After:

<td><a href=”about.html”><img src=”images/Divas_06.jpg” width=”99″ height=”62″ border=”0″ alt=”About Us Page”></a></td>

Now, do these to all of the images in the navigation menu so it looks like this:

<td><a href=”events.html”><img
src=”images/Divas_07.jpg” width=”63″
height=”62″ border=”0″ alt=”Events
Page”></a></td>
<td><a href=”members.html”><img
src=”images/Divas_08.jpg” width=”113″
height=”62″ border=”0″ alt=”Members Only
Page”></a></td>
<td><a href=”contact.html”><img
src=”images/Divas_09.jpg” width=”87″
height=”62″ border=”0″ alt=”Contact Us
Page”></a></td>

Also, since we’ve added a style to the <p> tag and the <h1> tag, lets insert an <h1> to demonstrate where the title of the page is located at.

<h1>Title of Page</h1>

That there is the basics of taking your Adobe Photoshop design template and turning it into an entire web page.

Adobe Photoshop

1. Open your document, select the slice tool on the left toolbox and begin to draw a slice onto the image as seen below:
2. Continue slicing until you have a separate image for every element of the web page. I recommend that your entire body, however, is part of one slice because we can replace that slice with actual HTML text later on in the book.
3. It is a good rule of thumb to divide your image into as many as possible, which will increase your web pages browser load time. The final step is very easy, simple go to “File”, “Save for Web”, select the format you want (I recommend choosing a GIF at High Quality, but it really depends on your preference of quality), and select “Save”.
4. Select “Save as Type” and choose “HTML and Images”, name your files something appropriate (in my case it’s “divas.html”), and hit “save”.
5. Open your file (where ever you saved it, I recommend making a folder like /divas/divas.html to work in) in your web browser.

Wasn’t that simple? In just a few minutes we were able to slice an entire website and render it in our web browser.

1. Create a new file and select the preset resolution to 800 x 600.
2. When using Gimp, the instructions are exactly the same: Select File, New, and set your width to 800 and your height to 600.)
3. Choose a background color. In this case, I’m going to choose black. To do this, add a new layer, choose the paint bucket tool, select the color black, and pour that color on to the screen. It might be a good idea to lock the layer once you’ve poured the color on to it. The lock feature is pointed to in the image below:
   
4. The next step is to create the logo we spoke earlier in the book. My client had photo in mind of a woman singing beside her organization’s name. I found the picture on a white background on Boxed Art. I added a new layer, clicked File, place, and chose the file I downloaded, and I dropped the emblem onto the layer I just created. I selected the background using the Magic Wand tool and I hit delete. This made the white background transparent so it looks nice on my black background. I then used the text tool to type “Company Name ” on a new layer and “Company Logo ” on a second layer. I moved the text around to form a nice logo, and I added blending options to all of my layers (notice the gradient).
5. The next step is to create your navigation menu. While there are many different ways to do this, and it’s up to your creativity to make it any way you’d like, I chose to use the horizontal text tool and type in “About Us”, “Events”, “Members Only”, and “Contact Us”. I used the blending options tool to create the drop shadow you see below:
   
6. Add your body and test images and position in an appropriate way for your design. I used the text tool and changed the anti-aliasing method to “none”. This setting is located on the top menu when using the text tool and will replicate what your text will look like on the web.
7. Finally, add any finishing touches you have to make the design perfect for you. I recommend using stock art from Boxed Art, or you can also use other alternatives as well. Boxed Art, from my experience, is the best investment you can make to get an unlimited stock of royalty free images at an affordable price.

Design Secret

Boxed Art - There is a great secret in the web design world and I’m going to share it with you: “most web designers DO NOT create their designs on their own, they have help”. I’ve already introduced you to a few secrets, but Boxed Art— sells a large assortment of stock art (for a small price).

Dream Template

Dream Template - Dream Template is a wonderful service which allows you to download an unlimited number of pre-made web designs for a flat rate. It is highly recommended doing this, especially for beginners because it will give you the opportunity to develop web designs based off of already created material. This method allows you to drag and drop your own content into a great design which will save you time and money. Give it a try!

Stock.XCH

Stock.XCH - Stock.XCH is another great tool which web designers use and it’s completely free to use. There you will find thousands of royalty free pictures from independent photographers that you can use on your website and advertising campaign.

Videos for this entry will soon be available in the videos section of this website. I have created all of the videos, it’s just going to take me a little while to get them in a format for you to download and watch them. I have videos for every single topic in this section.

Introduction to Layers

Do you remember in grade school when a teacher had an overhead projector with transparencies? Layers work the same way. The rule of thumb is that with every element you put in your design should include an individual layer that corresponds to it. I have supplied a video to demonstrate how this is done. The example on the right is using Adobe Photoshop. If you are using The GIMP, your layers panel will look a little bit different, but is essentially the in the same place and the same concept.

Graphics editors come with predefined shapes, which we call paths. They include circles, squares, and lines which are easy to draw in your editor. Notice to the left of your graphics editor (in both Photoshop and GIMP) a set of tools? There you will find all of the shapes which we will be working with in this course. Here is st of all of those tools in Adobe Photoshop:

Tool Description
a) Rectangular Marquee – Allows you to select certain elements or layers that already exist. Practice this tool by adding a layer, use the paint bucket tool (q) and pour the color on to that layer. Now take the rectangle marquee, make a selection of a piece of the document and hit the delete key.

b) Lasso – Using the same method you did with the rectangular marquee, draw a shape on your colored layer and hit delete. You’ll notice that the shape you drew is now transparent.

c) Crop – Just as you did in (a) and (b), pour a color onto a new layer. Select the crop tool and draw a square somewhere on the layer. You have the option to resize this crop however you’d like. Once you’re ready to crop, hit the return key or select the check box. Video Available Crop

d) Healing Brush – The healing brush find comparable pixels in a photograph and will repair older photos with a drag of the mouse. If you’d like to experiment with this, open an old photo, select the healing brush tool, click your mouse on the desired spots and you will notice the repairs taking place.

e) Clone Stamp – Similar to the healing brush, the clone stamp is also used to repair old photographs. Hold the “alt” key to make a selection, and then drag your curser on elsewhere on the photograph.

f) Eraser – The eraser tool removes a selection from the layer.

g) Blur – When you click on a layer using this tool, you are able to blur your selection. This is especially useful when removing unwanted objects while still maintaining a nice look and feel.

h) Path Selection – When working with Paths and Shapes, as we discussed earlier, the Path selection allows you to

i) Pen – The pen tool allows you to create custom vector shapes and paths.

j) Note – Allows you to add custom notes and comments to your work. This can serve as a reminder to future updates. Watch this video to see exactly how this is done.

k) Hand – The hand allows you to move your perspective around within a window. For example, Zoom (v) in all the way to 50%, choose the hand tool and watch how you are able to navigate within your window.

l) Move – use this tool to move the layer you created in (a) around the screen.

m) Magic Wand – This allows you to make a selection of colors/similarities within your image. It also allows you to easily select layers and their content.

n) Slice – Allows you to slice your image into multiple images. This is especially useful in web design because our goal is to get our design into as many individual images as possible for HTML coding. This will be covered more in chapter 10.

o) Brush – Allows you to paint freehand onto a layer. Add a new layer, select the brush tool, and then select a color from the color swatches and begin to draw.

p) History Brush – This tool allows you to apply the brush tool to your history panel.

q) Paint bucket – This tool allows you to pour a color or patter onto a layer. If you hold down the paint buck tool in the toolbar, you can also select the gradient tool (as shown in the picture above) and you can drag a gradient onto your layer.

r) Dodge – Will brighten an image when selected. The other option is to select “Burn”, which will darken the image selected.

s) Text – This will allow you to add text to your image.

t) Rectangle – This is a shape tool that allows you to draw a perfect vector rectangle onto a layer. It is not necessary, however, to add a new layer because the tool will do this for you, but if you would like to draw more than one shape, it is recommended that you add a new layer each time. Watch this video to see exactly how this is done.

u) Eye dropper – this tool allows you to select a color and add it to your color swatches for further use. Try opening your favorite photograph, and use the eye dropper to find a color and add it to your palette.

v) Zoom – This tool allows you to zoom into your document and see things more closely. Watch this video to see exactly how this is done.

w) Color Swatches – these are the colors you are currently working with. The color on top is the foreground and the color behind it is the background.

x) Modes – These tools allow you to easily create a mask. This allows you to get perspective in your designs. y) Screen Views – Allows you to view your design in standard or full screen.

z) Switch to Image Ready – allows you to edit your design in Image Ready (which we will not cover in this course)

Brushes

When working with any brushes (including the eraser tool) it is important to recognize the power of your brush size and its intensity. Notice, on the right, when the brush tool is selected you have the option to change brush settings? Depending on the size of your design, you may want to change the diameter of the brush you’re working with. It will help you be much more precise in drawing (or erasing) pieces of your design. You can also change the hardness of your brush so that the effect will blend in easier with the rest of your design. I recommend choosing one of the pre-chosen templates that are in the picture above.

Patterns

Patterns are another technology which will help you tremendously in the design process. Notice, when you have selected the paint bucket tool, the advanced properties allows you to choose a pattern instead of a color??

Gradients

Gradients are another wonderful way to pour color and life into your design. Simply go to the toolbox and select the gradient tool. It is located in the same box as the paint bucket tool, so you may have to hold down the paint bucket tool (and more tools will appear) and select the gradient function. In the top menu bar, double click on the gradient scheme you see at the top and the gradient editor will appear. Here, you can alter gradients and choose from the colors that are currently in your palette (background and foreground).

Blending Options

Blending options are another way to expand upon your knowledge of layers. I have included a video to explain how to blend layers together and some exercises that will help you accomplish great designs by the process of experimentation. Watch this video to see exactly how this is done.

Congratulations, you’ve just completed a basic course in graphic design. You are now ready to begin designing an actual website.