DrawingML Subject: Shape Properties & Effects

Shape Properties & Effects

DrawingML

Shape Overview

spTree

nvGrpSpPr grpSpPr sp

nvSpPr spPr

style txBody

xfrm geo

fillProperties lineProperties

effectProperties scene3D

sp3D bwMode

The file covers these areas

The file covers these areas

Fill Properties

• One of:– <a:noFill>– <a:solidFill> (Solid Fill)– <a:gradFill> (Gradient Fill)– <a:blipFill> (Blip Fill)– <a:pattFill> (Pattern Fill)– <a:grpFill> (Group Fill)

• Subsets of fills used in different locations– Example: Line Fills don’t permit blipFill or grpFill

Solid FillSolid Fill

Gradient FillGradient Fill

Blip FillBlip Fill

Pattern FillPattern Fill

Shape 1 Shape 2

Solid Fills<a:solidFill>

• Specifies a single color• Determined by color

model


Color Models

• scrgbClr– R,G,B values specified in 0-100%

• srgbClr– R,G,B values specified as 2 hex digits

• hslClr– Hue, Sat, Lum– Uses perceptual gamma of 2.2

• sysClr– System Colors

• schemeClr– Theme Colors

• prstClr– Preset Color

Color Transforms

• Each Color Model represents a single color• Possible to apply Color Transform to modify a color• Example in context of Solid Fill

Alpha modifies base RGB color with a transparency

Color Transforms• <a:tint>

– Lighter Version of Color, 10% tint is 10% input color with 90% white• <a:shade>

– Darker Version of Color, 10% shade is 10% input color with 90% black• <a:comp>

– Complement of Color• <a:inv>

– Inverse of Color• <a:gray>

– Yields grayscale of color• <a:alpha> (alphaOff, alphaMod)

– Color with specified opacity• <a:hue> (hueOff, hueMod)• <a:sat> (satOff, satMod)• <a:lum> (lumOff, lumMod)• <a:red> (redOff, redMod)• <a:green> (greenOff, greenMod)• <a:blue> (blueOff, blueMod)

xxxOff (Offset)

A 10% offset increases a 50% xxx to 60%

xxxMod (Modulate)

A 200% xxxModulate makes a color twice as xxx as before

xxxOff (Offset)

A 10% offset increases a 50% xxx to 60%

xxxMod (Modulate)

A 200% xxxModulate makes a color twice as xxx as before

Gradient Fills<a:gradFill>

• Consists of– Gradient Stop List

• List of locations/colors• “pos” specified as % (e.g.

69000 = 69%)• Standard Color Model

– Shade Properties– Attributes

• “flip” - Whether/how to flip a tile region when using it to fill a larger fill region

– “none”– “x”– “y”– “xy”

• “rotWithShape” (boolean) – Whether fill rotates with shape

Gradient Stop ListGradient Stop List


Shade Properties

• Specifies kind of gradient fill

• Linear <a:lin>– Two attributes– “ang” (Angle measured clockwise,

Direction of color change)– “scaled” (Boolean true/false, Does

gradient angle scale with fill region?)

• Path <a:path>– Gradient follows defined path– Easiest to understand by example– <a:fillToRect> (optional)

• Used to define focus rectangle for center shade

– “path” attribute• “shape”• “circle”• “rect”

Shade PropertiesShade Properties

Linear

Examples for Path on next slide

Examples for Path on next slide

ShapeRectCircle

Shade Properties - Path<a:path>

Blip Fills<a:blipFill>

• BLIP (Binary Large Image or Picture)

• Consists of– Blip Reference

• Attributes• “r:embed” (Embedded Ref Id)• “r:link” (Linked Ref Id)

– <a:srcRect> Source Rect• For Cropped Pictures -

Specifies rect of portion to use– Fill Mode Properties– Attributes

• “dpi” - Dots per inch used to calc size of BLIP. If not present, DPI in blip used.

• “rotWithShape” - Specifies if fill rotates with shape

Blip FillBlip Fill

Blip Reference<a:blip>

• Consists of– Blip Reference

• Attributes• “r:embed” (Embedded Ref Id)• “r:link” (Linked Ref Id)

– Blip Effects• Alpha{BiLevel, Ceiling, Floor, Inv, Mod,

ModFix, Repl)• biLevel• Blur• clrChange• clrRepl• Duotone• fillOverlay• Grayscl• Hsl• Lum• Tint

– Compression• Specify Level of compression• “email”, “screen”, “print”, “hqprint”, “none”

Fill Mode Properties

• <a:tile>– Tiles Picture to fill Shape– Attributes

• Tx,ty (additional horiz/vertical offset after alignment)

• Sx,sy (amount to horiz/vertical scale srcRect)

• Flip• Algn (where to align first tile

with respect to shape)

• <a:stretch>– fillRect (relative to path

bounds, srcRect scaled to fit this rect)

Pattern Fills<a:pattFill>

• Legacy for O11• Consists of

– <a:fgColor> Foreground Color– <a:bgColor> Background Color– <a:prst> Preset Pattern Value

• “pct{5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90}

• “horiz, “vert”• “lt{Horiz, Vert}”• Dk{Horiz, Vert}”• Nar{Horiz, Vert}”• <many more options>

Group Fills<a:grpFill>

