Tuesday, 29 November 2016

How And Where To Find Inspiration And New Ideas - Vanseo Design

How And Where To Find Inspiration And New Ideas - Vanseo Design


How And Where To Find Inspiration And New Ideas

Posted: 29 Nov 2016 05:30 AM PST

A couple of months ago I received an email from Jenny Lanier, a grad student working on her masters thesis in graphic design. She read something I had written here a few years back about finding inspiration without plagiarizing the ideas of other designers and asked if I wouldn't mind responding to a few additional questions.

Inspiration

I'm often asked how to generate ideas and where to find inspiration and I revisit both topics from time to time. As I was answering Jenny's questions I wrote down some additional thoughts and figured I'd present a short series on the subject.

Today and the next two weeks I want to talk about how and where to find inspiration. I'll also talk about how to train yourself to observe your surroundings for an endless source of ideas. I'll close the series with some thoughts about gaining confidence in your ideas so you can avoid copying what inspires you.

Don't Wait Until You Need Inspiration

To design, to write, to play music, to do anything creative, you need ideas and you often want a shot of inspiration to help you get started. Odds are at one time or another you stared at a blank page, a new file in a graphics editor, or an empty HTML document and thought what now? How do I get started on this project?

It's often at this point that we go searching around the web looking at websites others have designed, finding a few that might fit our project, and using them as inspiration. As a general rule, I think a better solution is to always be on the lookout for things that inspire you instead of waiting till that last minute when you absolutely need to be inspired.

I don't know any creative person who would be satisfied with a single idea or single example to inspire him or her. We need ideas and inspiration all the time so it only makes sense to devote time to gather inspiration and generate new ideas.

For me, reading is a great source for a lot of things and so I fill my feedreader with subscriptions to sites that talk about design, development, and related topics. I subscribe to sites that point me to designs they like. I subscribe to sites that show examples of photography and art and writing. I subscribe to sites that…well you get the idea.

I click through to see the actual sites instead of only looking at them in my feedreader. I click on the links in the articles I'm reading. I'm constantly taking in new information and new imagery this way.

I spend at least 20% of my week taking in new information to fill my head with ideas and to be inspired by others instead of waiting until the moment I need the inspiration to go out and seek it.

Collect What Inspires You

Much of what I take in I would soon forget without doing more than just read or look. You want to have a place to store the things that inspire you and are generating ideas for you.

You can bookmark pages online somewhere. You can take screenshots and save the images. You can create a hierarchy of folders somewhere on your computer and save things to their appropriate place or you can use some kind of database application to store everything. I don't think it matters as long as you store and collect the things somewhere that you can easily revisit and find later.

There are a couple of reasons why I collect ideas and inspiration.

First it offers a place to quickly search when I need inspiration or a new idea. Everything in the collection has inspired me already or it wouldn't be there. Odds are I'll find something quicker in my own collection than by searching the web.

Second and probably more important is the act of collecting leads to a deeper understanding of what inspires me. I don't simply grab a screenshot and file the image away. While I'm saving it, I'll add a few notes about why I liked it. Was it the color scheme? The layout? Maybe it was a small detail that caught my attention or a specific graphic on the page.

Writing down notes helps me understand why I found something inspiring, which in turn helps me better understand which projects would be better served by a particular inspirational piece.

How to Avoid Imitation

You can avoid imitation by looking smaller or larger at what inspires you.

Looking smaller is about being inspired by part of something instead of the whole thing. Say you have to draw inspiration from other websites, but don't want your design to come across as a copy. In that case be inspired by the navigation of one site, the imagery of another site, and the layout of a third site. Then combine all those parts into something that's different from all three.

Looking larger is about thinking in a more general, more abstract way. Instead of being inspired by the specific red, green, and blue a website used and then copying down the hex values to use, think about why you like the colors.

  • Do you like that the site used primary color?
  • Do you like how the cool and warm colors work together?
  • Do you like the contrast between the main color used and the accent color?

Take time to understand why you specifically like something and use that deeper understanding in your own design instead of copying what you see on the surface.

You might for example that what you liked in a color scheme is how the cool and warm colors create a sense of depth in the composition. Instead of using the exact same colors in your own design, explore other warm and cool colors that do the same. You might find a combination that creates even more depth or less depth or whatever works best for your project.

Where to Find Sources of Inspiration

