Tuesday 24 January 2017

Modify RGBA Color Channels With The feComponentTransfer Filter Primitive - Vanseo Design

Modify RGBA Color Channels With The feComponentTransfer Filter Primitive - Vanseo Design

Modify RGBA Color Channels With The feComponentTransfer Filter Primitive

Posted: 24 Jan 2017 05:30 AM PST

Often when altering the color of an image you'd like to make one area brighter and another darker or you want to increase the saturation of reds while decreasing the saturation of blues and greens. The feComponentTransfer allows you to work with each channel, including the alpha channel independently of the others.

Last week I started talking about filter primitives to work with color and I walked you through the feColorMatrix primitive. Today I want to continue talking about color filters and walk through the feComponentTransfer filter primitive.

This series builds on an earlier series where I first talked about SVG filters and then some of the details of a few filter primitives. Here's the earlier series in case you missed it or would like a review

The feComponentTransfer Filter Primitive

When working with feColorMatrix, you might have noticed that the three shortcut types, saturate, hueRotate, and luminanceToAlpha, operate on all three color channels plus the alpha channel at the same time. To work with the channels independently of each other you need to us the matrix type, which can be difficult to work with depending on your comfort with matrices.

The feComponentTransfer primitive provides a way for you to manipulate each of the four color channels separately. It allows for operations to adjust the brightness, contrast, or intensity (color balance) of colors. It also allows for thresholding or image segmentation.

To operate on each of the RGBA channels separately, feComponentTransfer takes a number of subelements, which are the transfer functions, feFuncR, feFuncG, feFuncB, and feFuncA. You only need to include those channels you wish to modify and if you use the same function more than once, whichever comes last will be used.

Each transfer function will have a type attribute and depending on the value of type it will take some additional attributes. The general form when working with feComponentTransfer looks like the following, though again you don't have to use all four subelements.

1  2  3  4  5  6  
<feComponentTransfer in="" result="">   <feFuncR type="" />   <feFuncG type="" />   <feFuncB type="" />   <feFuncA type="" />  </feComponentTransfer>

There are five possible types for each of the individual functions.

1  
type = "identity | table | discrete | linear | gamma"
  • identity sets the resulting value equal to the input value. In other words it doesn't change it. This is the default for any transfer function that isn't set.
  • table maps equal segments of a color channel to output ranges which are set using supplied values
  • discrete maps equal segments of a color channel to specific output values set using supplied values
  • linear applies a linear formula to change color values
  • gamma applies a gamma function to change color values

Setting one the transfer functions to identity (or not including it as a subelement) tells the function to not change anything. It's the easiest type to understand and there are no additional attributes to set. Each of the other types will need a little more explanation.

First here's what I expect is a familiar image of the Strawberry Fields memorial in Central Park as I've used it a few times in the previous series as well as a few times in last week's post.

I'm including the unfiltered image in case you want to scroll back up for comparison after seeing the filtered image.

type="table"

Both table and discrete take the same additional attribute, tableValues. Here's how it might look if you set the red transfer function to type="table" along with some values for tableValues. Note the values are separated with spaces.

1  2  3  
<feComponentTransfer>   <feFuncR type="table" tableValues="0.0 0.6 0.8 1.0"/>  </feComponentTransfer>

I set four numbers for tableValues, though you can set any amount from 1 to as many as you'd like. The number of values = n. The input color channel is then divided into n–1 (in this case 3) equal ranges.

1  2  3  
0.00 - 0.33  0.33 - 0.66  0.66 - 1.00

The ranges are then evenly mapped into the ranges specified by the tableValues. Note that the end points of these ranges are the values I set for tableValues.

1  2  3  
0.00 - 0.60  0.60 - 0.80  0.80 - 1.00

Here's how the remapping works. Say a pixel in the input graphic has a red value of 0.5. The value 0.5 falls at the midpoint of the range 0.33 – 0.66 in the original table. It gets remapped to the midpoint of the same row in the table created by the chosen tableValues, in this case the midpoint of 0.60 – 0.80, or 0.7.

How about an example? I included the image inside an SVG <image> element, set its width and height, and referenced a filter.

