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.

1. 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 page size.)
2. 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.
3. Create your main document. In p’shop click file: new. Select a web preset (1024 x 768) The resolution should be 72 ppi. Click okay.
4. 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.
5. Continue this process with your images until you have resized all of your images and have them in your layout.
6. Using the text tool make text boxes and add any text, headlines and captions.
7. Switch on your grid – view: show: grid – and line up all the elements according to your plan.
8. 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.
9. 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.
10. 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 jpg image.
11. 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.

13. 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.
14. 
15. Don’t worry about the other settings on this page, as we will not be using Dreamweaver to upload our site. Hit okay.
16. Now, under files, your index page and images folder should show up.
17. 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.

18. 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 folder.
19. Save your page, then test it in the browser, buy clicking on the little world at the top of your window.
20. If everything works – great! If not, then re do your links.
21. 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.
22. 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).
23. 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.