In
this step you will customize SAMPLE
TEMPLATE in order to make it look as a site for fictitious "AcmeSoftware"
company. The list of template editing steps follows. Please use
Photoshop 7.0 or higher to gain access to all features described
in this step.
Step
2.1: Installing
new fonts to your system.
Step 2.2: Editing
the company name.
Step 2.3: Editing colors.
Step 2.4: Replacing an image.
Step 2.5: Inserting additional image.
Step 2.6: Hiding extra navigation buttons.
Step 2.7: Hiding a portion of a layer.
Step 2.8: Slicing and exporting HTML.
You
need to start from step1 in order to be able to change text. You
may skip other steps as you like. This will affect just the site
appearance as long as you produce valid HTML as described in step
8. HTML code will be uploaded to a web server in Step3:
Putting your new site on the web.
Step 2.1: Preparing to edit text
by installing new fonts to your system
Please,
follow the instructions in this step in order to be able to
edit text in your .psd template.
1.
Select Start>Settings>Control Panel>Fonts
to open the needed system folder.
2. Select File->Install Font to
open a browse dialog.
3. In the dialog, locate your downloaded FONTS
folder.
4. Click Select All button
and then OK.
5. Close the window displaying ...\WINDOWS\FONTS
folder.
With fonts installed, you are now ready to proceed to
Step2.2: Editing the company name.
TOP
OF PAGE
Step2.2: 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 its
position.
1.
Double-click on TEMPLATE.PSD to open it with
Photoshop.
2. Make sure the toolbox and tool options bar
are visible. If not, select Window > Tools
and Window > Options respectively to display
them.
3. 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.
4. Make sure the Layers Tab is visible. If
not, select Windows>Layers to display it.
5. 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 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.
6. 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.
7. 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.
8. 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.
9. 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.
Congratulations! You made it through this very long
step! Next steps will be much easier. Proceed to Step2.3: Editing
colors.
TOP
OF PAGE
Step2.3:
Editing colors
In
the previous step you edited text color. Now you will change color
of a graphical element of the template.
1.
Select a layer named "news bar" with a green horizontal
stripe on it.
2. Select the Paint Bucket 
tool. This tool repaints all pixels of similar color on a
layer to match foreground color.
3. Set the foreground color by clicking the
upper color selection box in the toolbox and picking color
from the orange square near company name.
4. With Paint Bucket
tool selected, click the news bar and watch it turn orange.
Now its time for more dramatic customization. Proceed
to Step2.4: Replacing an image.
Step2.4: Replacing an image
In
this step you will hide some of the template layers and insert
additional one with a different image in it.
1.
Select File>Open to display an Open dialog
and browse to the "portrait.jpg" file in your downloaded
"RESOURCE" folder.
2. Select Image>Image Size
to display Image Size dialog.
3. 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.
4. Enter "120" in the Width
field and click OK.
5. Use Select>All and
Edit>Copy to place the entire image in
buffer.
6. Close "portrait.jpg" window.
You do not need to save the changes.
7. Select Edit>Paste
to insert image in the template. A new layer is automatically
created and given default name.
8. 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.
9. With "portrait" layer selected
use the Move
Tool to place the image on the left of welcome text.
10. Find "man" and "man shadow"
layers and make them invisible by clicking the eye icons .
Next Step 2.5: Inserting additional image does not introduce
any new concepts comparing to the step you just completed. You
may want to fulfill it for better understanding, otherwise,
proceed to Step 2.6: Hiding extra navigation buttons.
Step
2.5: Inserting additional image
In
this step you will insert additional graphics in the template
by creating a new layer.
1.
Select File>Open to display an open dialog
and browse to the "stripe.gif" file in your downloaded
"RESOURCE" folder.
2. When the image opens use Select>All
and Edit>Copy to place the entire image
in buffer.
3. Close "stripe.gif" window.
4. Select Edit>Paste to insert image in
the template. A new layer is automatically created and given
default name.
5. 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.
6. With "stripe" layer selected use the Move
Tool to place the stripe just under company name in place
of "logotype".
7. Find "LOGOTYPE" layer and make it invisible by
clicking the eye icon.
Proceed to Step 2.6: Hiding extra navigation buttons.
Step
2.6: 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.
Proceed to Step 2.7: Hiding a portion of a layer.
Step
2.7: Hiding a portion of a layer
In
the previous step you changed visibility of a layer to get rid
of extra graphical elements. 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.
1.
Choose Edit>Deselect to turn off any current
selection.
Select the Rectangular Marquee 
tool and draw a box around "website!".
2. Choose Select>Inverse to invert your
selection.
3. 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).
4. 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.
At this point, you have learned enough to make yourself
happy with appearance of your site. Getting a web page out of
.psd image comes next in Step 2.8: Slicing and exporting HTML.
Step 2.8: Slicing and
exporting HTML
In
this step you will learn what slices are and how to create and
edit them. You will slice the .psd image to produce an HTML
page that can be viewed in a browser.
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.
1.
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.
2. 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.templatebeach.com)
to make sure the button works. You will be able to edit the
URL later.
3. 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.
4. 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.
1.
Open the exported .html with Dreamweaver. Make sure the Properties
window displays. If not, select Window>Properties
to display it.
2. Click on Company button in your page and examine the contents
of Properties window. You can edit the Link field to change
URL.
3. 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.
4. 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).
5. Save your work and preview the customized page by selecting
File>Preview in Browser>.
|