Hopefully you agree that you should always be on the lookout for sources of ideas and inspiration and when you find something that inspires you or leads to new ideas you should save it somewhere and add some general thoughts about why.

But where exactly should you be searching. That's really up to you as you might be inspired by different things than what inspires me, but I think there are a couple of guidelines you can follow.

  • Seek the best sources
  • Diversify your sources as much as possible

Seek the best sources—Best is a subjective word. What's best to me may not be best to you and vice versa. That's fine. We each have to define what's best for ourselves. Use your judgement about what is and isn't good design and collect more of the good sources for inspiration.

Sounds obvious I know. Of course the things that inspire you will be the sources you think best. I'm talking about the people who create those inspirational designs. Who do you think are the best designers today? How about in the past? Do you prefer a certain style of work?

Instead of consulting articles listing the latest and greatest top 582.7 designs from 2016, find sources that consistently present great designs and designers.

My point is to not settle for the first example you come across or for the easiest sources you can find. Look for things you consider the best and hang on to those sources so you can visit them again and again.

Diversify your sources—If you always draw inspiration from a small handful of sources, then all your work will remain niche at best and more likely it will be derivative or worse a direct copy of something you like.

Don't look to the same few designers for ideas and inspiration all the time. Diversify your sources as much as you can.

Start by diversifying the designers you look to for inspiration. Try to a find a greater number of designers whose work you admire, ideally designers with different styles. Look beyond the web and the design of websites. Find designs you like in printed material, industrial design, fashion design, etc.

For example why not draw inspiration for the color scheme of your next site from the world of fashion. Walk into a clothing store and see what color combinations are being used.

Look beyond design to other visual arts like painting and photography. Both work with the rules of composition, the same as you do when designing a website.

Why not look to nature and see it as a more organic form of design?

Seek inspiration beyond the visual. Graphically we talk about positioning positive elements on negative space. Music is created by varying positive sounds with negative silences. Music is created through the contrast and repetition of sound and silence to create rhythm. Why not try to visually express a favorite piece of music. Convert the rhythm in time to a rhythm in space.

There's really no end to where you can find sources of inspiration and new ideas. The main thing is not to settle for the obvious unless you want your designs to look like everyone else's designs.

Anyone can search Google for "inspiring design examples 2016." Most people won't go beyond that kind of obvious search. Anyone who does, will much more likely create something unique and different because they're starting with something that isn't the same as what everyone else starts with. Keep that in mind when you're looking to be inspired.

Closing Thoughts

The best way to have inspiration when you need it is to always be looking for new things to inspire you. I don't think there are right or wrong places to find inspiration. The best sources depend on you and what you find interesting.

Set aside time each week to be inspired and skip the obvious and easy. It'll take time to build up a wellspring of ideas and inspiration, but the sooner you start, the sooner you'll have that wellspring.

Save what you find inspiring and revisit it from time to time. Make sure to add thoughts to remind yourself why you liked something. Trust me, you'll forget a few months later if it's not written down.

Diversify, diversify, diversify. If you don't want your work to end up as a copy of someone else's work, you need to draw inspiration from multiple sources and ideally sources as far removed from what you're going to create.

Next week I'll share some thoughts for how you can be inspired by your surroundings simply by paying more attention and noticing the ordinary things you come in contact with each and every day.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Friday, 25 November 2016

Happy Thanksgiving From Manhattan’s High Line - Vanseo Design

Happy Thanksgiving From Manhattan’s High Line - Vanseo Design


Happy Thanksgiving From Manhattan’s High Line

Posted: 24 Nov 2016 09:32 AM PST

Happy Thanksgiving to everyone living in the U.S. and as usual a very belated Happy Thanksgiving to everyone living in Canada. Happy Thursday to those of you living somewhere else in the world.

The day before Thanksgiving, my family and I usually head into Manhattan and walk uptown from Penn Station on 34th street to the museums up in the lower 80s. We then cut across Central Park to see the floats being blown up before taking the subway back down to Penn and the train that will take us home.

This year we decided to do something a little different. We walked west until we reached the High Line and then walked the High line south into Chelsea where we had lunch. Then we walked back uptown. Before getting back on the train though, we checked out the window displays at Macy's and Lord & Taylor's and as I do every year I take a lot of pictures along the way.

The High Line

