Dear
Friend, Hello, & welcome back to Firewire, your friendly
guide to the exciting world of web-design & web-solutions!
How about going back a little. We began with the merits
of web designing, knowing about the fabulous Layout Galaxy
& going in details about Photoshop & making a layout.
Next in the procedure comes the Optimizing & Slicing
part.
I began with the step by step changing & redesigning
of the layout 'sample 1' from the 4 layouts of
(FREE
to download offer) according to my specifications. Now that
the layout was ready, lets start with Optimizing & Slicing.
NOTE:
This newsletter is attached with a systematic visual demo
of the whole procedure of slicing & optimizing done
with another layout for your reference. Click here to download
:
To start with, we have to work in Photoshop where I place
the guidelines with the help of rulers which will result
in optimizing & slicing for the easy download of the
html page.
I place the Rulers from the View Menu > Show Rulers.
Rulers: Rulers appear along the top and left side of the
active window.
They are always activated by the View> Show Rulers. Rulers
play an important part in placing of a guideline. A guideline
comes to the scene only when dragged from the rulers with
the Move Tool.
Guidelines: Guides appear as lines that float over the entire
image and do not print. I can move, remove, or lock a guide
to avoid accidentally moving it. I want to view the guides,
I choose View> Show/Hide Guides.
To place a guide, I have to keep the Rulers Option on.
To create a guide, I drag by using the Move Tool (V) from
the horizontal ruler to create a horizontal guide.
The same is done for the vertical guide. I drag from the
vertical ruler to create a vertical guide. The pointer changes
to a double-headed arrow when you drag a guide.
Guidelines are layout dependent, as it varies as per the
colours, buttons placement, pictures etc. Placements of
Guidelines vary from layout to layout. Each layout have
their individual style, colour combination, placement of
buttons & logos. Guidelines have to be placed according
to their respective styles & by giving emphasis on the
important aspects, such as the logo, buttons & the colours.
I place the guides while taking care of the following points:
1) In our case this particular
layout has buttons of different width. For e.g. Profile,
Products, Clients, Feedback, Advice Online & Contact
us. This buttons are placed one below the other. I place
the guides taking the respective bullets within the area
to be sliced. Just getting a right aligned guideline to
the buttons. On the left side of the buttons I place the
vertical guides in proportion to the text area. For e.g.
the advice online button will have a vertical guideline
near the "A" & the client's button will have
a vertical guideline near "C". Accordingly I do
the same to the other buttons. I place the horizontal guidelines
exactly in between two words, (i.e. Profile & Products).
I do the same to the other buttons.
2) I then place the vertical
as well as the horizontal guidelines placing like a border
to the logo, which is placed at the bottom right corner.