The filter includes an feComponentTransfer filter primitive with a single subelement to modify the green change (feFuncG). I set the tables values to 0.0, 0.15, 0.8, and 1.0.

1  2  3  4  5  6  7  8  9  10  11  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="table">       <feComponentTransfer>       <feFuncG type="table" tableValues="0.0 0.15 0.8 1.0" />      </feComponentTransfer>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#table)" />  </svg>

Here's the result. It's probably not the easiest to see, but the green channel in the image has been remapped to the new values I set on tableValues.

type="discrete"

The discrete type also remaps pixel channel values based on the tableValues you set, though the remapping is a little different.

1  2  3  
<feComponentTransfer>   <feFuncR type="discrete" tableValues="0.0 0.6 0.8 1.0"/>  </feComponentTransfer>

With discrete the number of ranges = n (instead of n–1).

1  2  3  4  
0.00 - 0.25  0.25 - 0.50  0.50 - 0.75  0.75 - 1.00

The ranges are mapped directly to the the values in tableValues

1  2  3  4  
0.0  0.6  0.8  1.0

Say a pixel in the input graphic has a red value of 0.60. That value falls within the range 0.50 – 0.75, which is the third range. It gets remapped to the third value, 0.8. Ultimately a range of values all get remapped to a single value, in other words the range is remapped to a discrete value.

One thing to note is the discrete tableValues can be in any order. They don't have to proceed from 0.0 to 1.0.

1  2  3  
<feComponentTransfer>   <feFuncR type="discrete" tableValues="0.1 0.6 0.2 0.9"/>  </feComponentTransfer>

The code above is valid even though the values increase, then decrease, and then increase again.

Once again, I'll modify only the green channel in the example and I'll use the same tableValues as the previous example, 0.0, 0.15, 0.9, and 1.0.

1  2  3  4  5  6  7  8  9  10  11  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="discrete">       <feComponentTransfer>       <feFuncG type="discrete" tableValues="0.0 0.15 0.8 1.0" />      </feComponentTransfer>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#discrete)" />  </svg>

Note that the result looks like it uses less colors with discrete as the type. That's because it does. The discrete type turns ranges of values into a single value. Think of it like reducing the number of colors in a .png file when saving for the web in your image editor of choice.

type="linear"

When type="linear" the function uses the following linear equation to modify the color of each pixel in the specific color channel.

1  
C' = slope * C + intercept

C' is the final pixel value, C is the input pixel value and slope (default = 1) and intercept (default = 0) are values you set using the slope and intercept attributes. The value of intercept provides a base value for the result and the slope changes the scale of the function. Increasing either, increases how much of that particular channel is in the resulting pixel.

Here's an example where I use all four color channels with the linear type and different values for the slope and intercept.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="linear">       <feComponentTransfer>       <feFuncR type="linear" slope="0.5" intercept="0.0" />       <feFuncG type="linear" slope="1.0" intercept="0.1" />       <feFuncB type="linear" slope="1.5" intercept="0.2" />       <feFuncA type="linear" slope="2.0" intercept="0.3" />      </feComponentTransfer>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#linear)" />  </svg>

I won't pretend there was any specific reasons for the values I chose in this example, however, here's the result. Note that while I've used all four channel functions in this example, you would more likely use feComponentTransfer to tweak specific channels as opposed to all of them.

Here's another example where I used the default values for slope and intercept to make the image brighter.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="linear">        <feComponentTransfer>         <feFuncR type="linear" slope="1.0" intercept="0.0" />         <feFuncG type="linear" slope="1.0" intercept="0.0" />         <feFuncB type="linear" slope="1.0" intercept="0.0" />         <feFuncA type="linear" slope="1.0" intercept="0.0" />       </feComponentTransfer>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#linear)" />  </svg>

And here's the result.

type="gamma"

When type="gamma", the function uses an exponential function to modify the pixel values in the specific color channel.

1  
C' = amplitude * pow(C, exponent) + offset

C' is again the result and C is the original input with amplitude (default = 1), exponent (default = 1), and offset (default = 0) all being additional attributes with values you set.