In the 1930s the High Line was used by trains to carry goods into and out of Manhattan's largest industrial district. As trucks became the dominate means of transporting these goods, the train fell out of use. Today the High line is a walkway above part of the city and yesterday we walked it's whole length.

Here are some of the pictures I took along the walk. The first is at 34th street over the West Side Rail Yard. The rest are pictures I took along the way. It's a good walk with interesting views of the city and lots of interesting things to see just next to the High Line itself.

Overlooking the West Side Rail Yard
View From the High Line
View From the High Line
View From the High Line
View From the High Line
View From the High Line
View From the High Line
View From the High Line

Like I said we ended up in Chelsea and had lunch inside the Chelsea Market

Chelsea Market

My mom tells me the bread from Amy’s Bread (on the right) is delicious. I’ll find out in a few hours when we sit down to eat.

Inside Chelsea Market

The water here is coming from a pipe above and it’s kind of like a reverse fountain.

Inside Chelsea Market

Architecture

One of my favorite subjects in Manhattan is the architecture. I don't see quite the same kinds of buildings now that I live in Colorado. These were all taken during our walk along the High Line.

Building in Manhattan
Building in Manhattan
Building in Manhattan
Building in Manhattan
View From the High Line

Our walk this year kept the Empire State Building in view more often than our usual walks of year's past. The middle picture below was taken from the High Line. The other two were taken nearer the building itself.

The Empire State Building
The Empire State Building From The High Line
The Empire State Building

Window Displays

I made sure we checked out some of the window displays before heading back to the train. There's something about seeing the displays that makes me feel like the holidays are right around the corner.

The theme at Macy's was "Yes, Virginia, there is a Santa Claus, which comes from an editorial in the September 21, 1897 edition of The Sun, a newspaper which was merged into other papers that no longer exist.

Macy's Window Display
Macy's Window Display

I'm not sure how this last image fit into the theme, but I like how the buildings across the street are captured in the reflection.

Macy's Window Display

The theme at Lord & Taylor's was The Enchanted Forest, which I think you can tell from the images below.

Lord & Taylor's Window Display
Lord & Taylor's Window Display

Happy Thanksgiving

I'll leave you with a couple of pictures I thought turned out well that didn't quite fit into the themes above. The first is looking through the staircase at the end of the High Line and the second is 180 degrees from the staircase looking at the front of the New Whitney Museum. The green chairs caught my eye.

View Through a Staircase
In Front of The New Whitney Museum

Once again, have a Happy Thanksgiving or enjoy Thursday while the U.S. celebrates a much needed day off after a long and contentious election. I'll give Zoe Leonard the last word. Her text below was written in 1992 and was installed along the High Line earlier this year.

Text by Zoe Leonard

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 15 November 2016

SVG Blend Modes With The feBlend Filter Primitive - Vanseo Design

SVG Blend Modes With The feBlend Filter Primitive - Vanseo Design


SVG Blend Modes With The feBlend Filter Primitive

Posted: 15 Nov 2016 05:30 AM PST

You've probably used an image editor to combine two images together using one of the different blend modes available in your editor of choice to create some very interesting images. Did you know SVG has a filter that lets you do the same thing?

I've been talking about the details of SVG filters primitives as part of a larger series about SVG filter effects. I began with an overview of SVG filters and then walked through the filter element before talking about filter primitives and their input and output. Since then I've covered a few simple filter primitives, some for working with external images, and the last few weeks I've talked about how you can combine the results of multiple primitives into a single graphic for display using either feMerge or feComposite.

Today I want to continue with one more primitive that can combine the results of other primitives. I want to talk about feBlend, which lets you blend two images just like your favorite image editor.

The feBlend Filter Primitive

The feBlend filter primitive is similar to feComposite in that it takes two images or SVG fragments and composites them into a single graphic. Unlike feComposite, feBlend uses blend modes that you would commonly find in image editing software, though it doesn't offer quite as many blend modes.

Like feComposite, it requires an in and in2 value that set the graphics to be combined, but instead of an operator you set a mode that determines how the images will be blended together. There are five possible values of mode or five possible blend modes when using feBlend.

1  
mode = normal | multiply | screen | darken | lighten

