Editing the company
name
In this step you will learn what layers are
and how to find the one that you need. You will edit text
on the layer and change it's position.
- Double-click on TEMPLATE.PSD to open it with Photoshop.
- Make sure the toolbox and tool options bar are visible.
If not, select Window > Tools and Window
> Options respectively to display them.
- The image might appear too big or too small. To adjust
magnification select Zoom Tool
from the toolbox. The options bar changes to reflect
zooming options. Turn on Resize Windows To Fit
checkbox and click Actual Pixels button.
- Make sure the Layers Tab is visible. If not, select
Windows>Layers to display it.
- Select Move Tool
and right-click the word "company" in the upper left
corner. In the drop-down menu of layer names choose
COMPANY. This layer will get selected in the Layers
Tab. You may think of layers as of transparent films
with images and text placed on them. You can edit the
contents of films independently, change the order in
which they are stacked, and lots of other things.
- To make sure you selected correct layer try making
it invisible for a while by clicking an eye icon
from the left of the layer name in the Layers Tab. The text
should disappear.
- Double-click "capital T" in the Layers Tab. This switches
you to Type Tool
and highlights the text. Go ahead and replace
"company" with "AcmeSoftware" or your company name if
you are not just doing tutorial.
- Highlight the text you just typed in order to edit
font, size, style, and color. Use drop-down boxes in
the options bar to change font to Arial, size to 24pt,
and style to Bold Italic. Then press green rectangle
in the options bar to display color dialog. Your mouse
pointer turns into a snippet. There are many ways in
Photoshop to specify color but for now just pick white
color from the upper left corner of colors field and
click OK.
- Drag the layer with edited text a little more to the
left with a Move Tool . You will notice that other layers move as well. This
is because the layers are linked. You can tell
which layers are linked to the currently selected one
by a link icon
from the left of layer names. Turn off linking by clicking
the icons and move "AcmeSoftware" text independently.
You may want to restore linking in order to handle company
name and logo as a whole some time later.
Editing colors
- Select a layer named "news bar" with a green horizontal
stripe on it.
- Select the Paint Bucket
tool. This tool repaints all pixels of similar color
on a layer to match foreground color.
- Set the foreground color by clicking the upper color
selection box in the toolbox and picking color from
the orange square near company name.
- With Paint Bucket tool selected, click the news bar and watch it turn
orange.
Replacing an image
- Select File>Open to display an Open dialog
and browse to the "portrait.jpg" file in your downloaded
"RESOURCE" folder.
- Select Image>Image Size to display Image
Size dialog.
- Make sure the checkboxes Constrain Proportions
and Resample Image are on, resample mode
is set to Bicubic, and sizes in Pixel Dimensions
box display in pixels.
- Enter "120" in the Width field and click OK.
- Use Select>All and Edit>Copy to
place the entire image in buffer.
- Close "portrait.jpg" window. You do not need to save
the changes.
- Select Edit>Paste to insert image in the
template. A new layer is automatically created and given
default name.
- Right click the new layer in the Layers Tab and choose
Layer Properties... from context menu. Enter
"portrait" in the Name field for future reference.
Click OK.
- With "portrait" layer selected use the Move Tool to place the image on the left of welcome text.
- Find "man" and "man shadow" layers and make them invisible
by clicking the eye icons.
Inserting additional
image
- Select File>Open to display an open dialog
and browse to the "stripe.gif" file in your downloaded
"RESOURCE" folder.
- When the image opens use Select>All and
Edit>Copy to place the entire image in buffer.
- Close "stripe.gif" window.
- Select Edit>Paste to insert image in the
template. A new layer is automatically created and given
default name.
- Right click the new layer in the Layers Tab and choose
Layer Properties... from context menu. Enter
"stripe" in the Name field for future reference.
Click OK.
- With "stripe" layer selected use the Move Tool to place the stripe just under company name in place
of "logotype".
- Find "LOGOTYPE" layer and make it invisible by clicking
the eye icon.
Hiding extra navigation
buttons
Our templates were designed to suit a number
of purposes. It may happen so that you don't need all the
elements. In this step you will remove "SOLUTIONS" button
from the template's navigation bar.
- Locate "SOLUTIONS" layer and make it invisible by
clicking the eye icon. Now there is empty space in place of unwanted
button. It is better to shift remaining buttons from
the right by one position to the left side.
- Select "SERVICES" layer and unlink it from "COMPANY"
and "PRODUCTS" layers by clicking link icons . Note that "SUPPORT" and "CONTACT" layers get
unlinked as well.
- Use Move Tool to shift buttons to the left. You can enlarge the image
with Zoom Tool and watch button separators match to make sure you
are doing right.
- Restore links to "COMPANY" and "PRODUCTS" layers for
"SERVICES" layer. Note that links for "SUPPORT" and
"CONTACT" get restored as well.
Hiding a portion of
a layer
Sometimes you may want to hide some elements
but keep others within the same layer. In this step you
will learn how to accomplish this via using layer masks.
You will hide the end of "Welcome to Company website!" leaving
just "Welcome to Company". Of course it is much easier to
edit text, but this is just an exercise.
- Choose Edit>Deselect to turn off any current
selection.
- Select the Rectangular Marquee
tool and draw a box around "website!".
- Choose Select>Inverse to invert your selection.
- Press Layer Mask
button in the bottom of the Layers Tab to hide all
parts of the layer that aren't selected, i.e. the end
of caption that you selected in (2).
- If you ever want to get back what you just hid choose
Layer>Remove Layer Mask>Discard to delete
the mask or Layer>Disable Layer Mask for just
turning it off.
Slicing and exporting
HTML
Unlike images, which come in one piece, web
pages consist of a large number of elements assembled together
using HyperText Markup Language. Every image on a page is
stored in a separate file. These files can have different
formats but when displayed in a browser create an impression
of a whole picture. Take advantage of Photoshop features
to achieve such an effect. HTML code will be generated automatically.
You only need to specify which portions of the template
should be converted into separate images, in other words
create slices.
- Select the Slice Tool
and draw a box around the
"company" button. You can resize it after creation -
just use Slice Select 
tool to pick the needed slice and drag handles.
- Right click the newly created slice and choose Edit
Slice Options... from context menu. URL field
designates the address of a web page that opens when
the button is clicked. Since your Company subpage is
not ready yet leave the field empty or type some address
(e.g. http://www.templatemonster.com) to make sure the
button works. You will be able to edit the URL later.
- Make another slice around the text beneath the welcome
caption. You will replace the image in this slice with
formatted text to make the page download faster.
- Select File>Save For Web... to display Save
For Web dialog. This dialog allows to set optimization
options for each slice. Just click OK and specify
a save path.
Now you will need to work on the generated
.html file. The following steps assume that you are using
Macromedia Dreamweaver 4.0 HTML editor. In other editors
the locations of controls may vary.
- Open the exported .html with Dreamweaver. Make sure
the Properties window displays. If not, select Window>Properties
to display it.
- Click on Company button in your page and examine the
contents of Properties window. You can edit the Link
field to change URL.
- Select the text slice beneath welcome caption. Select
Window>Code Inspector to edit HTML code. The
<img...> tag is automatically highlighted (it
looks something like <IMG SRC="images/edited_TEMPLATE_07.jpg" WIDTH=424 HEIGHT=161
ALT="">). Replace this tag with your custom
text. Close the code editing window and highlight newly
created text in the editor window. Make use of text
formatting options in the Properties window to match
initial text appearance as good as you can.
- You can use "back.gif" from RESOURCE folder as a background
for this cell. Just enter the path to this file in the
Bg field of Properties window (you may need to expand
it first with an arrow in the bottom right corner).
- Save your work and preview the customized page by
selecting File>Preview in Browser>.
