drawingml subject: shape properties & effects
TRANSCRIPT
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
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
Gradient FillGradient Fill
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
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>
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)
Solid FillSolid Fill
Gradient FillGradient 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>
• Contains– Color Choice (i.e. Color Model)
• 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>
• Contains– Color Choice (i.e. Color Model)
• 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
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.