As in the linear example, here's an example with type set to gamma and various values for amplitude and exponent on all four channels.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="gamma">       <feComponentTransfer>       <feFuncR type="gamma" amplitude="0.5" exponent="0.3" offset="0.0" />       <feFuncG type="gamma" amplitude="0.75" exponent="0.5" offset="0.0" />       <feFuncB type="gamma" amplitude="1.5" exponent="0.7" offset="0.0" />       <feFuncA type="gamma" amplitude="1" exponent="1" offset="0.0" />      </feComponentTransfer>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#gamma)" />  </svg>

Again I won't pretend there were specific reasons for my chosen values. Just arbitrary numbers to see what happened. Here's the result.

As with type="linear" you would likely modify only those color channels you wish to change as opposed to modifying all of them as I have in the example.

Here's another example using default values for amplitude, exponent, and offset to again make the image brighter.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="gamma">        <feComponentTransfer>         <feFuncR type="gamma" amplitude="1.0" exponent="1.0" offset="0.0" />         <feFuncG type="gamma" amplitude="1.0" exponent="1.0" offset="0.0" />         <feFuncB type="gamma" amplitude="1.0" exponent="1.0" offset="0.0" />         <feFuncA type="gamma" amplitude="1.0" exponent="1.0" offset="0.0" />       </feComponentTransfer>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#gamma)" />  </svg>

And the result.

Closing Thoughts

Like feColorMatrix, feComponentTransfer offers a lot of flexibility when adjusting color values. Unlike feColorMatrix feComponentTransfer makes it easier to modify the different channels independently of each other.

It offers several different ways to adjust the color values and I admit it's not immediately intuitive what will happen based on the values you set. Trial and error definitely help. Apply a filter to an image using the feComponentTransfer primitive. Use one of the different types and modify a single attribute value holding the rest constant. It'll be easier to predict what will happen once you have a feel for what the values do. The need for trial and error shouldn't be surprising given it's the best way to learn how color works.

Next week I want to change focus and start talking about different lighting effects you can create with SVG filters using a couple of different primitives, feDiffuseLighting and feSpecularLighting. First, though, we need to talk about different types of light sources.

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

Wednesday 18 January 2017

Modify The Color Values Of An Image With The feColorMatrix Filter Primitive - Vanseo Design

Modify The Color Values Of An Image With The feColorMatrix Filter Primitive - Vanseo Design

Modify The Color Values Of An Image With The feColorMatrix Filter Primitive

Posted: 17 Jan 2017 05:30 AM PST

Sometimes you can completely change the emotional impact of an image through color changes alone. You can make the subject pop or you can change a cool image into a warmer one. SVG provides a couple of primitives that allow for the non-destructive modifications of color in any image or graphic.

Before the holidays I was talking about 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. I covered some simple filter primitives, some for working with external images, and different ways to combine the results of multiple primitives using feMerge, feComposite, or feBlend.

Today I want to pick up where I left off and continue talking about different filter primitives. Earlier in the series I showed you the feFlood filter primitive, which lets you set a fill color over the filter primitive subregion. There are two more primitives that deal with color that I'd like to cover next. Today I'll talk about feColorMatrix and next week I'll cover feComponentTransfer, both of which allow you to make more changes to different aspects of color.

I'm going to assume you've read the earlier series or have worked with SVG enough to understand the basics of working with filters and filter primitives. If you find what's here a little confusing or would like a review, check the links a couple paragraphs back.

The feColorMatrix Filter Primitive

The feColorMatrix filter primitive offers a general way to change color values. It can be used to modify the color or alpha values of every pixel in the image or graphic being transformed.

As you might guess from the name, this primitive applies a matrix transformation to an image to adjust different aspects of color. If the thought of working with matrices scares you, join the club. I admit it's easy to look at the following matrix math from the spec and think you're never going to use this filter.

1  2  3  4  5  
| R' |   | a00 a01 a02 a03 a04 |   | R |  | G' |   | a10 a11 a12 a13 a14 |   | G |  | B' | = | a20 a21 a22 a23 a24 | * | B |  | A' |   | a30 a31 a32 a33 a34 |   | A |  | 1  |   | 0   0   0   0   1   |   | 1 |

