Graphic Design Exercises

Illustrator/Photoshop & Dreamweaver: Personal Projects Page

 

Objective

To learn Illustrator/Photoshop layout techniques by example. To review basic XHTML and CSS skills by building a personal projects page.

 

Discussion

Photoshop is often used by web designers as a layout tool to create "mock-ups" of web pages for client approval. Once approved, Photoshop has extensive tools to help you optimize the pixel elements for web production.

Once the pixel elements have been exported, we can then use Dreamweaver to write the XHTML and CSS code for web publishing.

The best way to learn XHTML and CSS is with Dreamweaver's code view. By observing how Dreamweaver writes code for you behind the scenes one can learn coding by example.

 

Procedure

Overview: Create a web page layout in Illustrator. Export art to Photoshop for texturing, slicing and optimizing. Import pixel elements into Dreamweaver. Add text and style with CSS. Publish to server. Note: replace bold with personalized info.

Making the Illustrator mock-up

  1. download starter files (location: class/jsmith/projects_html)
  2. launch Illustrator, file > new: RGB, 1024x768
  3. file > place "blank browser.png", save as "projects.ai"
  4. new layer "art", lock others
  5. draw circle, rotate 45°, delete middle portion (direct select tool)
  6. join curves end-to-end (cmd+J), repeat, scale, position
  7. object > path > add anchor points
  8. pen tool: finish drawing filled shape area, choose fill color
  9. position widest part of art at top edge of browser window
  10. new layer "type", lock others
  11. type tool: "Jane Smith Projects", spec font, scale, position
  12. file > export "projects.psd": RGB, 72ppi, write layers, anti-alias

Making the Photoshop mock-up

  1. open "projects.psd" in Photoshop; hide type layers
  2. new layer "white", fill with white, restack at bottom
  3. new layer "noise", restack above "art" layer
  4. edit > fill 50% gray
  5. filter > noise > add noise: monochrome, uniform
  6. stretch grain horizontally (cmd+T)
  7. make clipping mask with "art" layer (opt+click between layers)
  8. layer > new adjustment layer > hue/saturation: colorize=yes
  9. view > ruler (cmd+R): draw guides for tiling
  10. hide "browser" layer
  11. marquee, edit > copy merged
  12. file > new, paste
  13. image > image size: note height
  14. filter > other > offset: vertical=+50% of height
  15. retouch seam (rubber stamp tool)
  16. filter > other > offset: vertical=-50% of height
  17. file > save for web: "tile.gif" (preset=GIF 32 dithered, images only,
    user slices, location=/projects_html)
  18. file > close, do not save
  19. slice tool: slice based on guides
  20. reveal type layer, save for web: "logo.gif" (same as above)

Setting up your content

  1. launch Dreamweaver
  2. site > new site (advanced) "jsmith projects"
    (define local root folder: location=class/jsmith/projects_html)
  3. window > files: RMB local root folder > new file "index.html"; open file
  4. view > head content (cmd+shift+H)
  5. view > visual aids > show all (cmd+shift+I)
  6. view > code and design
  7. insert > named anchor "top" (cmd+opt+A)
  8. insert > image "logo.gif" (align right)
  9. insert > layout objects > AP Div; rename id="content"
  10. copy and paste text from "projects.txt" into <div> (aka "layer")
  11. format text: add <ul>, <h1>
  12. change "jane smith" to your name (all occurances)
  13. add non-breaking spaces as needed (cmd+shift+SPACE)
  14. replace automatic date stamp: insert > date
  15. file > preview in browser (opt+F12 and cmd+F12)
  16. create new file "p1.html" (RMB on root folder); open file
  17. center content (note <div> code)
  18. insert sample images (border=1)
  19. file > preview in browser (opt+F12 and cmd+F12)

Adding links

  1. browse to the sample projects page: copy and paste links into appropriate text (RMB > copy link to clipboard)
  2. link to "p1.html" (use target=_blank)
  3. add other external links (tip: browse to web site, copy and paste URL, use target=_blank)
  4. select "back to top", add link "#top"
  5. add email link to your name (i.e. "mailto:jsmith@stu.parkland.edu")
  6. file > preview in browser (opt+F12 and cmd+F12), test links

Adding CSS

  1. select layer: id="content"
  2. window > CSS: edit #content...
    > type: Verdana, 11/18px
    > position: width=40%, height=(blank)
  3. window > CSS: add CSS style to this document only (+):
    > tag=<body>: box: margins=0 (all); bg: "tile.gif" (repeat-x)
    > tag=<h1>: type: Georgia, 24/30, weight=normal
    > tag=<a>: type: decoration=none, color=?
    > selector="a:hover": decoration=underline
    > class=".small": type: 9/14
  4. select <p>: apply style ".small"
  5. view > code: note formatting in header
  6. open "newWindow.psd"; change color to match <a>
  7. file > save for web "newWindow.gif"; quit Photoshop
  8. insert "newWindow.gif" after links
  9. file > preview in browser (opt+F12 and cmd+F12)

Finishing the HTML file

  1. change title to something like "Jane Smith's Projects Page"
  2. insert > html > head > keywords
  3. insert > html > head > description
  4. window > snippets: meta > no cache (insert in code view)
  5. add alt tags
  6. commands > clean up HTML
  7. file > check page...

Grading

  1. publish page (see separate lesson)
  2. link your published projects and assignments to this page