Making a Layout
This handout will guide
you through the process of making a basic photo layout in photoshop, slicing it
up and saving it as an html file.
It will tell you how to ad links to your layout, put it on your website
and e-mail it.
This is a useful way to
share your layout with friends or use it as a promotional tool for your work.
We are building a layout
that is specifically for the web, but you could use the same process to build a
layout to print, just use a higher resolution for your document and images.
- Make a plan on paper. Decide which images you want to
use and how big you want them to be.
We will be using a document that is 1024 x 768 (the standard web
- When you are happy with your layout on
paper, make sure your images are toned, color corrected and cropped to
your liking in aperture. Open
your image in photoshop.
- Create your main document. In p’shop click file: new. Select a web preset (1024 x 768)
The resolution should be 72 ppi.
- Resize your images, according to your paper
plan. Make sure the
resolution is 72 ppi, otherwise they will not retain their size when you
put them in your layout.
Don’t save the resized images, as you may need to alter the size
slightly as you work on your layout.
When you have resized your image, select all, copy your image and
paste it into your layout.
You can then use the move tool to move your images around.
- Continue this process with your images until
you have resized all of your images and have them in your layout.
- Using the text tool make text boxes and add
any text, headlines and captions.
- Switch on your grid – view: show: grid – and
line up all the elements according to your plan.
- When you are happy with your layout it is
time to slice it. Select the
slice tool (the little exacto knife) and make one slice around your
document. Change to the slice
select tool and click on the blue corner of your slice. Make sure the slice has a name
that you will be able to recognize.
- Hit okay. Then save your document. Go to file: save for web and devices. When the save window pops up, make
sure the preset on the right is set for jpg high, then hit save. In the next dialog box, you can
choose where to save your document.
If you already have a website, you should save your layout in your
website root folder – either on the top level or in your images
folder. If you do not have a
website, then create a folder called “your-name-website” for your layout
on your hard drive (not the computer’s hard drive). If this is the only page you will
have on your website, you need to name it index. If you already have an index page, you can call it
anything you want. At the
bottom of the dialog you need to select; html and slices; all slices and
default settings. Hit okay.
- Photoshop will save your layout as and html
document, suitable for the web.
It will create an image folder, where it will store your slice as a
- When this is complete, open
Dreamweaver. You can close
the welcome screen and on the right side of your screen you will see a
series of windows.
- Go to the files tab and click the drop down menu with
the green folder. Click on
mange sites. In the dialog
box, click ‘new’ and ‘site’ to set up your website. In the site definition window,
click the advanced tab. Name
your site and then select your local root folder. This is the folder where you saved
your layout. Next, select the
default images folder, which should be inside your root folder.
- Don’t worry about the other settings on this
page, as we will not be using Dreamweaver to upload our site. Hit okay.
- Now, under files, your index page and images
folder should show up.
- Double click to open your index page in
dreamweaver. It should look
just like it did in p’shop.
Now, you can use DW to add hot spots to your page which will link
to other pages, galleries or multimedia presentations. To make a hotspot, use the
properties manager at the top of your screen.
- Use the blue hotspot tool to draw a box
around the element you want to link from. A new dialog will pop up, click the bullseye to the
right of the box with the # sign in it, and drag this to make the
link. If you are linking to a
gallery, link to the index page of your gallery, inside your gallery
folder. If you are linking to
a soundlide presentation, link to the index page within the publish to web
- Save your page, then test it in the browser,
buy clicking on the little world at the top of your window.
- If everything works – great! If not, then re do your links.
- When you are satisfied with your page, you
can upload it to your url using cyberduck. Open cyberduck and click new connection. Put in your url (people.bu.edu),
your user name and password.
If you are uing a people account, then the name and PW will be the
same as your keberos name and PW.
- Drag and drop all of your files into the
window. This will
automatically upload them to your URL. Make sure you copy everything you are using (your
galleries or soundslide).
- Check online to see your site. In order to e-mail your page, when
it I open in safari, go to file: e-mail contents of this page. This will put the page into a mail
message for you to send out, and all your links will remain and stay hot.