Don't run away. I promise it's not as complicated as it looks and I'll do my best to make it understandable with an example. For the moment just note the values represent the RGBA channels of color and the last column and row are multipliers.

Here's an example where I used an <image> element to display the image of the Strawberry Fields Memorial in Central Park that I used earlier in the series. I set a width a height on the image and referenced a filter which includes only the feColorMatrix primitive inside.

You'll notice there are two attributes, type and values (plural). The type is matrix and the values are shown as a matrix of values.

1  2  3  4  5  6  7  8  9  10  11  12  13  14  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="color">        <feColorMatrix         type="matrix"         values="1 0 0 0 0                 0 1 0 0 0                 0 0 1 0 0                 0 0 0 1 0"/>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter=url(#color) />  </svg>

The specific values I've chosen don't alter the image at all so the result below displays an unfiltered image despite the filter. I wanted you to see these "unfiltered" values first. I'll change them momentarily so you can see the effects, but first I want to very briefly talk about matrix math.

Don't worry if you've never done any matrix math or have forgotten everything you learned about it. Here's how it works. To the left of the arrows are a row of values from the feColorMatrix primitive and to the right of the arrow is how the row is used to multiply each of the RGBA components.

1  2  3  4  
1 0 0 0 0 --> R = 1*R + 0*G + 0*B + 0*A + 0  0 1 0 0 0 --> G = 0*R + 1*G + 0*B + 0*A + 0  0 0 1 0 0 --> B = 0*R + 0*G + 1*B + 0*A + 0  0 0 0 1 0 --> A = 0*R + 0*G + 0*B + 1*A + 0

To find the final value for R you multiply the first value in the first row of the matrix (1) by the value of R in the image. Then you add the next value in the row (0) multiplied by the value of G in the image and so on.

You do the same for the second row to find the final value for G, the third row for B, and the fourth row for A. I don't know why the spec shows a fifth row for the multiplier. Maybe for completeness.

Here's the general form of the matrix using the color component associated with each value. To the right of the arrow you can see which component each row is used to calculate.

1  2  3  4  
R G B A M --> R  R G B A M --> G  R G B A M --> B  R G B A M --> A

The reason the matrix from the previous results in an "unfiltered" image is because each row multiplies only the resulting color channel by 1 and the other color channels by 0, effectively removing them from the equation.

Let's say we wanted to use the filter to remove the red and blue from the image. We can do that with the following matrix.

1  2  3  4  
0 0 0 0 0  0 1 0 0 0   0 0 0 0 0  0 0 0 1 0

The red and blue channels drop out because all of the values in their rows are 0. Here's how the previous example looks using these values for the matrix.

Removing the red and blue channels adds a green cast to the image. Another way to add a green cast is to increase the values in the green row. For example this next matrix of values increases the multiplier in the green row to 0.5, even as it leaves the red and blue channels "unfiltered."

1  2  3  4  
1 0 0 0 0  0 1 0 0 0.5   0 0 1 0 0  0 0 0 1 0

The result again adds a green cast to the image, though not quite the same one as the previous example.

Of course you can adjust any of the values in the matrix and achieve different results. Here's a more subtle change using the matrix.

1  2  3  4  
1     0.75  0     0  0  0     1     0.75  0  0   0.75  0     1     0  0  0     0     0     1  0

I added a little (0.75) more blue to the red and green channels and I added a little more red to the blue channel. The result changes the red and yellow flowers in the original image to purple and pinky peach followers.

It took me a little while to really understand how the matrix transformation works and I found that experimenting with different values proved helped the most.

Take my example and play around with it. Replace my image with one of your own and adjust the values in each row of the matrix one at a time to see what happens and to gain a feel for what will happen when you increase or decrease the numbers. Then change the values in another row.

Also take a look at this article by Una Cravats from A List Apart. Una presents a lot more examples than I have here and her article is the one that helped me figure out how these matrices work.

The type Attribute

I mentioned that matrix is only one possible value for the type attribute. The others are saturate, hueRotate, and luminanceToAlpha.

1  
type = "matrix | saturate | hueRotate | luminanceToAlpha"

While these other types do use matrices behind the scenes to make changes, you don't need to work with the matrix. Instead these three types work as shortcuts that alter the matrix that does the work. If you'd like to see the matrices that perform the operations you can have a look in the spec.

type="saturate"

The value for saturate is a number between 0.0 and 1.0 with a higher number leading to a greater saturation. The default, if not set, is 1.0 or full saturation.

Here's an example that uses saturate as the type. I set the value of the values attribute (note it's still plural) to 0.25.