You might already know what each of these blend modes does, but here's a brief definition in case you don't.

  • normal—The same as setting operator="over" using feComposite where in2 sits on top of in.
  • multiply —The resulting value is the product of the in and in2 value, which weakens light colors.
  • screen —Adds the color values together, then subtracts their product, which strengthens light colors more than dark colors.
  • darken —Displays the minimum of in and in2, which is the darker color.
  • lighten—Displays the maximum of in and in2, which is the lighter color.

You use feBlend the same way use feComposite, though please note that for blending in2 is the image on top and in is the image on the bottom.

1  
<feBlend mode="normal" in="A" in2="B" />

Here's an example so you can see how feBlend works in practice. I created a rectangle inside <defs> and set its dimensions to be 100% of the viewport in both the x and y directions. I filled the rectangle with a shade of purple.

Next I referenced the rectangle inside an feImage primitive and I referenced an external image inside another feImage filter primitive.

I set feBlend to mode="normal" and have the rectangle as the value for in and the image as the value of in2. Finally I referenced the filter in an empty group, <g>, which exists only for the reference as everything for display is inside the filter.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="495px" style="outline: 1px solid red">   <defs>     <rect id="overlay" width="100%" height="100%" fill="#939" />       <filter id="blend" x="0" y="0" width="100%" height="100%">       <feImage xlink:href="#overlay" result="rectangle" />       <feImage xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="100%" height="100%" result="strawberry" />         <feBlend mode="normal" in="rectangle" in2="strawberry" />     </filter>   </defs>     <g filter="url(#blend)"></g>  </svg>

Here's the result. The "in" image, in this case a purple rectangle sits on top of the "in2" image, which is my photograph of Strawberry Fields in Central Park.

That isn't the most interesting result as the purple rectangle completely obscures the image. Here's how the example looks with a single change to mode="multiply" and everything else exactly the same. A little dark perhaps, but definitely more interesting.

Here's the result with mode set to screen.

With mode set to darken.

And finally with mode set to lighten, which is my favorite using the purple rectangle and this particular image.

Which mode works best will depend a lot on the specifics of what your trying to blend, but hopefully the example and the results from using the different blend modes will give you an idea how the feBlend primitive works.

Blending an Image with a Gradient

I chose to use blend an image with a rectangle filled with color in order to keep the example simple, but you aren't limited to simple color fills.

Here's another example. I'm using the same Strawberry Fields image, but this time instead of filling the rectangle with purple, I filled it with a linear gradient that transitions from red to green to blue.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  16  17  18  19  20  
<svg width="100%" height="495px" style="outline: 1px solid red">   <defs>     <linearGradient id="linear">       <stop offset="0" stop-color="#ff0000" />       <stop offset="0.33" stop-color="#00ff00"/>       <stop offset="0.67" stop-color="#0000ff"/>       <stop offset="1" stop-color="#ff0000" />     </linearGradient>     <rect id="overlay-linear" width="100%" height="100%" fill="url(#linear)" />       <filter id="blend" x="0" y="0" width="100%" height="100%">       <feImage xlink:href="#overlay-linear" result="rectangle" />       <feImage xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="100%" height="100%" result="strawberry" />         <feBlend mode="multiply" in="rectangle" in2="strawberry" />     </filter>   </defs>    <g filter="url(#blend)"></g>  </svg>

Here's the result using mode="multiply" which is the mode I thought looked best for this example.

Blending Two Images

You're also not limited to blending an image with a rectangle no matter what's filled with. Here's an example blending two images. One is the same image of Strawberry Fields I've used throughout this series and the other is an image of a vase and shallow bowl I took at the Museum of Natural History in New York.

Instead of creating a rectangle and using it in one of the feImage primitives, here both feImage primitives point to external images. I experimented with different blend modes and settled on darken for these two images.

1  2  3  4  5  6  7  8  9  10  11  12  
<svg width="100%" height="495px" style="outline: 1px solid red">   <defs>     <filter id="blend" x="0" y="0" width="100%" height="100%">       <feImage xlink:href="http://vanseodesign.com/blog/wp-content/uploads/2013/11/qing-vase.jpg" result="rectangle" />       <feImage xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="100%" height="100%" result="strawberry" />         <feBlend mode="darken" in="rectangle" in2="strawberry" />     </filter>   </defs>     <g filter="url(#blend)"></g>  </svg>

