Learn how to use a grouping of different filters to create a modern duotone image effect.
- [Instructor] Knowing what each…of the filter primitives does, is one thing.…Figuring out how to use them in production is another,…so to wrap up this course, I want to give you…three examples of how you can combine…multiple different filter primitives…to produce interesting visual effects…you can use in your own sites.…The first example we'll look at is duotone images.…This is the example we covered previously…in the course, and now we'll revisit it,…because you now have the vocabulary…and you understand exactly what's going on.…We are now in chapter four, and this is the duotone example.…
First off, the image you see in the browser…does not have a filter applied right now,…so I'm gonna go in here at the top…and comment out the filter URL duotone…so that we apply the filter,…and when I scroll down, you'll see the duotone filter…currently only has one filter primitive,…that is the feFlood primitive…that is flooding in the background color,…so when I save this, the entire image gets replaced…by this peachy red color.…
Author
Released
8/30/2018- How clipping and masking work in SVG
- The mask coordinate system
- The filter elements
- Combining filters
- Filter primitives
- Using SVG filters
Skill Level Intermediate
Duration
Views
Related Courses
-
Learning SVG
with Morten Rand-Hendriksen2h 30m Beginner -
Creating Web Icons with SVG
with Morten Rand-Hendriksen1h 44m Intermediate -
Design the Web: Responsive SVG Images
with Chris Converse22m 46s Beginner -
Design the Web: SVG Rollovers with CSS
with Chris Converse23m 43s Beginner
-
Introduction
-
Prerequisites34s
-
1. Clipping and Masking
-
The clipPath element1m 38s
-
A basic clipping example5m 12s
-
The mask element1m 31s
-
A basic mask example3m 33s
-
The mask coordinate system3m 58s
-
2. SVG Filters
-
How SVG filters work3m 33s
-
The filter element3m 48s
-
A basic filter example4m 53s
-
Combining multiple filters3m 46s
-
-
3. SVG Filters and What They Do
-
feImage4m 31s
-
feTile4m 15s
-
feFlood2m 29s
-
feBlend2m 52s
-
feGaussianBlur3m 21s
-
feMerge2m 51s
-
feOffset2m 54s
-
feMorphology4m 39s
-
feComposite4m 50s
-
feComponentTransfer9m 23s
-
feColorMatrix, part 13m 42s
-
feColorMatrix, part 24m 53s
-
feDiffuseLighting7m 53s
-
feSpecularLighting4m 19s
-
feTurbulence6m 47s
-
feDisplacementMap2m 40s
-
feConvolveMatrix5m 49s
-
4. Using SVG Filters
-
Duotone images2m 23s
-
Extruded text4m 51s
-
Mixing multiple filters3m 43s
-
-
5. Going Further
- Mark as unwatched
- Mark all as unwatched
Are you sure you want to mark all the videos in this course as unwatched?
This will not affect your course history, your reports, or your certificates of completion for this course.
CancelTake notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.
Share this video
Embed this video
Video: Duotone images