Professional Web Design: Techniques and Templates- P12

Game Developing GWX
to simplify, improve usability, and to increase the professional appearance to
help increase credibility (see Figure 18.28).
Due to budgetary restraints, there was only one design created for this page, and
no A/B experiment was conducted. The redesigned page, however, did convert
16 percent of users (see Figure 18.29). The next logical step would be to start
testing versions of this page to increase this conversion percentage.
Summary
There are many variables when it comes to increasing CRO. They can be
remembered by the acronym FLICC: functionality, layout, imagery, color, and
Figure 18.27
Winning version of the redesign of the page in Figure 18.25.
Copyright
†
2010 Medcomgroup.com.
Used with permission.
Chapter 18
■
Conversion Rate Optimization (CRO)
532
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
content. Understanding these areas is the first step in understanding how to
increase conversion rates. Fortunately, unlike years ago, testing is now a very
viable option, thanks to Google’s free Web site Optimizer application. The
application allows designers to conduct A/B and multivariate tests. Included
case studies give the designer an idea of the what experiments will show, which,
many times, is a better use of money than simply paying to acquire more users
through SEO.
Figure 18.28
Preexisting version on the rental page.

Copyright
†
2010 Medcomgroup.com. Used with permission.
Summary
533
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Figure 18.29
Redesigned version on the rental page.
Copyright
†
2010 Medcomgroup.com. Used with permission.
Chapter 18
■
Conversion Rate Optimization (CRO)
534
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWXGame Developing GWX
chapter 19
Customizing the
Designs Included
in This Book
There are 230 templates included with this book, which contain both pure CSS
and table-based XHTML Web designs, email signatures, e-newsletters, and
Photoshop designs, which do not have code written for them. All the files are
constructed in similar fashions, respectively, which makes understanding and
customizing them a fairly consistent process. This chapter not only explains how
to customize such templates, but it also provides basic Photoshop tips that can
be used to customize the templates quickly.
Steps to Customizing a Template

There are six basic steps to customizing a template. The basic process involves
customizing and saving a Photoshop file, which outputs PNG, GIF, and JPG files
that are then displayed, along with any text, by preprogrammed XHTML
(HTML), Cascading Style Sheets, and possibly JavaScript files. Following are the
six steps:
1. Open the main Photoshop file. The design used for this chapter is design 57
(see Figure 19.1).
2. Customize images and colors in the Photoshop file(s).
3. Optimize and save necessary images that will be used by precoded XHTML,
CSS, and possibly JavaScript files.
535
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
4. Open XHTML, CSS, or JavaScript files with an HTML editor.
5. Customize text and any other code.
6. Test the design.
Step 1: Open the Main Photoshop File
After copying the files from the DVD and pasting them into a directory,
the designer needs to locate and open the main design file (
design_57.psd
)in
Photoshop (see Figure 19.2).
Note
Figure 19.2 represents one example of how the files would look on a hard drive after being saved
from the DVD. If the reader were looking at the files from the DVD, the design_57 folder would
appear under the DVD drive (the E: drive in this case). This is all relative to the individual's system.
Note
The templates included with this book are saved in Photoshop version 6 or higher. Adobe has continually
changed how its software handles text, and the newer versions are no exception. When opening a file in
a more recent version, Photoshop will ask if the reader wants to update the file (see Figure 19.3).

Selecting Update will cause the vector-based text to have its positioning slightly readjusted.
Figure 19.1
The design that is customized in this chapter.
Chapter 19
■
Customizing the Designs Included in This Book
536
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Step 2: Customize Images and Colors
Making and saving changes in Photoshop (see Figure 19.4) will change all
the images in a design and many of the colors as well. Colors that are not
changed when saving a Photoshop file can be changed in the XHTML or CSS
files.
Figure 19.2
The location of the files after being saved to the hard drive.
Steps to Customizing a Template
537
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Step 3: Optimize and Save Necessary Images
Once changes have been made to the Photoshop file, the designer will need
to save the file so that the necessary PNG, GIF, and JPG images are saved from
the sliced Photoshop file. Following are the steps to do so:
1. Select the Save For Web option from Photoshop’s File menu (see
Figure 19.5).
Figure 19.3
Photoshop dialog box asking if a file should have text updated.
Figure 19.4
Design in Photoshop with customized colors and photos.

