|
We are continuing our discussion about using the
power of Photoshop to help you streamline and better your
webpages. We are on step 3 now where we are putting all the
information we need down on a piece of graph paper. Let's move
on.
Now that we have our page just sketched out on a
piece of paper with our web page table in mind, we need to add
some information that we will use when we code our pages. We
know that we have a page that is 750 pixels wide (at least I
do). We also have a bunch of guides that we put on our page last
week. Now what we need to do is to measure all the images we
will use in our pages and then also measure the areas that we
are going to have be HTML elements. We will need to know how
width and height attributes for our table data cells and our
images. Let's make this step 4.
Step 4:
Take a look at the above image. If you have
never used the measure tool, here is where it is in Photoshop 6.
It will be in a different place for earlier versions. Take a
look at your documentation if you cannot seem to find it. Now
this tool is designed for exactly what you think it is...
measuring stuff. A good carpenter always has a tape measure on
his/her belt and the same is true for a web designer. We are
information and artistic architects and we need to have all our
tools ready to use with skill. So get to know this little guy.
There are two ways in which to measure parts of
the page. One of them does not use the measuring tool, and it is
great if you are making squares or rectangles using the marquee
selection tool.
Take a look above and see that the selection I
have is around part of my image. Now look in the info palette
and see what I have circled. This information tells you the
height and the width of the rectangle or square that you just
made. Very, very handy trick and I use this all the time. Keep
this in mind.
But if you need to make a quick measure for one
direction or you need to measure between particular elements
such as the side of the page to the start of an image or between
type of some kind you should use the measure tool.
Now look at what the measuring tool looks like when it is in
use. It is a long line with two cross hairs at each end. I have
a red arrow pointing to it. If you select the Snap to Guides
option in Photoshop it will save you some headaches later. This
option snaps the start and end points to your guide. It works on
the selection tools as well. The info palette has some extra
information now that it did not have before. The left hand side
of the palette now tells you where you started the measure
relative to the ENTIRE image starting at the upper left-hand
corner. HINT: this is great for image maps where you need to
know the coordinates for active areas. The right side is
basically the same in that it gives you some height and width
numbers from the initial starting point.
Whether you use the selection tool or the
measure tool is up to you, but I encourage you to play with
both. They both serve a great purpose now and then.
What you need to do at this point is to go
around and measure all the areas you think you will need to help
you markup your page. Place these numbers and notes inside your
graph paper plan, to show you where you need to put table rows,
cells etc... At this point I really begin to plan my attack on
the code. I want to make it as simple as possible, but also
extremely robust and cross-platform compatible (if possible).
Use your HTML knowledge to help you with this process. It's hard
for me to say too much here, because I don't know your plan
exactly for marking up your page. It may take you a few tries,
but you will get it eventually.
Next week we start to actually slice things up.
If you don't know where the slice tool is, look below. The slice
tool is now available in Photoshop, but the features are still
far more powerful in Image Ready, which comes bundled with the
software. Switch over and check it out.
 |