1  2  3  4  5  6  7  8  9  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="saturate" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">        <feColorMatrix type="saturate" values="0.25"/>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#saturate)" />  </svg>

The result is a washed out or desaturated version of the image.

type="hueRotate"

The type hueRotate will change the hue by the amount you set. The values will be a number of degrees, though you don't need to include the units. The default is 0 or no change.

Here I set type to hueRotate and values to 225.

1  2  3  4  5  6  7  8  9  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="hue" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">        <feColorMatrix type="hueRotate" values="225"/>     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#hue)" />  </svg>

Negative numbers are fine by the way and instead of 225 I could have used –135 and achieved the same result. Notice the grays haven't changed, but the yellows and reds have become shades of purple and blue.

type="luminanceToAlpha"

The final type, luminanceToAlpha, takes no value. It creates an alpha channel based on the luminance (brightness, lightness) of the color.

1  2  3  4  5  6  7  8  9  
<svg width="100%" height="495" style="outline: 1px solid red">   <defs>     <filter id="luminance" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%">        <feColorMatrix type="luminanceToAlpha" />     </filter>   </defs>     <image xlink:href="http://www.vanseodesign.com/blog/wp-content/uploads/2013/09/strawberry-fields.jpg" width="660" height="495" filter="url(#luminance)" />  </svg>

Compare the result of the luminanceToAlpha type with the original image. Notice that where the original image is darker the result of the luminanceToAlpha conversion is lighter and vice versa. That's probably the opposite of what you might have expected. I know it was for me.

What's actually happening is the lighter the color the less transparency is given to the filtered image. It kind of looks like a film negative.

Closing Thoughts

The feColorMatrix primitive offers a number of ways to modify the color of an image. You can work with the matrix itself for the most control or you can choose one of the other types to adjust the hue or saturation or to produce an alpha channel based on the luminance of the image.

You may have noticed there wasn't a type to adjust the third fundamental of color, lightness. Next week I'll talk about feComponentTransfer, which provides additional ways to modify the color of an image, including its lightness.

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

Wednesday 4 January 2017

My Goals For 2017—It’s All About Creating Assets - Vanseo Design

My Goals For 2017—It’s All About Creating Assets - Vanseo Design

My Goals For 2017—It’s All About Creating Assets

Posted: 03 Jan 2017 05:30 AM PST

Happy New Year. I trust you used yesterday to adjust to the change in calendar and the start of another work week. My thoughts in early January tend to be focused on the year to come and what I'd like to accomplish.

Last week it was still 2016 and I took a look back at the goals I set a year ago. I reviewed what turned out to be a lack of success in completing my stated goals, but a year in which I did complete the one goal that was most important to me. As you can no doubt guess, today I'd like to look ahead and share my goals for 2017.

If you're interested in the goals I've set in the past you can look through any of my previous goal setting posts.

If you want to see how many goals I complete in previous years you can have a look at the list of goal review posts I added to last week's post.

Thoughts and Goals for 2017

If I sum up my goals for the coming year with a single word, that word would be assets. If I could use two words I'd go with creative assets. For the last couple of years I've been transitioning my business from someone who sold web design and development services I provided to someone who sells digital products I create.

One way to succeed with this type of business comes down to a numbers game. Having more to sell typically increases your total revenue. It's kind of obvious, but it does require that I write a lot more books than I've written.

I currently sell a book about Design Fundamentals here on the site and a book about CSS Animation through Adobe Press. I need to sell more books than those two if I expect to earn a decent living.

Two other important words for this year are time and priority. Time, because I'm sure I'll want to do more than time will allow and priority because I'll need to use my time as best as I can.