Chapter 19
■
Customizing the Designs Included in This Book
538
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
2. Click on the Slice Select tool from the menu on the left (see Figure 19.6).
3. Select a slice to be optimized and select the compression on the right side of
the window (see Figure 19.7).
Note
If the designer changes the type of image a slice is saved as, such as GIF to JPG, the file extension
must be changed in the CSS or XHTML template as well. For example, if
photo_middle_right
is
changed from a JPG file to a GIF file, all references to
photo_middle_right.jpg
in the template must
be changed to
photo_middle_right.gif
.
4. Ensure that all changed slices of the template are still compressed to the best
level possible.
5. Select Save in the top-right area of the Save For Web window.
6. Select Replace in the Replace Files window.
Figure 19.5
Design being optimized with Photoshop's Save For Web function.
Steps to Customizing a Template
539
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX

Figure 19.6
Slice Select tool in the Save For Web window.
Figure 19.7
The slice that has its file type and compression assigned in the Save For Web window.
Chapter 19
■
Customizing the Designs Included in This Book
540
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Note
Once a user clicks on Replace, Photoshop will save all slices as either PNGs, GIFs, or JPGs
from the file and place them in an Images subdirectory below where the
design_57.html
file is
saved.
Step 4: Open an XHTML (HTML), CSS, or JavaScript File
All three file types can be opened in any HTML editor. In Figure 19.8, the sample
file is opened in Adobe’s ColdFusion Studio. This software is pretty much
extinct in Web development; however, any quality software will be somewhat
similar in style. It also shows that the designer does not need the latest and
greatest software for such development. A reader, in fact, could even use
basic text editing software, such as Notepad, which is included with Microsoft
operating systems.
Figure 19.8
A file opened in Adobe's ColdFusion Studio HTML editing software.
Steps to Customizing a Template
541
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX

Step 5: Customize Text and Code
Once a template file has been opened in an HTML editor, it can be easily mod-
ified and saved however the designer may choose. Following are suggestions for
customizing such files:
■
Always save a backup to revert to or pull original pieces of code from, if
necessary.
■
Check pages in a browser frequently (refer to step 6).
■
Switch the CSS or
border
value to
1
where code is being customized.
This allows the designer to understand better how the design is
constructed.
■
Ensure that the location and image name for each menu item is consistent
when working with XHTML templates that use mouseovers in the menu
(see Listing 19.1). No two menu items can have the same location and image
names.
Listing 19.1 Unique JavaScript Names for Mouseover Code
<tr>
<td valign="top"><img src="images/bullet_menu_off.gif" width="18"
height="20" alt="" border="0" name="menu_item_1"></td>
<td class="white2"><a href="index.htm" style="text-decoration:
none; color: #ffffff" onmouseover="document.menu_item_1.src=
bullet_menu_on.src;"
onmouseout="document.menu_item_1.src=bullet_menu_off.src"><b>menu

item 1</b></a></td>
</tr>
Note
This suggestion is only applicable to the table-based XHTML templates included with the book.
Step 6: Test the Design
As soon as a designer makes a change to a template, it should be opened in a
browser or, better yet, in various browsers, depending on how thoroughly the
Chapter 19
■
Customizing the Designs Included in This Book
542
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
designer wants to test the code. Then, as changes are made to the template from
the HTML editor, the designer should refresh the browser(s) continually to en-
sure that the changes were made correctly. To open a design in IE, for example,
the designer follows six steps:
1. Click the browser’s File menu.
2. Click Open.
3. Click Browse.
4. Click on
index.htm
, which is the homepage for the design in Figure 19.9.
5. Click Open to open the file in a browser.
6. Click OK to confirm opening the file.
Figure 19.9
A locally saved
index.htm
file to be opened in IE 6.
Steps to Customizing a Template

543
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Photoshop Tutorials
This section includes tutorials on basic techniques a designer or developer will
usually need to know in order to customize a design. They include replacing
photos, resizing photos, changing colors, and undoing or redoing actions.
Replacing Photos
Not all designs can have photos simply replaced in the code. With many mor-
tised designs, the process of replacing a photo first begins with the Photoshop
file, using masks. Following are instructions on replacing a photo in a Photoshop
template, using the original photo as a mask.
1. Make sure that the Layers panel is visible (see Figure 19.10).
2. Click on the Window menu in the top menu bar.
3. Click on the Layers option (see Figure 19.11).
4. Make sure that the Layers tab is selected in the panel. If it is not, click on it
(see Figure 19.11).
Figure 19.10
The Layers panel in Photoshop where different layers may be selected.
Chapter 19
■
Customizing the Designs Included in This Book
544
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
5. Open the image to be inserted into the existing image.
6. Select the entire image (Ctrl-A for Windows; Cmd-A for Macintosh) and
then copy that image (Ctrl-C for Windows or Cmd-C for Macintosh; see
Figure 19.12).
7. Select the layer of the photo in the design (in this example, it is the upside-

down photo of the man) that is going to be replaced.
Note
Windows users can right-click the photo to be replaced and then select the layer's name, which will
send the user directly to that layer (see Figure 19.13). The user may have more than one option to
select, so if they are not already named, it might be necessary to click on the various layers until the
correct one is selected.
Figure 19.11
The Layers panel can be accessed from the Window menu.
Photoshop Tutorials
545
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Figure 19.12
The image selected that will be used in the design.
Figure 19.13
Possible layers to select if the user right-clicks on an image.
Chapter 19
■
Customizing the Designs Included in This Book
546
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
8. Click on the layer in the Layers panel. Once this layer has been selected, the
content on the layer will be available for editing.
Note
A layer can be made visible or invisible by clicking the eye icon on and off, located to the left of the
layer name (see Figure 19.14). Toggling the eye on and off is a good way to test if the correct layer
has been selected.
9. Activate the layer’s image by selecting the entire layer area (Ctrl-A for
Windows; Cmd-A for Macintosh) and move the layer up one pixel