• Inherit Fill properties from the group

• No attributes, no subtags

Line Properties<a:ln>

• Consists of:– Line Fill Properties– Line Dash Properties– Line Join Properties– headEnd/tailEnd– Attributes

• “w” line width• “cap” line ends• “cmpd” compound line type• “algn” pen alignment

• Note that lines properties apply to shapes– Not just for definition of line segments

Line Fill Properties

• A subset of general Fill Properties:– <a:noFill>– <a:solidFill> (Solid Fill)– <a:gradFill> (Gradient Fill)– <a:blipFill> (Blip Fill)– <a:pattFill> (Pattern Fill)– <a:grpFill> (Group Fill)



Pattern FillPattern Fill

Line Dash Properties

• Dash Properties defined as Presets or Dash Stop Lists

• <a:prstDash> (Presets)– Solid– Dot– Dash– lgDash– dashDot– lgDashDot– lgDashDotDot– sysDash– sysDot– sysDashDot– sysDashDotDot

• <a:custDash> (Dash Stop List)

Dash Stop Lists<a:custDash>

• Legacy O11• List of <a:ds>• <a:ds> (Dash Stop) consists of:

– Attributes• “d” length of dash relative to line width• “sp” length of space relative to line width

Line Join Properties

• One of:– <a:round>– <a:bevel>– <a:miter>

• Attributes– “lim” (limits the amount by which lines can be extended to form a join)– Potential case of nearly parallel lines

RoundRound BevelBevel MiterMiter

Notice edges of rectangles to illustrate line join behavior

Head/Tail End Properties<a:headEnd><a:tailEnd>

• Default is none• Attributes

– “type”• None• Triangle• Stealth• Diamond• Oval• arrow

– “w” [one of “sm”, “med”, “lg”]• Width of line end to width of line

– “len” [one of “sm”, “med”, “lg”]• Length of end % of line width

Head End

Tail End

Line Attributes

– Attributes• “w” line width• “cap” line ends

– “rnd” (round)– “sq” (square)– “flat”

• “cmpd” compound line type– sng (simple)– dbl (double)– thickThin– ThinThick– tri

• “algn” pen alignment

Effects List<a:effectLst>

• List of effects– Each added

onto another• List may contain

– <a:blur>– <a:fillOverlay>– <a:glow>– <a:innerShdw>– <a:outerShdw>– <a:prstShdw>– <a:reflection>– <a:softEdge>

Blur Effect<a:blur>

• All color channels, including alpha affected– Attributes

• “rad” radius of blur• “grow” (boolean) should bounds grow when blurring

Shadow Effects (Inner Shadow)<a:innerShdw>

• Contains– Color Choice (i.e. Color Model)

• Attributes– “blurRad” blur radius– “dist” how far to offset the shadow– “dir” direction to offset the shadow

Inner Shadow

Shadow Effects (Outer)<a:outerShdw>


• Attributes– “blurRad” blur radius– “dist” how far to offset the shadow– “dir” direction to offset the shadow– “sx”, “sy” horiz/vert scale factors– “kx”, “ky” horiz/vert skew angles– “algn” shadow alignment

• Alignment happens first• Effectively sets origin for scale, skew,

offset– “rotWithShape” (boolean)

• Rotate shadow with shape

Outer ShadowOuter Shadow

Preset Shadows<a:prstShdw>


• Attributes– “prst”

• “Shdw1”• “Shdw2”• …• “Shdw19”• “Shdw20”

– “dist” Distance to offset shadow– “dir” Direction to offset shadow

Reflection Effect<a:reflection>

• Attributes– “blurRad” Blur Radius– “stA” (Start Alpha) starting reflection opacity– “stPos” start position along gradient ramp of start alpha value– “endA” (End Alpha) ending reflection opacity– “endPos” end position along gradient

ramp of end alpha value– “dist” how far to offset reflection– “dir” Direction to offset reflection– “fadeDir” direction of alpha gradient

ramp relative to shape itself– “sx”, “sy” horiz/vert scale factors– “kx”, “ky” horiz/vert skew angles– “algn” reflection alignment– “rotWithShape” (boolean)

• Rotate reflection with shape

Reflection Effect

Soft Edge Effect<a:softEdge>

• Attributes– “rad” radius of blur to apply to

edges

Soft Edge Effect

Glow Effect<a:glow>

• Attributes– “rad” radius of blur to apply to

edges

Soft Edge Effect

Fill Overlay Effect<a:filloverlay>

• Consists of– Fill Property

• Attributes– “blend” Blend Mode

• How to Blend Fill with base Effect• “over” Overlay• “mult” Multiply• “screen”• “darken”• “lighten”

Disclaimer

This presentation is for informational purposes only, and should not be relied upon as a substitute or replacement for Microsoft formal file format documentation, which is available at the following website: https://msdn.microsoft.com/en-us/library/cc313118(v=office.12).aspx. Any views or opinions presented in this material are solely those of the author and do not necessarily represent those of Microsoft. Microsoft disclaims all liability for mistakes or inaccuracies in this presentation.

https://msdn.microsoft.com/en-us/library/cc313118(v=office.12).aspx

https://msdn.microsoft.com/en-us/library/cc313118(v=office.12).aspx

Software

DrawingML Subject: Shape Properties & Effects