Here's the result, which adds a vase to the Strawberry Fields memorial. The dark ellipse to the left of the vase is the opening of the bowl. The entire image has a yellowish/brownish cast to it, which comes from the background behind the vase and bowl. The darker strip across the bottom was the shelf both were sitting on.

Closing Thoughts

The feBlend filter primitives is another that's limited to two inputs, but it does offer more interesting possibilities for how the images are combined than the feMerge and feComposite primitives we saw the last couple of weeks. All three have their place and which you use will depend on what effect you want to achieve.

There are still a number of filter primitives to cover, but it will take a couple more months to get through them and I thought it best to break up the series as we head into the holiday season. I have a short series about ideas and inspiration coming in a couple of weeks, then I'll do my usual goal setting and review posts to close out 2016 and begin 2017. I'll get back to SVG filter primitives in January.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 8 November 2016

Combine Input Images With The feComposite Filter Primitive - Vanseo Design

Combine Input Images With The feComposite Filter Primitive - Vanseo Design


Combine Input Images With The feComposite Filter Primitive

Posted: 08 Nov 2016 05:30 AM PST

Have you ever used an image editor to use one graphic to punch a shape in another? Maybe you added one simple graphic to second to create a larger and more complex shape. If so you'll probably like working with feComposite, which allows you to combine two input images in several ways.

For several weeks I've been talking about SVG filter effects. I started with an overview, walked you through the filter element, and then discussed the input and output of filter primitives. The last few weeks I've been covering different filter primitives in detail. First were a few simple primitives follow by primitives for working with external images. Last week I talked about merging the results of multiple primitives into a single graphic for display.

Today I want to continue with another filter primitive, feComposite, that's used to combine the results of two input images.

The feComposite Filter Primitive

The feComposite primitive can only combine two input images, but it does provide several options for how the inputs are combined and displayed.

The two inputs are specified using the in and in2 attributes, with in being the first image input and in2 being the second. Both can accept any of the keyword values for input a well as the result of another filter primitive inside the same filter.

Where feMerge layered intermediate images one on top of another and then collapsed all the layers into a single graphic, feComposite allows you to choose how the images are combined. You choose how to combine the inputs using the operator attribute and it's six possible values.

1  
operator = over | in | out | atop | xor | arithmetic

The easiest way to explain what each does is through an example, though I'll need to set up the example before showing it to you. I'm going to create two triangles, one red and one blue, and position them as you see below. I set an opacity of 0.5 on the red triangle so you can see where both triangles are located.

The red triangle is to the left, the blue triangle is to the right and the purple area at the top is where the two triangles overlap. It's hard to tell looking at the graphic, but the red triangle displays on top of the blue triangle.

Now for the example. I created both triangles using <path> elements and filled one with red and the other with blue. Because both are inside a <defs> element they won't display until referenced.

I referenced the triangles inside the filter, each in its own feImage primitive (Remember feImage can reference either an image or SVG fragment). I gave each a result attribute, R for the red triangle and B for the blue triangle.

Finally I set up the feComposite primitive with R (red) as the value of in and B (blue) the value of in2 and then I referenced the filter on a <g> element.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="220" style="outline: 1px solid red">   <defs>     <path id="blue" d="M 0 0 L 100 0 L 100 100 z" fill="#00f" />     <path id="red" d="M 0 0 L 0 100 L 100 0 z" fill="#f00" />       <filter id="composite" x="0" y="0" width="200%" height="200%">       <feImage xlink:href="#red" result="R" />       <feImage xlink:href="#blue" result="B" />       <feComposite operator="over" in="R" in2="B" />     </filter>   </defs>     <g filter="url(#composite)"></g>  </svg>

Notice that I set the operator of feComposite to over and as you can see the red triangle displays over the blue triangle (in displays over in2). Think of each as a separate layer and the composite image places layer R over (or on top of) layer B.

This next result is the same example, except I've changed the value of operator to in (Not the same as the in input.). The result is the part of R (red) that's within the boundaries of B (blue).

Here's the result of operator="out" or the part of R (red) that's outside the boundaries of B (blue).

The result of operator="atop" is probably not intuitive. It's the part of R (red) within the boundaries of B (blue) plus the part of B (blue) that's outside of the boundaries of R (red). You can think of it as the opposite of setting operator to a value of out.

And here's the result of operator="xor" which is the part of R (red) that's outside of B (blue) and the part of B outside of R.