With that said, here are my goals for 2017.

  • VanseoDesign.com
    • Publish More Books
    • Make Use of Content Audit
    • Site Improvements
  • Small-Business-Forum.net
    • Make a Decision
  • StevenBradley.me
    • Launch Site
    • Publish Regularly
    • Continue Writing Fiction

As I did last year, I organized my goals under my three domains, though I dropped the general category this year. I have seven goals in total, which means the math won't be as nice and neat when I grade myself at the end of the year.

Keep in mind this year I need to focus on creating more assets and everything I do is meant to contribute to that one overarching goal.

VanseoDesign.com

My goals for this site are mostly the same as they were last year. That's a result of having not finished any of them in 2016. Too bad I didn't list procrastinate as a goal last year. I'd have nailed it.

Publish More Books

This is an absolute must this year. When I stopped offering design and development services last January I removed a significant source of my income. At the moment, I sell a book here on the site and I run a single AdSense ad. Neither is leading to an early retirement and so I need to do more to bring in revenue. At the very least I need the return to justify the effort.

While I didn't publish any new books last year or the year before, I kind of, sort of, wrote a few. When you string together the posts of many of the series I've published here, they're certainly of book length. I want to take several of those series and treat them as drafts for books, which I can edit and polish throughout the year. I also want rewrite the first section of my book Design Fundamentals and publish a 2nd edition.

One of the things I realized last year was whenever I couldn't find time for a project, it was usually because my time was needed to write something for this site. The weeks in between series helped somewhat, but not enough to free me up for the things that would bring in revenue. I need to find a better balance between the effort and the reward.

I'm not entirely sure what that means. Perhaps a tweak or two to my writing rhythm will be enough. Maybe I'll need to leave two weeks between the end of one series and the start of another. It's possible I'll need a longer break at some point in the year. I really don't know, but I know I need to find a better balance.

Make Use of the Content Audit

One of my goals lat year was to perform a content audit of this site. This year I need to use that audit to help make a few decisions, like what can turn into a book. More generally I want to think about how I can best use what I've already written.

Some of what's here has, no doubt, outlived whatever usefulness it may have had. Some probably needs to be updated. I need to think through how content helps my business and then figure out how to make each piece contribute to the whole.

As I said, I do have to find a healthy balance between the time and effort that goes into the site and the return that comes back out of it. I think seeing all the content together will help me understand how I can best use it.

Ideally I'd like this site to act as a sales force. I want to contribute a realistic amount of new content and have the site work as a sales funnel leading those interested toward the information they'd like to purchase.

The point of the content audit was to help me figure out how what I've already written can help make this happen. The audit is finished and now it's time to use it for other things.

Site Improvements

Some of those other things include improving the site. I'll list a few site improvements (you may recognize them from last year's list), but in all honesty I'm not sure how I'll want to improve the site. A lot will depend on what I find and think about when I look over the content audit spreadsheet.

  • Remove Forum—I decided last year to remove the ghost town I created a few years back when I set up a forum on this site. I think for now it's best to remove it and it's something I'll like do within the next couple of weeks.
  • Improve Books Section—Assuming I do have new books to publish, I'll need a place to tell you about them and that means reworking the Book section of this site to be a section for multiple books and not one lone book.
  • Improve Archives Page—If you've followed my previous goal setting posts, you're probably sick of me listing this as a goal. I don't blame you. I'm sick of listing it too. When I look over the audit I want to think about better ways to organize everything that's here.
  • Improve Navigation—Any reorganization of content will likely mean some tweaks to the navigation. I don't know that I'll need to change much and it's possible I won't need to change the navigation at all, but I'm guessing I'll want to make a few tweaks at the least.

Again, I'll let the audit lead the way with improvements to the site, but odds are I'll want to work on these four things. Hopefully I'll be removing the forum this week or next.

Small-Business-Forum.net

Speaking of forums, I need to decide what to do with my small business forum. That's the decision I need to make. I run a couple of AdSense ads and occasionally sell a banner ad for revenue. Neither amounts to all that much money. They help my pay server costs and other expenses associated with running multiple sites, but that's about it.

