For instance, elements that would normally look like this

Will now look like this

Hatching Effect is a simple multi-texture sampler that takes the luminance level of the implicit input and uses thresholds to determine which tone texture to use.  The Pixel Shader use three texture inputs: LightToneTexture, MiddleToneTexture, and DarkToneTextur and select either one of them based on the luminance level.

The thresholds can be customized in Blend V3 when the effect is selected from the object tree.

Threshold control allows you to increase or decrease the dominance of a given tone texture. For instance, the image below, the background contains too many hatching.   By tweaking the thresholds, we can achieve better results.

You can also supply your own tone texture to the shader. For instance, if you want to create a “thermal look” to you comps, you can assign a blue image brush to DarkToneTexture, yellow image brush to MiddleToneTexture and red image brush to the LightToneTexture. The screenshot below shows how the image would look like.

To install the  Effect Pixel Shader on your machine, simply download the Msi from the link below and double click to install.

Hatching Effect Setup file

Next time you boot up Blend 3, the effect should automatically show up in your asset tools under the “Effect” category. If you click on the Effect category, HatchingEffect will show up in the list (see image below).  To apply the Hatching effect to an element, either drag the effect on top of the element in the artboard or drag the effect on top of the element in the object tree.

The source codes for the shader can be downloaded from the link below

Hatching Effect Source Codes

On my next post, I’ll talk more about the process of authoring Shaders project that compiles one shader cs file for both WPF and Silverlight and then building the setup and deployment project so that the effect gets registered properly into Blend V3’s asset tool.

Stay tuned.

The first post merely consisted of introducing myself and setting up the blog system. I’m using WordPress. WordPress it’s easy to use, to manage and to customize. WordPress is famous for providing several themes to choose from, but I wanted to create my own theme. After all, this site is all about me creating and designing and expressing my experience.

Since WordPress uses CSS layout for most of the customization, It’s fairly straightforward to customize style.css, the CSS file that WordPress provides in a theme and contains all the necessary selectors.

As usual, my typical technique for customizing a dynamic page ( PHP in this case ) is to take the source right from the browser and pasting it into a new static HTML document that you save to the root of your site.

For this exercise, I decided to compare the CSS capabilities between Expression Web and Dreamweaver CS3. In case you didn’t know yet, I used to work for FrontPage and Expression Web for 7 years before I switched to Expression Design last year. So using CSS layout using Expression Web is a piece of cake for me. Nothing beat Expression Web at the time it shipped. So I was curious to know if Dreamweaver managed to catch up on Expression Web in term of CSS capabilities. Let’s find out.

Before I got deeper, let me explain in my opinion was constitutes a good CSS editor.

• Ability to display and managed all the styles a given document can potentially use
• Ability to display the cascade of rules for a particular tag.
• Ability to give a summary of all the applied style for a given tag
• Ability to display the list of rules a given selector has defined
• Ability to edit and modify styles at the source of where the style is declared (never override as an inline style)

The strength of Expression Web is his capability of supporting all the bullets above.

For instance, Above is the screenshot from Expression Web currently editing the tag <div class=”post” id=”post-3″>

• You can see on the right panel all the available styles from style.css.
• The left panel shows the cascade list of style (the applied rules).
• The Summary button allows to display all the style currently being applied to the tag, and most importantly the source and any conflicts.
• If you un-click the summary button, the CSS property grid displays the current properties for a given selected style in the “Applied Rules” section.

Above is the screen show of Dreamweaver also editing the tag <div class=”post” id=”post-3″>

• “All” and “Current” is what allows you to view all the styles or the current style from the selection. As oppose to Expression Web, which chooses to display all the style into his own panel.

• The summary for selection is the equivalent to pressing the summary button in Expression Web. The nice thing about DW is that the summary is “sticky”, always there. Expression Web will get out of summary mode if you click on one of the applied rules

DreamWeaver allows you to only display the applied properties. In Expression Web, the applied properties will be bold blue. The things I like about Dreamweaver compared to Expression Web is the fact that the summary is sticky. You can select a style in the summary view, which will highlight the actual rule the property comes from in the list of cascade rules (Expression Web will also do that) and finally display the list of CSS properties for that particular rule. Expression Web cannot do that. The only way to see the properties is to hover the rule and wait for the tooltip to display the properties.

The CSS functionality available in both product is what makes customization of the CSS style sheet so easy. By putting the IP inside a particular tag, you can clearly see the CSS rules being applied, you can locate where it comes from and you can finally change them in place. Both Expression Web and DreamWeaver CS3 does a fairly good job. However, Expression Web was the first to come out with all those cool features. DreamWeaver had the change to perfect and “copy” literally the functionality from Expression Web. That said, because the WYSIWYG is much better in Expression Web, I preferred using Expression Web. That’s said, Dreamweaver CS3 did beef up their CSS functionality.

I did use Expression Design SP1 a little bit for creating the gradient for the header title. But that’s as far as I went for actually Design. I’ll leave that up for another post:)

Next time, expect to see the Logo of Digital Epiphania