Creating Images for the Web

  • 984 views
Uploaded on

http://shawncalvert.com/webdesign-1Web Design 1 …

http://shawncalvert.com/webdesign-1Web Design 1
Columbia College Chicago

More in: Education
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
984
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
18
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Using Images on the Web22-3375 Web Design I // Columbia College Chicago
  • 2. QuizYou can use your notes.
  • 3. Project 1: Group CritsIs there a clear visual hierarcy?Does the wireframe match the user goals (from last week)Did the designer think through and represent the differentuser tasks (defined last week)?Is the navigation clear; are the labels easily understood? Canthe structure be further simplified?Does the designer present a clear vision for how this site willbe an improvement over the current version — in visualdesign, content, and overall message?
  • 4. Images can be integrated into your site as html <img> elements or pulled in from your css. Images on the Web How are images being used in the following sites?
  • 5. Images can be integrated into your site as html <img> elements or pulled in from your css. How are images being used in the following sites?
  • 6. Rules for using web images
  • 7. 1 Save images in the right format2 Save images at the right size3 Measure images in pixels
  • 8. What is the “right size”?With the growing use of responsive designtechniques and faster connections, it isbecoming less crucial for designers to havetheir images perfectly sized to their box.The basic guideline is to have (just) enoughpixels for your images to look great, howeveryou are using them.
  • 9. Image Formats
  • 10. Screen image formats Print image formats
  • 11. jpgjpgs are for images, like photographs, that have a lot of colorsand gradations. It uses “lossy” compression, meaning that youcan reduce the size of the image by reducing the quality of theimage detail. colors transparency? 24-bit: no millions
  • 12. What is image detail?Image quality is detail; the quality of the original capture can beaccessed by how much actual live detail was recorded, pixel-by-pixel. The more you compress your jpgs, the more of these pixel-by-pixel details you making the same (blowing out). The result oftoo much compression is jpg artifacts and posterization.
  • 13. GIGO
  • 14. ExerciseUse Save for Web to save out a jpg
  • 15. png-24There are two kinds of png images: 24-bit (png-24) and 8-bit(png-8). png-24 is a great format because it supports alphatransparency, which allows you to have images with transparentshadows, anti-aliasing, etc, and color underneath will showthrough.There is no support for png-24 in ie6 (there is a workaround). colors transparency? 24-bit: yes millions (alpha transparency)
  • 16. png-24: alpha transparency
  • 17. png-8png-8 is an 8-bit image format, meaning that it supports up to 256colors. It supports binary transparency, meaning that pixels areeither on or off – they have no transparency. This translates tojaggy edges (which you have to then plan for and work around).You can reduce the color index (aka color table) to contain onlythe colors you need, resulting in very small image sizes. gif filesare saved in “index” color mode. colors transparency? 8-bit: yes 256 colors (binary transparency)
  • 18. Should I use png or jpg?For photos, you almost always go with jpg,because pngs will usually be much larger.For icons, backgrounds, tiles, etc, that needtransparency, use png-24.
  • 19. ExerciseUse Save for Web to save out a png 24
  • 20. gifgif if the workhorse for icons and vector graphics (like logos) thatdon’t need alpha transparency. Like png-8, it uses binarytransparency. You can reduce the color index (aka color table) tocontain only the colors you need, resulting in very small imagesizes. gif files are saved in “index” color mode. colors transparency? 8-bit: yes 256 colors (binary transparency)
  • 21. ExerciseUse Save for Web to save out a gif
  • 22. Exercise 1 Fixed-width centered page2 Fixed-height header with logo 3 Two Column layout, floated 4 Absolute Positioning