I don't spend as much time participating in discussions as I used to, but I do spend a significant amount of time maintaining and moderating the site. The forum used to benefit me by being a good source of leads for my design and development business, but now that I've stopped taking on clients the benefit no longer exists. I have to decide if this forum fits into my overall business plans and if so, how?

In 2017 my only goal for this site is to decide whether to keep it or let someone else take over. I have to weigh my commitment to the site against the amount of money I think I can earn with it and decide if it's worth it to me.

I've been thinking a lot about this forum the last few months and I've gone back and forth with what I want to do. Some days I'm content to just leave it as it is. It does bring in a little money each month after all.

Other days I wonder if the better option for the forum and for me is to let someone else take it over. I need to decide if I'm committed to seeing the site thrive or if someone else with more interest in it than me is the right person to lead it.

My gut is telling me it's probably time to pass the torch, but fear of not having any money makes me want to hang on to what is an asset for me. The question is am I better hanging on to this asset or will letting it go allow me to use my time to create more valuable assets.

StevenBradley.me

This domain is my top priority. My long term goal is write and sell stories and that's what this site is ultimately for. Last year my major goal was to develop a new writing rhythm and while I didn't mention it at the time, a large part of the new rhythm was about writing fiction. It also included sending out a newsletter every few weeks. This year I want to build on what I started in 2016.

Launch Site

I wanted to launch this site last year, but I didn't think I'd be able to publish to the site regularly. This year I want to give it a shot. I mentioned last week that I'm mostly finished with a design and I built a prototype.

I need to schedule a few blocks of time so I can make the finishing tweaks to the design and then set aside more time to develop a WordPress theme. I may also investigate other content management systems or develop the site from scratch.

I also need to write the usual site pages and I'd like to have at least a few weeks of content written in advance.

Publish Regularly

It doesn't make sense to launch the site unless I can commit to writing regularly. I think I can realistically publish something every other week once the site is live.

That will be in addition to continuing to send a newsletter every few weeks. Writing the newsletter last year helped me figure out what I want to publish on the site and how the newsletter will change when I am writing for the site.

Ultimately this site is meant to be a pace where I can talk about all things related to being creative and to a lesser extent, being productive. In time I hope to share stories I write and photographs I make. Assuming I meet this goal in 2017, posting more stories and photographs might be goals for 2018.

Continue Writing Fiction

Last year I wrote a couple of short stories and then I started working on a novel. I finished a first draft and I'm about to analyze it so I can rewrite and hopefully improve it.

I started a fiction writing process based on the one I use to write non-fiction. I've talked about it a few times in the past, but it basically involves a series of steps.

  • Generate ideas
  • Plan and Outline
  • Write a draft
  • Edit the draft
  • Add a final polish

The writing and editing steps can repeat multiple times and I find they repeat more often when writing fiction than non-fiction. It means tweaking my process a little. Instead of taking one piece of non-fiction through every step before moving on to the next piece, with fiction there can be longer gaps of time between steps.

For me that means working on multiple stories at the same time. While waiting to edit a draft of one story, I might write or plan another. Other times I might spend a week looking through ideas and see where they could lead as I slowly build an outline for a potential story.

My goal is to build on what I did last year and improve my fiction writing process so I can write more efficiently.

Closing Thoughts

I'm not quite sure what to expect from 2017. I have a few decisions to make about what my business should look like when I set goals for 2018 and I imagine I'll do a lot of thinking over the next month or two and then refine my thoughts throughout the year. You can probably tell my focus is shifting from year's past.

I want this year to be focussed mainly on creating more assets, specifically books, which I want to offer for sale both here and through the usual online stores like Amazon and iBooks.

From what I've learned a certain amount of success when it comes to writing books is simply a numbers game. More books typically means more sales and I think the best step I can take is to offer as many books as I can as soon as I can. Toward that end I want to find a way to make use of what I've written over the last dozen or so years while also writing new things this year.

How about you? Do you set goals for the year? Do you review your goals at the end of the year? You can tell I think the practice a worthwhile exercise. It keeps me thinking about my business and helps guide my direction. If you do set goals, what are they? What do you want to accomplish before the year is out?

Happy 2017! I hope it's a good one for all of us.

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

Subscribe to: Posts (Atom)