operator="arithmetic"

The last operator, arithmetic, needs further explanation and it requires four additional attributes that are meant only for this operator.

The additional attributes are k1, k2, k3, and k4. Each is a coefficient in a formula that determines the value of each pixel in the composited image.

1  
result = k1*in*in2 + k2*in + k3*in2 + k4

The values of k1 through k4 can be any number and if any aren't set, it's as though it has a value of 0. If you look at the formula you can see how each is combined with in and/or in2.

Here's the code for the example again with operator="arithmetic" and values of 0.1, 0.2, 0.3, and 0.4 respectively for k1, k2, k3, and k4. The values are arbitrary choices on my part.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="220" style="outline: 1px solid red">   <defs>     <path id="blue-6" d="M 0 0 L 100 0 L 100 100 z" fill="#00f" />     <path id="red-6" d="M 0 0 L 0 100 L 100 0 z" fill="#f00" />       <filter id="composite-6" x="0" y="0" width="200%" height="200%">       <feImage xlink:href="#red-6" result="R" />       <feImage xlink:href="#blue-6" result="B" />       <feComposite operator="arithmetic" k1="0.1" k2="0.2" k3="0.3" k4="0.4" in="R" in2="B" />     </filter>   </defs>     <g filter="url(#composite-6)"></g>  </svg>

And here's the result.

You might wonder when you would use the arithmetic operator and how you would determine what values to use for k1 through k4. It's the most general of the operators and it's useful in creating dissolve effects or in combination with lighting primitives that I'll talk about in a later series.

As far as the four coefficients are concerned you'll likely need some trial and error, but we can look again at the formula to get a sense of what might happen.

1  
result = k1 *in*in2 + k2*in + k3*in2 + k4

Notice that k2 is a coefficient for the in image and k3 is a coefficient for the in2 image. If you set k1 and k4 to 0, you're left with a formula that will combine k2% of in and k3% of in2.

I'll leave you with a more practical example. Here I set "in" to my image of Strawberry Fields and I set "in2" to a circle I created and roughly centered within the viewport. I set operator to atop, which will show the image wherever it's within the boundaries of the circle.

1  2  3  4  5  6  7  8  9  10  11  12  13  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <circle id="circle" cx="85" cy="62" r="50" />       <filter id="composite-7" x="0" y="0" width="200%" height="200%">       <feImage xlink:href="#circle" result="c" />       <feImage xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="100%" height="100%" result="strawberry" />       <feComposite operator="in" in="strawberry" in2="c" />     </filter>   </defs>     <g filter="url(#composite-7)"></g>  </svg>

Here's the result, which I think you'll agree is a little more interesting than a couple of triangles.

Closing Thoughts

Hopefully the last example convinced you that feComposite can be a useful primitive, certainly more useful than combining a couple of triangles.

Next week I want to talk about one more primitive that's used for combining images. I'll talk about feBlend which blends two images using some of the blend modes you've likely used in your favorite image editor.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now

Tuesday, 1 November 2016

Combine The Results of SVG Filter Primitives with feMerge - Vanseo Design

Combine The Results of SVG Filter Primitives with feMerge - Vanseo Design


Combine The Results of SVG Filter Primitives with feMerge

Posted: 01 Nov 2016 05:30 AM PDT

Interesting SVG filter effects are produced when you combine multiple filter primitives inside a single filter. Even more interesting is when you can output the results of different primitives as layers that can be displayed together.

A couple of weeks ago I started to cover the details of SVG filter primitives as part of a larger series about SVG filter effects. I began with an overview and then walked through the filter element before talking about filter primitives and their input and output. So far I've talked about some simple filter primitives and a couple for working with external images.

Today and the next two weeks I want to show you how you can create multiple layers with different effects and then combine those layers to create a single composite graphic for display. I'll talk about three different primitives that take separate images or layers and combine them into a single output. Today I'll focus on feMerge and the next couple of weeks I'll look at feComposite and feBlend.

The feMerge Filter Primitive

SVG filters create intermediate layers before creating a final image for output. The feMerge filter primitive places these layers one on top of another and then collapses all the layers into a single image for display.

An feMerge element contains multiple feMergeNode subelements, each with a different input, which you set via an "in" attribute.

1  2  3  4  
<feMerge>   <feMergeNode in=""/>   <feMergeNode in=""/>  </feMerge>

