From the course: Productivity Tips for Web Designers
Unlock the full course today
Join today to access over 22,400 courses taught by industry experts or purchase this course individually.
Using content-aware scaling for photos on the web
From the course: Productivity Tips for Web Designers
Using content-aware scaling for photos on the web
- Hi everyone, this is Sue Jenkins with Productivity Tips for Web Designers. In this weeks lesson, I'll be showing you how to use Content-Aware Scaling to stretch and shrink images for your web layouts without causing any of the normal image distortion you'd see in a regular scale transformation. Many websites nowadays include large banners or background graphics. You've seen them, the rotating banners, the wide header photos and the giant parallax scrolling background images. In most cases these images are relatively wide yet short enough to fit the layout from edge to edge. To create these kinds of graphics in your web layouts you often need to start with images that have been originally photographed or drawn as landscape rather than portrait. In addition, these images have enough information within the crop area to communicate what you need to communicate effectively. If you're not a photographer or illustrator yourself finding the right stock images for your project that also fit…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
- 01_01_MakingBlogHeadlinesPop.zip
- 01_02_block_quotes.zip
- 01_04_pairingfonts.zip
- 01_05_linkstyles.zip
- 01_06_Readability.zip
- 02_01_Rulers_Grid_Guides.zip
- 02_02_Shadow_Effects.zip
- 02_03_Type_Shapes.zip
- 02_04_AIWebSetup_Layout_Outlines.zip
- 02_05_AI_Symbols.zip
- 02_06_AI_TextFormattingForTheWeb.zip
- 02_07_AI_GraphicStyles.zip
- 02_08_AI_WorkingWithTextures.zip
- 02_09_AI_TheArtofRoundingCorners.zip
- 02_10_AI_UsingTextWrapAsPadding.zip
- 03_01_Grabbing_Measurements.zip
- 03_02_SmartFilters.zip
- 03_03_Content_Aware_Scale.zip
- 03_05_SamplingColors.zip
- 03_06_Resize.zip
- 03_07_ColorTinting.zip
- 03_08_QuickTeethWhitening.zip
- 03_09_Levels.zip
- 03_10_Optimize.zip
- 04_01_GoogleFonts.zip
- 04_02_bootstrap.zip
- 04_03_master_css.zip
- 04_04_CSSShadows.zip
- 04_05_repeat.zip
- 04_06_TwoMinRotate.zip
- 04_07_stitchedborder.zip
- 04_08_dropcaps.zip
- 04_10_CSSRoundingImages.zip
- 04_09_entities.zip
- 04_11_textselectioncolor.zip
- 04_12_tintedimagerollovers.zip
- 05_02_Externalize_CSS_JS.zip
- 05_04_CodeCleanup.zip
- 05_05_about_fix.zip
- 05_06_validation.zip
- 05_07_CheckingLinks.zip
- 05_08_5_8_Using_Snippets.zip
- 05_09_5_9_EasyPopups.zip
- 05_10_5_10_HideShow.zip
- 05_11_about.zip
- 05_12_SEOchallenge.zip
Contents
-
-
-
-
-
Grabbing measurements to speed up your workflow5m 29s
-
Editing nondestructively with Smart Filters7m 27s
-
Using content-aware scaling for photos on the web7m 53s
-
Advanced tips for sampling colors6m 53s
-
Best practices for image resizing6m 53s
-
Tinting images using one or two tones5m 45s
-
Tricks for quick teeth whitening3m 47s
-
Balancing color and tone using levels8m 33s
-
Choosing the right file format when optimizing web images7m 46s
-
Creating animated GIFs for memes and banner ads7m 28s
-
Pulling the text from images with OCR4m 3s
-
Making oddly sized images work in your layout5m 14s
-
-
-