Using Photoshop to Create a Layout

    Part One- Creating the Layout
    1. Create the New File
     
    1. File Menu > New 765x420 pixels at 72dpi
    2. Setup Photoshop
     
    1. Select the View Menu, turn off show extras.
    2. Display the rulers:  View Menu > Show Rulers
    3. Edit Preferences > Units and Rulers > pixels
    3. Create the sidebar navigation buttons
     
    1. Create a new layer- name it button1.
    2. Change the current color to #666699
    3. Draw a rectangle about 25 pixels tall, 80 pixels wide.
    4. Duplicated the layer twice to make the other two buttons, Layer Menu > Duplicate, name the layers as you duplicate: button2 and button3
    5. Drag a guide from the ruler; Use the move tool to move the buttons into place. Pay attention to which layer is active. You can turn on the snap to guide feature using the View Menu> Snap to > Guides option.
    6. Adjust the opacity of each of the buttons making the lower buttons more transparent- try 20% and 10%.
    4. Create the buttons roll overs
      What is a rollover? When one image swaps with another. 
    1. Select the layer with button1, duplicate layer, name it button1 Over
    2. Apply Outer Glow- Layer Menu > Layer Style > Outer Glow
    3. Repeat for buttons 2, and 3. 
    4. Make the Over buttons invisible in the layers palette. Toggle the eye.
    5. Add text to the buttons
     
    1. Make sure that your Character Palette is showing: Window Menu > Show Character
    2. Change the current color to white.
    3. Select the text tool and click where you want the text to appear. Type: Courses.
      Notice that a new layer is automatically created. 
    4. Use the Move tool to position the text if necessary.
    5. Drag to select the text, put your cursor in the size box on the Character Palette (or on the options bar) and use your up and down arrow keys on the keyboard to experiment with sizes. Try around 28pt. Use your arrow keys to toggle through fonts. Use the check mark in the upper right corner on the options bar to set the type.
    6. Select the text tool and repeat for the next two buttons to add CV and Research. Remember to use the check mark to set the type.
    6. Add the banner text
     
    1. Use the type tool to enter your name in the headline. 
    2. To change the color of type drag to select the text and then use the character palette or options bar. 
    7. Add the body text for mock-up purposes
     
    1. Open Text.txt file in word or simple text.
    2. Drag to select all the text then copy it, Edit Menu > Copy.
    3. Return to Photoshop, Select the Text tool, drag to box out area that you think will work well for the text.
    4. Change the text color to black (look in the options bar)
    5. Change the size to 14.
    6. Paste the text, Edit Menu > Paste
    7. Use the bounding box to adjust the shape of the text. 
    8. Select the check mark to set the type.

      Remember that this is just a mock-up to see how the elements lay out together. 
    8. Add an image
     
    1. Open pres.jpg
    2. Select the rectangular marquee tool. 
    3. Set the feather setting to 10 in the options bar. 
    4. Drag to select the facial area.
    5. Copy: Edit Menu > Copy
    6. Return to working doc. 
    7. Paste: Edit Menu > Paste. Use move tool to position
    8. Adjust Size: Edit Menu > Transform > Scale
    9. Adjust the layout 
      Select layers as needed to move them and experiment with positions.

    What if you want to move a button?
    You cannot just move the button- you also must move the over button and the text. Lock the three together.

    1. Select button1 layer.
    2. Select the box between the layer and the eye to lock the layer button 1 over. A link icon appears on the column. This links these two layers.
    3. Repeat for layer that has the relevant text (courses) layer. Now all three layers are linked and you can move them together.
    Part Two: Adding Functionality
    10. Why Image Slicing
     
    1. Use Slices to divide an image into functional areas. A slice is a rectangular  area of an image that you can use to create links, rollovers and animations in the resulting Web Page.
    2. Slices contribute to faster download speeds.
    3. Dividing an image into slices lets you selectively optimize it for Web viewing. 
    11. Image Slicing
     
    1. Select your slice tool.
    2. Slice areas that contain the buttons. Allow some room around the button for the roll-over glow. Photoshop will automatically create other slices as needed for a grid.

    3. Slice the header. 
    4. Slice the image. 
    5. Select the slice select tool. 
    6. Double Click on the courses slice. In the pop-up box enter courses.html for the URL and courses button for the alt text type.
    7. Repeat for the other buttons and enter the following information:

      8. cv button
      url: cv.html, alt: cv button
      research
      url: research.html, alt: research button
    12. Save for web- optimize slices
     
    1. Use the File Menu> Save for web option.
    2. Use the Slice Select tool to Select the title slice. Set it to gif, selective palette, no dither. Experiment with the numbers of colors. ( I liked 16.)
    3. Select the buttons and do the same.Select the picture but set toJPEG.

    4. Select the body text, double click, change the type to no image, and enter "past body type here."

    5. Set verticle alignment to "top".

    6. Select ok.

    7. enter a name for the html file.

    8. Format: HTML and Images,
    9. Click "all slices".
    13. Preview in Netscape
     
    1. Launch Browser.
    2. File Menu > Open Page in Navigator
    3. Select the file. 
    14. Create the background image
     
    1. Notice- the background banner is missing. 
    2. Return to Photoshop.
    3. Select the bar layer. 
    4. Use the rectangular Marquee tool to box out a short wide strip of the background. 
    5. Copy- Edit Menu > Copy Merged.
    6. File Menu > New
    7. Edit Menu > Paste
    8. You need to make the canvas wider. Image Menu > Canvas Size, enter 1500 as the width and anchor the image to the left. 
    9. Save as gif file, selective palette, no dither, 16 colors. 
    15. Edit HTML doc
     
    1. Return to Netscape.
    2. Go to Composer. File Menu, Edit Image.
    3. Format Menu > Page Properties, select the image just saved for background image.
    4. Copy and paste text from text.txt file into body text. 
    5. Save doc. Test it. 
    Part Three: Adding Rollovers
     
    1. Return to Photoshop and Jump to Image Ready.
    2. Use the Slice Select tool to select the courses slice. 
    3. Create a new rollover state by clicking on the new icon in the rollover palette.
    4. Now in the layers palette turn on the coursesover layer- your rollover state.
    5. Test the rollover by using the preview hand tool. 
    6. Repeat for the CV and Research buttons.
    7. Use the Slice Select tool to select the buttons, title text, picture and body text. 
    8. Save- File Menu > Save optimized, All Slices.