1. CSS/Photoshop Layouts - Quiz #5 Lecture Code: 500316 http://decal.aw-industries.com

2. Today’s Agenda Quiz & Attendance Announcements CSS / Photoshop Layouts – Part 3 Finish Quiz & Attendance Lab

3. Announcements Zappos.com Recruiting Chatroom Thread Positions in Email Midterms Email me if you’ll be missing class Mini Project #3 - Photoshop 2 parts Multiple deadlines Second part is long! Final Project

4. Web Design: Basic to Advanced Techniques Spring 2010 Tuesdays 7-8pm 200 Sutardja-Dai Hall CSS/Photoshop Layouts – Part 3

5. Where Are We? 1. Website Concept/Idea 2. Photoshop Mockup of Layout 3. Layout to HTML 1. Identify DIVs 2. Code DIVs 4. CSS to Layout 1. Positioning 2. Background Images 5. HTML and CSS content for Site 6. JavaScript, PHP, MySQL 7. Launch Site First lecture Today Prev. lecture First few lectures Not yet.

6. Photoshop to HTML/CSS 1. Photoshop Mockup 2. Identify div’s in our mockup 3. Code div’s in HTML and CSS 4. Slice up our Photoshop Mockup for use with background- image 5. Attach background-image’s to our div’s

7. Photoshop to HTML/CSS – Step 1-4 1. 2. button 3. 4.

8. Photoshop to HTML/CSS – Step 5.left { width: 21px; background-image:url(images/left.png); }.middle { padding: 0px 80px; background-image:url(images/middle.png); }.right { width: 21px; background-image:url(images/right.png); } div { height: 92px; } div div { float: left; font-size: 80px; font-family: Helvetica, sans-serif; font-weight: bold; color: #343434; line-height: 92px; }

9. Photoshop for this Course How to use it from a web context Overview of a few key features Some tips and hints For more information Search the web for tutorials http://www.tutorial9.net/ Play around on your own!

10. Photoshop Overview Workspace Modifying Existing Images Photoshop Panels that Aid Workflow Creating Content

11. Workspace (setup from Lab 5) tools layers canvas history colors text tool options

12. Tools In Tools Hidden tools: If click and hold tool that has black triangle in bottom-right, other versions of tools selectable Options: Top bar displays options that can be set for a given tool

13. Foreground/Background Color In Tools Can set color by clicking colored boxes Foreground: color that drawing tools use Background: background color Most useful for having two colors that can be swapped between using these arrows Color code

14. Modifying Existing Images Image Resizing Image Cropping Hue/Saturation Levels

15. Image Resizing Image > Image Size… Option + Apple + I Constrain Proportions maintains height to width ratio of original image Changing width and height scales image accordingly

16. Image Cropping In Tools Allows us to select a region of our image and delete everything outside of that region Primary tool used to cut up our website layouts

17. Hue/Saturation Image > Adjustments > Hue/Saturation … Apple + U Hue: quick way to change color of our images Saturation: allows us to change the intensity and vibrancy of our colors Lightness: brightness of photo Colorize: sepia style coloring of photo

18. Levels Image > Adjustment > Levels… Apple + L Left slider: shadows Middle slider: midtones Right slider: highlights

19. Blending Options Right click layer you want to apply to > Blending Options Can set a number of built in effects Nice drop shadows for text Gradient overlays Stroke You’ll find yourself using this A LOT!

20. Workflow History Layers

21. History Undo is only good for going back one action History allows you to go back multiple actions

22. Layers Allow you to specify the stacking order Similar to z-index Items higher in the list are on top of items lower on the list Often good practice to separate out portions of image Allows you to change portions of image independently Eye icon: toggle visibility Opacity: degree of transparency

23. Layers …continued New layer: creates blank layer New group: creates a folder to organize layers into Delete later: deletes selected layer If drag layer onto new layer button, duplicates layer Notice text on top of image, so text layer on top of image in layers as well New layer Delete layer New group

24. Creating Content Selection Tool Set Foreground and Background Color Text and Formatting Paint Brush Paint Bucket Drawing Basic Shapes

25. Selection In Tools A couple different tools for selecting (see images to right) Once selected Portion of image can be deleted Moved Cut, copy, pasted Filled using the paint bucket Separated so drawing only affects portion of image selected

26. Text and Formatting In Tools Allows you to add text to your image Can set font face, size, color, and many more options

27. Paint Brush In Tools Basic drawing tool Can set color, size, hardness

28. Paint Bucket In Tools Allows you to fill a selection with one color Or fill section of image without selection, but this is often inexact

29. Drawing Basic Shapes Two ways Make selection and then fill with paint bucket Use rectangle tools Make sure to check this

30. CSS/Photoshop Layouts - Quiz #5 Lecture Code: 500316 Lab… http://decal.aw-industries.com