(one click) and down one pixel by using the up and down arrow keys (see
Figure 19.15).
Note
The image is selected when the marching ants (moving dotted lines) are marching around that
specific image or at least the part of the image that is viewable within the borders of the Photoshop
file. Prior to moving the image up and down one pixel, ants will be marching around the border of
the entire Photoshop file. If the marching ants are displayed in a square or rectangular shape that is
larger than the image (see Figure 19.16), then the image is already set as a mask. If this occurs, the
user must turn off the photo by turning off the eye for its layer and restarting this tutorial at step 3,
this time selecting the correct layer (the square image that contains the actual photo).
10. Insert the image already copied in step 6 (see Figure 19.12) by pressing
Shift-Ctrl-V for Windows or Shift-Cmd-V for Macintosh. The image
will then be placed inside the existing image (see Figure 19.17).
Figure 19.14
Toggling the eye icon on a layer will turn it off and on in the Photoshop file.
Photoshop Tutorials
547
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Figure 19.15
The image that will be used as a mask must first be selected.
Figure 19.16
How the marching ants would appear if the image were already saved as a mask.
Chapter 19
■
Customizing the Designs Included in This Book
548
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Resizing Photos

Following are instructions for resizing a photo in Photoshop. Although this
tutorial explains how to resize a photo in a mask, the same process occurs when
resizing any photo or image on any layer.
1. Make sure that the Layers panel is visible (refer to Figure 19.10).
2. Select the layer of the photo in the design (in this example, it is the couple
hugging) that is going to be resized (refer to Figure 19.13).
3. Click on the layer in the Layers panel. Once this layer has been selected, the
content will be available for editing.
4. Activate the layer’s image by selecting the entire layer area (Ctrl-A for
Windows; Cmd-A for Macintosh) and move the layer up one pixel (one
click) and down one pixel by using the up and down arrow keys (see
Figure 19.18).
Figure 19.17
The design after both the selected image and the one in the center have been added into their respective
masks.
Photoshop Tutorials
549
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
Note
The image in Figure 19.18 extends below and to the right of the design. The marching ants, how-
ever, will remain inside the Photoshop file.
5. Activate the outer frame of the image by pressing Ctrl-T for Windows or
Cmd-T for Macintosh. Once the outer frame is active, small square handles
in the corners will appear (see Figure 19.19).
6. Resize the image by clicking and dragging any of the corners on the frame
that turn the mouse into an up or down arrow.
Note
Often, the image will need to be resized proportionately. Holding the Shift key and the handles
simultaneously while dragging will ensure that the image's proportions remain the same.

7. During the resizing process, the image can also be moved. To do so, select
the Move tool (see Figure 19.20) in the toolbar and click and drag the image
rather than the handles.
Figure 19.18
The photo after it has been activated in the window.
Chapter 19
■
Customizing the Designs Included in This Book
550
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.
Game Developing GWX
8. Deactivate the marching ants by pressing Ctrl-D for Windows or Cmd-D
for Macintosh after the image has been resized and located correctly (see
Figure 19.21). The border and corners will then disappear.
Changing Colors
Changing the colors of a design often begins with the Photoshop file because the
colors are saved as images, rather than browser-generated colors. Following are
instructions on changing colors of solid objects in a Photoshop template.
1. Make sure that the Layers panel is visible.
2. Select the layer of the photo in the design (in this example, it is the couple
hugging) that is going to be changed.
3. Click on the layer in the Layers panel. Once this layer has been selected,
content on the layer will be available for editing.
Figure 19.19
Small handles will appear when the image is ready to be resized.
Photoshop Tutorials
551
Please purchase PDF Split-Merge on www.verypdf.com to remove this watermark.