1 / 56

Quiz #4 - Layouts Lecture Code: 098581

Quiz #4 - Layouts Lecture Code: 098581. http://fa10.decal.aw-industries.com. Announcements. Mini Project #1 Graded Mini Project #2 Out Soon… Due in t wo weeks Photoshop Trial from Adobe.com Need help? Office hours by request Email us at staff@decal.aw-industries.com

sereno
Download Presentation

Quiz #4 - Layouts Lecture Code: 098581

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. Quiz #4 - LayoutsLecture Code: 098581 http://fa10.decal.aw-industries.com

  2. Announcements • Mini Project #1 Graded • Mini Project #2 Out Soon… • Due in two weeks • Photoshop Trial from Adobe.com • Need help? • Office hours by request • Email us at staff@decal.aw-industries.com • Post to the chat room • Catch us after class • Additional material at http://sp10.decal.aw-industries.com • Web casts at http://youtube.com/webdesigndecal

  3. Today’s Agenda • Quick review of positioning • .PSD to HTML and CSS • CSS: background-image • Prepping images • CSS: background-repeat • Image Types and Transparency • Photoshop introduction • Lab

  4. Positioning Review • 4 Types of Positioning • Static: Default • Relative: Offsets relative to static position • Absolute: Offsets relative to closest parent who has position set, otherwise relative to document bounds • Fixed: Offsets relative to browser window • Absolute and Fixed remove element from document flow

  5. Web Design: Fall 2010 Monday 7-9pm 200 Sutardja-Dai Hall Basic to Advanced Techniques .PSD to HTML and CSS

  6. So Far Only Solid Colors… But we want this… Q: How do we get there?

  7. A: CSS: background-image • CSS Property: background-image • Usage: div { background-image: url(/image.png); } • Note: One background-image per HTML element only • Related Properties • background-position • background-repeat

  8. Background Image Example

  9. Photoshop to HTML & CSS • Photoshop mockup • Identify div’s in our mockup • Code div’s in HTML and CSS • Slice up our Photoshop mockup for use with background-image • Attach background-image’s to our div’s

  10. Why Use Images at All? • CSS2 only handles single color rectangles • Cannot specify gradients, rounded corners, reflections, rotation • CSS3 does handle everything above • Why don’t we use CSS3 instead of CSS2? http://www.findmebyip.com/litmus/#css3-properties

  11. <img /> vs. background-image • <img /> tags for instances where the content is the image itself • For Example: • Profile Pictures • Images in a Gallery • Background-image for instances where the image is part of the presentation structure • For Example: • Menu Buttons and Bars • Site background • Splash pages • Container styling

  12. Background Image Use Examples Most presentation graphics Backgrounds.. of course! Gradients and toolbars Rounded rectangles

  13. <img /> Use Examples Logos Portfolio Articles Profile Pictures Thumbnails Ads

  14. Classify Images http://weloveicons.com/ background-image <img />

  15. Where Do We Get the Images? • We slice and dice our Photoshop mockup • How to slice? • What to slice?

  16. Crop Tool

  17. Background-Images in Practice • Typically, not one giant image, but rather sub images • Need to think about scalability and image reuse Multiple Instances of icon Triangles can’t be made from pure HTML and CSS, must be an image This gradient also repeats This gradient repeats Gradient changes Variable length?

  18. Identifying Slices • Goal: Capture complexity in fewest and smallest images • Minimize download size of website dynamic size

  19. Exploiting Repetition in Images

  20. CSS: background-repeat • CSS Property: background-repeat • Usage: div { background-repeat: repeat; } • Values • repeat • repeat-x • repeat-y • no-repeat

  21. Background-Repeat Values background-repeat: repeat-x; background-repeat: repeat-y; background-repeat: repeat; background-image HTML container What does background-repeat: no-repeat; look like?

  22. Save For Web in Photoshop

  23. Save For Web in Photoshop…continued

  24. Image Types • .jpg, .gif, .png • JPEG – 16.7M Colors • Medium size, medium quality, no transparency • GIF – 256 Colors • Smaller size, lower quality, transparency, animation • PNG – 16.7M Colors • Largest size*, best quality, transparency • *Not always the largest, PNG can be quite small for simple shapes • Tradeoffs…

  25. Transparency Comparison View demo demo/transparency/transparency.html

  26. Reassembly • HTML elements as “billboards” • Apply background images to existing HTML elements where possible and nest additional HTML elements as necessary • Broke mockup into div’s, now break div’s up into more elements (div, span, etc) to hold background-images

  27. HTML for Button <a href=“…url...”> <span class="left"></span > <span class="middle">button</span > <span class="right"></span > </a>

  28. CSS for Button a, span { display: block; height: 92px; } a span { float: left; font-size: 80px; font-family: Helvetica, sans-serif; font-weight: bold; color: #343434; line-height: 92px; } .left { width: 21px; background-image:url(images/left.png); background-repeat: no-repeat; } .middle { padding: 0px 80px; background-image:url(images/middle.png); background-repeat: repeat-x; } .right { width: 21px; background-image:url(images/right.png); background-repeat: no-repeat; }

  29. CSS: display • Example: • a { display: block; } • Common Values: • block • inline • none • Hides object • inline-block (not supported in IE 6, inconsistent IE 7) • Allows block level elements to be placed next to each other • For compatibility: use floats instead • Valid HTML: Still don’t nest block elements in inline elements. HTML syntax independent of CSS. block inline inline

  30. display: none; demo View demo demo/display/display_none.html

  31. CSS: float • Main Layout Use Case • To place block level elements side-by-side • Effect on itself: • A floated object moves left or right (depending on the value of float) until it encounters another floated object or its container’s boundaries. • Effect on others: • Like water flows around a floating item, adjacent objects flow around an object that has its float property set • Also a type of positioning but not set with position. • Can only be set if the position is relative, static or not set. • Should set width and height of object when using float, else behavior can be unpredictable. • Example: • div { float: left; width: 100px; height: 100px; } • Common Values: • left • right • none

  32. CSS: clear • Used to specify behavior of object interacting with a floated object • clear forces the object to appear after the floated object ( if it’s a left float, right float, or both types ) • Example: • p { clear: left; } • Common Values: • left • right • both • none

  33. float & clear demo View demo demo/floats/*.html

  34. Web Design: Fall 2010 Monday 7-9pm 200 Sutardja-Dai Hall Basic to Advanced Techniques Photoshop Introduction

  35. 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!

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

  37. Workspace (setup in lab) colors tool options text history tools canvas layers

  38. 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

  39. 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

  40. Modifying Existing Images • Image Resizing • Image Cropping • Hue/Saturation • Levels

  41. 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

  42. 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

  43. 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

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

  45. 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!

  46. Workflow • History • Layers

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

  48. Layers • 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 Delete layer New layer New group

  49. Layers …continued • Allow you to specify the stacking order • 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

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

More Related