Professional Web Design: Techniques and Templates- P12

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 inPho

to simplify, improve usability, and to increase the professional appearance tohelp 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 starttesting versions of this page to increase this conversion percentage

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.

Figure 18.29

Redesigned version on the rental page Copyright † 2010 Medcomgroup.com Used with permission.

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 involvescustomizing and saving a Photoshop file, which outputs PNG, GIF, and JPG filesthat are then displayed, along with any text, by preprogrammed XHTML(HTML), Cascading Style Sheets, and possibly JavaScript files Following are thesix 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

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) inPhotoshop (see Figure 19.2)

N o t e

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.

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

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 fromthe sliced Photoshop file Following are the steps to do so:

1 Select the Save For Web option from Photoshop’s File menu (seeFigure 19.5)

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 ofthe window (see Figure 19.7)

N o t e

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 bestlevel 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

N o t e

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

Step 5: Customize Text and Code

Once a template file has been opened in an HTML editor, it can be easily ified and saved however the designer may choose Following are suggestions forcustomizing such files:

mod-■ Always save a backup to revert to or pull original pieces of code from, ifnecessary

■ 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 isconstructed

■ Ensure that the location and image name for each menu item is consistentwhen working with XHTML templates that use mouseovers in the menu(see Listing 19.1) No two menu items can have the same location and imagenames

</tr>

N o t e

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 abrowser or, better yet, in various browsers, depending on how thoroughly the

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 onindex.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

Photoshop Tutorials

This section includes tutorials on basic techniques a designer or developer willusually need to know in order to customize a design They include replacingphotos, resizing photos, changing colors, and undoing or redoing actions

Replacing Photos

Not all designs can have photos simply replaced in the code With many tised designs, the process of replacing a photo first begins with the Photoshopfile, using masks Following are instructions on replacing a photo in a Photoshoptemplate, using the original photo as a mask

mor-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.

5 Open the image to be inserted into the existing image.

6 Select the entire image (Ctrl-A for Windows; Cmd-A for Macintosh) andthen copy that image (Ctrl-C for Windows or Cmd-C for Macintosh; seeFigure 19.12)

7 Select the layer of the photo in the design (in this example, it is the down photo of the man) that is going to be replaced

upside-N o t e

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

8 Click on the layer in the Layers panel Once this layer has been selected, thecontent on the layer will be available for editing.

N o t e

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 forWindows; 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 (seeFigure 19.15)

N o t e

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 pressingShift-Ctrl-V for Windows or Shift-Cmd-V for Macintosh The imagewill 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

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 couplehugging) 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, thecontent will be available for editing

4 Activate the layer’s image by selecting the entire layer area (Ctrl-A forWindows; Cmd-A for Macintosh) and move the layer up one pixel (oneclick) and down one pixel by using the up and down arrow keys (seeFigure 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

in the corners will appear (see Figure 19.19).

6 Resize the image by clicking and dragging any of the corners on the framethat turn the mouse into an up or down arrow

Figure 19.18

The photo after it has been activated in the window.

8 Deactivate the marching ants by pressing Ctrl-D for Windows or Cmd-Dfor Macintosh after the image has been resized and located correctly (seeFigure 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 couplehugging) 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

4 Select the layer of the photo in the design (in this example, the top-rightcorner) that is going to be changed (see Figure 19.22).

5 Click on the layer in the Layers panel After this layer has been selected, thecontent on the layer will be available for editing

6 Activate the layer’s image by selecting the entire layer area (Ctrl-A for dows; 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.23)

Win-7 Click the Color Picker in the toolbar to open the Color Picker dialog boxand select a replacement (see Figure 19.24)

8 Click OK to close the Color Picker dialog after the replacement color hasbeen selected

9 Select Fill from the Edit menu (see Figure 19.25)

Figure 19.20

The Move tool included in the menu bar.

10 Click OK to confirm the fill (see Figure 19.26).

11 Deactivate the marching ants by pressing Ctrl-D for Windows or Cmd-Dfor Macintosh once the color has been replaced or ‘‘filled.’’ Figure 19.27shows the design with many of the colors changed Because it is a black-and-white image, the changes will appear mainly as tonal differences

Undoing and Redoing Actions

The designer can undo and redo actions in Photoshop This tutorial outlines thehot keys for undoing actions, but, more importantly, it shows how to configurePhotoshop to allow for actions to be undone

Undoing Actions

To undo an action using hot keys, the user needs to select Ctrl-Alt-Z for dows or Cmd-Alt-Z for Macintosh By holding down the Ctrl (or Cmd) and Altkeys, the user can repeatedly click the letter Z to undo as many actions as theprogram has been configured to allow

Win-Redoing Actions

After undoing actions, the user can click Ctrl-Z for Windows and Cmd-Z forMacintosh to redo all the actions By repeatedly pressing this key combination, theuser can toggle between the two different states of change, which is useful whendeciding how a certain image or color will look compared to the older version

Figure 19.27

The design once many of the colors have been changed Because the figure is black and white, the changes will appear only as tonal differences.

Configuring the Undo Actions (History States) Setting

Undoing actions has a limit with the default settings of Photoshop, so the user

needs to change the settings first to ensure that the settings will allow a certain

number of changes Following are instructions on how to do so

1 Select Preferences, General under the Edit menu (see Figure 19.28) ThePreferences dialog box will appear

2 Change the History States setting to the number of changes Photoshopshould be able to revert back to The number of changes in this example is

20 (see Figure 19.29)

Figure 19.28

Selecting Preferences, General from the Edit menu.

Photoshop Tutorials 557

Because all the designs included in this book are built similarly, whether they use

an XHTML table- or CSS-based design, they also are customized in very muchthe same way This chapter not only explains the steps for customizing a design,but it also provides brief Photoshop tutorials on how to make changes in thesoftware These tutorials include replacing photos, resizing photos, changingcolors, and undoing and redoing actions Filled with images, this chapter offers aquick read for fundamental Photoshop skills

Figure 19.29

The History States option in the Preferences dialog box, which is set at 20.