The inputs can be any of the keyword values of in, such as SourceGraphic or SourceAlpha or they can be the result of any other filter primitive as long as it's inside the same filter.

Each node is essentially a layer and they all get stacked one on top of another with the layer in the first feMergeNode on the bottom and the layer in the last feMergeNode displaying on top.

For example let's say you want to create a drop shadow effect. A drop shadow usually takes the alpha channel of the source image, blurs it, and offsets it slightly making it look like a shadow. Sounds like something we can create with a combination of feGaussianBlur and feOffset.

Here I created a blue square and referenced a filter that blurs the SourceAlpha using feGaussianBlur and then passes the result to be offset by feOffset.

1  2  3  4  5  6  7  8  9  10  
<svg width="100%" height="220" style="outline: 1px solid red">   <defs>     <filter id="drop-shadow">        <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>       <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>        </filter>   </defs>     <rect x="10" y="10" width="100" height="100" fill="#00f" filter="url(#drop-shadow)" />  </svg>

Here's the result. It's hard to tell that the graphic has been offset so I'll ask you to trust that it has been. You should at least be able to see that the SourceAlpha has been blurred. We created a shadow, but we're missing the original square.

One possible solution is to create a second blue square in the same location as the first. The only change to the previous example would be the addition of the second <rect> element, which comes after the filtered rectangle so it displays on top.

1  2  
<rect x="10" y="10" width="100" height="100" fill="#00f" filter="url(#drop-shadow)" />  <rect x="10" y="10" width="100" height="100" fill="#00f" />

This works as you can see, but it requires two elements instead of one. It also means any changes we might want to make dynamically, we'd have to make twice, one for each element.

A better solution is to use the feMerge filter primitive. In this next example I created a single element referencing the filter. The filter takes the SourceAlpha, blurs it and then passes the result to the feOffset primitive just like the earlier example. However, this time we'll combine the result with the original graphic.

Notice the feMerge element. Inside are two feMergeNodes, the first has the final result of the blur and offset as its "in" value. The second has the original SourceGraphic as its "in" value. The SourceGraphic will appear on top since it's the last node in the list.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  
<svg width="100%" height="220" style="outline: 1px solid red">   <defs>     <filter id="drop-shadow-3">        <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>       <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>         <feMerge>         <feMergeNode in="offsetBlur"/>         <feMergeNode in="SourceGraphic"/>       </feMerge>     </filter>   </defs>     <rect x="10" y="10" width="100" height="100" fill="#00f" filter="url(#drop-shadow-3)" />  </svg>

Here's the result, which is the original graphic with a new drop shadow.

By using feMerge any change to the original graphic will also change the shadow produced by the filter without needing to modify a second graphic.

The following example is the same as the last one, except for the dimensions of the original element, which I changed to width="200" and height="150" from the initial 100px each.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  15  
<svg width="100%" height="220" style="outline: 1px solid red">   <defs>     <filter id="drop-shadow-4">        <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/>       <feOffset in="blur" dx="4" dy="4" result="offsetBlur"/>         <feMerge>         <feMergeNode in="offsetBlur"/>         <feMergeNode in="SourceGraphic"/>       </feMerge>     </filter>   </defs>     <rect x="10" y="10" width="200" height="150" fill="#00f" filter="url(#drop-shadow-4)" />  </svg>

Because the shadow created in the filter relies on the original element, there was no need to adjust the filter. Again, the only difference between this and the previous example is a change to the width and height of the source graphic.

Finally, note that while the examples in this post use only two nodes, the feMerge element can have as many nodes as you'd like.

Closing Thoughts

Think of each feMergeNode like a different layer in your favorite graphic editor. The layers sit one on top of another to produce the final image.

The main difference is that in your graphic editor the layer on the top in the layer stack is the layer that will sit on top in the overall display, while inside an feMerge primitive the last node (the one at the bottom of the list) is the one that sits on top in the final image.

That's one way to combine the results of multiple primitives. Next week I want to talk about another, feComposite, which offers some additional ways in how the filter output is combined. The following week I'll show you the feBlend primitive, which lets you blend two images together using some of the blend modes you've likely used in your favorite image editor.

Download a free sample from my book Design Fundamentals.

Join me as I share my creative process and journey as a writer.

This posting includes an audio/video/photo media file: Download Now