KeynotePro TutorialsThe latest Tutorials from KeynotePro.comhttps://keynotepro.com/feeds/Tutorials/Copyright 2003 - 2024 KeynotePro. All Rights Reserved.2024-11-12T15:41:53-05:00KeynotePro.comtag:keynotepro.com,2024://17.1133Transforming the Fills Palette2024-11-10T10:33:45-05:002024-11-12T15:41:53-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/Support/FillsPalette/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><link href="/css/KNPNXT-LibraryViews.css" rel="stylesheet" type="text/css"> <p class="articleBodyLede">If you’re dialing in a fully-customized theme or template starter in Keynote or Pages, you can adapt your palette into the Color, Gradient and Image Fills Palette to make it easier to apply your color selections consistently throughout your file.</p> <p>In previous tutorials, we've taken a look at re-defining Shape, Text, and other styles associated with a file's core Theme elements. If this is your first time delving into this sort of customization, our <a href="/Support/Topic/Customization/" class="hinted">Make it Your Own</a> tutorial provides a good bit of additional background information on the basics.</p> <p>Here, though, we’re going to zoom in on one particular element of that process to better understand how you can integrate your accent colors into the Fills UI components, how the reference palette is structured, and how to make quick work of re-defining the entire palette through a custom provisioning model designed to streamline the process.</p> <h2>The Fills Palette</h2> <p>If we return to the My Custom Theme file we were working on in the Styles tutorial and select one of the shapes we used to proxy the Shape Style settings, you’ll see the Color Fills UI by hovering over the assigned color in the Style &gt; Fill inspector and clicking the arrow to expand the palette:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-FillMenus');"> <div id="Highlight-FillMenus" data-group="fillMenus" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure1.jpg" alt="Color Fills Menu exposed via the current Color Fill"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-FillMenus-Caption">Hover the currently-applied Color Fill and click the arrow to expose the basic Color Fills embedded in your working file.</div></aside> </div> <p class="articleImageCaption">The Color Fills menu is exposed by clicking on the active Color Fill.</p> <p>As the style is using a Color Fill in this case, only solid-color fills are shown in that menu – but you can access the extended Color, Gradient and Image Fills defined for the file by hovering the Fill preview shown right above and clicking the arrow to expand it:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-FillMenus1');"> <div id="Highlight-FillMenus1" data-group="fillMenus" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure2.jpg" alt="The expanded Color, Gradient, and Image Fills palette exposed via the parent Fill preview"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-FillMenus1-Caption">Hover the parent-level Fill and click to expose the expanded Color, Gradient, and Image Fills menu.</div></aside> </div> <p class="articleImageCaption">The expanded Color, Gradient, and Image Fills menu is exposed by clicking the parent-level preview.</p> <p>The Color, Gradient, and Image fills are all still toned to the original palette we started with in this case (the original Comfrey palette from OM X), but you’ll notice we have a 4:6 grid of tints/shades of the original accent colors, plus another 5 gray-scale tints in the Color Fills section, with Gradient and Image Fills following the same color pattern below.</p> <p>In Keynote, these aren't generated automatically – each of the rectangles in the palette can be re-styled using specific Color/Gradient/Image Fill settings via drag-replacement, and don’t inherit from any Shape or Line Style re-assignments you may have already updated – so you can exert a lot of control in terms of specific color assignments or how the palette is modeled as a result.</p> <p>That said, because this isn't automated, you’ll need to go Fill-by-Fill to set this menu, so give yourself a few minutes to get it built in your working file.</p> <h2>A Provisioning Jumpstart</h2> <p>To make this process a bit easier, we’re going to use a Color Provisioning Starter slide, which is similar to a setup we use internally for branching the various color-driven themes into their different variants during production:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter');"> <div id="Highlight-ColorStarter" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure3.jpg" alt="Open the Color Provisioning Starter slide to help speed things up."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter-Caption">We'll use a Color Provisioning Starter slide to make it easier to model our revised Fills palette.</div></aside> </div> <p class="articleImageCaption">The downloadable Color Provisioning Starter slide is designed to make this easier.</p> <p>This is a single-slide work file that you’ll be able to use as a Copy source for your working file when it’s time to define each of those palette items in the Fills menu, and can be downloaded here:</p> <aside style="display: none;"> <div class="metaReqs vStack " style="width: 100%; margin-bottom: 36px;"> <div id="desktopTrialDownloads" class="mobileFiles"> <div class="fileItem mobile hStack spaceStk centerVS"> <div> <div class="fileItemDisplayName">Color Provisioning Starter (SD)</div> <div class="reqsDetail">Keynote File (.key)</div> </div> <div class="fileItemButton"><button id="" class="prefToggleTrigger" style="width: unset; margin: 5px 9px 0px 18px;" onclick="queueTrialDownload('mobile','Keynote','file','Keynote Color Provisioning Starter');">Download</button></div> </div> </div> <div id="mobileTrialDownloads"> <div class="vStack mobileFiles"> <div class="resourceGrid" style="grid-template-columns: repeat(1, 1fr); margin-bottom: 6px;"> <div class="hStack centerVS centerHS"> <div><svg id="" class="" style="margin: 10px 7px 3px 0px;"><use xlink:href="#responsive-icon"></use></svg></div> <div class="reqsDetail">Tap Open to begin the filestream, then "Open in Keynote" when prompted:</div> </div> </div> <div class="fileItem mobile vStack"> <div id="" class="fileItemLinkage hStack spaceStk centerVS"> <div> <div class="fileItemDisplayName">Color Provisioning Starter (SD)</div> </div> <div class="fileItemButton"><button id="" class="prefToggleTrigger" style="width: unset; margin: 6px 0px 0px 18px;" onclick="queueTrialDownload('mobile','Keynote','file','Keynote Color Provisioning Starter');">Open</button></div> </div> </div> </div> </div> <div class="resourceGrid" style="grid-template-columns: repeat(1, 1fr); margin-top: 6px;"> <div class="hStack centerVS centerHS"> <div class="reqsDetail">All Downloads subject to the <a href="/Policies/#EULA" class="hinted">KeynotePro End-User License Agreement (EULA)</a></div> </div> </div> </div> <div id="panelShell" class="zoomShell hidden"> <div id="panelContrast" class="zoomContrast vStack centerHS centerVS"> <div class="EULAPanel zoomModal trials vStack centerHS centerVS"> <div class="zoomModalClose"><button type="button" id="zoomModalClose" onclick="collapseAssistivePanel();"><svg id="" class="zoomModalCloseIcon"><use xlink:href="#navClose-icon"></use></svg></button></div> <div class="vStack zoomContents zoomBodyContent"> <div id="assistiveContents" class="zoomBodyScrollable bodyForm"> <div class="itemSectionName">Your Download is Queued:</div> <div class="formSpacer">&nbsp;</div> <div>Please enter a valid email address in the field provided to continue. Alternately, <a href="/Login/" class="hinted">Sign In</a> to skip this step.</div> <div class="formSpacer">&nbsp;</div> <div><input type="text" id="userName" name="userID" aria-label="Email or KeynotePro ID" class="bodyFormInput" placeholder="your@email" autocomplete="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'your@email'" autocapitalize="off" value=""></div> <div id="IDError" class="bodyFormError" style="display: none;"> <div class="bodyErrorDetail">Please enter a valid email address.</div> </div> <div id="userEmailDesc" class="bodyFormDescriptor">Email Address</div> <div class="formSpacer">&nbsp;</div> <div class="hStack"> <div style="margin-right: 9px;"> <label class="switchSmall"> <input type="checkbox" id="trialModalConnect" name="trialModalConnect"> <span class="sliderSmallSub bodyFormSlider"></span> </label> </div> <div class="vStack"> <div class="prefTitle "><b>Stay Connected</b></div> <div class="standardFeatureText ">Subscribe to KeynotePro Connect to receive periodic news on new releases, updates, and subscriber&nbsp;exclusives.</div> </div> </div> <div class="formSpacer">&nbsp;</div> <div id="rcbShell" class="modalActionable modalAActive hStack bodyFormButton" style="margin-bottom: unset; justify-content: center;"><button id="continueButton" class="T2SignOut"><span>Continue</span></button><button id="subButton" class="T2Submitting hidden"><div id="submitPending" class="pendingReturn"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></button></div> <input type="hidden" id="pendingSource" value=""><input type="hidden" id="pendingPlatform" value=""><input type="hidden" id="pendingFormat" value=""><input type="hidden" id="pendingFileStub" value=""><input type="hidden" id="trialLogistics" value="false"> </div> </div> </div> </div> </div> </aside> <script src="https://keynotepro.com/scripts/KNPNXT-Assistive-Panels.js" async=""></script> <script src="https://keynotepro.com/scripts/KNPNXT-Library-FreeDownloads.js" async=""></script> <script src="https://keynotepro.com/Support/pool/includeTrialDLs.js" async=""></script> <p>The file’s built around a Basic White slide – if you’re building toward a different base background color, you’ll want to also set the background color in the Starter to match your target background so you’re seeing everything in the proper context.</p> <p>In Step 1, we’re going to set the highlighted root shapes to our updated Accent Colors: the pseudo-transparency objects in front of the root colors will give us easy sampling points to model our tints &amp; shades around. If you already have specific tints defined as part of your branding guidelines, you can skip this step and map your existing colors to the 4:6 color grid proxies in Step 2.</p> <p>If you've already defined Shape styles in your working file, you can Format &gt; Copy Style from shapes in that file to Paste on the root shapes in the Step 1 row to keep things in sync – we’ll otherwise set the color values of the root shapes one-by-one via the color inspector. Here, I've pasted the Accent shade of the updated Persimmon color we were working with earlier (Shape Style 1 in the build file):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter1');"> <div id="Highlight-ColorStarter1" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure4.jpg" alt="Set the Root Color to preview Shades and Tints in Step 1."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter1-Caption">In the Step 1 Row, set the first Root Color to your working Accent 1 fill to preview Shades and Tints.</div></aside> </div> <p class="articleImageCaption">Set the first Root Color to your first Accent color to preview Shades and Tints.</p> <p>And we immediately have a rough Shades/Tints baseline to start from on that color, which we can sample into the shapes below and dial in. We’ll eventually do the same for the five remaining accents, but for now, let’s walk out what we’re going to be doing around that first color.</p> <p>The 4:6 grid of Tints and Shades can be structured however you like: we’re going to implement a Light &gt; Dark step here, but we could just as easily lead with the primary Accent color above sub-shades below, etc. – it’s totally up to you.</p> <p>Here, I’m going to include the root Accent in the palette, so I’ll set the rectangle in the second row to the same color, so that we can sample a lighter color above it in the menu:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter2');"> <div id="Highlight-ColorStarter2" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure5.jpg" alt="Here, we're including the root color as the second color in the stack."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter2-Caption">We're including the Root color in our eventual palette below a lighter Tint, so we set it on the second Color row under Step 2.</div></aside> </div> <p class="articleImageCaption">We're including the Root color in our Fills, spaced down to allow a Tint above.</p> <p>Now, if we select the rectangle right above, click the color wheel to bring up the color inspector, and then the eyedropper tool from the inspector, we can sample from the bottom half of the chips cast in Row 1 to get an initial lighter Tint:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter3');"> <div id="Highlight-ColorStarter3" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure6.jpg" alt="We'll sample the lighter Tint from the chips created in Step 1."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter3-Caption">Add the lighter Tint to the first row above, sampling from the "chips" above in Step 1.</div></aside> </div> <p class="articleImageCaption">Sample a lighter Tint from the chips created in Step 1 into the row above.</p> <p>Then, for the shapes below, we can select a couple of the darker Shades to complete the Color section of the column in exactly the same manner:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter4');"> <div id="Highlight-ColorStarter4" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure7.jpg" alt="Then darker Shades to the rows below."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter4-Caption">Then, we'll sample two darker Shades into the rows below to round out the first column Colors.</div></aside> </div> <p class="articleImageCaption">Sample two darker Shades into the rows below to round out the first column Colors.</p> <p>We may yet adjust those colors in context of the neighboring accent column, but for now, we have our individual Color shades for the first column. Selecting the rectangle in the Gradient row, you’ll notice we’re doing much the same thing here, but with two colors to define as the Fill selector is set to Gradient Fill. I’m using the root color at top, with a darker shade sampled on the bottom:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter5');"> <div id="Highlight-ColorStarter5" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure8.jpg" alt="Sample two colors for the Gradient row."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter5-Caption">Next, we'll sample 2 colors for the Gradient row – our Root accent plus a darker shade here.</div></aside> </div> <p class="articleImageCaption">Sample two colors to create the associated Gradient in the row below.</p> <p>And finally the Image Row. Here, you’ll notice this is an Advanced Image Fill (the default “paper” texture from OM X), set to Tile, which is Tinted with a transparent color. If we sample the root accent color, it will shift back to 100% Opacity at the bottom of the color inspector: we’ll need to pull the Opacity down (in the color inspector, *not* for the object itself) to find a good balance between texture and color. A little goes a long way here, depending on your texture/color combination – I’m going with 75% Opacity here to keep it as close as possible to the root color while still allowing a bit of the texture to show through:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter6');"> <div id="Highlight-ColorStarter6" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure9.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure9-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure9.jpg" alt="Set a mix color for the Image Fill and adjust the Opacity."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter6-Caption">Now, bring the root Accent color to the Image Fill, and reduce the Opacity to mix with the texture Image.</div></aside> </div> <p class="articleImageCaption">Set a mix color for the Image Fill and adjust the Opacity to blend.</p> <p>Again, we may tweak any of these once we have a bit more of the palette modeled out – for now, we’re going to repeat those steps across the five remaining columns, just sampling in the same relative pattern of Light &gt; Dark for each one and setting the same Gradient / Image options per color, which gives us the following:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter7');"> <div id="Highlight-ColorStarter7" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure10.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure10-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure10.jpg" alt="Repeat for the remaining accent colors to build a full 6-column palette."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter7-Caption">Repeat that process for the remaining 5 columns to build a full palette source.</div></aside> </div> <p class="articleImageCaption">Repeat that process for the remaining 5 columns to build a full palette source.</p> <p>Pretty good starting point – in a production setting, I’d tend bump the darkest Color row by 3-5% (via HSB adjustment, as we did before with the Accent colors) so it’s not such a harsh step, but this will work well enough to get us to the actual integration into the Fills Menu in the next step.</p> <h2>Redefining the Fills Menu</h2> <p>From here, we can drag-select all of the Color, Gradient, and Image rectangles on our Starter slide (everything below the number 2) and Copy: return to our working Custom Theme file from before, add a Blank (or White) slide, and Paste to bring the objects in. Ignore any Locked objects you happen to drag across on the Starter slide: they won’t be included in the Paste.</p> <p>To replace the items in the Fills palette, we’re going to drag each item’s fill to the corresponding spot on the palette to Replace the existing fill with our new one. Select the first, lightest rectangle in the first column, expose the extended Fills palette, and Drag the Current Fill over to highlight and then replace the corresponding item in the palette:</p> <video class="lazyVid lightVid" preload="none" autoplay="" muted="" loop="" playsinline="" poster="/images/spacers/slugs-Blog_16x9.png"><source src="" data-src="/images/blog/pool/support/FillsPalette/FillsPalette-DragReplace-720p.mp4" type="video/mp4">Your Browser does not support Video.</video> <video class="lazyVid darkVid" preload="none" autoplay="" muted="" loop="" playsinline="" poster="/images/spacers/slugs-Blog_16x9-D.png"><source src="" data-src="/images/blog/pool/support/FillsPalette/FillsPalette-DragReplace-720p-D.mp4" type="video/mp4">Your Browser does not support Video.</video> <p class="articleImageCaption">Drag the applied fill to replace the equivalent object in the palette.</p> <p>Repeat that for each of the rectangles on the slide, dragging the fill contents to the appropriate rectangle in the palette. Gradient Fills will only apply to the Gradient row, and likewise with Image Fills. We’re leaving the default Gray-scale objects untouched here (and generally), but if you’d like to specify custom values for those as well you can.</p> <p>Once you’ve hit the last rectangle, your Fills palette should be completely in sync with your updated Accent colors in your build file:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-FinalPalette');"> <div id="Highlight-FinalPalette" data-group="finalPalette" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure11.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure11-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure11.jpg" alt="Repeat for each of the rectangles to replace the original palette."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-FinalPalette-Caption">Repeat that for each of the proxy shapes to redefine the entire palette in your build file.</div></aside> </div> <p class="articleImageCaption">Repeat that for each of the proxy shapes to redefine the entire palette in your build file.</p> <p>And you’re done. If you think you might make changes to the palette at some point in the future, you can save that slide with your primary build file – just bear in mind that your updates will only be available in new files generated from your updated theme or template (unless you re-apply the theme).</p> <h2 class="articleSupportingTitle articleFoot">Additional Resources</h2> <ul><li><a href="/Support/Topic/Customization/" class="appExternal hinted">Recoloring Shape-based KeynotePro Themes in Keynote 6+</a></li></ul> ]]>tag:keynotepro.com,2024://10.0100Make it Your Own2024-01-01T00:00:00-05:002024-11-11T07:31:16-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/Support/Customization101/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><svg style="display: none;"> <symbol id="autobundle-icon" viewBox="0 0 36 36"> <path d="M15.05,5.47c1.83,0,3.32,1.48,3.32,3.32v8.84h8.84c1.83,0,3.32,1.48,3.32,3.32v7.74c0,1.83-1.48,3.32-3.32,3.32H7.32c-1.83,0-3.32-1.48-3.32-3.32V8.79c0-1.83,1.48-3.32,3.32-3.32h7.74ZM16.16,19.84H6.21v8.84c0,.61.5,1.11,1.11,1.11h8.84s0-9.95,0-9.95ZM27.21,19.84h-8.84v9.95h8.84c.61,0,1.11-.49,1.11-1.11v-7.74c0-.61-.49-1.11-1.11-1.11ZM15.05,7.68h-7.74c-.61,0-1.11.49-1.11,1.11v8.84h9.95v-8.84c0-.61-.49-1.11-1.11-1.11ZM25.95,4.01h.15c.55-.01,1.02.4,1.09.94v.15s.01,3.68.01,3.68h3.68c.55,0,1.02.41,1.09.95v.15c.01.55-.4,1.02-.94,1.09h-.15s-3.68.01-3.68.01v3.68c0,.55-.41,1.02-.95,1.09h-.15c-.55.01-1.02-.4-1.09-.94v-.15s-.01-3.68-.01-3.68h-3.68c-.55,0-1.02-.41-1.09-.95v-.15c-.01-.55.4-1.02.94-1.09h.15s3.68-.01,3.68-.01v-3.68c0-.55.41-1.02.95-1.09Z"></path> </symbol> <symbol id="saveEdit-icon" viewBox="0 0 36 36"> <path d="M7.34,3c-2.4,0-4.34,1.94-4.34,4.34v19.74c0,2.4,1.94,4.34,4.34,4.34h6.71c-.01-.32.02-.63.1-.94l.36-1.43h-4.4v-8.29c0-.65.53-1.18,1.18-1.18h10.43l2.27-2.27c-.28-.07-.56-.1-.85-.1h-11.84c-1.96,0-3.55,1.59-3.55,3.55v8.29h-.39c-1.09,0-1.97-.88-1.97-1.97V7.34c0-1.09.88-1.97,1.97-1.97h1.97v4.34c0,1.96,1.59,3.55,3.55,3.55h7.11c1.96,0,3.55-1.59,3.55-3.55v-4.31c.57.09,1.09.36,1.5.77l3.21,3.21c.52.52.81,1.22.81,1.95v2.72c.11,0,.22-.01.34-.01h0c.69,0,1.38.14,2.03.41v-3.12c0-1.36-.54-2.67-1.5-3.63l-3.21-3.21c-.96-.96-2.27-1.5-3.63-1.5H7.34ZM11.68,9.71v-4.34h9.47v4.34c0,.65-.53,1.18-1.18,1.18h-7.11c-.65,0-1.18-.53-1.18-1.18h0ZM29.39,15.63h0c-.92,0-1.85.35-2.55,1.06l-9.32,9.32c-.54.54-.93,1.22-1.12,1.97l-.72,2.89c-.23.92.33,1.85,1.25,2.08.27.07.56.07.83,0l2.89-.72c.75-.19,1.43-.57,1.97-1.12l9.32-9.32c1.41-1.41,1.41-3.69,0-5.1-.68-.68-1.6-1.06-2.55-1.06Z"></path> </symbol> </svg> <div class="bodyFlexBoard flowPrint reverseMobile"> <div class="formLede "> <div class=""> <div class="bodyEyebrow hStack centerVS"><div><svg class="sectionEyebrow-icon" style="display: none;"><use xlink:href="#list-icon"></use></svg></div><div>In this Guide:</div></div> <div class="ledeListWrapper slim"> <script src="https://keynotepro.com/Support/pool/customization101.js" defer=""></script> <ul class="ledeList"> <li class="jumpSetStage"><a class="internal" aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> </div> </div> </div> <div class="articleBody articleLedeBodyXL"> <p class="articleBodyLede ">Thanks to the Style Palettes in Keynote and Pages, it’s incredibly easy to transform one of our shape-based themes or templates from it’s stock, default state to a more unique blend of color, type or effects more suited to your own personal&nbsp;tastes.</p> <p>If you have specific brand guidelines you need to match on a day-to-day basis, for instance, making a theme-wide change to fit defined color or typeface specifications is a straightforward process in modern versions of Keynote &amp; Pages, provided your theme or template is built to take advantage of Styles.</p> <p>Most of our modern themes &amp; templates are great candidates for this treatment, but for this example, we'll be recoloring <a href="/Library/OM-X/" title="an internal link" class=" hinted">OM X</a>, a print-inspired&nbsp;favorite. We're going to start with Keynote, but the same core principles apply to our Pages template systems at this level.</p> </div> </div> <section id="setStage"> <h2 class="articleSupportingTitle">Set the Stage</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage selected"><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>Start a new presentation with OM X, and add a new Blank slide to your presentation - this will allow you to clearly see the shapes we’ll use to make our changes with. If you don't have the OM X themes in your library, you can download a free slide-limited Trial Edition here to follow along with: <a href="/Library/Free/OM-X-LE/" class="hinted">Free Keynote Themes - OM X Limited Edition</a></p> <p>Select Shape from the toolbar: you’ll see a selection of shapes to insert, which will automatically default to the first Shape Style once they're added to the slide. Add a square to the slide, which will behave as our "proxy" object for the first style change. </p> <div class="enableZoom " onclick="enlargeImage('Highlight-AddShape1');"> <div id="Highlight-AddShape1" data-group="setTheStage" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step1.jpg" alt="Add a square shape to the stage to act as a style proxy."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AddShape1-Caption">First, Add a Blank working slide, and add a new Square shape to the stage to act as a proxy for the style changes we'll&nbsp;make.</div></aside> </div> <p class="articleImageCaption">Add a Blank working slide, and add a new Square shape to the stage to act as a proxy.</p> <p>Typically, the first 6 shape styles in our systems reflect the default chart palette, the first of which is generally <i>slightly</i> different than the theme's framework colors (so that there's some level of contrast between a default shape sitting against a full-color background – more on that later). We push foundation-level, "theme-reserved" styles to the end of the Shape Styles list – in this case, OM's reserved colors are in the second panel of styles, which you can scroll to when the square is selected. Apply the dark Comfrey style to your square as shown, and we'll be ready to start modification:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ChangeStyle1');"> <div id="Highlight-ChangeStyle1" data-group="setTheStage" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step2.jpg" alt="Assign the Reserved shape style"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ChangeStyle1-Caption">Next, scroll to the framework-Reserved styles and apply the first reserved Shape Style - the Comfrey Accent used throughout the theme - to the first proxy shape.</div></aside> </div> <p class="articleImageCaption">Apply the first "reserved" Shape Style (from the second panel of styles) to our proxy square.</p> </div> </div> </section> <section id="redefineStyle"> <h2 class="articleSupportingTitle">Redefine a Shape Style</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle selected"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>The style we've just applied is a framework "root" color – that is, all of the Comfrey green shapes used throughout the Slide Layouts have this same Shape Style applied. This will allow us to change every shape using this style throughout the file all at once when the style is redefined.</p> <p>We’ll start by changing the Comfrey to another color on our proxy shape. With the proxy square you inserted still selected, click on the rainbow color wheel in the Fill section, directly beneath the Shape Styles section on the Format &gt; Style panel: this will open the Color window. Select the second tab in the Colors window to choose Sliders, select RGB sliders, and enter the color you’d like to use: in this case, we’re going to use a vibrant, contemporary Persimmon base: 229,95,69. Close the Colors window, and you should be left with your re-colored square still selected on the stage.</p> <p>Now, we’ll simply redefine the Shape Style we started with to replace the original color with our revised color throughout the theme. With our proxy square selected, Right-click or Control-click on the original Shape Style in the Style panel - still currently the darker Comfrey green - and select Redefine Style from Selection: </p> <div class="enableZoom " onclick="enlargeImage('Highlight-Redefine1');"> <div id="Highlight-Redefine1" data-group="redefineStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step3.jpg" alt="Change the proxy shape's color, and Redefine the original style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Redefine1-Caption">Set the proxy shape to the new target color, then Right / Control-click the original style to select "Redefine Style from&nbsp;Selection."</div></aside> </div> <p class="articleImageCaption">Change the color of the proxy shape, and redefine the original Shape&nbsp;Style.</p> <p>Keynote will prompt you with a confirmation dialogue ("91 Objects use this Style" in this case): be sure "Update all Objects" is selected, and click OK to continue.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Redefine2');"> <div id="Highlight-Redefine2" data-group="redefineStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step4.jpg" alt="Be sure Update All Styles is selected before clicking OK to continue."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Redefine2-Caption">Keynote will prompt you with a confirmation dialogue: be sure "Update all Objects" is selected, and click OK to&nbsp;continue.</div></aside> </div> <p class="articleImageCaption">Ensure "Update all Objects" is selected, and click OK to redefine the style.</p> <p>Once you’ve clicked OK, Keynote may take a moment to make the change throughout the file - but once it’s done, you’ll notice this has changed the Comfrey green to our revised Persimmon on the Blank slide we’re working on, as well as the original Title slide above it in the slide navigator. If you click the Add Slide button, you’ll notice it’s changed it for you on all of the presentation’s slide layouts: you’re well on your way to a custom OM X build.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Redefine3');"> <div id="Highlight-Redefine3" data-group="redefineStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step5.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Redefine3-Caption">The original Comfrey green has been redefined to our new Persimmon tone: click Add Slide to inspect the effects on the file's Slide&nbsp;Layouts.</div></aside> </div> <p class="articleImageCaption">Click Add Slide to inspect the effects on the file's Slide Layouts and verify the change.</p> </div> </div> </section> <section id="additionalStyles"> <h2 class="articleSupportingTitle">Additional Shape Styles</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles selected"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Shapes" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>Next, we’ll redefine the additional Shape Styles used to set the secondary accent color and outline color on the OM X slide layouts. Add another square to the stage, and apply the second reserved Shape Style, which defines the lighter Accent Green. Change the Color Fill to 249,220,188 to select a pale accent that coordinates with the Persimmon we’ve already defined, Right-click or Control-Click on the Second Shape Style, and once again select Redefine Style from Selection – select Update all Objects and click OK: the primary Accent Color is now redefined throughout your entire presentation.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Additional1');"> <div id="Highlight-Additional1" data-group="additionalStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step6.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Additional1-Caption">Add another square to the stage, and apply the second reserved Shape Style, which defines the lighter Accent Green. Adjust and Redefine as before.</div></aside> </div> <p class="articleImageCaption">Redefine the secondary Accent color using a second proxy shape.</p> <p>You’ll notice that the stroke outlining the Blank layout still remains green at this point - we have one additional style to redefine to complete our basic changes. Add a third square to the slide, and with the shape selected, click on the third reserved style (outlined) to apply it to the rectangle. You’ll notice the Fill setting changes to No Fill, while the Border changes to a Comfrey green Line style. Click the rainbow icon to bring up the Color window, and change this color to our original Persimmon - 229,95,69 (or use the eyedropper to sample the first square). As before, with that third shape selected Right-click or Control-click the third Shape Style and select Redefine Style from Selection, selecting Update all Objects and OK.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Additional2');"> <div id="Highlight-Additional2" data-group="additionalStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step7.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Additional2-Caption">Add a third square to the stage, and apply the third reserved Shape Style, which defines the outline style. Adjust and Redefine as before.</div></aside> </div> <p class="articleImageCaption">Redefine the third Shape Style using a third proxy shape.</p> <p>At this point, you’ve successfully redefined the basic shape styles which drive the primary coloration on the OM X slide layouts. There are a few additional text and shape styles we’ll want to adjust to be sure everything’s synced throughout the file, but you’ve already got the basics of the process if you’ve been following along to here.</p> <p>While we're still looking at our Reserved Styles, though, let's take a quick look at a non-obvious secondary definition we should also account for: <b>Lines</b>. Line Styles are actually defined separately in Keynote &amp; Pages than the closed-shape styles we've been redefining thusfar. Click the Shape button, and add a basic Line to the slide: again, it's defaulting to the first style, which we key to the primary chart palette. As before, scroll to the second panel of Line Styles to show the Reserved styles that would be applied on the underlying Slide Layouts, and apply the first reserved style. Set to our new Persimmon color (229,95,69), and Right or Control-click to select Redefine from Selection as we did before:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Additional3');"> <div id="Highlight-Additional3" data-group="additionalStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step8.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Additional3-Caption">Line Styles are defined separately than closed shapes: add a proxy Line to the slide, and redefine as we did before with the other shapes.</div></aside> </div> <p class="articleImageCaption">Redefine the reserved Line Styles using proxy Line shapes, just as before.</p> <p>Nothing new here – we'll repeat those steps with the second Reserved Line Style, just as we did with the previous shapes (be sure Update is checked, in both cases) – but it's important to note that Line Styles are their own defintion, separate from the closed-shape defintions. There's still the matter of the six default styles / colors to account for, but we'll revisit those a little further on: let's move on to Text Styles.</p> </div> </div> </section> <section id="updatingTextStyles"> <h2 class="articleSupportingTitle">Updating Text Styles</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles selected"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Text" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>If you click on Add Slide at this point and scroll through the Slide Layouts, you'll see we've made good progress: the Comfrey green and secondary accents have been reassigned throughout the file (excepting the plain "Color" background – we'll get into that below), though when you make it down to layouts like <i>Big Fact</i> or <i>Then vs Now</i>, we have a few obvious remnants of the light green accent set on some of the titles.</p> <p>Let's add a <i>Big Fact</i> slide to the presentation to make it easier to access and examine the applied styles. Click to select the large "85%" factoid, and click on the Format &gt; Text inspector to expose the basic settings. You'll notice this object is set to the "Fact" style, with the original pale accent green assigned to the text color. Click the color wheel icon in the Text Color row, and assign our revised accent color again: 249,220,188. You'll notice a blue "Update" button appears next to the style name back up at the top of the inspector:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text1');"> <div id="Highlight-Text1" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step9.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step9-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step9.jpg" alt="Apply the revised accent color to the Fact text style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text1-Caption">Add the Big Fact slide to the presentation, select the "85%" text object, and change to the revised accent color. An "Update" button will appear beside the text style name when it's modified.</div></aside> </div> <p class="articleImageCaption">Redefine the "Fact" Text Style to begin applying the revised palette to the titles.</p> <p>Click Update to redefine the style in the underlying Style Sheet, just as we did with the shapes before: the Update button will disappear once it’s complete. Since we're dealing with colored Text against a colored background, we should be mindful of Contrast here: if you're applying your own palette, adjust the specific color you'll apply to accent text if you need a bit more contrast between your revised Primary &amp; Accent colors for text legibility.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>Pro Tip:</b> if you're planning to change the typeface itself, it's much easier to use the dedicated <b>Replace Fonts</b> function instead of changing each Paragraph Style one-by-one. From the Format menu, select Fonts, then Replace Fonts to bring up modal: this will replace every instance of the face in the current file (including many you won't see until they're applied).</div> </div> <p>If you click the toggle arrow to expose the file's other Paragraph Styles, you'll see we have quite a few more green style instances to handle. There are a few ways we can approach these en masse – for now, let's add another Blank slide to our presentation so it's easy to focus, and click the Text button to add a text object to the slide. You’ll notice this defaults to the "Caption" style, which is a slightly darker version of the original Comfrey green (again, to offer some level of contrast if it's placed against a solid-color background).</p> <p>To help us dial in a slightly darker / lighter variation for the new caption, let's also bring in a copy of the original proxy square we used to redefine our primary Persimmon color for contrast. Select the text object, and change the Text Color to our primary RGB (229,95,69): this will, of course, make the text effectively invisible against the square. One of the easiest ways to approach this is to change color spaces on the Color Sliders to HSB (Hue, Saturation, Brightness), which will allow us to make simple adjustments to the Brightness of the color without impacting its essential Hue. Here, I've switched to HSB and brought the Brightness down by 20%, which is a good starting point for this:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text2');"> <div id="Highlight-Text2" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step10.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step10-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step10.jpg" alt="Apply the revised accent color to the Fact text style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text2-Caption">To ensure default text objects don't turn invisible against a full-color background, adjust the Brightness by ±15-20% via the relevant HSB slider before updating the Caption style.</div></aside> </div> <p class="articleImageCaption">Adjust the Brightness for the default Caption text style before capturing the update.</p> <p>The idea here isn't to make this a high-contrast object or to conform to a particular accessability standard – we simply want to ensure the default text object isn't going to be invisible if it's added to a full-color slide: it should pass for our primary accent on casual examination, and 15-20% darker or brighter is a safe bet for what boils down to a guardrail mechanism. We can click on Update at this point to capture the revised Caption style.</p> <p>We don't need to be especially concerned about this sort of thing with the remaining text styles, as they're assigned styles rather than a default application like Caption. From here, we can simply redefine each instance of dark / light green in the Paragraph Styles list to the appropriate revised Primary or Accent color and update the definitions. Select one of the text objects on your slide, apply one of the remaining green paragraph styles, update the color to the appropriate shade, and click Update – move to the next until the Paragraph Styles inspector no longer includes any of our original green text. When you've made it through the list, your Paragraph Styles inspector should look like the one below:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text3');"> <div id="Highlight-Text3" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step11.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step11-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step11.jpg" alt="Assign the appropriate Primary / Accent color to the remaining tinted Paragraph Styles."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text3-Caption">Assign the appropriate Primary / Accent color to the remaining tinted Paragraph Styles, clicking Update after each one is recolored. The Paragraph Styles list should look like this once you're complete.</div></aside> </div> <p class="articleImageCaption">Assign the appropriate Primary / Accent color to the remaining tinted Paragraph Styles.</p> <p>We've made great progress, but there are a few quirks and specialty settings to be aware of before we're ready to move on from Text Styles.</p> <p>If you click on the default <i>Title Card</i> slide – Slide 1 in this presentation – you'll see a bit of the original accent green still remains in the provisional "Presented To:" object at the bottom of the slide, while the "Cover Header Element" eyebrow up top has already been updated as a result of our Paragraph Style edits. The "Presented To:" text isn't using a dedicated Paragraph Style – it's a spot-placement on the layout. If we edit it here, though, it will only update it on Slide 1: we need to instead move under-the-hood to the <b>Slide Layout</b> itself to be sure our change will carry forward to all instances of the <i>Title Card</i> layout.</p> <p>Click the Edit Slide Layout button in the bottom right corner (or via the View menu) to switch to the slide's underlying layout: you'll notice a blue bar will appear beneath the layout to indicate you're now editing a layout instead of an individual slide. <b>Be sure to exercise additional caution when you're in Edit Layout mode</b>, as your changes here will translate to every slide using the layout you're editing: if you accidently nudge an accent square on a layout, it will be out-of-place on every slide using that layout, so be mindful of exactly what you're selecting as you move through the layouts.</p> <p>Here, we're simply going to highlight the errant green and change the color to our updated Accent color (249,220,188): we aren't updating the assigned style (which in this case is totally unrelated), we're simply updating the spot application of color and moving on to the next:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text4');"> <div id="Highlight-Text4" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step12.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step12-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step12.jpg" alt="Apply the revised accent color to the Fact text style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text4-Caption">In the Slide Layouts, we'll want to look for instances of Spot Placements that aren't mapped to dedicated styles: simply update the text color in the object itself, and move on.</div></aside> </div> <p class="articleImageCaption">Move into the Slide Layouts and adjust any Spot Placements that aren't mapped to a dedicated Paragraph Style.</p> <p>We'll want to scan through the remaining Slide Layouts to look for additional spot placements: the next two Layouts in OM X are variations on the basic <i>Title Card</i> setup, for example, and should be updated exactly the same way as the first. Depending on the particular theme system, there may be more (or fewer) instances to look for – it ultimately comes down to how much of the system is "captured" for widespread style application vs one-off instances, like the <i>Title Card</i> provisional statement, where a custom implementation comes into play on just a single layout or two and doesn't warrant promotion into the stylesheet.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>If you're ever in doubt</b> as to whether or not to apply updates to the assigned paragraph style, examine the root style being referenced. Expand the Paragraph Styles list as needed to see if the original style has a color applied: if it doesn't, updating the original style with color changes will push color to unintended / unwanted instances elsewhere in the theme.</div> </div> <p>Likewise, there may still be some non-obvious color applications in the dedicated Paragraph Styles that won't jump out until you examine or apply a paticular layout. The <i>Agenda</i> layout, for instance, uses the "Ruled Body Large" style, which applies color via paragraph borders instead of the text color itself, so it doesn't really stand out when you scan the Paragraph Styles list.</p> <p>To update the Paragraph Borders, select the Body element on the Agenda layout, and switch from the default Style tab to Layout: you may need to scroll down to see the Paragraph Borders section, but as before, it's just a matter of changing the Comfrey green to our updated Persimmon color. In this case, we <b>do</b> want to Update the paragraph style – the color is a part of the root style definition: </p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text5');"> <div id="Highlight-Text5" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step13.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step13-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step13.jpg" alt="Update the Paragraph Border color in the Ruled style"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text5-Caption">In the Slide Layouts, we'll also want to update any non-obvious color applications to the Paragraph Styles, such as the Paragraph Border color on the Agenda slide.</div></aside> </div> <p class="articleImageCaption">Update non-obvious color applications, like the Paragraph Borders on the Agenda slide.</p> <p>The <i>Then vs Now</i> layout, further down the list, applies both of these last two principles on one slide: the Year headers are spot color/weight overrides (accent color + Regular weight vs Light) – simply update the color of the two years on the layout, but don't apply the style update to the root style. Below the Years, the Summary Points employ Paragraph Borders via the "Ruled Body Small Reversed" style: we'll update these borders to the updated Accent color, and like the Agenda border, we <b>do</b> want to Update the root paragraph style.</p> <p>Before we move on from Text Styles, we have one more important accessory-level definition to hit: <b>Bullets</b>. Like Lines, Bullets resolve to their own definitions seaparte from the Paragraph Styles which they can be applied to. Let's jump down to the <i>Compare &amp; Contrast</i> layout a couple of slides below <i>Then vs Now</i> to start, where you'll notice another remanant of our original Accent green. Keynote and Pages files contain multiple definitions for bullets – in this case the "Bullet Light" style is applied to the text columns, which you can see by scrolling to the bottom of the Style panel with one of them selected. For the Light bullet, we'll want to redefine that to our updated Accent color by setting the updated color, then clicking the style name on the dropdown control to expose the List Styles where the Update button will appear:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text6');"> <div id="Highlight-Text6" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step14.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step14-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step14.jpg" alt="Update the Bullet styles via the List Styles inspector"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text6-Caption">Update the applied Bullet styles by adjusting to the relevant color and clicking the style name to expose the List Styles inspector, where the Update can be applied.</div></aside> </div> <p class="articleImageCaption">Update the applied Bullet styles by exposing the List Styles inspector.</p> <p>We'll need to do the same for the regular "Bullet" style: it's easiest to see on the plain <i>Title &amp; Bullets</i> layout further up the Slide Layouts list, but if you'd like to add a bit of safety contrast in case this style gets applied on a full-color background, use the same ±15-20% color adjustment you applied to the default Caption style earlier for good measure.</p> </div> </div> </section> <section id="extraMile"> <h2 class="articleSupportingTitle">The Extra Mile</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile selected"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Extra" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>We're into the proverbial <i>Endgame</i> here: if you’ve followed along to this point, you’ve already mastered the fundamentals, though there are a few additional concepts and definitions you'll want to be aware of before we start wrapping up.</p> <p>While we're still in the Slide Layouts, let's scroll down to the <i>Color</i> slide we'd noted earlier to examine an important caveat to Styles in Keynote and Pages. You'll notice there's a color fill applied to the background, though no obvious Style panel or selector anywhere nearby. While we can redefine Shapes, Lines, Paragraph, and List Styles, there's no such mechanism for doing so with Standard Backgrounds (though the functionality is available for the Dynamic Backgrounds in Keynote). So for this Layout, all we can really do is change the original Comfrey green to our updated Persimmon color:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-BG1');"> <div id="Highlight-BG1" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step15.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step15-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step15.jpg" alt="Update the Background Color individually"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-BG1-Caption">Update the Background Color of the <i>Color</i> layout noted earlier via the Fill: there are no Style definitions for Standard Backgrounds.</div></aside> </div> <p class="articleImageCaption">Update the Background Color via the Fill: there are no Style definitions for Standard Backgrounds.</p> <p>You can, of course, work around this by using shapes in front of the background if you need to tie backgrounds into your own system, but there are a few caveats. Authoring-wise, background changes on slide level will be obscured by the shape, and you'll also want to disable any instances of "Allow Layering" on the impacted Slide Layouts to be sure <i>Send to Back</i> doesn't layer objects behind the false background. Playback-wise, the false background will be treated as an Object on the stage (and thus become part of any Object Transition applied to the slide) rather than remaining stationary like the actual background, which will break the illusion in an instant. But if those caveats don't impact your workflow or presentation structure, it's a perfectly serviceable workaround to the lack of Styles on the Standard Backgrounds in Keynote in some cases.</p> <p>In OM X, the next slide down is the <i>Supplemental - Palettes</i> layout, which is a good place to circle back to those default Shape Styles we'd brushed past earlier. The left column (or top row, if you're working in the HD theme) is an effective proxy for the first six Shape Styles – we tie these to the colors used in the charts to keep things tidy from a thematic perspective (though they don't derive from the Chart Styles, or vice-versa – more on that below). The first Shape Style is the default style applied whenever you add a shape to the stage, so like the "Caption" style applied to default text, you'll want to adjust your default with a ±5-10% adjustment to the HSB values for a visibility guardrail – you can get away with less contrast on shapes than text, and a little goes a long way towards our purpose here:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Palette1');"> <div id="Highlight-Palette1" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step16.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step16-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step16.jpg" alt="Update the default shape styles easily from the Palletes layout"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Palette1-Caption">Update the default (first) Shape Style via the Fill from the selected proxy, as we did before, with a ±5-10% adjustment for safety contrast for shapes added on a color background.</div></aside> </div> <p class="articleImageCaption">Update the default (first) Shape Style via the Fill from the selected proxy, as we did before, with a ±5-10% adjustment for safety contrast.</p> <p>Just a +5% adjustment here, and we redefine the first Shape Style exactly as we did earlier. The remaining five color chips in that left column coordinate with the Shape Styles in order, so you can model out a full 6-step palette in context if you're creating a new palette. If you're building around a pre-specified palette and the color used as the main Accent Color on the Slide Layouts is included, you <i>may</i> want to apply a similar ±5-10% adjustment to its corresponding Shape Style (though only the first style is ever applied as a default, so you have more leeway around the remaining colors). </p> <p>The middle column of shapes on the <i>Palettes</i> layout don't correlate to Shape Styles in this case and are completely optional to our purposes here: generally speaking, the "Mono Step" used here is a monotone / shades palette of the default color, and can be modeled fairly easily using the sort of HSB adjustments we've used elsewhere, with some additional bumps to Hue/Saturation to create a wider "zone" around the original hue. Or keep it simple, and just re-assign the default style to each successive shape and ramp down the Opacity of the shape itself to create quick-shades – totally up to you, the slide itself is authoring-assitive and entirely optional, so you could likewise delete it before we Save the custom theme.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>Remember: Lines are defined separately than closed Shapes</b>. We've redefined the primary Shape Styles here, but those definitions don't carry over to the Line Styles: they'll need to be updated separately. You'll want to adjust the brightness of the first, default Line Style to match the ±15-20% safety margin used for text instead of the smaller adjustment applied to the default Shape style, as lines are more similar to text in terms of weight.</div> </div> <p>The last Slide Layout in OM X is the <i>Supplemental - Emphasis Styles</i> layout, which will allow us to examine a thusfar unmentioned dimension to Text Styles: <b>Character Styles</b>. In more recent themes, we've been adding "shortcut" styles for color application as Character Styles to make these easier to apply: we could have used the "Accent Emphasis" style to affect the spot-overrides we keyed in earlier from a single definition, but OM X was produced before we closed <i>that</i> particular gap in the production process, so we'll quietly make a note of that for a future update and move blithely along.</p> <p>Nevertheless, the <i>Supplemental - Emphasis Styles</i> layout gives us a good proxy element to examine how and where you can define multiple types of Character Styles. Click into the placeholder on the right to select the first non-bolded word that has a color applied to expose the root Character Style applied, shown here with the color changed but not yet updated on the sub-control, which maps to "Accent Emphasis":</p> <div class="enableZoom " onclick="enlargeImage('Highlight-CharacterStyles1');"> <div id="Highlight-CharacterStyles1" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step17.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step17-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step17.jpg" alt="Update Character Styles via the sub control"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-CharacterStyles1-Caption">You can create or update Character Styles by clicking the applied style name to expose the sub control, just as we did with the List Styles.</div></aside> </div> <p class="articleImageCaption">Character Styles can be created or redefined by opening the subview, just like List Styles.</p> <p>As before with the List Styles, Characters Styles are Updated via the sub-control that displays when you click the style name selector, so when you're ready to define the updated Accent Emphasis style, click the blue Update button: you'll notice the bolded word next to your selection adopts the color change, though retains the weight difference. There actually is a "Bold" character style included by default, but it's distinct from what happens when you press the Bold button: if you want to capture color + bold (or semi-bold, in this case) as a style, that would be a separate, distinct definition. Here, the Accent Emphasis style is applied to both words, with semi-bold applied as a simple override to the alternate word (for Copy Style convenience).</p> <p>In OM X, rather than cluttering these styles with weight variations, we've kept focus on the key color variations that allow you to quickly apply the appropriate highlight or accent for both on-white and on-color application. Accent Emphasis keys to our revised Accent color, as we just applied, and is meant for use against color – "Primary Emphasis" will key to our revised Persimmon color, and is meant for use on white backgrounds.</p> <p>The "Dark Emphasis" style is intended for use against color, though it can obviously be applied to either background type. Of the two remaining Character Styles we're focusing on, this is the easiest to dial in: select one of the dark, non-bolded words and set the initial color values to our primary Persimmon color. Then, using the HSB sliders again, run the brightness down to 35-40% – this will give us a solid, readable contrast against the Persimmon while retaining its essential hue. Update the Dark Emphasis style from your selection, just as before.</p> <p>The "Tonal Emphasis" style is a bit more esoteric: it's intended to provide an additional level of color variation alongside <i>either</i> the Primary or Accent Emphasis patterns, so it should work well both against white and against our primary color, in a shade that complements the other accents we've defined so that they work in tandem application. A bright orange is a good candidate in this case, as it will provide a nice pop of color against our Persimmon base, while remaining in the general "proximity" of color between our Primary and Accent colors. We've captured the style here to make it a bit more apparent:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-CharacterStyles2');"> <div id="Highlight-CharacterStyles2" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step18.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step18-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step18.jpg" alt="Character Styles are redefined, with the Tonal style highlighted"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-CharacterStyles2-Caption">Updating the four theme-centric character styles will allow you to quickly apply the relevant emphasis color to text on both white and color backgrounds.</div></aside> </div> <p class="articleImageCaption">All of the theme-specific Character Styles have been updated, with the "Tonal" style highlighted.</p> <p>In practice, you'll want to test the appliction of both Primary and Tonal against a white background as well (a-la the <i>Title &amp; Bullets</i> layout) to dial in your specific Tonal accent: not every color works well against both color and white, so it may take a bit of experimentation if you're creating your own.</p> <p>From here, we'd generally recommend making your way back up through the Slide Layouts one by one to look for any remaining instances of color that haven't been caught by our changes thusfar to the Shape, Text, or accessory styles. While the icons on Process Agenda, for instance, changed color after we updated our primary Shape Styles, the circles surrounding them didn't: they're 1pt heavier than our default Line Styles, and will need to be keyed to the appropriate color. Likewise, the color border on the images on the <i>Speakers</i> slide is a custom application: shift-select the image placeholders, and key in our revised Accent color:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-PhotoBorders');"> <div id="Highlight-PhotoBorders" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step19.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step19-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step19.jpg" alt="Character Styles are redefined, with the Tonal style highlighted"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-PhotoBorders-Caption">Key in any remaining custom color applications you find during a final review of the Slide Layouts, such as the image borders on the <i>Speakers</i> layout.</div></aside> </div> <p class="articleImageCaption">Key in any remaining color applications that jump out on a final review of the Slide Layouts.</p> <p>We aren't covering <b>Image Styles</b> in this tutorial, though you could create one from the selected images if it's something you'll need to make use of frequently. Here, we're using it to provide a "buffer" for color photography used against a uniform field of color, so it's fairly narrow in application and not the sort of thing we'd add to the dedicated Image Styles – the default Image Style in OM X is non-shadowed, non-bordered, so there's really nothing to cover here beyond the spot application.</p> <p>Once you've made your way back up to the first Slide Layout – the <i>Title Card</i> layout we began our initial diversion into the layouts with – you can click the <b>Done</b> button in the blue bar at the bottom to exit the Slide Layouts and return to standard Navigator view.</p> <p>At this point, we've made our way through all of the basic settings we'll need to hit for <i>most</i> purposes, and could move into Saving the theme. There are a few more <i>not-so-basic</i> categories remaining in a full coversion, though: <b>Table Styles</b>, <b>Chart Styles</b>, and the Color, Gradient and textured Image fills in the <b>Fills Palette</b>. These are all a bit more complex than what we've covered thusfar – Chart Styles in particular are a bit of a <i>Dark Art</i> in terms of being tricky to capture well, even for seasoned theme builders. We have plans to work up more detailed looks at all of these processes for the ambitious among you, and will update this page with links once we have them: for now, we'll refer you to Apple's instructions for both <a href="https://support.apple.com/guide/keynote/use-table-styles-tan6cbe92ac3/13.2/mac/1.0" target="_blank" rel="noopener" class="appExternal hinted">Table Styles</a> and <a href="https://support.apple.com/guide/keynote/use-chart-styles-tan9442733c8/13.2/mac/1.0" target="_blank" rel="noopener" class="appExternal hinted">Chart Styles</a> as a good authoritative reference on the basics – there's quite a bit left unsaid in terms of the iterative definition process for Charts, but we'll eventually get to that here.</p> <p>The <b>Fills Palette</b> is set independently of the Styles settings we've covered thusfar, and provides a way to define the root Accent Colors and derivative Tints &amp; Shades, Gradient Fills, and Image Fills that appear in the quick-select Fill menus in the Inspector panel. This is a great way to ensure color-use consistency throughout your files, and is easy to customize once you understand the palette's structure and how to make your edits. We've pushed this into its own tutorial &ndash; including a downloadable Color Provisioning Starter file &ndash; available here: <a href="/Support/Topic/Transforming-the-Fills-Palette/" class="hinted">Transforming the Fills Palette</a></p> </div> </div> </section> <section id="saveTheme"> <h2 class="articleSupportingTitle">Save Your Theme</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme selected"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Saving" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>If you've made it to this point, pat yourself on the back: you've customized a presentation with your own palette, hitting all of the most common touch-points for Shapes, Lines, Paragraph Styles and common accessories like Bullets and Character Styles.</p> <p>All of these changes, though, are only within the scope of this particular file (or <i>Save As...</i> derivatives): to re-use these changes again and again, you'll need to save a <b>Custom Theme</b> to create your own custom starting point. From the File menu, select <b>Save Theme</b>, and you'll get a dialogue like the one below:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-SaveTheme1');"> <div id="Highlight-SaveTheme1" data-group="SaveTheme" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step20.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step20-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step20.jpg" alt="Select Save Theme from the File menu to trigger the Create Theme dialogue"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-SaveTheme1-Caption">When you select <b>Save Theme</b> in the File Menu, you'll see a Create Theme dialogue: we recommend choosing "Save..." if you want to customize the theme's icon in the chooser.</div></aside> </div> <p class="articleImageCaption">Select <b>Save Theme</b> from the File menu to trigger the Create Theme dialogue.</p> <p>While you <b><i>can</i></b> simply select "Add to Theme Chooser" from here, you're going to be left with a fairly rudimentary icon in Keynote's Theme Chooser window, even if you doctor up a working icon on your first slide (<i>which would have made a lot of sense, yes</i>?). If that's not a big deal for your purposes, Add to Theme Chooser will push your theme to Keynote directly &amp; you're good to go: from the File menu, select <i>New...</i> to bring up the Theme Chooser, and you'll find your theme in the My Themes section like any other 3rd-party theme you may have installed.</p> <p>If you'd like to add something a bit more bespoke to your new custom theme, though, we'll need to prepare an icon image and manually replace a few of the auto-generated files in our theme file. Click <b>Save...</b>, and select a good working folder: this will export a <b>.kth</b> file, which is Keynote's Theme File format. We'll come back to this file in a moment.</p> <p>On your first slide, work up a "hero" slide to serve as an icon for your custom theme – changing the Zoom to 25% will give you a quick sense of how it will look at scale and give you the opportunity to scale the text to something more readable if needed. Once you're happy with your icon, we'll go to the File menu and select Export To &gt; Images: the default PNG option is a good starting point, and we want to save it to the same folder our .kth file was saved to.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>If you don't have access to an image editor</b>, select "JPEG - High Quality" instead of PNG here: you can rename the exported file accordingly and perform a partial replacement in the following steps.</div> </div> <p>Hide Keynote for now, and go to the working folder where you saved your Theme file and PNG image. Here, we're going to work a bit of non-obvious file-system magic: Keynote (and Pages) files are actually compressed / ZIP folders on the outer layer, so we can rename our .kth to .zip and decompress the contents to see the internal structure. Right-click the file to select "Get Info" (alternately command-i with the file selected), uncheck Hide Extension, and change the .kth extension to .zip: Finder will prompt you with a comfirmation, click on the "Use .zip" button to confirm. Now, double-click the .zip to extract it, and you'll see the raw folder structure of your new Keynote Theme:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Finder1');"> <div id="Highlight-Finder1" data-group="SaveTheme" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step21.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step21-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step21.jpg" alt="Rename the new .kth file to .zip, and extract to a folder."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Finder1-Caption">Keynote (and Pages) files are actually compressed / ZIP folders on the outer layer, so we can rename our .kth to .zip and decompress the contents to see the internal structure.</div></aside> </div> <p class="articleImageCaption">Rename the exported .kth file to .zip, and extract to a folder.</p> <p>The "preview.jpg" image selected there reflects the default Keynote generates regardless of what's on the first slide (it defaults to the first Slide Layout with "Lorem Ipsum" greeking in the title object). And as you can see, we have three files named preview: "preview.jpg", which is the largest, along with smaller "preview-web.jpg" and "preview-micro.jpg" derivatives. We're going to replace all three of these with the new hero icon you created a moment ago.</p> <p>Open the PNG we exported in your favorite image editor: we're going to export JPEG files for each of these three preview images at the corresponding target size. These are slightly different for Standard (4:3) and Wide (16:9) formats, noted here for convenience:</p> <div class="detailsTable"> <table cellspacing="0"> <tbody><tr> <th>&nbsp;</th> <th>Standard (4:3)</th> <th>Wide (16:9)</th> </tr> <tr> <td>preview.jpg</td> <td>1024x768</td> <td>1024x576</td> </tr> <tr> <td>preview-web.jpg</td> <td>186x140</td> <td>186x105</td> </tr> <tr> <td>preview-micro.jpg</td> <td>45x34</td> <td>45x25</td> </tr> </tbody></table> </div> <p>Export your JPEGs at the appropriate size, replacing the original in your extracted theme folder. Once you've replaced all three files, we're ready to "re-pack" the theme.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>If you exported to JPEG in the previous step</b>, you can rename that file to "preview.jpg" and replace the same file in the extracted folder: this will handle the main preview in the Theme Chooser itself on MacOS or iOS/ iPadOS.</div> </div> <p>Move the original, pre-extracted .zip file to the Trash: we no longer need it. Right-click the extracted theme folder we've been making our changes in, and select Compress to make a new .zip file from the updated contents. Then, it's just the reverse of our initial rename: change the .zip extension back to .kth, and confirm the change. You're left with an updated .kth file, which will give you the option to install the theme when you open it in Keynote. The theme will appear in the My Themes section, as shown here:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ThemeChooser1');"> <div id="Highlight-ThemeChooser1" data-group="SaveTheme" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step22.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step22-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step22.jpg" alt="Open your updated .kth in Keynote: installed themes appear in the My Themes section."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ThemeChooser1-Caption">Open your updated .kth in Keynote: installed themes appear in the <b>My Themes</b> section.</div></aside> </div> <p class="articleImageCaption">Open your updated .kth in Keynote: installed themes appear in the <b>My Themes</b> section.</p> <p>Like any other Keynote theme, once it's installed you can right-click the preview in the Theme Chooser to rename or remove it whenever you like. If you're using your new theme as a new all-purpose starter, you can set it to be your default theme in Settings: on the General tab, look for <b>For New Presentations</b> at the very top, tick "Use Theme", and click the Change Theme button to display the Chooser.</p> </div> </div> </section> <section id="additionalThoughts"> <h2 class="articleSupportingTitle">Additional Notes</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class=""> <div class="ledeListWrapper slim"> &nbsp; <div class="depthTracer" data-depth="Wrapup" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <div class="vStack"> <div class="hStack resourceList"> <div class=""><svg id="" class="" width="50" height="50"><use xlink:href="#saveEdit-icon"></use></svg></div> <div class=""> <div class="vStack "> <div class=""><h3>Updating Your Theme</h3></div> <div> <p>Save your working .key file as an ongoing Export Source: you can make revisions and re-export your theme as needed to address additional changes or modifications moving forward. As long as you use the same root name for your re-exported theme, Keynote will offer to Update the theme file when you open the newer version.</p> <p>Alternately, you can save a new .key file generated from your latest theme file to pick up with your prior changes in a new file. Likewise, simply alter the revised theme name if you'd like to keep a second, alternate version of your theme in the Theme Chooser.</p> </div> </div> </div> </div> </div> </div> </div> </section> ]]>tag:keynotepro.com,2022://2.0100A Haus for All Seasons2022-01-17T15:00:00-05:002024-07-31T10:47:30-04:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><p class="articleBodyLede">We've received a few questions since the launch of our new Haus Neue system about whether or not it's possible to customize the colors in the Bauhaus patterns driving the visual accents throughout the theme. And the good news is Yes, it absolutely is – it's very much a playground for color exploration, provided you know where to set your changes.</p><p>In some of our previous tutorials, we've taken a look at how easy it is to affect theme-wide changes in our shape-based themes through simple style changes. If this is your first time delving into this sort of customization, you can find a bit of additional background information in the Calais Brush-Up tutorial, or the more in-depth (and now slightly out-dated – duly noted) Recoloring NXT-Generation Keynote Themes Tutorial – but they're not required reading for this example.&nbsp;</p><p>Haus Neue takes those style-based fundamentals to an entirely new level, building on a hybrid 4-spoke color foundation to define the root-color definitions that drive all of the Bauhaus-inspired patterns that act as accents throughout the theme. Once you understand the theory behind the color application and where they're set, it's incredibly easy to tint &amp; recolor the entire system to essentially any color you desire.</p><h2>Prep &amp; Setup</h2><p>There are only a few setup steps involved in transforming the default Haus Neue style into your own coloration. Start a new presentation using Haus Neue, add a few slides you can use to reference your changes, and add 3 square shapes to the stage to get started – they'll default to the first Shape Style:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-AddProxies');"> <div id="Highlight-AddProxies" data-group="assignProxies" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step1.jpg" alt="Add Shapes to the stage to act as style proxies."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AddProxies-Caption">First, add a few slides for ongoing reference, and add 3 square shapes to the stage to act as proxies for the style assignments we'll customize.</div></aside> </div> <p class="articleImageCaption">Step 1: Add a few slides for reference, and add 3 square shapes to the stage.</p><p>These shapes will act as our proxy shapes for the styles we're going to redefine. Select the first square, look to the Format &gt; Style menu, and click over to the second panel of Shape Styles: this is where our Framework-Reserved styles are defined. Click the signature Fuchsia to apply this first style:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-AssignProxy1');"> <div id="Highlight-AssignProxy1" data-group="assignProxies" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step2.jpg" alt="Assign the first theme-reserved style to the first proxy shape."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AssignProxy1-Caption">Next, scroll to the framework-Reserved styles and apply the first reserved Shape Style - the Fuschia Accent used throughout the theme - to the first proxy shape.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the first reserved Base Style we'll Re-Define later.</p> <p>Repeat that step with the remaining 2 squares, selecting the Indigo and Light blue styles respectively, which will set all 3 proxies we'll focus on here. You'll notice there's a 4th, White Shape Style on the row below our 3 primaries: this is an optional "Surface" modifier, which you can use if you're transforming to a dark background (or otherwise pushing into a 4-color model) – we won't use that one in this tutorial, but it's good to know where it is if you're going for a non-white background and want to blend the white accents.</p> <p>Once you're done with the 3 primaries, your slide should look this, and you're ready for next steps:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-AssignProxy3');"> <div id="Highlight-AssignProxy3" data-group="assignProxies" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step3.jpg" alt="Repeat that on the second and third proxy shapes with the Indigo/Light Blue styles."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AssignProxy3-Caption">Repeat that process on the second and third proxy shapes, assigning the reserved Indigo and Light Blue styles.</div></aside> </div> <p class="articleImageCaption">Step 3: Repeat that step for the remaining Indigo/Light Blue styles.</p> <h2>Redefine the Styles</h2> <p>Now we'll re-define each of those colors one-by-one, and let Keynote handle the application throughout the file. We're going to work up a nice Spring palette with a few near-neighbor Greens here as an example, but again, this process will apply to any palette you choose.</p> <p>The Bauhaus pattern works around a highlight/contrast/highlight model – for best results, you'll generally want to key in your two key highlight colors, then define the darker contrast as a mid-point between the two highlights, or alternately a "reach" color that pushes into a neighboring color space. This can involve a bit of trial and error if you're not working with a pre-defined color or two, but as you'll see, it's easy to adjust on-the-fly from our proxy shapes.</p> <p>First, we'll replace the Fuchsia with a crisp, cucumber Green. Select the Fuchsia proxy square, and set it to a new color: I'm using RGB 164,233,183 here. Once you've changed the color, we'll redefine the base style by right-clicking the original Fuchsia style and selecting "Redefine Style from Selection" as shown:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles1');"> <div id="Highlight-RedefineStyles1" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4.jpg" alt="Redefine the first reserved style using the modified proxy shape."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles1-Caption">With the updated proxy shape selected, right-click the original reserved style and select "Redefine Style from Selection."</div></aside> </div> <p class="articleImageCaption">Step 4: Redefine the first reserved style using the modified proxy shape.</p> <p>Keynote will prompt you with a choice to update all of the shapes referencing the style you're updating (or not): make sure "Update all objects" is selected, and click OK:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles2');"> <div id="Highlight-RedefineStyles2" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4b.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4b-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4b.jpg" alt="Confirm that you want to apply the change throughout the presentation."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles2-Caption">Confirm that you want Keynote to apply the change to every shape using that style throughout the presentation.</div></aside> </div> <p class="articleImageCaption">Step 4(b): Confirm that you want to apply the change throughout the presentation.</p> <p>Keynote will re-define all linked instances of the Fuchsia squares and accents to our new cucumber Green, which should be immediately apparent on the active + reference slides we added at the beginning. For good measure, we can inspect the rest of the masters via the Add Slide button, which confirms the original Fuchsia is now Green throughout the file (excepting the special instances in the Supplemental masters):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles3');"> <div id="Highlight-RedefineStyles3" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step5.jpg" alt="Confirm that the change has been applied throughout the presentation"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles3-Caption">Confirm that the change has been applied throughout the presentation by clicking the Add Slide button and examining the updated previews.</div></aside> </div> <p class="articleImageCaption">Step 5: Confirm that the first change has been applied throughout the presentation.</p> <p>We'll repeat that process for the remaining 2 proxy squares. If you don't have colors pre-selected, it's generally best to move to the 3rd shape to set the secondary highlight, then back to the second the balance the contrast color. Here, I'm setting the 3rd proxy square to another green (RGB 38,164,134 here) – a darker hue that plays against the spring contrast I'm going for, and re-defining the referenced Style from the selection again:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles4');"> <div id="Highlight-RedefineStyles4" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step6.jpg" alt="Set the alternate Highlight color, and redefine the third root style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles4-Caption">Set the alternate Highlight color, and redefine the original 3rd framework-reserved style as we did in the previous step.</div></aside> </div> <p class="articleImageCaption">Step 6: Set the alternate Highlight color, and redefine the third root style.</p> <p>We're nearly there. Now we'll redefine the Contrast color – since we're using a naturally contrasting pair of greens for our highlights, this is a good instance of where we'd use a "reach" color to push into a neighboring color to balance. I want to stick to the blue end of the spectrum for the reach, but pull it closer to the Green end of the range vs the violet default. After a bit of exploration, I'm going with RBG 10,59,84 here – closer to green, but still distinctly blue if we were to ramp luminance:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles5');"> <div id="Highlight-RedefineStyles5" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step7.jpg" alt="Set the Contrast color, and redefine the second root style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles5-Caption">Set the Conmtrast color, and redefine the original second framework-reserved style as we did in the previous step.</div></aside> </div> <p class="articleImageCaption">Step 7: Set the Contrast color, and redefine the second root style to finish up.</p> <p>And we're done! There are a few additional steps to go through if we want to dial in charts, tables, or text Emphasis styles – but the "heavy lifting" of setting up our color conversion is largely finished for all intents &amp; purposes. You can remove the proxy shapes, and start adding slides + building the show from here – simply use the eyedropper tool to sample your new colors wherever you want to dovetail inserted shapes, etc with your revised palette.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles6');"> <div id="Highlight-RedefineStyles6" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step8.jpg" alt="All set: remove the Proxy Shapes to finish up."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles6-Caption">All set: remove the Proxy Shapes, and get on with your show. Revise the default shape style as needed to dovetail with your changes.</div></aside> </div> <p class="articleImageCaption">We're all set: remove the Proxy Shapes to finish up.</p> <h2>Wrapping Up</h2> <p>If you're going to make frequent use of your revised setup, it's worth spending a few minutes keying in the default Accent Shape Styles (the first panel of Shape Styles, vs the Reserved styles we redefined here) to align with your changes, along with the Text Emphasis styles (defined under the Character Styles drop-down when text is selected) if you tend to use those. It's generally easiest to treat Chart and Table colors as spot overrides vs going through the process of redefining all of the various tiers defined there – but if you're going the extra mile, those are the remaining styles you'll want to pay attention to.</p> <p>You can otherwise save your changes as a new Theme file by selecting Save Theme from the File menu – choose Add to Theme Chooser to make your new theme appear in the My Themes section of the theme chooser, ready to start your next presentation with (and if you ever need to remove it, Right-click or Control-click the theme in My Themes and select Delete).</p> <h2 class="articleSupportingTitle articleFoot">Additional Resources</h2> <ul><li><a href="/Support/Topic/Customization/" class="appExternal hinted">Recoloring Shape-based KeynotePro Themes in Keynote 6+</a></li></ul> ]]>tag:keynotepro.com,2019://15.1038Better Native Photo Blends2019-10-19T16:38:32-04:002024-01-30T12:37:11-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><p class="articleBodyLede">Using Keynote's Image Adjustment Tools to Improve Image Blends Natively.</p> <p>Image Blends are one of the best ways to make a photo feel "integrated" with the theme it's being used in, particularly if a theme's design is optimized for the approach. Our latest build of the Aurora themes - Aurora NXT - uses this technique extensively, as does last year's KeyStation NXT (to a differing degree). And when the photo you're blending is a good fit for the technique without any adjustment, it's a sort of magical, one-click experience.</p> <p>All photos are not created equal, however, and basic Transparency mixes like the defaults set in Aurora NXT won't produce optimal results for every photo. We can jump to a tool like Photoshop to take advantage of more advanced Layer Blending options on difficult photos, where Screen or Multiply will often make quick work of this sort of thing. But you can work a surprising bit of magic natively in Keynote 6.x-9.x itself by diving deeper into the Image Adjustment Tools built into the app itself.</p><h2>The Basics</h2> <p>We'll be using the standard Aurora NXT theme for these examples: if you don't have the Aurora NXT themes in your library, you can download a free slide-limited Trial Edition here to follow along with: <a href="/Library/Free/Aurora-NXT-LE/" class="hinted">Free Keynote Themes - Aurora NXT LE</a></p> <p>Aurora NXT includes 4 relevant Image Styles to ballpark Subtle, Moderate and Intense blends, along with an override style to disable the blend altogether. The results are quick and fairly predictable on a deep, full-color image (an <a href="https://unsplash.com/photos/LlBEJhgFCc4" title="Unsplash image by Vero Photoart" target="_blank" rel="noopener" class="appExternal hinted">Unsplash image by Vero Photoart</a> shown here):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-DefaultStops');"> <div id="Highlight-DefaultStops" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Default_Blend_Stops.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Default_Blend_Stops-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Default_Blend_Stops.jpg" alt="Default Blend Stops assigned via the Image Styles in Aurora NXT"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-DefaultStops-Caption">Aurora NXT includes 4 Image Styles that make quick work of applying Subtle, Moderate or Intense Transparency Blends in a single click, but they're not enough for every photo.</div></aside> </div> <p class="articleImageCaption">Default Blend Stops assigned via the Image Styles in Aurora NXT</p> <p>In this case, the base image includes some deep yellows &amp; reds and blends particularly well with the full-spectrum Aurora theme at each of the transparency "stops" defined in the base image styles. Likewise, deep blue &amp; green photos will blend more readily in Aurora UV, as the colors are playing off the natural color ranges of the respective themes themselves.</p> <p>There's not much to this basic technique: the styles correlate to different Transparency levels (the only Image Adjustment setting Keynote will hold on to when an Image Style is defined), which can be easily tweaked in the inspector to "dial in" a more pleasing transparency level if one of the defaults aren't quite right.</p> <p>But some photos are more difficult to blend than others when you're relying only on Transparency, particularly if you're blending a darker photo with a more vibrant, colorful background (or a lighter studio shot with a darker, flat color a-la KeyStation NXT, for instance). Adjusting the Transparency can offer some level of improvement, but in more difficult compositions you'll want to go a few steps further and dive into Image Adjustments to achieve more pleasing results.</p> <h2>Image Adjustments</h2> <p>Let's have a look at a good example of the fundamental issue we're trying to solve, and the steps we can take to improve our Blend results. We're starting with a dark black &amp; white image, a popular <a href="https://unsplash.com/photos/dT4hx-QW0Aw" title="Unsplash image by Sebastian Unrau" target="_blank" rel="noopener" class="appExternal hinted">Unsplash image by Sebastian Unrau</a>, shown here with no Blend/Transparency:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend0');"> <div id="Highlight-AdjustBlend0" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step0.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step0-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step0.jpg" alt="Dark, Black and White images can be difficult to Blend with color."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend0-Caption">Dark Black + White images can be very difficult to Blend using only Transparency - a good test candiate shown here without Blend.</div></aside> </div> <p class="articleImageCaption">Dark, Black &amp; White images can be difficult to Blend with color.</p> <p>The lack of color and general dark nature of the photo produces somewhat "muddy" results on the Moderate or Intense stops, with the Subtle stop providing little to no detail:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend1');"> <div id="Highlight-AdjustBlend1" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step1.jpg" alt="None of the default Transparency Stops provide ideal results."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend1-Caption">The default styles don't provide optimal results in this case - we'll want to dig further into Image Adjustments.</div></aside> </div> <p class="articleImageCaption">None of the default Transparency Stops provide ideal results.</p> <p>Making this photo a great candidate for more advanced techniques. Let's settle in around the default Moderate style, which has an Opacity setting of 38% and gives us the better mix of transparency &amp; detail of the 3 default options in this case. Select the photo, and click on Format &gt; Image to expose the Image Inspector.</p> <p>We'll start by clicking Enhance to let Keynote's image algorithms clarify the base exposure/saturation balance. In some cases, simple adjustments to the Exposure/Saturation settings on the inspector can go a long way - but in this case, Saturation isn't going to do anything for us given the Black &amp; White source, and Exposure will simply act as a rudimentary Lighter/Darker control atop the Transparency. We'll click on the Adjustment Toggle to expose the more Advanced Image Adjustment settings:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend2');"> <div id="Highlight-AdjustBlend2" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step2.jpg" alt="Enhance helps clarify the highlights - click the Toggle to open Advanced Options."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend2-Caption">Click Enhance to clarify the Highlights - then click the Toggle to expose the Advanced Image Adjustments.</div></aside> </div> <p class="articleImageCaption">Enhance helps clarify the highlights - click the Toggle to open Advanced Options.</p> <p>Adjusting <b>Levels</b> will do much of the heavy lifting in this case. Since we're trying to accommodate the darker nature of the source photo, adjusting the mid-range levels down toward Black (moving to the left) will clear up some of the muddiness right off. Adjust the slider so that the mid-range is to the left of the dominant spike:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend3');"> <div id="Highlight-AdjustBlend3" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step3.jpg" alt="Adjust the Midrange Levels to compensate for the darkness of the source image."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend3-Caption">Adjust the Mid-Range Levels to compensate for the dark nature of the source photo.</div></aside> </div> <p class="articleImageCaption">Adjust the Midrange Levels to compensate for the darkness of the source image.</p> <p>Now we can adjust the <b>Exposure</b> to shape the Levels curve a bit more - bumped to 70% in this case. -70% adjustments to both <b>Temperature</b> and <b>Tint</b> will help in this case by adding a splash of duotone tint to the photo in a good range to complement the red-dominant background:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend4');"> <div id="Highlight-AdjustBlend4" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step4.jpg" alt="Adjust the Exposure, Temperature and Tint to dial in further."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend4-Caption">Now adjust Exposure to re-balance. Tint + Temperature are adjusted here to give the Black+White source photo better color blending with the domiant background color.</div></aside> </div> <p class="articleImageCaption">Adjust the Exposure, Temperature and Tint to dial in further.</p> <p>We're very nearly there. We're going to make one final adjustment - adjust the Shadows slider to balance toward the highlights more:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend5');"> <div id="Highlight-AdjustBlend5" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step5.jpg" alt="Adjust the Shadows slider to balance toward the highlights."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend5-Caption">Adjust the Shadows slider to balance toward the highlights.</div></aside> </div> <p class="articleImageCaption">Adjust the Shadows slider to balance toward the highlights.</p> <p>And we're done. Once you get the hang of what each adjustment does, you can effectively blend even problematic images in a few steps - and the results are a definite improvement from where we began with the default Transparency Blend:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend6');"> <div id="Highlight-AdjustBlend6" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step6.jpg" alt="Before and After, showing the dramatic difference between Default and Adjusted states."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend6-Caption">Before + After, showing the default Transparency Blend vs our Adjusted Blend.</div></aside> </div> <p class="articleImageCaption">Before and After, showing the dramatic difference between Default and Adjusted states.</p> <p>While these settings are a good approach for the specific problem posed by this type of image, you'll want to apply these principles in different ways depending on the nature of your source image. Lighter images blending with darker backgrounds, for instance, will tend to work better with higher midrange Levels, less Exposure and adjustments to the Highlights slider instead of the Shadows used here. Experiment a bit and use your best judgment according to the type of image you're blending and the background you're blending with.</p> ]]>tag:keynotepro.com,2018://13.0300Calais Brush-Up2018-03-13T07:00:07-04:002023-12-14T17:10:08-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/Calais-BrushUp/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Transform Calais into a Brushed Variation" /></p><p class="articleBodyLede">Redefine a single Shape Style to transform Calais into an organic, Brushed variation.</p> <p>In some of our previous tutorials, we've taken a look at how easy it is to affect theme-wide changes in our NXT-Generation themes through simple shape-style changes. If this is your first time delving into this sort of customization, you can find a bit of additional background in the <a href="/blog/post/05042017/Instant-Classic/" class="hinted">Palo Alto: Instant Classic</a> Tip or the more in-depth Recoloring NXT-Generation Keynote Themes Tutorial, but they're not required reading for this example.</p> <p>Our recent Calais theme offers an excellent insight, though, into just how much can be packed into these style definitions. We've covered the color-change side of things a few times already - so we're not going to re-tread that here. But Keynote's Shape Style Definitions don't stop at the color of the fill: they can also include stroke or effect information as well.</p> <p>We can leverage that in Calais to apply one of the organic, brushed Line Styles to the Title Accent object &amp; give it more of a hand-made feel throughout your entire presentation in just a couple of steps. These brushed shape styles are already defined for you in the Calais Supplemental file, but they're easy to set up if you want to follow along in the steps below.</p> <h2>The Steps</h2> <p>There are only a few steps involved in transforming the basic Calais look into a Brushed variation. Start a new presentation using Calais, add a few slides you can use to reference your changes, and add a Square shape to the stage to get started:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step1');"> <div id="Highlight-Step1" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step1.jpg" alt="Step 1: Add a few slides for reference, and add a Square shape to the stage."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step1-Caption">To begin the process, start a new Calais presentation (or open one you've already made) and add a square shape to the Stage.</div></aside> </div> <p class="articleImageCaption">Step 1: Add a few slides for reference, and add a Square shape to the stage.</p> <p>This shape will act as our proxy for the style we're going to redefine. With this new square selected, look to the Format > Style menu, and click over to the second panel of Shape Styles - this is where our Framework-Reserved styles are defined. Click the signature Yellow to apply this style:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step2');"> <div id="Highlight-Step2" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step2.jpg" alt="Step 2: Apply the reserved Base Style we'll Re-Define later."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step2-Caption">Next, apply the reserved Shape Style the Title Accent is using throughout the theme.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the reserved Base Style we'll Re-Define later.</p> <p>That syncs us up with the currently-applied style. Next, we'll add a Stroke to work with - expand the Border section as needed to expose the settings. Click the Line style selector, and select the Brushed style, second-from-bottom:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step3');"> <div id="Highlight-Step3" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step3.jpg" alt="Step 2: Apply the reserved Base Style we'll Re-Define later."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step3-Caption">Add a Border, and change the default Line style to the Brushed version, second from the bottom.</div></aside> </div> <p class="articleImageCaption">Step 3: Add a border, and then we'll select the Brushed line style.</p> <p>Run the Line weight up to 16pt, and color-match the shape fill - on a Mac, you can do this by clicking and holding the fill color and dragging to the line color, replacing the black. Alternately, you can use the eyedropper to sample the correct color. You should end up with the following:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step4');"> <div id="Highlight-Step4" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step4.jpg" alt="Step 4: Match up the colors and enlarge the line size."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">Match the Border Line color to your Fill color, and increase the Border Line size to 16pt.</div></aside> </div> <p class="articleImageCaption">Step 4: Match up the colors and enlarge the line size.</p> <p>With the modified shape selected, Right or Control-Click on the style definition we applied earlier, and select Redefine Style from Selection:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step5');"> <div id="Highlight-Step5" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step5.jpg" alt="Step 5: Redefine the original Reserved style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step5-Caption">With the modified square selected, Re-Define the reserved Shape Style the Title Accent Objects are all referencing.</div></aside> </div> <p class="articleImageCaption">Step 5: Redefine the original Reserved style.</p> <p>Keynote will verify that you want to redefine every shape in the presentation using that style - be sure Update All Objects is ticked before pressing OK:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step6');"> <div id="Highlight-Step6" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step6.jpg" alt="Step 6: Confirm that you want to update all instances of the style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step6-Caption">Keynote will prompt you to confirm the new definition - click OK to Update All Objects.</div></aside> </div> <p class="articleImageCaption">Step 6: Confirm that you want to update all instances of the style.</p> <p>And you're done: you should see the change happen instantly on any slides you've already added:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step7');"> <div id="Highlight-Step7" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step7.jpg" alt="You're Done: remove the new Square to clean up."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step7-Caption">You're Done: remove the new Square to clean up.</div></aside> </div> <p class="articleImageCaption">You're Done: remove the new Square to clean up.</p> <p>And as you add new slides, you'll see that it's made the change on all of the underlying master slides throughout the presentation as well:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step8');"> <div id="Highlight-Step8" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step8.jpg" alt="You'll see your changes immediately on any existing slides and new slides you add."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step8-Caption">You'll see your changes immediately on any existing slides, as well as new slides you add from here forward.</div></aside> </div> <p class="articleImageCaption">You'll see your changes immediately on any existing slides and new slides you add.</p> <p>That's all there is to it: it's a very limited form of the whole-theme change we outline in our NXT Re-coloring Tutorial. You can save a custom version of Calais Brushed from your file if you'll be using this trick frequently: From the File menu, select Save Theme and Add to Theme Chooser to make your new theme appear in the My Themes section of the theme chooser, ready to start your next presentation with (if you ever need to remove it, Right-click or Control-click the theme in My Themes and select Delete).</p> ]]>tag:keynotepro.com,2017://14.0647Easy Callout Contrast Charts2017-06-20T10:47:14-04:002024-10-08T08:08:22-04:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/CalloutContrast-Charts/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Creating Callout/Contrast Charts in Keynote 6+" /></p><p class="articleBodyLede">Use a simple data visualization technique to bring clarity to your charts and keep your audience focused.</p> <p>Every Keynote theme includes at least one - and usually several - six-color Chart Style palettes. These palettes are often signature extensions of a given theme, and are highly coordinated to present six distinct series at once - that is, they allow for visual distinction between six different series alongside each other by use of a legend element or some other labeling that distinguishes each series from each other.</p> <p>This is the default behavior for all charts in Keynote, and if you're looking at a snapshot of concurrent data for two or six different regions at once, for instance, this is precisely how your data visualization should be approached. But if you're wanting to focus in on a single region, it can be difficult at times for your audience to hone in on a particular series when they're presented with so much color at once. No matter how well modeled the Style palette is, it requires some effort to "tune out" the other colors to focus on a specific series.</p> <p>In these cases, it's helpful to employ the Callout/Contrast method, sometimes referred to as Series Highlighting. This visualization technique neutralizes the surrounding series colors to effectively treat the series you're focusing on as the "Callout" or highlight data that should be focused on.</p> <p>Our latest theme releases include a Tonal Greyscale Style palette designed specifically for this purpose, but Apple also includes their own greyscale style defaults in Keynote 6+, so you can apply these same principles to any theme you happen to be using.</p> <p>Let's take a look at the process for making your own Callout/Contrast Chart.</p> <h2>The Basics</h2> <p>We're using our Geneva theme for this example, but again, you can use Apple's default greyscale palette to employ this technique in any theme you're using. The first method we'll use works best on White backgrounds, which provides the best contrast range for the entire greyscale palette - if you're using a theme with a colored background, you'll want to use the Alternate method detailed further below.</p> <p>We'll start with a simple, standard 2D Column chart setup, including six month's worth of data for four different regions, with a legend:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics1');"> <div id="Highlight-Basics1" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step1.jpg" alt="Our starting point is a default 2D Column Chart showing six months' data for four regions."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics1-Caption">Our starting point is a default 2D Column Chart showing six months' data for four regions.</div></aside> </div> <p class="articleImageCaption">Starting Point: a default 2D Column Chart with six months' data for four regions.</p> <p>Pretty straightforward - it's a colorful, full-spectrum palette, allowing your audience to use the legend to identify and key in on any of the six series independently. And if your focus is on all six months as aggregate data, this would be a good place to stop.</p> <p>But if we change the context ever-so-slightly, and presume we're looking at any one region as a point-of-focus, suddenly all of that color becomes something of a distraction. We're simply changing the slide title here to make the point - does this feel like the clearest way of having your audience focus on July's data?:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics2');"> <div id="Highlight-Basics2" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step2.jpg" alt="By the Title, we know we're supposed to focus on July - but the abundance of color makes that difficult to do."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics2-Caption">By the Title, we know we're supposed to focus on July - but the abundance of color makes that difficult to do.</div></aside> </div> <p class="articleImageCaption">The abundance of color makes it difficult to distinguish a single series contextually from the others.</p> <p>In context, the abundance of color is incredibly distracting from the point of the slide. Fortunately, there's something we can do to easily clear this up and make July's data the apparent focus of the slide.</p> <p>Select the chart, and be sure the Format &gt; Chart tab is highlighted to make the Chart Styles palette visible:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics3');"> <div id="Highlight-Basics3" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step3.jpg" alt="Step 1: Select the chart, and open the Format - Chart tab to expose the Chart Styles palette."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics3-Caption">Step 1: Select the chart, and open the Format &gt; Chart tab to expose the Chart Styles palette.</div></aside> </div> <p class="articleImageCaption">Step 1: Select the chart, and open the Format &gt; Chart tab to expose the Chart Styles palette.</p> <p>Now, we'll apply the included Tonal Greyscale palette to neutralize the color. If the theme you're using doesn't include this palette, apply Apple's default greyscale palette via the Chart Colors selector further down (on the second panel of options that are exposed when you click):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics4');"> <div id="Highlight-Basics4" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step4.jpg" alt="Step 2: Apply the Tonal Greyscale palette option (or Apple's default greyscale option below) to neutralize the color."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics4-Caption">Step 2: Apply the Tonal Greyscale palette option (or Apple's default greyscale option below) to neutralize the color.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the Tonal Greyscale palette option (or Apple's default greyscale option below) to neutralize the color.</p> <p>Now, with the chart selected, we'll click into the July column and set the color fill to a Highlight color. Here, we're using the theme's signature red color, but if you're stepping through a series of each month's data using this technique, you could also sample the original color used for the series in the original color palette to keep each slide keyed to a distinct color. We're only looking at July, though, so we'll go to the signature color to keep things easy &amp; coordinated:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics5');"> <div id="Highlight-Basics5" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step5.jpg" alt="Step 3: Select the focal series in question, and change to a color fill via the Style tab."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics5-Caption">Step 3: Select the focal series in question, and change to a color fill via the Style tab.</div></aside> </div> <p class="articleImageCaption">Step 3: Select the focal series in question, and change to a color fill via the Style tab.</p> <p>We're left with July's data being the clear point-of-focus on the slide. And since we're using a tonal palette, your audience can still distinguish between the surrounding months as needed via the legend and each series' subtly distinct color.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics6');"> <div id="Highlight-Basics6" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step6.jpg" alt="A finished basic setup, leaving July's data as the clear focus of the slide."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics6-Caption">A finished basic setup, leaving July's data as the clear focus of the slide.</div></aside> </div> <p class="articleImageCaption">A finished basic setup, leaving July's data as the clear focus of the slide.</p> <p>&nbsp;</p> <h2>Alternate Method: Flat Neutralization</h2> <p>The basic conversion is a big improvement from our starting point - July is clearly the point-of-focus, and the Tonal Greyscale allows for some level of distinction to be made from each of the surrounding months. But we can actually make this even clearer, provided we're not worried about the surrounding months being strongly-typed to the legend.</p> <p>This method is actually a better choice for Callouts appearing on colored backgrounds, as you can select a tonal variation that accents/contrasts the background color in situations where basic greyscale doesn't provide the proper contrast or otherwise clashes with the background color.</p> <p>We're duplicating our original slide here again - select the chart, and click on the Styles tab. Then, shift-select the first &amp; last series to select all of them at once:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate1');"> <div id="Highlight-Alternate1" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step1.jpg" alt="Alternate Step 1: Shift-Select all of the series, and select the Style Tab."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate1-Caption">Alternate Step 1: Shift-Select all of the series, and select the Style Tab.</div></aside> </div> <p class="articleImageCaption">Alternate Step 1: Shift-Select all of the series, and select the Style Tab.</p> <p>With all of the series selected, choose a fairly light neutral color - in this case, we're using the lightest grey in the default color selections (expand by clicking on the color itself instead of the wheel icon):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate2');"> <div id="Highlight-Alternate2" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step2.jpg" alt="Alternate Step 2: Apply a uniform neutral fill to the entire chart."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate2-Caption">Alternate Step 2: Apply a uniform neutral fill to the entire chart.</div></aside> </div> <p class="articleImageCaption">Alternate Step 2: Apply a uniform neutral fill to the entire chart.</p> <p>Now, like before, we can select July's column and add our Callout color to just that series:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate3');"> <div id="Highlight-Alternate3" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step3.jpg" alt="Alternate Step 3: Apply your Callout color to the series in question."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate3-Caption">Alternate Step 3: Apply your Callout color to the series in question.</div></aside> </div> <p class="articleImageCaption">Alternate Step 3: Apply your Callout color to the series in question.</p> <p>And you're finished. This is arguably the clearest representation of July's data as a focal point - though your audience will have to do a bit of counting to determine how your Callout data compares to May, for example, that comparison would be theirs to make on their own and not the explicit point of the slide.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate4');"> <div id="Highlight-Alternate4" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step4.jpg" alt="A finished Alternate Method example."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate4-Caption">A finished Alternate Method example.</div></aside> </div> <p class="articleImageCaption">A finished Alternate Method example.</p> <p>&nbsp;</p> <h2>Additional Thoughts</h2> <p>This technique is an easy yet powerful way to draw your audience's attention to a specific series within your data. You can take it further by employing the Alternate Method as a baseline, and introducing a second color to work in Contrast to the first in order to visually compare the two series in context of the broader data.</p> <p>Though we've only explored 2D columns here, this can be an invaluable technique when you're using other chart types - such as the 2D Line chart - where individual series are even more difficult to distinguish from the default aggregate coloration. Anywhere you'd like your audience to focus on a particular series amidst the broader data, do away with the excess color and make it easy for them to zero in on your data with a simple Highlight to draw their attention precisely where it's needed.</p> ]]>tag:keynotepro.com,2017://8.0526Instant Classic2017-05-04T18:26:55-04:002024-01-19T18:04:13-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/InstantClassic-PaloAltoNXT/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Transform Palo Alto NXT into Palo Alto Classic" /></p><p class="articleBodyLede">Quick Tip: Redefine a single Shape Style to transform Palo Alto NXT into Palo Alto Classic.</p> <p>We've received a few questions since the release of Palo Alto NXT from authors who missed the styling details of the older Visible Framework of Palo Alto '08 - in particular the Dashed Lines that made up the framework in the classic Palo Alto architecture.</p> <p>Thanks to the Shape Styles in Keynote 6/7, this is an extremely simple customization you can make in just a few short clicks. Let's take a look.</p> <h2>The Steps</h2> <p>There are only a few steps involved in transforming Palo Alto NXT to Palo Alto Classic. Start a new presentation using Palo Alto NXT, add a Blank slide, and add a Line Shape to the Stage on the Blank slide:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step1');"> <div id="Highlight-Step1" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step1.jpg" alt="Step 1: Add a Blank slide, and add a Line Shape to the Stage."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step1-Caption">To begin the process, start a new Palo Alto NXT presentation (or open one you've already made) and add a line shape to the Stage.</div></aside> </div> <p class="articleImageCaption">Step 1: Add a Blank slide, and add a Line Shape to the Stage.</p> <p>With the Line selected, click to the 2nd panel of Line Styles (bottom) to expose the styles used in the Visible Framework - click the first style (top) to apply that style's defaults to your line - this will act as our proxy shape for the edit:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step2');"> <div id="Highlight-Step2" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step2.jpg" alt="Step 2: Apply the current Framework Line Style to your line."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step2-Caption">Click to the 2nd panel of Line Styles (bottom) to expose the styles used in the Visible Framework - click the first style (top) to apply that style's defaults to your line.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the current Framework Line Style to your line.</p> <p>Now, we'll modify the line style and redefine it. Change the Stroke Type to the long dash (bottom), and change the Stroke Weight to .75 pt. Right-click the Shape Style we're working with (top), and select Redefine Style from Selection:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step3');"> <div id="Highlight-Step3" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step3.jpg" alt="Step 3: Change the line to Dashed, and Redefine."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step3-Caption">Change the Stroke Type to the long dash (bottom), and change the Stroke Weight to .75 pt. Right-click the Shape Style we're working with (top), and select Redefine Style from Selection.</div></aside> </div> <p class="articleImageCaption">Step 3: Change the line to Dashed, and Redefine.</p> <p>Keynote will verify that you want to redefine every shape in the presentation using that style - be sure Update All Objects is ticked before pressing OK:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step4');"> <div id="Highlight-Step4" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step4.jpg" alt="Step 4: Keynote will verify the Style is being updated."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">Keynote will verify the Style is being updated - be sure Update All Objects is ticked before pressing OK.</div></aside> </div> <p class="articleImageCaption">Step 4: Keynote will verify the Style is being updated - select All Objects.</p> <p>And you're done! You should see the change happen instantly on any slides you've already added:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step5');"> <div id="Highlight-Step5" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step5.jpg" alt="You're Done! You should see the change instantly."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">You're Done! You'll see the change immediately on your slides.</div></aside> </div> <p class="articleImageCaption">You're Done! You should see the change instantly on your slides.</p> <p>And if you add a new slide, you'll see that it's made the change on all of the underlying master slides throughout the presentation as well:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step6');"> <div id="Highlight-Step6" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step6.jpg" alt="Add a new slide, and you'll see that it's made the change on all of the underlying master slides."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">Add a new slide, and you'll see that it's made the change on all of the underlying master slides.</div></aside> </div> <p class="articleImageCaption">Add a new slide to verify.</p> <p>That's all there is to it - it's a very limited form of the whole-theme change we outline in our NXT Re-coloring Tutorial. If you want to take it further and redefine the entire color model of the theme, that tutorial is a great place to start to get a better understanding of the bigger theme customization picture - the specific shapes to target for modification in Palo Alto NXT are noted in the Supplemental File.</p> <p>You can save a custom version of Palo Alto Classic from the file you changed as desired: Remove the additional slides you added during this tutorial, so that you’re left with just a Title slide. From the File menu, select Save Theme and Add to Theme Chooser to make your new theme appear in the My Themes section of the theme chooser, ready to start your next presentation with (if you ever need to remove it, Right-click or Control-click the theme in My Themes and select Delete).</p> ]]>tag:keynotepro.com,2017://6.0411Flattening Shared Presentations2017-04-11T09:11:27-04:002024-01-19T17:02:27-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/Flatten-PostInteractive/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Flatten Your Posted Presentations to Prevent Offline Editing." /></p><p class="articleBodyLede">Flatten Your Posted Interactive Presentations to Prevent Offline Editing.</p> <p>As noted in our <a href="/blog/post/03302017/Posting-Interactive-Presentations/" class="hinted">Tips and Cautions for Posting Interactive Presentations with Keynote 7.1</a> overview, this new feature makes it very easy to share your presentations on WordPress, Medium and other websites - but it leaves your presentations open to download and offline editing by anyone clicking the <em>View in Keynote</em> link at the bottom of each presentation you post.</p> <p>Apple's Product Security team has since confirmed via email that this behavior is as designed - the specific file you're sharing can't be edited once marked <em>View Only</em>, but it is "expected that users can download and edit a local copy of the presentation" once it's shared. So it doesn't look like this will be addressed any time soon - if at all - which puts a bit of a damper on this feature.</p> <p>Fortunately, it's relatively easy to create a flattened version of your presentation that you can share using this feature without leaving yourself exposed to offline editing. Bear in mind that any Object Transitions like Magic Move won't work on flats, since it's essentially transitioning from image-to-image instead of object-to-object: pre-edit a version of your show before hand as needed to optimize for simple transitions between slide-to-slide or build-to-build snapshots. </p> <h2>The Basics</h2> <p>There are only a few steps involved with creating a Flat version of your presentation. We're using the file from the Disruptor sample movie here as a quick example. From the File menu, click on Export To and Images... to start the process:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-ExportImages');"> <div id="Highlight-ExportImages" data-group="flattenInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step1.jpg" alt="Step 1: Export To - Images to create the flats..."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ExportImages-Caption">To begin the process, click on Export To and Images. Check the Create an Image for Each Stage of Builds option as needed, and select PNG as Format.</div></aside> </div> <p class="articleImageCaption">Step 1: Export To &gt; Images to create the flats...</p> <p>This will open the Image Export menu, which you may already be familiar with. If you're including any multi-step builds on your slides, be sure to check the "Create an image for each stage of builds" option. Select PNG as your Format, and click Next to select a location to save your exports.</p> <p>Start a <b>New</b> presentation, and select the <b>Black</b> or <b>White</b> theme matching your exported presentation's aspect ratio - the Black and White themes have the smallest overhead in terms of file weight, so the resulting file you'll eventually share will come down to the amount of images you're inserting in terms of overall weight.</p> <p>Open the folder containing the slides you exported in the previous step. Select all of the images in the folder, and drag them onto the navigator in your new presentation:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-DragImages');"> <div id="Highlight-DragImages" data-group="flattenInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step2.jpg" alt="Step 2: Drag the exported images to a new blank presentation"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-DragImages-Caption">Select the exported slide images, and drag them onto the navigator of a new blank presentation - use Black or White theme to keep overhead down.</div></aside> </div> <p class="articleImageCaption">Step 2: Drag the exported images to a new blank presentation.</p> <p>This will create a new slide for each slide image you're inserting into the new presentation automatically:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-Populated');"> <div id="Highlight-Populated" data-group="flattenInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step3.jpg" alt="Step 3: Keynote will create a new slide for each image you're inserting."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Populated-Caption">Keynote will create a new slide for each image you're dragging in - delete Slide 1 to trim the show to only your exported slides.</div></aside> </div> <p class="articleImageCaption">Step 3: Keynote will create a new slide for each image you're inserting.</p> <p>Delete Slide 1 to remove the original Title slide you started with - you'll be left with only the slide images you exported from your original presentation.</p> <p>Now, you can add transitions between slides (or the build steps if you selected that option in the previous step). Again, Object Builds won't work here since you're transitioning between images instead of objects - so stick with simpler transition types like Cube or Doorway that work with the slides as a whole vs the individual objects. Also note that the transitions you add here won't appear during the Interactive Playback on your website - these will only appear for visitors who click the View in Keynote link to view your presentation on iCloud or in Keynote for iOS.</p> <p>Once you've saved, you can <a href="/blog/post/03302017/Posting-Interactive-Presentations/" class="hinted">Post Your Presentation</a> following the steps in our previous guide. Visitors will be able to download a copy of this file via the process we outlined earlier, but since this version of your presentation is Flattened, they won't be able to make direct edits to your work in their offline copy of the file - it's essentially an image slideshow with bonus transitions now.</p> ]]>tag:keynotepro.com,2017://5.0303Posting Interactive Presentations2017-03-30T11:03:51-04:002023-12-08T11:07:13-05:00KeynoteProhttps://keynotepro.com/info@keynotepro.com<![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/PostingInteractivePresentations/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Posting Interactive Presentations to the web with Keynote 7.1" /></p><p class="articleBodyLede">Some Tips - and Cautions - on Posting Interactive Presentations with Keynote 7.1</p> <p>The Keynote 7.1 Update brought an interesting new feature to Apple's presentation app: the ability to <strong>Post Interactive Presentations to WordPress, Medium and the web</strong>. We touched on this briefly in our <a href="/support/topics/The-Upgrade-Report/" title="The Upgrade Report" target="_self" class="hinted">Keynote 7.1 Upgrade Report</a>, and while the new service still has a few bugs to work out and may not be for everyone yet, there's already a lot of buzz building around the web from authors anxious to explore an easy alternative to SlideShare and other online slide-hosting services.</p><p>Apple's made it very easy - though not entirely intuitive - to share your presentations with this new feature. But you'll want to be mindful of how much you're actually sharing with this service at the moment: there are a few non-obvious Privacy/Security concerns with the current implementation that are worth noting before you rush to try this out, particularly for business presenters.</p> <h2>The Basics</h2> <p>There are only a few steps involved with the sharing process - Apple's made it as close to one-step as possible. You'll want to be working with a presentation saved to your iCloud Drive to get this working, but Keynote will prompt you to do so if you're working with a local file.</p> <p>From the <b>Share</b> menu, click on <b>Collaborate with Others</b> to start the process:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-ShareCollaborate');"> <div id="Highlight-ShareCollaborate" data-group="postInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step1.jpg" alt="Step 1: Share Menu, Collaborate with Others..."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ShareCollaborate-Caption">To begin the process, click on Share and Collaborate with Others. Keynote will suggest that you need to save your presentation to your iCloud Drive if you're working with a local file.</div></aside> </div> <p class="articleImageCaption">Step 1: Share &gt; Collaborate with Others...</p> <p>This will open the Real-time Collaboration menu, which you may already be familiar with. Select <b>Copy Link</b> to expose the additional options:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-CopyLink');"> <div id="Highlight-CopyLink" data-group="postInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step2.jpg" alt="Step 1: Click Copy Link to expose the Share Options"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-CopyLink-Caption">Click Copy Link to expose the Share Options: select Anyone with a Link, and select your permissions preference.</div></aside> </div> <p class="articleImageCaption">Step 2: Click Copy Link to expose the Share Options</p> <p>Under <b>Who can Access</b>, you'll want to select <i>Anyone with the Link</i> to be sure it can be viewed by anyone browsing your site. Under <b>Permission</b>, select <i>View Only</i> to restrict visitors from making changes to your presentation. *There's currently a caveat to this permission, though - see below.</p> <p>Click <b>Share</b>, and Keynote will display a <i>Starting Collaboration...</i> indicator. Once it's finished, the URL you'll want to use is actually copied to your Clipboard, though this is less than obvious the first time through.</p> <h2>Posting Your Presentation</h2> <p>Now you're ready to post your presentation. For WordPress users, this is incredibly simple: simply paste the link from your clipboard to a new line in the editor and the platform will take case of the rest. If you're publishing on Medium, click on the Add Embed button, paste the link from your clipboard, and the platform will handle the rest.</p> <p>Posting to non-WordPress/Medium sites requires a bit more effort, but not all that much. You'll need to be able to embed an iFrame element in your page to host the presentation - the code required is really straightforward, but David MacDonald has already posted a handy <a href="https://keynoteiframe.com/" class="appExternal hinted" rel="nofollow" target="_blank">keynoteiframe.com</a> site that will generate that code for you using the URL you provide and explain the parameters involved. Add the iFrame to your page, and you'll end up with something like this:</p> <iframe loading="lazy" src="https://www.icloud.com/keynote/0vP1TZDOcZ4C8YKbtKP9BBVxg?embed=true" frameborder="0" referrer="no-referrer" class="KeynoteLive-SD"></iframe> <p>The embedded presentation is essentially a flat Gallery, and doesn't include any of your builds, animations or transitions. But there's a prominent <b>Open in Keynote</b> button, which will either send your viewers to a browser-based Keynote for iCloud session on the desktop or open a copy of the presentation directly in Keynote for iOS on mobile devices, both of which will keep your builds and transitions intact.</p> <h2>A Word of Caution</h2> <p>There's something of a caveat to Apple's current implementation that should give pause to most business presenters: even if you select View Only permission, viewers who click the link to Open in Keynote at the bottom of the in-page slideshow will have the ability to download a fully-editable copy of your presentation from the Keynote for iCloud website (or via the Send a Copy function in Keynote for iOS) at any time they choose. They won't be able to edit the version of the presentation you're hosting, but they'll be able to download a complete Keynote or PowerPoint copy of your presentation to their computer or device to do with as they see fit.</p> <p>So don't post anything you wouldn't want to see edited or re-hosted by a determined party - you'll need to stick to SlideShare for the time being if you need to prohibit downloads altogether (or <a href="/blog/post/04112017/Flattening-Shared-Presentations/" class="hinted">build a "flattened" version of your show</a> with image exports of your slides in a Blank presentation). We're sure this is likely an extension of the Collaboration services this feature is built upon being originally aimed at open sharing/collaboration, but hope that Apple addresses it in the near future to make the feature more truly useful to professionals and business presenters who can't risk live files floating around openly.</p> <h4>Update April 11, 2017</h4> <p>A representative from Apple's Product Security team has since confirmed via email that the download behavior noted above is intended and behaving as designed. The specific file you're sharing can't be edited once marked <i>View Only</i>, but it is "expected that users can download and edit a local copy of the presentation" once it's shared. So it doesn't look like this will be addressed any time soon - if at all - which puts a bit of a damper on this feature for most business presenters.</p> <p>If you're concerned about live versions of the files you're posting with this feature floating around in the wild, your best bet is to flatten your show before sharing it out: we've put together a <a href="/blog/post/04112017/Flattening-Shared-Presentations/" class="hinted">Quick Tutorial</a> to walk you through the process. Likewise, SlideShare offers an option to Prevent Downloads of files you're hosting through their service, though there are a few more steps involved.</p> ]]>
This XML file does not appear to have any style information associated with it. The document tree is shown below.
<feed xmlns="http://www.w3.org/2005/Atom">
<title type="text">KeynotePro Tutorials</title>
<subtitle type="text">The latest Tutorials from KeynotePro.com</subtitle>
<id>https://keynotepro.com/feeds/Tutorials/</id>
<rights type="text">Copyright 2003 - 2024 KeynotePro. All Rights Reserved.</rights>
<updated>2024-11-12T15:41:53-05:00</updated>
<generator>KeynotePro.com</generator>
<link rel="alternate" href="https://keynotepro.com/"/>
<link rel="self" type="application/atom+xml" title="KeynotePro Feeds: Tutorials" length="99999" href="https://keynotepro.com/feeds/Tutorials/"/>
<entry>
<id>tag:keynotepro.com,2024://17.1133</id>
<title type="text">Transforming the Fills Palette</title>
<published>2024-11-10T10:33:45-05:00</published>
<updated>2024-11-12T15:41:53-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/11102024/Transforming-the-Fills-Palette/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/Support/FillsPalette/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><link href="/css/KNPNXT-LibraryViews.css" rel="stylesheet" type="text/css"> <p class="articleBodyLede">If you’re dialing in a fully-customized theme or template starter in Keynote or Pages, you can adapt your palette into the Color, Gradient and Image Fills Palette to make it easier to apply your color selections consistently throughout your file.</p> <p>In previous tutorials, we've taken a look at re-defining Shape, Text, and other styles associated with a file's core Theme elements. If this is your first time delving into this sort of customization, our <a href="/Support/Topic/Customization/" class="hinted">Make it Your Own</a> tutorial provides a good bit of additional background information on the basics.</p> <p>Here, though, we’re going to zoom in on one particular element of that process to better understand how you can integrate your accent colors into the Fills UI components, how the reference palette is structured, and how to make quick work of re-defining the entire palette through a custom provisioning model designed to streamline the process.</p> <h2>The Fills Palette</h2> <p>If we return to the My Custom Theme file we were working on in the Styles tutorial and select one of the shapes we used to proxy the Shape Style settings, you’ll see the Color Fills UI by hovering over the assigned color in the Style &gt; Fill inspector and clicking the arrow to expand the palette:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-FillMenus');"> <div id="Highlight-FillMenus" data-group="fillMenus" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure1.jpg" alt="Color Fills Menu exposed via the current Color Fill"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-FillMenus-Caption">Hover the currently-applied Color Fill and click the arrow to expose the basic Color Fills embedded in your working file.</div></aside> </div> <p class="articleImageCaption">The Color Fills menu is exposed by clicking on the active Color Fill.</p> <p>As the style is using a Color Fill in this case, only solid-color fills are shown in that menu – but you can access the extended Color, Gradient and Image Fills defined for the file by hovering the Fill preview shown right above and clicking the arrow to expand it:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-FillMenus1');"> <div id="Highlight-FillMenus1" data-group="fillMenus" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure2.jpg" alt="The expanded Color, Gradient, and Image Fills palette exposed via the parent Fill preview"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-FillMenus1-Caption">Hover the parent-level Fill and click to expose the expanded Color, Gradient, and Image Fills menu.</div></aside> </div> <p class="articleImageCaption">The expanded Color, Gradient, and Image Fills menu is exposed by clicking the parent-level preview.</p> <p>The Color, Gradient, and Image fills are all still toned to the original palette we started with in this case (the original Comfrey palette from OM X), but you’ll notice we have a 4:6 grid of tints/shades of the original accent colors, plus another 5 gray-scale tints in the Color Fills section, with Gradient and Image Fills following the same color pattern below.</p> <p>In Keynote, these aren't generated automatically – each of the rectangles in the palette can be re-styled using specific Color/Gradient/Image Fill settings via drag-replacement, and don’t inherit from any Shape or Line Style re-assignments you may have already updated – so you can exert a lot of control in terms of specific color assignments or how the palette is modeled as a result.</p> <p>That said, because this isn't automated, you’ll need to go Fill-by-Fill to set this menu, so give yourself a few minutes to get it built in your working file.</p> <h2>A Provisioning Jumpstart</h2> <p>To make this process a bit easier, we’re going to use a Color Provisioning Starter slide, which is similar to a setup we use internally for branching the various color-driven themes into their different variants during production:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter');"> <div id="Highlight-ColorStarter" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure3.jpg" alt="Open the Color Provisioning Starter slide to help speed things up."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter-Caption">We'll use a Color Provisioning Starter slide to make it easier to model our revised Fills palette.</div></aside> </div> <p class="articleImageCaption">The downloadable Color Provisioning Starter slide is designed to make this easier.</p> <p>This is a single-slide work file that you’ll be able to use as a Copy source for your working file when it’s time to define each of those palette items in the Fills menu, and can be downloaded here:</p> <aside style="display: none;"> <div class="metaReqs vStack " style="width: 100%; margin-bottom: 36px;"> <div id="desktopTrialDownloads" class="mobileFiles"> <div class="fileItem mobile hStack spaceStk centerVS"> <div> <div class="fileItemDisplayName">Color Provisioning Starter (SD)</div> <div class="reqsDetail">Keynote File (.key)</div> </div> <div class="fileItemButton"><button id="" class="prefToggleTrigger" style="width: unset; margin: 5px 9px 0px 18px;" onclick="queueTrialDownload('mobile','Keynote','file','Keynote Color Provisioning Starter');">Download</button></div> </div> </div> <div id="mobileTrialDownloads"> <div class="vStack mobileFiles"> <div class="resourceGrid" style="grid-template-columns: repeat(1, 1fr); margin-bottom: 6px;"> <div class="hStack centerVS centerHS"> <div><svg id="" class="" style="margin: 10px 7px 3px 0px;"><use xlink:href="#responsive-icon"></use></svg></div> <div class="reqsDetail">Tap Open to begin the filestream, then "Open in Keynote" when prompted:</div> </div> </div> <div class="fileItem mobile vStack"> <div id="" class="fileItemLinkage hStack spaceStk centerVS"> <div> <div class="fileItemDisplayName">Color Provisioning Starter (SD)</div> </div> <div class="fileItemButton"><button id="" class="prefToggleTrigger" style="width: unset; margin: 6px 0px 0px 18px;" onclick="queueTrialDownload('mobile','Keynote','file','Keynote Color Provisioning Starter');">Open</button></div> </div> </div> </div> </div> <div class="resourceGrid" style="grid-template-columns: repeat(1, 1fr); margin-top: 6px;"> <div class="hStack centerVS centerHS"> <div class="reqsDetail">All Downloads subject to the <a href="/Policies/#EULA" class="hinted">KeynotePro End-User License Agreement (EULA)</a></div> </div> </div> </div> <div id="panelShell" class="zoomShell hidden"> <div id="panelContrast" class="zoomContrast vStack centerHS centerVS"> <div class="EULAPanel zoomModal trials vStack centerHS centerVS"> <div class="zoomModalClose"><button type="button" id="zoomModalClose" onclick="collapseAssistivePanel();"><svg id="" class="zoomModalCloseIcon"><use xlink:href="#navClose-icon"></use></svg></button></div> <div class="vStack zoomContents zoomBodyContent"> <div id="assistiveContents" class="zoomBodyScrollable bodyForm"> <div class="itemSectionName">Your Download is Queued:</div> <div class="formSpacer">&nbsp;</div> <div>Please enter a valid email address in the field provided to continue. Alternately, <a href="/Login/" class="hinted">Sign In</a> to skip this step.</div> <div class="formSpacer">&nbsp;</div> <div><input type="text" id="userName" name="userID" aria-label="Email or KeynotePro ID" class="bodyFormInput" placeholder="your@email" autocomplete="email" onfocus="this.placeholder = ''" onblur="this.placeholder = 'your@email'" autocapitalize="off" value=""></div> <div id="IDError" class="bodyFormError" style="display: none;"> <div class="bodyErrorDetail">Please enter a valid email address.</div> </div> <div id="userEmailDesc" class="bodyFormDescriptor">Email Address</div> <div class="formSpacer">&nbsp;</div> <div class="hStack"> <div style="margin-right: 9px;"> <label class="switchSmall"> <input type="checkbox" id="trialModalConnect" name="trialModalConnect"> <span class="sliderSmallSub bodyFormSlider"></span> </label> </div> <div class="vStack"> <div class="prefTitle "><b>Stay Connected</b></div> <div class="standardFeatureText ">Subscribe to KeynotePro Connect to receive periodic news on new releases, updates, and subscriber&nbsp;exclusives.</div> </div> </div> <div class="formSpacer">&nbsp;</div> <div id="rcbShell" class="modalActionable modalAActive hStack bodyFormButton" style="margin-bottom: unset; justify-content: center;"><button id="continueButton" class="T2SignOut"><span>Continue</span></button><button id="subButton" class="T2Submitting hidden"><div id="submitPending" class="pendingReturn"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div></button></div> <input type="hidden" id="pendingSource" value=""><input type="hidden" id="pendingPlatform" value=""><input type="hidden" id="pendingFormat" value=""><input type="hidden" id="pendingFileStub" value=""><input type="hidden" id="trialLogistics" value="false"> </div> </div> </div> </div> </div> </aside> <script src="https://keynotepro.com/scripts/KNPNXT-Assistive-Panels.js" async=""></script> <script src="https://keynotepro.com/scripts/KNPNXT-Library-FreeDownloads.js" async=""></script> <script src="https://keynotepro.com/Support/pool/includeTrialDLs.js" async=""></script> <p>The file’s built around a Basic White slide – if you’re building toward a different base background color, you’ll want to also set the background color in the Starter to match your target background so you’re seeing everything in the proper context.</p> <p>In Step 1, we’re going to set the highlighted root shapes to our updated Accent Colors: the pseudo-transparency objects in front of the root colors will give us easy sampling points to model our tints &amp; shades around. If you already have specific tints defined as part of your branding guidelines, you can skip this step and map your existing colors to the 4:6 color grid proxies in Step 2.</p> <p>If you've already defined Shape styles in your working file, you can Format &gt; Copy Style from shapes in that file to Paste on the root shapes in the Step 1 row to keep things in sync – we’ll otherwise set the color values of the root shapes one-by-one via the color inspector. Here, I've pasted the Accent shade of the updated Persimmon color we were working with earlier (Shape Style 1 in the build file):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter1');"> <div id="Highlight-ColorStarter1" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure4.jpg" alt="Set the Root Color to preview Shades and Tints in Step 1."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter1-Caption">In the Step 1 Row, set the first Root Color to your working Accent 1 fill to preview Shades and Tints.</div></aside> </div> <p class="articleImageCaption">Set the first Root Color to your first Accent color to preview Shades and Tints.</p> <p>And we immediately have a rough Shades/Tints baseline to start from on that color, which we can sample into the shapes below and dial in. We’ll eventually do the same for the five remaining accents, but for now, let’s walk out what we’re going to be doing around that first color.</p> <p>The 4:6 grid of Tints and Shades can be structured however you like: we’re going to implement a Light &gt; Dark step here, but we could just as easily lead with the primary Accent color above sub-shades below, etc. – it’s totally up to you.</p> <p>Here, I’m going to include the root Accent in the palette, so I’ll set the rectangle in the second row to the same color, so that we can sample a lighter color above it in the menu:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter2');"> <div id="Highlight-ColorStarter2" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure5.jpg" alt="Here, we're including the root color as the second color in the stack."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter2-Caption">We're including the Root color in our eventual palette below a lighter Tint, so we set it on the second Color row under Step 2.</div></aside> </div> <p class="articleImageCaption">We're including the Root color in our Fills, spaced down to allow a Tint above.</p> <p>Now, if we select the rectangle right above, click the color wheel to bring up the color inspector, and then the eyedropper tool from the inspector, we can sample from the bottom half of the chips cast in Row 1 to get an initial lighter Tint:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter3');"> <div id="Highlight-ColorStarter3" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure6.jpg" alt="We'll sample the lighter Tint from the chips created in Step 1."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter3-Caption">Add the lighter Tint to the first row above, sampling from the "chips" above in Step 1.</div></aside> </div> <p class="articleImageCaption">Sample a lighter Tint from the chips created in Step 1 into the row above.</p> <p>Then, for the shapes below, we can select a couple of the darker Shades to complete the Color section of the column in exactly the same manner:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter4');"> <div id="Highlight-ColorStarter4" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure7.jpg" alt="Then darker Shades to the rows below."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter4-Caption">Then, we'll sample two darker Shades into the rows below to round out the first column Colors.</div></aside> </div> <p class="articleImageCaption">Sample two darker Shades into the rows below to round out the first column Colors.</p> <p>We may yet adjust those colors in context of the neighboring accent column, but for now, we have our individual Color shades for the first column. Selecting the rectangle in the Gradient row, you’ll notice we’re doing much the same thing here, but with two colors to define as the Fill selector is set to Gradient Fill. I’m using the root color at top, with a darker shade sampled on the bottom:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter5');"> <div id="Highlight-ColorStarter5" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure8.jpg" alt="Sample two colors for the Gradient row."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter5-Caption">Next, we'll sample 2 colors for the Gradient row – our Root accent plus a darker shade here.</div></aside> </div> <p class="articleImageCaption">Sample two colors to create the associated Gradient in the row below.</p> <p>And finally the Image Row. Here, you’ll notice this is an Advanced Image Fill (the default “paper” texture from OM X), set to Tile, which is Tinted with a transparent color. If we sample the root accent color, it will shift back to 100% Opacity at the bottom of the color inspector: we’ll need to pull the Opacity down (in the color inspector, *not* for the object itself) to find a good balance between texture and color. A little goes a long way here, depending on your texture/color combination – I’m going with 75% Opacity here to keep it as close as possible to the root color while still allowing a bit of the texture to show through:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter6');"> <div id="Highlight-ColorStarter6" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure9.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure9-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure9.jpg" alt="Set a mix color for the Image Fill and adjust the Opacity."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter6-Caption">Now, bring the root Accent color to the Image Fill, and reduce the Opacity to mix with the texture Image.</div></aside> </div> <p class="articleImageCaption">Set a mix color for the Image Fill and adjust the Opacity to blend.</p> <p>Again, we may tweak any of these once we have a bit more of the palette modeled out – for now, we’re going to repeat those steps across the five remaining columns, just sampling in the same relative pattern of Light &gt; Dark for each one and setting the same Gradient / Image options per color, which gives us the following:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ColorStarter7');"> <div id="Highlight-ColorStarter7" data-group="colorStarter" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure10.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure10-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure10.jpg" alt="Repeat for the remaining accent colors to build a full 6-column palette."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ColorStarter7-Caption">Repeat that process for the remaining 5 columns to build a full palette source.</div></aside> </div> <p class="articleImageCaption">Repeat that process for the remaining 5 columns to build a full palette source.</p> <p>Pretty good starting point – in a production setting, I’d tend bump the darkest Color row by 3-5% (via HSB adjustment, as we did before with the Accent colors) so it’s not such a harsh step, but this will work well enough to get us to the actual integration into the Fills Menu in the next step.</p> <h2>Redefining the Fills Menu</h2> <p>From here, we can drag-select all of the Color, Gradient, and Image rectangles on our Starter slide (everything below the number 2) and Copy: return to our working Custom Theme file from before, add a Blank (or White) slide, and Paste to bring the objects in. Ignore any Locked objects you happen to drag across on the Starter slide: they won’t be included in the Paste.</p> <p>To replace the items in the Fills palette, we’re going to drag each item’s fill to the corresponding spot on the palette to Replace the existing fill with our new one. Select the first, lightest rectangle in the first column, expose the extended Fills palette, and Drag the Current Fill over to highlight and then replace the corresponding item in the palette:</p> <video class="lazyVid lightVid" preload="none" autoplay="" muted="" loop="" playsinline="" poster="/images/spacers/slugs-Blog_16x9.png"><source src="" data-src="/images/blog/pool/support/FillsPalette/FillsPalette-DragReplace-720p.mp4" type="video/mp4">Your Browser does not support Video.</video> <video class="lazyVid darkVid" preload="none" autoplay="" muted="" loop="" playsinline="" poster="/images/spacers/slugs-Blog_16x9-D.png"><source src="" data-src="/images/blog/pool/support/FillsPalette/FillsPalette-DragReplace-720p-D.mp4" type="video/mp4">Your Browser does not support Video.</video> <p class="articleImageCaption">Drag the applied fill to replace the equivalent object in the palette.</p> <p>Repeat that for each of the rectangles on the slide, dragging the fill contents to the appropriate rectangle in the palette. Gradient Fills will only apply to the Gradient row, and likewise with Image Fills. We’re leaving the default Gray-scale objects untouched here (and generally), but if you’d like to specify custom values for those as well you can.</p> <p>Once you’ve hit the last rectangle, your Fills palette should be completely in sync with your updated Accent colors in your build file:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-FinalPalette');"> <div id="Highlight-FinalPalette" data-group="finalPalette" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure11.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/FillsPalette/Fills_Palette-Figure11-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/FillsPalette/Fills_Palette-Figure11.jpg" alt="Repeat for each of the rectangles to replace the original palette."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-FinalPalette-Caption">Repeat that for each of the proxy shapes to redefine the entire palette in your build file.</div></aside> </div> <p class="articleImageCaption">Repeat that for each of the proxy shapes to redefine the entire palette in your build file.</p> <p>And you’re done. If you think you might make changes to the palette at some point in the future, you can save that slide with your primary build file – just bear in mind that your updates will only be available in new files generated from your updated theme or template (unless you re-apply the theme).</p> <h2 class="articleSupportingTitle articleFoot">Additional Resources</h2> <ul><li><a href="/Support/Topic/Customization/" class="appExternal hinted">Recoloring Shape-based KeynotePro Themes in Keynote 6+</a></li></ul> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2024://10.0100</id>
<title type="text">Make it Your Own</title>
<published>2024-01-01T00:00:00-05:00</published>
<updated>2024-11-11T07:31:16-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/01012024/Customization/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/Support/Customization101/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><svg style="display: none;"> <symbol id="autobundle-icon" viewBox="0 0 36 36"> <path d="M15.05,5.47c1.83,0,3.32,1.48,3.32,3.32v8.84h8.84c1.83,0,3.32,1.48,3.32,3.32v7.74c0,1.83-1.48,3.32-3.32,3.32H7.32c-1.83,0-3.32-1.48-3.32-3.32V8.79c0-1.83,1.48-3.32,3.32-3.32h7.74ZM16.16,19.84H6.21v8.84c0,.61.5,1.11,1.11,1.11h8.84s0-9.95,0-9.95ZM27.21,19.84h-8.84v9.95h8.84c.61,0,1.11-.49,1.11-1.11v-7.74c0-.61-.49-1.11-1.11-1.11ZM15.05,7.68h-7.74c-.61,0-1.11.49-1.11,1.11v8.84h9.95v-8.84c0-.61-.49-1.11-1.11-1.11ZM25.95,4.01h.15c.55-.01,1.02.4,1.09.94v.15s.01,3.68.01,3.68h3.68c.55,0,1.02.41,1.09.95v.15c.01.55-.4,1.02-.94,1.09h-.15s-3.68.01-3.68.01v3.68c0,.55-.41,1.02-.95,1.09h-.15c-.55.01-1.02-.4-1.09-.94v-.15s-.01-3.68-.01-3.68h-3.68c-.55,0-1.02-.41-1.09-.95v-.15c-.01-.55.4-1.02.94-1.09h.15s3.68-.01,3.68-.01v-3.68c0-.55.41-1.02.95-1.09Z"></path> </symbol> <symbol id="saveEdit-icon" viewBox="0 0 36 36"> <path d="M7.34,3c-2.4,0-4.34,1.94-4.34,4.34v19.74c0,2.4,1.94,4.34,4.34,4.34h6.71c-.01-.32.02-.63.1-.94l.36-1.43h-4.4v-8.29c0-.65.53-1.18,1.18-1.18h10.43l2.27-2.27c-.28-.07-.56-.1-.85-.1h-11.84c-1.96,0-3.55,1.59-3.55,3.55v8.29h-.39c-1.09,0-1.97-.88-1.97-1.97V7.34c0-1.09.88-1.97,1.97-1.97h1.97v4.34c0,1.96,1.59,3.55,3.55,3.55h7.11c1.96,0,3.55-1.59,3.55-3.55v-4.31c.57.09,1.09.36,1.5.77l3.21,3.21c.52.52.81,1.22.81,1.95v2.72c.11,0,.22-.01.34-.01h0c.69,0,1.38.14,2.03.41v-3.12c0-1.36-.54-2.67-1.5-3.63l-3.21-3.21c-.96-.96-2.27-1.5-3.63-1.5H7.34ZM11.68,9.71v-4.34h9.47v4.34c0,.65-.53,1.18-1.18,1.18h-7.11c-.65,0-1.18-.53-1.18-1.18h0ZM29.39,15.63h0c-.92,0-1.85.35-2.55,1.06l-9.32,9.32c-.54.54-.93,1.22-1.12,1.97l-.72,2.89c-.23.92.33,1.85,1.25,2.08.27.07.56.07.83,0l2.89-.72c.75-.19,1.43-.57,1.97-1.12l9.32-9.32c1.41-1.41,1.41-3.69,0-5.1-.68-.68-1.6-1.06-2.55-1.06Z"></path> </symbol> </svg> <div class="bodyFlexBoard flowPrint reverseMobile"> <div class="formLede "> <div class=""> <div class="bodyEyebrow hStack centerVS"><div><svg class="sectionEyebrow-icon" style="display: none;"><use xlink:href="#list-icon"></use></svg></div><div>In this Guide:</div></div> <div class="ledeListWrapper slim"> <script src="https://keynotepro.com/Support/pool/customization101.js" defer=""></script> <ul class="ledeList"> <li class="jumpSetStage"><a class="internal" aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> </div> </div> </div> <div class="articleBody articleLedeBodyXL"> <p class="articleBodyLede ">Thanks to the Style Palettes in Keynote and Pages, it’s incredibly easy to transform one of our shape-based themes or templates from it’s stock, default state to a more unique blend of color, type or effects more suited to your own personal&nbsp;tastes.</p> <p>If you have specific brand guidelines you need to match on a day-to-day basis, for instance, making a theme-wide change to fit defined color or typeface specifications is a straightforward process in modern versions of Keynote &amp; Pages, provided your theme or template is built to take advantage of Styles.</p> <p>Most of our modern themes &amp; templates are great candidates for this treatment, but for this example, we'll be recoloring <a href="/Library/OM-X/" title="an internal link" class=" hinted">OM X</a>, a print-inspired&nbsp;favorite. We're going to start with Keynote, but the same core principles apply to our Pages template systems at this level.</p> </div> </div> <section id="setStage"> <h2 class="articleSupportingTitle">Set the Stage</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage selected"><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>Start a new presentation with OM X, and add a new Blank slide to your presentation - this will allow you to clearly see the shapes we’ll use to make our changes with. If you don't have the OM X themes in your library, you can download a free slide-limited Trial Edition here to follow along with: <a href="/Library/Free/OM-X-LE/" class="hinted">Free Keynote Themes - OM X Limited Edition</a></p> <p>Select Shape from the toolbar: you’ll see a selection of shapes to insert, which will automatically default to the first Shape Style once they're added to the slide. Add a square to the slide, which will behave as our "proxy" object for the first style change. </p> <div class="enableZoom " onclick="enlargeImage('Highlight-AddShape1');"> <div id="Highlight-AddShape1" data-group="setTheStage" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step1.jpg" alt="Add a square shape to the stage to act as a style proxy."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AddShape1-Caption">First, Add a Blank working slide, and add a new Square shape to the stage to act as a proxy for the style changes we'll&nbsp;make.</div></aside> </div> <p class="articleImageCaption">Add a Blank working slide, and add a new Square shape to the stage to act as a proxy.</p> <p>Typically, the first 6 shape styles in our systems reflect the default chart palette, the first of which is generally <i>slightly</i> different than the theme's framework colors (so that there's some level of contrast between a default shape sitting against a full-color background – more on that later). We push foundation-level, "theme-reserved" styles to the end of the Shape Styles list – in this case, OM's reserved colors are in the second panel of styles, which you can scroll to when the square is selected. Apply the dark Comfrey style to your square as shown, and we'll be ready to start modification:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ChangeStyle1');"> <div id="Highlight-ChangeStyle1" data-group="setTheStage" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step2.jpg" alt="Assign the Reserved shape style"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ChangeStyle1-Caption">Next, scroll to the framework-Reserved styles and apply the first reserved Shape Style - the Comfrey Accent used throughout the theme - to the first proxy shape.</div></aside> </div> <p class="articleImageCaption">Apply the first "reserved" Shape Style (from the second panel of styles) to our proxy square.</p> </div> </div> </section> <section id="redefineStyle"> <h2 class="articleSupportingTitle">Redefine a Shape Style</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle selected"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>The style we've just applied is a framework "root" color – that is, all of the Comfrey green shapes used throughout the Slide Layouts have this same Shape Style applied. This will allow us to change every shape using this style throughout the file all at once when the style is redefined.</p> <p>We’ll start by changing the Comfrey to another color on our proxy shape. With the proxy square you inserted still selected, click on the rainbow color wheel in the Fill section, directly beneath the Shape Styles section on the Format &gt; Style panel: this will open the Color window. Select the second tab in the Colors window to choose Sliders, select RGB sliders, and enter the color you’d like to use: in this case, we’re going to use a vibrant, contemporary Persimmon base: 229,95,69. Close the Colors window, and you should be left with your re-colored square still selected on the stage.</p> <p>Now, we’ll simply redefine the Shape Style we started with to replace the original color with our revised color throughout the theme. With our proxy square selected, Right-click or Control-click on the original Shape Style in the Style panel - still currently the darker Comfrey green - and select Redefine Style from Selection: </p> <div class="enableZoom " onclick="enlargeImage('Highlight-Redefine1');"> <div id="Highlight-Redefine1" data-group="redefineStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step3.jpg" alt="Change the proxy shape's color, and Redefine the original style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Redefine1-Caption">Set the proxy shape to the new target color, then Right / Control-click the original style to select "Redefine Style from&nbsp;Selection."</div></aside> </div> <p class="articleImageCaption">Change the color of the proxy shape, and redefine the original Shape&nbsp;Style.</p> <p>Keynote will prompt you with a confirmation dialogue ("91 Objects use this Style" in this case): be sure "Update all Objects" is selected, and click OK to continue.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Redefine2');"> <div id="Highlight-Redefine2" data-group="redefineStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step4.jpg" alt="Be sure Update All Styles is selected before clicking OK to continue."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Redefine2-Caption">Keynote will prompt you with a confirmation dialogue: be sure "Update all Objects" is selected, and click OK to&nbsp;continue.</div></aside> </div> <p class="articleImageCaption">Ensure "Update all Objects" is selected, and click OK to redefine the style.</p> <p>Once you’ve clicked OK, Keynote may take a moment to make the change throughout the file - but once it’s done, you’ll notice this has changed the Comfrey green to our revised Persimmon on the Blank slide we’re working on, as well as the original Title slide above it in the slide navigator. If you click the Add Slide button, you’ll notice it’s changed it for you on all of the presentation’s slide layouts: you’re well on your way to a custom OM X build.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Redefine3');"> <div id="Highlight-Redefine3" data-group="redefineStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step5.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Redefine3-Caption">The original Comfrey green has been redefined to our new Persimmon tone: click Add Slide to inspect the effects on the file's Slide&nbsp;Layouts.</div></aside> </div> <p class="articleImageCaption">Click Add Slide to inspect the effects on the file's Slide Layouts and verify the change.</p> </div> </div> </section> <section id="additionalStyles"> <h2 class="articleSupportingTitle">Additional Shape Styles</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles selected"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Shapes" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>Next, we’ll redefine the additional Shape Styles used to set the secondary accent color and outline color on the OM X slide layouts. Add another square to the stage, and apply the second reserved Shape Style, which defines the lighter Accent Green. Change the Color Fill to 249,220,188 to select a pale accent that coordinates with the Persimmon we’ve already defined, Right-click or Control-Click on the Second Shape Style, and once again select Redefine Style from Selection – select Update all Objects and click OK: the primary Accent Color is now redefined throughout your entire presentation.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Additional1');"> <div id="Highlight-Additional1" data-group="additionalStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step6.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Additional1-Caption">Add another square to the stage, and apply the second reserved Shape Style, which defines the lighter Accent Green. Adjust and Redefine as before.</div></aside> </div> <p class="articleImageCaption">Redefine the secondary Accent color using a second proxy shape.</p> <p>You’ll notice that the stroke outlining the Blank layout still remains green at this point - we have one additional style to redefine to complete our basic changes. Add a third square to the slide, and with the shape selected, click on the third reserved style (outlined) to apply it to the rectangle. You’ll notice the Fill setting changes to No Fill, while the Border changes to a Comfrey green Line style. Click the rainbow icon to bring up the Color window, and change this color to our original Persimmon - 229,95,69 (or use the eyedropper to sample the first square). As before, with that third shape selected Right-click or Control-click the third Shape Style and select Redefine Style from Selection, selecting Update all Objects and OK.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Additional2');"> <div id="Highlight-Additional2" data-group="additionalStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step7.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Additional2-Caption">Add a third square to the stage, and apply the third reserved Shape Style, which defines the outline style. Adjust and Redefine as before.</div></aside> </div> <p class="articleImageCaption">Redefine the third Shape Style using a third proxy shape.</p> <p>At this point, you’ve successfully redefined the basic shape styles which drive the primary coloration on the OM X slide layouts. There are a few additional text and shape styles we’ll want to adjust to be sure everything’s synced throughout the file, but you’ve already got the basics of the process if you’ve been following along to here.</p> <p>While we're still looking at our Reserved Styles, though, let's take a quick look at a non-obvious secondary definition we should also account for: <b>Lines</b>. Line Styles are actually defined separately in Keynote &amp; Pages than the closed-shape styles we've been redefining thusfar. Click the Shape button, and add a basic Line to the slide: again, it's defaulting to the first style, which we key to the primary chart palette. As before, scroll to the second panel of Line Styles to show the Reserved styles that would be applied on the underlying Slide Layouts, and apply the first reserved style. Set to our new Persimmon color (229,95,69), and Right or Control-click to select Redefine from Selection as we did before:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Additional3');"> <div id="Highlight-Additional3" data-group="additionalStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step8.jpg" alt="Click Add Slide to inspect the effects on the file's Slide Layouts."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Additional3-Caption">Line Styles are defined separately than closed shapes: add a proxy Line to the slide, and redefine as we did before with the other shapes.</div></aside> </div> <p class="articleImageCaption">Redefine the reserved Line Styles using proxy Line shapes, just as before.</p> <p>Nothing new here – we'll repeat those steps with the second Reserved Line Style, just as we did with the previous shapes (be sure Update is checked, in both cases) – but it's important to note that Line Styles are their own defintion, separate from the closed-shape defintions. There's still the matter of the six default styles / colors to account for, but we'll revisit those a little further on: let's move on to Text Styles.</p> </div> </div> </section> <section id="updatingTextStyles"> <h2 class="articleSupportingTitle">Updating Text Styles</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles selected"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Text" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>If you click on Add Slide at this point and scroll through the Slide Layouts, you'll see we've made good progress: the Comfrey green and secondary accents have been reassigned throughout the file (excepting the plain "Color" background – we'll get into that below), though when you make it down to layouts like <i>Big Fact</i> or <i>Then vs Now</i>, we have a few obvious remnants of the light green accent set on some of the titles.</p> <p>Let's add a <i>Big Fact</i> slide to the presentation to make it easier to access and examine the applied styles. Click to select the large "85%" factoid, and click on the Format &gt; Text inspector to expose the basic settings. You'll notice this object is set to the "Fact" style, with the original pale accent green assigned to the text color. Click the color wheel icon in the Text Color row, and assign our revised accent color again: 249,220,188. You'll notice a blue "Update" button appears next to the style name back up at the top of the inspector:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text1');"> <div id="Highlight-Text1" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step9.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step9-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step9.jpg" alt="Apply the revised accent color to the Fact text style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text1-Caption">Add the Big Fact slide to the presentation, select the "85%" text object, and change to the revised accent color. An "Update" button will appear beside the text style name when it's modified.</div></aside> </div> <p class="articleImageCaption">Redefine the "Fact" Text Style to begin applying the revised palette to the titles.</p> <p>Click Update to redefine the style in the underlying Style Sheet, just as we did with the shapes before: the Update button will disappear once it’s complete. Since we're dealing with colored Text against a colored background, we should be mindful of Contrast here: if you're applying your own palette, adjust the specific color you'll apply to accent text if you need a bit more contrast between your revised Primary &amp; Accent colors for text legibility.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>Pro Tip:</b> if you're planning to change the typeface itself, it's much easier to use the dedicated <b>Replace Fonts</b> function instead of changing each Paragraph Style one-by-one. From the Format menu, select Fonts, then Replace Fonts to bring up modal: this will replace every instance of the face in the current file (including many you won't see until they're applied).</div> </div> <p>If you click the toggle arrow to expose the file's other Paragraph Styles, you'll see we have quite a few more green style instances to handle. There are a few ways we can approach these en masse – for now, let's add another Blank slide to our presentation so it's easy to focus, and click the Text button to add a text object to the slide. You’ll notice this defaults to the "Caption" style, which is a slightly darker version of the original Comfrey green (again, to offer some level of contrast if it's placed against a solid-color background).</p> <p>To help us dial in a slightly darker / lighter variation for the new caption, let's also bring in a copy of the original proxy square we used to redefine our primary Persimmon color for contrast. Select the text object, and change the Text Color to our primary RGB (229,95,69): this will, of course, make the text effectively invisible against the square. One of the easiest ways to approach this is to change color spaces on the Color Sliders to HSB (Hue, Saturation, Brightness), which will allow us to make simple adjustments to the Brightness of the color without impacting its essential Hue. Here, I've switched to HSB and brought the Brightness down by 20%, which is a good starting point for this:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text2');"> <div id="Highlight-Text2" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step10.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step10-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step10.jpg" alt="Apply the revised accent color to the Fact text style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text2-Caption">To ensure default text objects don't turn invisible against a full-color background, adjust the Brightness by ±15-20% via the relevant HSB slider before updating the Caption style.</div></aside> </div> <p class="articleImageCaption">Adjust the Brightness for the default Caption text style before capturing the update.</p> <p>The idea here isn't to make this a high-contrast object or to conform to a particular accessability standard – we simply want to ensure the default text object isn't going to be invisible if it's added to a full-color slide: it should pass for our primary accent on casual examination, and 15-20% darker or brighter is a safe bet for what boils down to a guardrail mechanism. We can click on Update at this point to capture the revised Caption style.</p> <p>We don't need to be especially concerned about this sort of thing with the remaining text styles, as they're assigned styles rather than a default application like Caption. From here, we can simply redefine each instance of dark / light green in the Paragraph Styles list to the appropriate revised Primary or Accent color and update the definitions. Select one of the text objects on your slide, apply one of the remaining green paragraph styles, update the color to the appropriate shade, and click Update – move to the next until the Paragraph Styles inspector no longer includes any of our original green text. When you've made it through the list, your Paragraph Styles inspector should look like the one below:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text3');"> <div id="Highlight-Text3" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step11.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step11-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step11.jpg" alt="Assign the appropriate Primary / Accent color to the remaining tinted Paragraph Styles."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text3-Caption">Assign the appropriate Primary / Accent color to the remaining tinted Paragraph Styles, clicking Update after each one is recolored. The Paragraph Styles list should look like this once you're complete.</div></aside> </div> <p class="articleImageCaption">Assign the appropriate Primary / Accent color to the remaining tinted Paragraph Styles.</p> <p>We've made great progress, but there are a few quirks and specialty settings to be aware of before we're ready to move on from Text Styles.</p> <p>If you click on the default <i>Title Card</i> slide – Slide 1 in this presentation – you'll see a bit of the original accent green still remains in the provisional "Presented To:" object at the bottom of the slide, while the "Cover Header Element" eyebrow up top has already been updated as a result of our Paragraph Style edits. The "Presented To:" text isn't using a dedicated Paragraph Style – it's a spot-placement on the layout. If we edit it here, though, it will only update it on Slide 1: we need to instead move under-the-hood to the <b>Slide Layout</b> itself to be sure our change will carry forward to all instances of the <i>Title Card</i> layout.</p> <p>Click the Edit Slide Layout button in the bottom right corner (or via the View menu) to switch to the slide's underlying layout: you'll notice a blue bar will appear beneath the layout to indicate you're now editing a layout instead of an individual slide. <b>Be sure to exercise additional caution when you're in Edit Layout mode</b>, as your changes here will translate to every slide using the layout you're editing: if you accidently nudge an accent square on a layout, it will be out-of-place on every slide using that layout, so be mindful of exactly what you're selecting as you move through the layouts.</p> <p>Here, we're simply going to highlight the errant green and change the color to our updated Accent color (249,220,188): we aren't updating the assigned style (which in this case is totally unrelated), we're simply updating the spot application of color and moving on to the next:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text4');"> <div id="Highlight-Text4" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step12.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step12-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step12.jpg" alt="Apply the revised accent color to the Fact text style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text4-Caption">In the Slide Layouts, we'll want to look for instances of Spot Placements that aren't mapped to dedicated styles: simply update the text color in the object itself, and move on.</div></aside> </div> <p class="articleImageCaption">Move into the Slide Layouts and adjust any Spot Placements that aren't mapped to a dedicated Paragraph Style.</p> <p>We'll want to scan through the remaining Slide Layouts to look for additional spot placements: the next two Layouts in OM X are variations on the basic <i>Title Card</i> setup, for example, and should be updated exactly the same way as the first. Depending on the particular theme system, there may be more (or fewer) instances to look for – it ultimately comes down to how much of the system is "captured" for widespread style application vs one-off instances, like the <i>Title Card</i> provisional statement, where a custom implementation comes into play on just a single layout or two and doesn't warrant promotion into the stylesheet.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>If you're ever in doubt</b> as to whether or not to apply updates to the assigned paragraph style, examine the root style being referenced. Expand the Paragraph Styles list as needed to see if the original style has a color applied: if it doesn't, updating the original style with color changes will push color to unintended / unwanted instances elsewhere in the theme.</div> </div> <p>Likewise, there may still be some non-obvious color applications in the dedicated Paragraph Styles that won't jump out until you examine or apply a paticular layout. The <i>Agenda</i> layout, for instance, uses the "Ruled Body Large" style, which applies color via paragraph borders instead of the text color itself, so it doesn't really stand out when you scan the Paragraph Styles list.</p> <p>To update the Paragraph Borders, select the Body element on the Agenda layout, and switch from the default Style tab to Layout: you may need to scroll down to see the Paragraph Borders section, but as before, it's just a matter of changing the Comfrey green to our updated Persimmon color. In this case, we <b>do</b> want to Update the paragraph style – the color is a part of the root style definition: </p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text5');"> <div id="Highlight-Text5" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step13.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step13-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step13.jpg" alt="Update the Paragraph Border color in the Ruled style"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text5-Caption">In the Slide Layouts, we'll also want to update any non-obvious color applications to the Paragraph Styles, such as the Paragraph Border color on the Agenda slide.</div></aside> </div> <p class="articleImageCaption">Update non-obvious color applications, like the Paragraph Borders on the Agenda slide.</p> <p>The <i>Then vs Now</i> layout, further down the list, applies both of these last two principles on one slide: the Year headers are spot color/weight overrides (accent color + Regular weight vs Light) – simply update the color of the two years on the layout, but don't apply the style update to the root style. Below the Years, the Summary Points employ Paragraph Borders via the "Ruled Body Small Reversed" style: we'll update these borders to the updated Accent color, and like the Agenda border, we <b>do</b> want to Update the root paragraph style.</p> <p>Before we move on from Text Styles, we have one more important accessory-level definition to hit: <b>Bullets</b>. Like Lines, Bullets resolve to their own definitions seaparte from the Paragraph Styles which they can be applied to. Let's jump down to the <i>Compare &amp; Contrast</i> layout a couple of slides below <i>Then vs Now</i> to start, where you'll notice another remanant of our original Accent green. Keynote and Pages files contain multiple definitions for bullets – in this case the "Bullet Light" style is applied to the text columns, which you can see by scrolling to the bottom of the Style panel with one of them selected. For the Light bullet, we'll want to redefine that to our updated Accent color by setting the updated color, then clicking the style name on the dropdown control to expose the List Styles where the Update button will appear:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Text6');"> <div id="Highlight-Text6" data-group="textStyle1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step14.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step14-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step14.jpg" alt="Update the Bullet styles via the List Styles inspector"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Text6-Caption">Update the applied Bullet styles by adjusting to the relevant color and clicking the style name to expose the List Styles inspector, where the Update can be applied.</div></aside> </div> <p class="articleImageCaption">Update the applied Bullet styles by exposing the List Styles inspector.</p> <p>We'll need to do the same for the regular "Bullet" style: it's easiest to see on the plain <i>Title &amp; Bullets</i> layout further up the Slide Layouts list, but if you'd like to add a bit of safety contrast in case this style gets applied on a full-color background, use the same ±15-20% color adjustment you applied to the default Caption style earlier for good measure.</p> </div> </div> </section> <section id="extraMile"> <h2 class="articleSupportingTitle">The Extra Mile</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile selected"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Extra" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>We're into the proverbial <i>Endgame</i> here: if you’ve followed along to this point, you’ve already mastered the fundamentals, though there are a few additional concepts and definitions you'll want to be aware of before we start wrapping up.</p> <p>While we're still in the Slide Layouts, let's scroll down to the <i>Color</i> slide we'd noted earlier to examine an important caveat to Styles in Keynote and Pages. You'll notice there's a color fill applied to the background, though no obvious Style panel or selector anywhere nearby. While we can redefine Shapes, Lines, Paragraph, and List Styles, there's no such mechanism for doing so with Standard Backgrounds (though the functionality is available for the Dynamic Backgrounds in Keynote). So for this Layout, all we can really do is change the original Comfrey green to our updated Persimmon color:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-BG1');"> <div id="Highlight-BG1" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step15.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step15-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step15.jpg" alt="Update the Background Color individually"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-BG1-Caption">Update the Background Color of the <i>Color</i> layout noted earlier via the Fill: there are no Style definitions for Standard Backgrounds.</div></aside> </div> <p class="articleImageCaption">Update the Background Color via the Fill: there are no Style definitions for Standard Backgrounds.</p> <p>You can, of course, work around this by using shapes in front of the background if you need to tie backgrounds into your own system, but there are a few caveats. Authoring-wise, background changes on slide level will be obscured by the shape, and you'll also want to disable any instances of "Allow Layering" on the impacted Slide Layouts to be sure <i>Send to Back</i> doesn't layer objects behind the false background. Playback-wise, the false background will be treated as an Object on the stage (and thus become part of any Object Transition applied to the slide) rather than remaining stationary like the actual background, which will break the illusion in an instant. But if those caveats don't impact your workflow or presentation structure, it's a perfectly serviceable workaround to the lack of Styles on the Standard Backgrounds in Keynote in some cases.</p> <p>In OM X, the next slide down is the <i>Supplemental - Palettes</i> layout, which is a good place to circle back to those default Shape Styles we'd brushed past earlier. The left column (or top row, if you're working in the HD theme) is an effective proxy for the first six Shape Styles – we tie these to the colors used in the charts to keep things tidy from a thematic perspective (though they don't derive from the Chart Styles, or vice-versa – more on that below). The first Shape Style is the default style applied whenever you add a shape to the stage, so like the "Caption" style applied to default text, you'll want to adjust your default with a ±5-10% adjustment to the HSB values for a visibility guardrail – you can get away with less contrast on shapes than text, and a little goes a long way towards our purpose here:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Palette1');"> <div id="Highlight-Palette1" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step16.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step16-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step16.jpg" alt="Update the default shape styles easily from the Palletes layout"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Palette1-Caption">Update the default (first) Shape Style via the Fill from the selected proxy, as we did before, with a ±5-10% adjustment for safety contrast for shapes added on a color background.</div></aside> </div> <p class="articleImageCaption">Update the default (first) Shape Style via the Fill from the selected proxy, as we did before, with a ±5-10% adjustment for safety contrast.</p> <p>Just a +5% adjustment here, and we redefine the first Shape Style exactly as we did earlier. The remaining five color chips in that left column coordinate with the Shape Styles in order, so you can model out a full 6-step palette in context if you're creating a new palette. If you're building around a pre-specified palette and the color used as the main Accent Color on the Slide Layouts is included, you <i>may</i> want to apply a similar ±5-10% adjustment to its corresponding Shape Style (though only the first style is ever applied as a default, so you have more leeway around the remaining colors). </p> <p>The middle column of shapes on the <i>Palettes</i> layout don't correlate to Shape Styles in this case and are completely optional to our purposes here: generally speaking, the "Mono Step" used here is a monotone / shades palette of the default color, and can be modeled fairly easily using the sort of HSB adjustments we've used elsewhere, with some additional bumps to Hue/Saturation to create a wider "zone" around the original hue. Or keep it simple, and just re-assign the default style to each successive shape and ramp down the Opacity of the shape itself to create quick-shades – totally up to you, the slide itself is authoring-assitive and entirely optional, so you could likewise delete it before we Save the custom theme.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>Remember: Lines are defined separately than closed Shapes</b>. We've redefined the primary Shape Styles here, but those definitions don't carry over to the Line Styles: they'll need to be updated separately. You'll want to adjust the brightness of the first, default Line Style to match the ±15-20% safety margin used for text instead of the smaller adjustment applied to the default Shape style, as lines are more similar to text in terms of weight.</div> </div> <p>The last Slide Layout in OM X is the <i>Supplemental - Emphasis Styles</i> layout, which will allow us to examine a thusfar unmentioned dimension to Text Styles: <b>Character Styles</b>. In more recent themes, we've been adding "shortcut" styles for color application as Character Styles to make these easier to apply: we could have used the "Accent Emphasis" style to affect the spot-overrides we keyed in earlier from a single definition, but OM X was produced before we closed <i>that</i> particular gap in the production process, so we'll quietly make a note of that for a future update and move blithely along.</p> <p>Nevertheless, the <i>Supplemental - Emphasis Styles</i> layout gives us a good proxy element to examine how and where you can define multiple types of Character Styles. Click into the placeholder on the right to select the first non-bolded word that has a color applied to expose the root Character Style applied, shown here with the color changed but not yet updated on the sub-control, which maps to "Accent Emphasis":</p> <div class="enableZoom " onclick="enlargeImage('Highlight-CharacterStyles1');"> <div id="Highlight-CharacterStyles1" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step17.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step17-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step17.jpg" alt="Update Character Styles via the sub control"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-CharacterStyles1-Caption">You can create or update Character Styles by clicking the applied style name to expose the sub control, just as we did with the List Styles.</div></aside> </div> <p class="articleImageCaption">Character Styles can be created or redefined by opening the subview, just like List Styles.</p> <p>As before with the List Styles, Characters Styles are Updated via the sub-control that displays when you click the style name selector, so when you're ready to define the updated Accent Emphasis style, click the blue Update button: you'll notice the bolded word next to your selection adopts the color change, though retains the weight difference. There actually is a "Bold" character style included by default, but it's distinct from what happens when you press the Bold button: if you want to capture color + bold (or semi-bold, in this case) as a style, that would be a separate, distinct definition. Here, the Accent Emphasis style is applied to both words, with semi-bold applied as a simple override to the alternate word (for Copy Style convenience).</p> <p>In OM X, rather than cluttering these styles with weight variations, we've kept focus on the key color variations that allow you to quickly apply the appropriate highlight or accent for both on-white and on-color application. Accent Emphasis keys to our revised Accent color, as we just applied, and is meant for use against color – "Primary Emphasis" will key to our revised Persimmon color, and is meant for use on white backgrounds.</p> <p>The "Dark Emphasis" style is intended for use against color, though it can obviously be applied to either background type. Of the two remaining Character Styles we're focusing on, this is the easiest to dial in: select one of the dark, non-bolded words and set the initial color values to our primary Persimmon color. Then, using the HSB sliders again, run the brightness down to 35-40% – this will give us a solid, readable contrast against the Persimmon while retaining its essential hue. Update the Dark Emphasis style from your selection, just as before.</p> <p>The "Tonal Emphasis" style is a bit more esoteric: it's intended to provide an additional level of color variation alongside <i>either</i> the Primary or Accent Emphasis patterns, so it should work well both against white and against our primary color, in a shade that complements the other accents we've defined so that they work in tandem application. A bright orange is a good candidate in this case, as it will provide a nice pop of color against our Persimmon base, while remaining in the general "proximity" of color between our Primary and Accent colors. We've captured the style here to make it a bit more apparent:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-CharacterStyles2');"> <div id="Highlight-CharacterStyles2" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step18.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step18-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step18.jpg" alt="Character Styles are redefined, with the Tonal style highlighted"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-CharacterStyles2-Caption">Updating the four theme-centric character styles will allow you to quickly apply the relevant emphasis color to text on both white and color backgrounds.</div></aside> </div> <p class="articleImageCaption">All of the theme-specific Character Styles have been updated, with the "Tonal" style highlighted.</p> <p>In practice, you'll want to test the appliction of both Primary and Tonal against a white background as well (a-la the <i>Title &amp; Bullets</i> layout) to dial in your specific Tonal accent: not every color works well against both color and white, so it may take a bit of experimentation if you're creating your own.</p> <p>From here, we'd generally recommend making your way back up through the Slide Layouts one by one to look for any remaining instances of color that haven't been caught by our changes thusfar to the Shape, Text, or accessory styles. While the icons on Process Agenda, for instance, changed color after we updated our primary Shape Styles, the circles surrounding them didn't: they're 1pt heavier than our default Line Styles, and will need to be keyed to the appropriate color. Likewise, the color border on the images on the <i>Speakers</i> slide is a custom application: shift-select the image placeholders, and key in our revised Accent color:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-PhotoBorders');"> <div id="Highlight-PhotoBorders" data-group="extraMile1" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step19.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step19-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step19.jpg" alt="Character Styles are redefined, with the Tonal style highlighted"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-PhotoBorders-Caption">Key in any remaining custom color applications you find during a final review of the Slide Layouts, such as the image borders on the <i>Speakers</i> layout.</div></aside> </div> <p class="articleImageCaption">Key in any remaining color applications that jump out on a final review of the Slide Layouts.</p> <p>We aren't covering <b>Image Styles</b> in this tutorial, though you could create one from the selected images if it's something you'll need to make use of frequently. Here, we're using it to provide a "buffer" for color photography used against a uniform field of color, so it's fairly narrow in application and not the sort of thing we'd add to the dedicated Image Styles – the default Image Style in OM X is non-shadowed, non-bordered, so there's really nothing to cover here beyond the spot application.</p> <p>Once you've made your way back up to the first Slide Layout – the <i>Title Card</i> layout we began our initial diversion into the layouts with – you can click the <b>Done</b> button in the blue bar at the bottom to exit the Slide Layouts and return to standard Navigator view.</p> <p>At this point, we've made our way through all of the basic settings we'll need to hit for <i>most</i> purposes, and could move into Saving the theme. There are a few more <i>not-so-basic</i> categories remaining in a full coversion, though: <b>Table Styles</b>, <b>Chart Styles</b>, and the Color, Gradient and textured Image fills in the <b>Fills Palette</b>. These are all a bit more complex than what we've covered thusfar – Chart Styles in particular are a bit of a <i>Dark Art</i> in terms of being tricky to capture well, even for seasoned theme builders. We have plans to work up more detailed looks at all of these processes for the ambitious among you, and will update this page with links once we have them: for now, we'll refer you to Apple's instructions for both <a href="https://support.apple.com/guide/keynote/use-table-styles-tan6cbe92ac3/13.2/mac/1.0" target="_blank" rel="noopener" class="appExternal hinted">Table Styles</a> and <a href="https://support.apple.com/guide/keynote/use-chart-styles-tan9442733c8/13.2/mac/1.0" target="_blank" rel="noopener" class="appExternal hinted">Chart Styles</a> as a good authoritative reference on the basics – there's quite a bit left unsaid in terms of the iterative definition process for Charts, but we'll eventually get to that here.</p> <p>The <b>Fills Palette</b> is set independently of the Styles settings we've covered thusfar, and provides a way to define the root Accent Colors and derivative Tints &amp; Shades, Gradient Fills, and Image Fills that appear in the quick-select Fill menus in the Inspector panel. This is a great way to ensure color-use consistency throughout your files, and is easy to customize once you understand the palette's structure and how to make your edits. We've pushed this into its own tutorial &ndash; including a downloadable Color Provisioning Starter file &ndash; available here: <a href="/Support/Topic/Transforming-the-Fills-Palette/" class="hinted">Transforming the Fills Palette</a></p> </div> </div> </section> <section id="saveTheme"> <h2 class="articleSupportingTitle">Save Your Theme</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class="stickSidecar"> <div class="ledeListWrapper slim"> <ul class="ledeList"> <li class="jumpSetStage "><a class="internal " aria-label="Set the Stage">Set the Stage</a></li> <li class="jumpRedefineStyle"><a class="internal" aria-label="Set the Stage">Redefine a Shape Style</a></li> <li class="jumpAdditionalStyles"><a class="internal" aria-label="Set the Stage">Additional Shape Styles</a></li> <li class="jumpTextStyles"><a class="internal" aria-label="Set the Stage">Updating Text Styles</a></li> <li class="jumpExtraMile"><a class="internal" aria-label="Set the Stage">The Extra Mile</a></li> <li class="jumpSaveTheme selected"><a class="internal" aria-label="Set the Stage">Save Your Theme</a></li> </ul> <div class="depthTracer" data-depth="Saving" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <p>If you've made it to this point, pat yourself on the back: you've customized a presentation with your own palette, hitting all of the most common touch-points for Shapes, Lines, Paragraph Styles and common accessories like Bullets and Character Styles.</p> <p>All of these changes, though, are only within the scope of this particular file (or <i>Save As...</i> derivatives): to re-use these changes again and again, you'll need to save a <b>Custom Theme</b> to create your own custom starting point. From the File menu, select <b>Save Theme</b>, and you'll get a dialogue like the one below:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-SaveTheme1');"> <div id="Highlight-SaveTheme1" data-group="SaveTheme" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step20.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step20-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step20.jpg" alt="Select Save Theme from the File menu to trigger the Create Theme dialogue"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-SaveTheme1-Caption">When you select <b>Save Theme</b> in the File Menu, you'll see a Create Theme dialogue: we recommend choosing "Save..." if you want to customize the theme's icon in the chooser.</div></aside> </div> <p class="articleImageCaption">Select <b>Save Theme</b> from the File menu to trigger the Create Theme dialogue.</p> <p>While you <b><i>can</i></b> simply select "Add to Theme Chooser" from here, you're going to be left with a fairly rudimentary icon in Keynote's Theme Chooser window, even if you doctor up a working icon on your first slide (<i>which would have made a lot of sense, yes</i>?). If that's not a big deal for your purposes, Add to Theme Chooser will push your theme to Keynote directly &amp; you're good to go: from the File menu, select <i>New...</i> to bring up the Theme Chooser, and you'll find your theme in the My Themes section like any other 3rd-party theme you may have installed.</p> <p>If you'd like to add something a bit more bespoke to your new custom theme, though, we'll need to prepare an icon image and manually replace a few of the auto-generated files in our theme file. Click <b>Save...</b>, and select a good working folder: this will export a <b>.kth</b> file, which is Keynote's Theme File format. We'll come back to this file in a moment.</p> <p>On your first slide, work up a "hero" slide to serve as an icon for your custom theme – changing the Zoom to 25% will give you a quick sense of how it will look at scale and give you the opportunity to scale the text to something more readable if needed. Once you're happy with your icon, we'll go to the File menu and select Export To &gt; Images: the default PNG option is a good starting point, and we want to save it to the same folder our .kth file was saved to.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>If you don't have access to an image editor</b>, select "JPEG - High Quality" instead of PNG here: you can rename the exported file accordingly and perform a partial replacement in the following steps.</div> </div> <p>Hide Keynote for now, and go to the working folder where you saved your Theme file and PNG image. Here, we're going to work a bit of non-obvious file-system magic: Keynote (and Pages) files are actually compressed / ZIP folders on the outer layer, so we can rename our .kth to .zip and decompress the contents to see the internal structure. Right-click the file to select "Get Info" (alternately command-i with the file selected), uncheck Hide Extension, and change the .kth extension to .zip: Finder will prompt you with a comfirmation, click on the "Use .zip" button to confirm. Now, double-click the .zip to extract it, and you'll see the raw folder structure of your new Keynote Theme:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Finder1');"> <div id="Highlight-Finder1" data-group="SaveTheme" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step21.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step21-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step21.jpg" alt="Rename the new .kth file to .zip, and extract to a folder."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Finder1-Caption">Keynote (and Pages) files are actually compressed / ZIP folders on the outer layer, so we can rename our .kth to .zip and decompress the contents to see the internal structure.</div></aside> </div> <p class="articleImageCaption">Rename the exported .kth file to .zip, and extract to a folder.</p> <p>The "preview.jpg" image selected there reflects the default Keynote generates regardless of what's on the first slide (it defaults to the first Slide Layout with "Lorem Ipsum" greeking in the title object). And as you can see, we have three files named preview: "preview.jpg", which is the largest, along with smaller "preview-web.jpg" and "preview-micro.jpg" derivatives. We're going to replace all three of these with the new hero icon you created a moment ago.</p> <p>Open the PNG we exported in your favorite image editor: we're going to export JPEG files for each of these three preview images at the corresponding target size. These are slightly different for Standard (4:3) and Wide (16:9) formats, noted here for convenience:</p> <div class="detailsTable"> <table cellspacing="0"> <tbody><tr> <th>&nbsp;</th> <th>Standard (4:3)</th> <th>Wide (16:9)</th> </tr> <tr> <td>preview.jpg</td> <td>1024x768</td> <td>1024x576</td> </tr> <tr> <td>preview-web.jpg</td> <td>186x140</td> <td>186x105</td> </tr> <tr> <td>preview-micro.jpg</td> <td>45x34</td> <td>45x25</td> </tr> </tbody></table> </div> <p>Export your JPEGs at the appropriate size, replacing the original in your extracted theme folder. Once you've replaced all three files, we're ready to "re-pack" the theme.</p> <div class="inlineTipContrast pivotStackHV"> <div><svg class="" id="" style=""><use xlink:href="#inline-info-icon"></use></svg></div> <div><b>If you exported to JPEG in the previous step</b>, you can rename that file to "preview.jpg" and replace the same file in the extracted folder: this will handle the main preview in the Theme Chooser itself on MacOS or iOS/ iPadOS.</div> </div> <p>Move the original, pre-extracted .zip file to the Trash: we no longer need it. Right-click the extracted theme folder we've been making our changes in, and select Compress to make a new .zip file from the updated contents. Then, it's just the reverse of our initial rename: change the .zip extension back to .kth, and confirm the change. You're left with an updated .kth file, which will give you the option to install the theme when you open it in Keynote. The theme will appear in the My Themes section, as shown here:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-ThemeChooser1');"> <div id="Highlight-ThemeChooser1" data-group="SaveTheme" class="enlargable"> <picture> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step22.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/support/Customization101/OM_X-Conversion-Step22-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/support/Customization101/OM_X-Conversion-Step22.jpg" alt="Open your updated .kth in Keynote: installed themes appear in the My Themes section."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ThemeChooser1-Caption">Open your updated .kth in Keynote: installed themes appear in the <b>My Themes</b> section.</div></aside> </div> <p class="articleImageCaption">Open your updated .kth in Keynote: installed themes appear in the <b>My Themes</b> section.</p> <p>Like any other Keynote theme, once it's installed you can right-click the preview in the Theme Chooser to rename or remove it whenever you like. If you're using your new theme as a new all-purpose starter, you can set it to be your default theme in Settings: on the General tab, look for <b>For New Presentations</b> at the very top, tick "Use Theme", and click the Change Theme button to display the Chooser.</p> </div> </div> </section> <section id="additionalThoughts"> <h2 class="articleSupportingTitle">Additional Notes</h2> <div class="bodyFlexBoard flowPrint"> <div class="formLede assistive accessory"> <div id="" class=""> <div class="ledeListWrapper slim"> &nbsp; <div class="depthTracer" data-depth="Wrapup" data-sounded=""></div> </div> </div> </div> <div class="bodyForm vStack articleBody articleLedeBody"> <div class="vStack"> <div class="hStack resourceList"> <div class=""><svg id="" class="" width="50" height="50"><use xlink:href="#saveEdit-icon"></use></svg></div> <div class=""> <div class="vStack "> <div class=""><h3>Updating Your Theme</h3></div> <div> <p>Save your working .key file as an ongoing Export Source: you can make revisions and re-export your theme as needed to address additional changes or modifications moving forward. As long as you use the same root name for your re-exported theme, Keynote will offer to Update the theme file when you open the newer version.</p> <p>Alternately, you can save a new .key file generated from your latest theme file to pick up with your prior changes in a new file. Likewise, simply alter the revised theme name if you'd like to keep a second, alternate version of your theme in the Theme Chooser.</p> </div> </div> </div> </div> </div> </div> </div> </section> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2022://2.0100</id>
<title type="text">A Haus for All Seasons</title>
<published>2022-01-17T15:00:00-05:00</published>
<updated>2024-07-31T10:47:30-04:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/01182022/A-Haus-for-All-Seasons/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><p class="articleBodyLede">We've received a few questions since the launch of our new Haus Neue system about whether or not it's possible to customize the colors in the Bauhaus patterns driving the visual accents throughout the theme. And the good news is Yes, it absolutely is – it's very much a playground for color exploration, provided you know where to set your changes.</p><p>In some of our previous tutorials, we've taken a look at how easy it is to affect theme-wide changes in our shape-based themes through simple style changes. If this is your first time delving into this sort of customization, you can find a bit of additional background information in the Calais Brush-Up tutorial, or the more in-depth (and now slightly out-dated – duly noted) Recoloring NXT-Generation Keynote Themes Tutorial – but they're not required reading for this example.&nbsp;</p><p>Haus Neue takes those style-based fundamentals to an entirely new level, building on a hybrid 4-spoke color foundation to define the root-color definitions that drive all of the Bauhaus-inspired patterns that act as accents throughout the theme. Once you understand the theory behind the color application and where they're set, it's incredibly easy to tint &amp; recolor the entire system to essentially any color you desire.</p><h2>Prep &amp; Setup</h2><p>There are only a few setup steps involved in transforming the default Haus Neue style into your own coloration. Start a new presentation using Haus Neue, add a few slides you can use to reference your changes, and add 3 square shapes to the stage to get started – they'll default to the first Shape Style:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-AddProxies');"> <div id="Highlight-AddProxies" data-group="assignProxies" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step1.jpg" alt="Add Shapes to the stage to act as style proxies."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AddProxies-Caption">First, add a few slides for ongoing reference, and add 3 square shapes to the stage to act as proxies for the style assignments we'll customize.</div></aside> </div> <p class="articleImageCaption">Step 1: Add a few slides for reference, and add 3 square shapes to the stage.</p><p>These shapes will act as our proxy shapes for the styles we're going to redefine. Select the first square, look to the Format &gt; Style menu, and click over to the second panel of Shape Styles: this is where our Framework-Reserved styles are defined. Click the signature Fuchsia to apply this first style:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-AssignProxy1');"> <div id="Highlight-AssignProxy1" data-group="assignProxies" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step2.jpg" alt="Assign the first theme-reserved style to the first proxy shape."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AssignProxy1-Caption">Next, scroll to the framework-Reserved styles and apply the first reserved Shape Style - the Fuschia Accent used throughout the theme - to the first proxy shape.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the first reserved Base Style we'll Re-Define later.</p> <p>Repeat that step with the remaining 2 squares, selecting the Indigo and Light blue styles respectively, which will set all 3 proxies we'll focus on here. You'll notice there's a 4th, White Shape Style on the row below our 3 primaries: this is an optional "Surface" modifier, which you can use if you're transforming to a dark background (or otherwise pushing into a 4-color model) – we won't use that one in this tutorial, but it's good to know where it is if you're going for a non-white background and want to blend the white accents.</p> <p>Once you're done with the 3 primaries, your slide should look this, and you're ready for next steps:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-AssignProxy3');"> <div id="Highlight-AssignProxy3" data-group="assignProxies" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step3.jpg" alt="Repeat that on the second and third proxy shapes with the Indigo/Light Blue styles."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AssignProxy3-Caption">Repeat that process on the second and third proxy shapes, assigning the reserved Indigo and Light Blue styles.</div></aside> </div> <p class="articleImageCaption">Step 3: Repeat that step for the remaining Indigo/Light Blue styles.</p> <h2>Redefine the Styles</h2> <p>Now we'll re-define each of those colors one-by-one, and let Keynote handle the application throughout the file. We're going to work up a nice Spring palette with a few near-neighbor Greens here as an example, but again, this process will apply to any palette you choose.</p> <p>The Bauhaus pattern works around a highlight/contrast/highlight model – for best results, you'll generally want to key in your two key highlight colors, then define the darker contrast as a mid-point between the two highlights, or alternately a "reach" color that pushes into a neighboring color space. This can involve a bit of trial and error if you're not working with a pre-defined color or two, but as you'll see, it's easy to adjust on-the-fly from our proxy shapes.</p> <p>First, we'll replace the Fuchsia with a crisp, cucumber Green. Select the Fuchsia proxy square, and set it to a new color: I'm using RGB 164,233,183 here. Once you've changed the color, we'll redefine the base style by right-clicking the original Fuchsia style and selecting "Redefine Style from Selection" as shown:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles1');"> <div id="Highlight-RedefineStyles1" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4.jpg" alt="Redefine the first reserved style using the modified proxy shape."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles1-Caption">With the updated proxy shape selected, right-click the original reserved style and select "Redefine Style from Selection."</div></aside> </div> <p class="articleImageCaption">Step 4: Redefine the first reserved style using the modified proxy shape.</p> <p>Keynote will prompt you with a choice to update all of the shapes referencing the style you're updating (or not): make sure "Update all objects" is selected, and click OK:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles2');"> <div id="Highlight-RedefineStyles2" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4b.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4b-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step4b.jpg" alt="Confirm that you want to apply the change throughout the presentation."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles2-Caption">Confirm that you want Keynote to apply the change to every shape using that style throughout the presentation.</div></aside> </div> <p class="articleImageCaption">Step 4(b): Confirm that you want to apply the change throughout the presentation.</p> <p>Keynote will re-define all linked instances of the Fuchsia squares and accents to our new cucumber Green, which should be immediately apparent on the active + reference slides we added at the beginning. For good measure, we can inspect the rest of the masters via the Add Slide button, which confirms the original Fuchsia is now Green throughout the file (excepting the special instances in the Supplemental masters):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles3');"> <div id="Highlight-RedefineStyles3" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step5.jpg" alt="Confirm that the change has been applied throughout the presentation"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles3-Caption">Confirm that the change has been applied throughout the presentation by clicking the Add Slide button and examining the updated previews.</div></aside> </div> <p class="articleImageCaption">Step 5: Confirm that the first change has been applied throughout the presentation.</p> <p>We'll repeat that process for the remaining 2 proxy squares. If you don't have colors pre-selected, it's generally best to move to the 3rd shape to set the secondary highlight, then back to the second the balance the contrast color. Here, I'm setting the 3rd proxy square to another green (RGB 38,164,134 here) – a darker hue that plays against the spring contrast I'm going for, and re-defining the referenced Style from the selection again:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles4');"> <div id="Highlight-RedefineStyles4" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step6.jpg" alt="Set the alternate Highlight color, and redefine the third root style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles4-Caption">Set the alternate Highlight color, and redefine the original 3rd framework-reserved style as we did in the previous step.</div></aside> </div> <p class="articleImageCaption">Step 6: Set the alternate Highlight color, and redefine the third root style.</p> <p>We're nearly there. Now we'll redefine the Contrast color – since we're using a naturally contrasting pair of greens for our highlights, this is a good instance of where we'd use a "reach" color to push into a neighboring color to balance. I want to stick to the blue end of the spectrum for the reach, but pull it closer to the Green end of the range vs the violet default. After a bit of exploration, I'm going with RBG 10,59,84 here – closer to green, but still distinctly blue if we were to ramp luminance:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles5');"> <div id="Highlight-RedefineStyles5" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step7.jpg" alt="Set the Contrast color, and redefine the second root style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles5-Caption">Set the Conmtrast color, and redefine the original second framework-reserved style as we did in the previous step.</div></aside> </div> <p class="articleImageCaption">Step 7: Set the Contrast color, and redefine the second root style to finish up.</p> <p>And we're done! There are a few additional steps to go through if we want to dial in charts, tables, or text Emphasis styles – but the "heavy lifting" of setting up our color conversion is largely finished for all intents &amp; purposes. You can remove the proxy shapes, and start adding slides + building the show from here – simply use the eyedropper tool to sample your new colors wherever you want to dovetail inserted shapes, etc with your revised palette.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-RedefineStyles6');"> <div id="Highlight-RedefineStyles6" data-group="redefineStyles" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/A-Haus-for-All-Seasons/Haus_Neue-Style-Conversion-Step8.jpg" alt="All set: remove the Proxy Shapes to finish up."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-RedefineStyles6-Caption">All set: remove the Proxy Shapes, and get on with your show. Revise the default shape style as needed to dovetail with your changes.</div></aside> </div> <p class="articleImageCaption">We're all set: remove the Proxy Shapes to finish up.</p> <h2>Wrapping Up</h2> <p>If you're going to make frequent use of your revised setup, it's worth spending a few minutes keying in the default Accent Shape Styles (the first panel of Shape Styles, vs the Reserved styles we redefined here) to align with your changes, along with the Text Emphasis styles (defined under the Character Styles drop-down when text is selected) if you tend to use those. It's generally easiest to treat Chart and Table colors as spot overrides vs going through the process of redefining all of the various tiers defined there – but if you're going the extra mile, those are the remaining styles you'll want to pay attention to.</p> <p>You can otherwise save your changes as a new Theme file by selecting Save Theme from the File menu – choose Add to Theme Chooser to make your new theme appear in the My Themes section of the theme chooser, ready to start your next presentation with (and if you ever need to remove it, Right-click or Control-click the theme in My Themes and select Delete).</p> <h2 class="articleSupportingTitle articleFoot">Additional Resources</h2> <ul><li><a href="/Support/Topic/Customization/" class="appExternal hinted">Recoloring Shape-based KeynotePro Themes in Keynote 6+</a></li></ul> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2019://15.1038</id>
<title type="text">Better Native Photo Blends</title>
<published>2019-10-19T16:38:32-04:00</published>
<updated>2024-01-30T12:37:11-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/10192017/Better-Native-Photo-Blends/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/4x3/preview.jpg" width="1440" height="1080" border="0" alt="" /></p><p class="articleBodyLede">Using Keynote's Image Adjustment Tools to Improve Image Blends Natively.</p> <p>Image Blends are one of the best ways to make a photo feel "integrated" with the theme it's being used in, particularly if a theme's design is optimized for the approach. Our latest build of the Aurora themes - Aurora NXT - uses this technique extensively, as does last year's KeyStation NXT (to a differing degree). And when the photo you're blending is a good fit for the technique without any adjustment, it's a sort of magical, one-click experience.</p> <p>All photos are not created equal, however, and basic Transparency mixes like the defaults set in Aurora NXT won't produce optimal results for every photo. We can jump to a tool like Photoshop to take advantage of more advanced Layer Blending options on difficult photos, where Screen or Multiply will often make quick work of this sort of thing. But you can work a surprising bit of magic natively in Keynote 6.x-9.x itself by diving deeper into the Image Adjustment Tools built into the app itself.</p><h2>The Basics</h2> <p>We'll be using the standard Aurora NXT theme for these examples: if you don't have the Aurora NXT themes in your library, you can download a free slide-limited Trial Edition here to follow along with: <a href="/Library/Free/Aurora-NXT-LE/" class="hinted">Free Keynote Themes - Aurora NXT LE</a></p> <p>Aurora NXT includes 4 relevant Image Styles to ballpark Subtle, Moderate and Intense blends, along with an override style to disable the blend altogether. The results are quick and fairly predictable on a deep, full-color image (an <a href="https://unsplash.com/photos/LlBEJhgFCc4" title="Unsplash image by Vero Photoart" target="_blank" rel="noopener" class="appExternal hinted">Unsplash image by Vero Photoart</a> shown here):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-DefaultStops');"> <div id="Highlight-DefaultStops" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Default_Blend_Stops.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Default_Blend_Stops-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Default_Blend_Stops.jpg" alt="Default Blend Stops assigned via the Image Styles in Aurora NXT"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-DefaultStops-Caption">Aurora NXT includes 4 Image Styles that make quick work of applying Subtle, Moderate or Intense Transparency Blends in a single click, but they're not enough for every photo.</div></aside> </div> <p class="articleImageCaption">Default Blend Stops assigned via the Image Styles in Aurora NXT</p> <p>In this case, the base image includes some deep yellows &amp; reds and blends particularly well with the full-spectrum Aurora theme at each of the transparency "stops" defined in the base image styles. Likewise, deep blue &amp; green photos will blend more readily in Aurora UV, as the colors are playing off the natural color ranges of the respective themes themselves.</p> <p>There's not much to this basic technique: the styles correlate to different Transparency levels (the only Image Adjustment setting Keynote will hold on to when an Image Style is defined), which can be easily tweaked in the inspector to "dial in" a more pleasing transparency level if one of the defaults aren't quite right.</p> <p>But some photos are more difficult to blend than others when you're relying only on Transparency, particularly if you're blending a darker photo with a more vibrant, colorful background (or a lighter studio shot with a darker, flat color a-la KeyStation NXT, for instance). Adjusting the Transparency can offer some level of improvement, but in more difficult compositions you'll want to go a few steps further and dive into Image Adjustments to achieve more pleasing results.</p> <h2>Image Adjustments</h2> <p>Let's have a look at a good example of the fundamental issue we're trying to solve, and the steps we can take to improve our Blend results. We're starting with a dark black &amp; white image, a popular <a href="https://unsplash.com/photos/dT4hx-QW0Aw" title="Unsplash image by Sebastian Unrau" target="_blank" rel="noopener" class="appExternal hinted">Unsplash image by Sebastian Unrau</a>, shown here with no Blend/Transparency:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend0');"> <div id="Highlight-AdjustBlend0" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step0.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step0-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step0.jpg" alt="Dark, Black and White images can be difficult to Blend with color."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend0-Caption">Dark Black + White images can be very difficult to Blend using only Transparency - a good test candiate shown here without Blend.</div></aside> </div> <p class="articleImageCaption">Dark, Black &amp; White images can be difficult to Blend with color.</p> <p>The lack of color and general dark nature of the photo produces somewhat "muddy" results on the Moderate or Intense stops, with the Subtle stop providing little to no detail:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend1');"> <div id="Highlight-AdjustBlend1" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step1.jpg" alt="None of the default Transparency Stops provide ideal results."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend1-Caption">The default styles don't provide optimal results in this case - we'll want to dig further into Image Adjustments.</div></aside> </div> <p class="articleImageCaption">None of the default Transparency Stops provide ideal results.</p> <p>Making this photo a great candidate for more advanced techniques. Let's settle in around the default Moderate style, which has an Opacity setting of 38% and gives us the better mix of transparency &amp; detail of the 3 default options in this case. Select the photo, and click on Format &gt; Image to expose the Image Inspector.</p> <p>We'll start by clicking Enhance to let Keynote's image algorithms clarify the base exposure/saturation balance. In some cases, simple adjustments to the Exposure/Saturation settings on the inspector can go a long way - but in this case, Saturation isn't going to do anything for us given the Black &amp; White source, and Exposure will simply act as a rudimentary Lighter/Darker control atop the Transparency. We'll click on the Adjustment Toggle to expose the more Advanced Image Adjustment settings:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend2');"> <div id="Highlight-AdjustBlend2" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step2.jpg" alt="Enhance helps clarify the highlights - click the Toggle to open Advanced Options."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend2-Caption">Click Enhance to clarify the Highlights - then click the Toggle to expose the Advanced Image Adjustments.</div></aside> </div> <p class="articleImageCaption">Enhance helps clarify the highlights - click the Toggle to open Advanced Options.</p> <p>Adjusting <b>Levels</b> will do much of the heavy lifting in this case. Since we're trying to accommodate the darker nature of the source photo, adjusting the mid-range levels down toward Black (moving to the left) will clear up some of the muddiness right off. Adjust the slider so that the mid-range is to the left of the dominant spike:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend3');"> <div id="Highlight-AdjustBlend3" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step3.jpg" alt="Adjust the Midrange Levels to compensate for the darkness of the source image."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend3-Caption">Adjust the Mid-Range Levels to compensate for the dark nature of the source photo.</div></aside> </div> <p class="articleImageCaption">Adjust the Midrange Levels to compensate for the darkness of the source image.</p> <p>Now we can adjust the <b>Exposure</b> to shape the Levels curve a bit more - bumped to 70% in this case. -70% adjustments to both <b>Temperature</b> and <b>Tint</b> will help in this case by adding a splash of duotone tint to the photo in a good range to complement the red-dominant background:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend4');"> <div id="Highlight-AdjustBlend4" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step4.jpg" alt="Adjust the Exposure, Temperature and Tint to dial in further."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend4-Caption">Now adjust Exposure to re-balance. Tint + Temperature are adjusted here to give the Black+White source photo better color blending with the domiant background color.</div></aside> </div> <p class="articleImageCaption">Adjust the Exposure, Temperature and Tint to dial in further.</p> <p>We're very nearly there. We're going to make one final adjustment - adjust the Shadows slider to balance toward the highlights more:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend5');"> <div id="Highlight-AdjustBlend5" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step5.jpg" alt="Adjust the Shadows slider to balance toward the highlights."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend5-Caption">Adjust the Shadows slider to balance toward the highlights.</div></aside> </div> <p class="articleImageCaption">Adjust the Shadows slider to balance toward the highlights.</p> <p>And we're done. Once you get the hang of what each adjustment does, you can effectively blend even problematic images in a few steps - and the results are a definite improvement from where we began with the default Transparency Blend:</p> <div class="enableZoom fade-in" onclick="enlargeImage('Highlight-AdjustBlend6');"> <div id="Highlight-AdjustBlend6" data-group="adjustBlend" class="enlargable"> <picture> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/blog/pool/archival/Native-Image-Blends/Aurora-Blend-Step6.jpg" alt="Before and After, showing the dramatic difference between Default and Adjusted states."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-AdjustBlend6-Caption">Before + After, showing the default Transparency Blend vs our Adjusted Blend.</div></aside> </div> <p class="articleImageCaption">Before and After, showing the dramatic difference between Default and Adjusted states.</p> <p>While these settings are a good approach for the specific problem posed by this type of image, you'll want to apply these principles in different ways depending on the nature of your source image. Lighter images blending with darker backgrounds, for instance, will tend to work better with higher midrange Levels, less Exposure and adjustments to the Highlights slider instead of the Shadows used here. Experiment a bit and use your best judgment according to the type of image you're blending and the background you're blending with.</p> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2018://13.0300</id>
<title type="text">Calais Brush-Up</title>
<published>2018-03-13T07:00:07-04:00</published>
<updated>2023-12-14T17:10:08-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/03132018/Calais-Brush-Up/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/Calais-BrushUp/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Transform Calais into a Brushed Variation" /></p><p class="articleBodyLede">Redefine a single Shape Style to transform Calais into an organic, Brushed variation.</p> <p>In some of our previous tutorials, we've taken a look at how easy it is to affect theme-wide changes in our NXT-Generation themes through simple shape-style changes. If this is your first time delving into this sort of customization, you can find a bit of additional background in the <a href="/blog/post/05042017/Instant-Classic/" class="hinted">Palo Alto: Instant Classic</a> Tip or the more in-depth Recoloring NXT-Generation Keynote Themes Tutorial, but they're not required reading for this example.</p> <p>Our recent Calais theme offers an excellent insight, though, into just how much can be packed into these style definitions. We've covered the color-change side of things a few times already - so we're not going to re-tread that here. But Keynote's Shape Style Definitions don't stop at the color of the fill: they can also include stroke or effect information as well.</p> <p>We can leverage that in Calais to apply one of the organic, brushed Line Styles to the Title Accent object &amp; give it more of a hand-made feel throughout your entire presentation in just a couple of steps. These brushed shape styles are already defined for you in the Calais Supplemental file, but they're easy to set up if you want to follow along in the steps below.</p> <h2>The Steps</h2> <p>There are only a few steps involved in transforming the basic Calais look into a Brushed variation. Start a new presentation using Calais, add a few slides you can use to reference your changes, and add a Square shape to the stage to get started:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step1');"> <div id="Highlight-Step1" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step1.jpg" alt="Step 1: Add a few slides for reference, and add a Square shape to the stage."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step1-Caption">To begin the process, start a new Calais presentation (or open one you've already made) and add a square shape to the Stage.</div></aside> </div> <p class="articleImageCaption">Step 1: Add a few slides for reference, and add a Square shape to the stage.</p> <p>This shape will act as our proxy for the style we're going to redefine. With this new square selected, look to the Format > Style menu, and click over to the second panel of Shape Styles - this is where our Framework-Reserved styles are defined. Click the signature Yellow to apply this style:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step2');"> <div id="Highlight-Step2" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step2.jpg" alt="Step 2: Apply the reserved Base Style we'll Re-Define later."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step2-Caption">Next, apply the reserved Shape Style the Title Accent is using throughout the theme.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the reserved Base Style we'll Re-Define later.</p> <p>That syncs us up with the currently-applied style. Next, we'll add a Stroke to work with - expand the Border section as needed to expose the settings. Click the Line style selector, and select the Brushed style, second-from-bottom:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step3');"> <div id="Highlight-Step3" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step3.jpg" alt="Step 2: Apply the reserved Base Style we'll Re-Define later."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step3-Caption">Add a Border, and change the default Line style to the Brushed version, second from the bottom.</div></aside> </div> <p class="articleImageCaption">Step 3: Add a border, and then we'll select the Brushed line style.</p> <p>Run the Line weight up to 16pt, and color-match the shape fill - on a Mac, you can do this by clicking and holding the fill color and dragging to the line color, replacing the black. Alternately, you can use the eyedropper to sample the correct color. You should end up with the following:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step4');"> <div id="Highlight-Step4" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step4.jpg" alt="Step 4: Match up the colors and enlarge the line size."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">Match the Border Line color to your Fill color, and increase the Border Line size to 16pt.</div></aside> </div> <p class="articleImageCaption">Step 4: Match up the colors and enlarge the line size.</p> <p>With the modified shape selected, Right or Control-Click on the style definition we applied earlier, and select Redefine Style from Selection:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step5');"> <div id="Highlight-Step5" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step5.jpg" alt="Step 5: Redefine the original Reserved style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step5-Caption">With the modified square selected, Re-Define the reserved Shape Style the Title Accent Objects are all referencing.</div></aside> </div> <p class="articleImageCaption">Step 5: Redefine the original Reserved style.</p> <p>Keynote will verify that you want to redefine every shape in the presentation using that style - be sure Update All Objects is ticked before pressing OK:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step6');"> <div id="Highlight-Step6" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step6.jpg" alt="Step 6: Confirm that you want to update all instances of the style."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step6-Caption">Keynote will prompt you to confirm the new definition - click OK to Update All Objects.</div></aside> </div> <p class="articleImageCaption">Step 6: Confirm that you want to update all instances of the style.</p> <p>And you're done: you should see the change happen instantly on any slides you've already added:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step7');"> <div id="Highlight-Step7" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step7.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step7-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step7.jpg" alt="You're Done: remove the new Square to clean up."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step7-Caption">You're Done: remove the new Square to clean up.</div></aside> </div> <p class="articleImageCaption">You're Done: remove the new Square to clean up.</p> <p>And as you add new slides, you'll see that it's made the change on all of the underlying master slides throughout the presentation as well:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step8');"> <div id="Highlight-Step8" data-group="CalaisBrushUpSteps" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step8.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step8-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Calais-BrushUp/Calais-Brush_Up-Step8.jpg" alt="You'll see your changes immediately on any existing slides and new slides you add."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step8-Caption">You'll see your changes immediately on any existing slides, as well as new slides you add from here forward.</div></aside> </div> <p class="articleImageCaption">You'll see your changes immediately on any existing slides and new slides you add.</p> <p>That's all there is to it: it's a very limited form of the whole-theme change we outline in our NXT Re-coloring Tutorial. You can save a custom version of Calais Brushed from your file if you'll be using this trick frequently: From the File menu, select Save Theme and Add to Theme Chooser to make your new theme appear in the My Themes section of the theme chooser, ready to start your next presentation with (if you ever need to remove it, Right-click or Control-click the theme in My Themes and select Delete).</p> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2017://14.0647</id>
<title type="text">Easy Callout Contrast Charts</title>
<published>2017-06-20T10:47:14-04:00</published>
<updated>2024-10-08T08:08:22-04:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/06202017/Easy-Callout-Contrast-Charts/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/CalloutContrast-Charts/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Creating Callout/Contrast Charts in Keynote 6+" /></p><p class="articleBodyLede">Use a simple data visualization technique to bring clarity to your charts and keep your audience focused.</p> <p>Every Keynote theme includes at least one - and usually several - six-color Chart Style palettes. These palettes are often signature extensions of a given theme, and are highly coordinated to present six distinct series at once - that is, they allow for visual distinction between six different series alongside each other by use of a legend element or some other labeling that distinguishes each series from each other.</p> <p>This is the default behavior for all charts in Keynote, and if you're looking at a snapshot of concurrent data for two or six different regions at once, for instance, this is precisely how your data visualization should be approached. But if you're wanting to focus in on a single region, it can be difficult at times for your audience to hone in on a particular series when they're presented with so much color at once. No matter how well modeled the Style palette is, it requires some effort to "tune out" the other colors to focus on a specific series.</p> <p>In these cases, it's helpful to employ the Callout/Contrast method, sometimes referred to as Series Highlighting. This visualization technique neutralizes the surrounding series colors to effectively treat the series you're focusing on as the "Callout" or highlight data that should be focused on.</p> <p>Our latest theme releases include a Tonal Greyscale Style palette designed specifically for this purpose, but Apple also includes their own greyscale style defaults in Keynote 6+, so you can apply these same principles to any theme you happen to be using.</p> <p>Let's take a look at the process for making your own Callout/Contrast Chart.</p> <h2>The Basics</h2> <p>We're using our Geneva theme for this example, but again, you can use Apple's default greyscale palette to employ this technique in any theme you're using. The first method we'll use works best on White backgrounds, which provides the best contrast range for the entire greyscale palette - if you're using a theme with a colored background, you'll want to use the Alternate method detailed further below.</p> <p>We'll start with a simple, standard 2D Column chart setup, including six month's worth of data for four different regions, with a legend:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics1');"> <div id="Highlight-Basics1" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step1.jpg" alt="Our starting point is a default 2D Column Chart showing six months' data for four regions."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics1-Caption">Our starting point is a default 2D Column Chart showing six months' data for four regions.</div></aside> </div> <p class="articleImageCaption">Starting Point: a default 2D Column Chart with six months' data for four regions.</p> <p>Pretty straightforward - it's a colorful, full-spectrum palette, allowing your audience to use the legend to identify and key in on any of the six series independently. And if your focus is on all six months as aggregate data, this would be a good place to stop.</p> <p>But if we change the context ever-so-slightly, and presume we're looking at any one region as a point-of-focus, suddenly all of that color becomes something of a distraction. We're simply changing the slide title here to make the point - does this feel like the clearest way of having your audience focus on July's data?:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics2');"> <div id="Highlight-Basics2" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step2.jpg" alt="By the Title, we know we're supposed to focus on July - but the abundance of color makes that difficult to do."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics2-Caption">By the Title, we know we're supposed to focus on July - but the abundance of color makes that difficult to do.</div></aside> </div> <p class="articleImageCaption">The abundance of color makes it difficult to distinguish a single series contextually from the others.</p> <p>In context, the abundance of color is incredibly distracting from the point of the slide. Fortunately, there's something we can do to easily clear this up and make July's data the apparent focus of the slide.</p> <p>Select the chart, and be sure the Format &gt; Chart tab is highlighted to make the Chart Styles palette visible:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics3');"> <div id="Highlight-Basics3" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step3.jpg" alt="Step 1: Select the chart, and open the Format - Chart tab to expose the Chart Styles palette."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics3-Caption">Step 1: Select the chart, and open the Format &gt; Chart tab to expose the Chart Styles palette.</div></aside> </div> <p class="articleImageCaption">Step 1: Select the chart, and open the Format &gt; Chart tab to expose the Chart Styles palette.</p> <p>Now, we'll apply the included Tonal Greyscale palette to neutralize the color. If the theme you're using doesn't include this palette, apply Apple's default greyscale palette via the Chart Colors selector further down (on the second panel of options that are exposed when you click):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics4');"> <div id="Highlight-Basics4" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step4.jpg" alt="Step 2: Apply the Tonal Greyscale palette option (or Apple's default greyscale option below) to neutralize the color."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics4-Caption">Step 2: Apply the Tonal Greyscale palette option (or Apple's default greyscale option below) to neutralize the color.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the Tonal Greyscale palette option (or Apple's default greyscale option below) to neutralize the color.</p> <p>Now, with the chart selected, we'll click into the July column and set the color fill to a Highlight color. Here, we're using the theme's signature red color, but if you're stepping through a series of each month's data using this technique, you could also sample the original color used for the series in the original color palette to keep each slide keyed to a distinct color. We're only looking at July, though, so we'll go to the signature color to keep things easy &amp; coordinated:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics5');"> <div id="Highlight-Basics5" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step5.jpg" alt="Step 3: Select the focal series in question, and change to a color fill via the Style tab."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics5-Caption">Step 3: Select the focal series in question, and change to a color fill via the Style tab.</div></aside> </div> <p class="articleImageCaption">Step 3: Select the focal series in question, and change to a color fill via the Style tab.</p> <p>We're left with July's data being the clear point-of-focus on the slide. And since we're using a tonal palette, your audience can still distinguish between the surrounding months as needed via the legend and each series' subtly distinct color.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Basics6');"> <div id="Highlight-Basics6" data-group="ContrastChartBasics" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Basics-Geneva-Step6.jpg" alt="A finished basic setup, leaving July's data as the clear focus of the slide."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Basics6-Caption">A finished basic setup, leaving July's data as the clear focus of the slide.</div></aside> </div> <p class="articleImageCaption">A finished basic setup, leaving July's data as the clear focus of the slide.</p> <p>&nbsp;</p> <h2>Alternate Method: Flat Neutralization</h2> <p>The basic conversion is a big improvement from our starting point - July is clearly the point-of-focus, and the Tonal Greyscale allows for some level of distinction to be made from each of the surrounding months. But we can actually make this even clearer, provided we're not worried about the surrounding months being strongly-typed to the legend.</p> <p>This method is actually a better choice for Callouts appearing on colored backgrounds, as you can select a tonal variation that accents/contrasts the background color in situations where basic greyscale doesn't provide the proper contrast or otherwise clashes with the background color.</p> <p>We're duplicating our original slide here again - select the chart, and click on the Styles tab. Then, shift-select the first &amp; last series to select all of them at once:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate1');"> <div id="Highlight-Alternate1" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step1.jpg" alt="Alternate Step 1: Shift-Select all of the series, and select the Style Tab."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate1-Caption">Alternate Step 1: Shift-Select all of the series, and select the Style Tab.</div></aside> </div> <p class="articleImageCaption">Alternate Step 1: Shift-Select all of the series, and select the Style Tab.</p> <p>With all of the series selected, choose a fairly light neutral color - in this case, we're using the lightest grey in the default color selections (expand by clicking on the color itself instead of the wheel icon):</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate2');"> <div id="Highlight-Alternate2" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step2.jpg" alt="Alternate Step 2: Apply a uniform neutral fill to the entire chart."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate2-Caption">Alternate Step 2: Apply a uniform neutral fill to the entire chart.</div></aside> </div> <p class="articleImageCaption">Alternate Step 2: Apply a uniform neutral fill to the entire chart.</p> <p>Now, like before, we can select July's column and add our Callout color to just that series:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate3');"> <div id="Highlight-Alternate3" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step3.jpg" alt="Alternate Step 3: Apply your Callout color to the series in question."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate3-Caption">Alternate Step 3: Apply your Callout color to the series in question.</div></aside> </div> <p class="articleImageCaption">Alternate Step 3: Apply your Callout color to the series in question.</p> <p>And you're finished. This is arguably the clearest representation of July's data as a focal point - though your audience will have to do a bit of counting to determine how your Callout data compares to May, for example, that comparison would be theirs to make on their own and not the explicit point of the slide.</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Alternate4');"> <div id="Highlight-Alternate4" data-group="ContrastChartAlternate" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Callout-Contrast-Charts/Callout_Alternate-Geneva-Step4.jpg" alt="A finished Alternate Method example."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Alternate4-Caption">A finished Alternate Method example.</div></aside> </div> <p class="articleImageCaption">A finished Alternate Method example.</p> <p>&nbsp;</p> <h2>Additional Thoughts</h2> <p>This technique is an easy yet powerful way to draw your audience's attention to a specific series within your data. You can take it further by employing the Alternate Method as a baseline, and introducing a second color to work in Contrast to the first in order to visually compare the two series in context of the broader data.</p> <p>Though we've only explored 2D columns here, this can be an invaluable technique when you're using other chart types - such as the 2D Line chart - where individual series are even more difficult to distinguish from the default aggregate coloration. Anywhere you'd like your audience to focus on a particular series amidst the broader data, do away with the excess color and make it easy for them to zero in on your data with a simple Highlight to draw their attention precisely where it's needed.</p> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2017://8.0526</id>
<title type="text">Instant Classic</title>
<published>2017-05-04T18:26:55-04:00</published>
<updated>2024-01-19T18:04:13-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/05042017/Instant-Classic/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/InstantClassic-PaloAltoNXT/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Transform Palo Alto NXT into Palo Alto Classic" /></p><p class="articleBodyLede">Quick Tip: Redefine a single Shape Style to transform Palo Alto NXT into Palo Alto Classic.</p> <p>We've received a few questions since the release of Palo Alto NXT from authors who missed the styling details of the older Visible Framework of Palo Alto '08 - in particular the Dashed Lines that made up the framework in the classic Palo Alto architecture.</p> <p>Thanks to the Shape Styles in Keynote 6/7, this is an extremely simple customization you can make in just a few short clicks. Let's take a look.</p> <h2>The Steps</h2> <p>There are only a few steps involved in transforming Palo Alto NXT to Palo Alto Classic. Start a new presentation using Palo Alto NXT, add a Blank slide, and add a Line Shape to the Stage on the Blank slide:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step1');"> <div id="Highlight-Step1" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step1.jpg" alt="Step 1: Add a Blank slide, and add a Line Shape to the Stage."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step1-Caption">To begin the process, start a new Palo Alto NXT presentation (or open one you've already made) and add a line shape to the Stage.</div></aside> </div> <p class="articleImageCaption">Step 1: Add a Blank slide, and add a Line Shape to the Stage.</p> <p>With the Line selected, click to the 2nd panel of Line Styles (bottom) to expose the styles used in the Visible Framework - click the first style (top) to apply that style's defaults to your line - this will act as our proxy shape for the edit:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step2');"> <div id="Highlight-Step2" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step2.jpg" alt="Step 2: Apply the current Framework Line Style to your line."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step2-Caption">Click to the 2nd panel of Line Styles (bottom) to expose the styles used in the Visible Framework - click the first style (top) to apply that style's defaults to your line.</div></aside> </div> <p class="articleImageCaption">Step 2: Apply the current Framework Line Style to your line.</p> <p>Now, we'll modify the line style and redefine it. Change the Stroke Type to the long dash (bottom), and change the Stroke Weight to .75 pt. Right-click the Shape Style we're working with (top), and select Redefine Style from Selection:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step3');"> <div id="Highlight-Step3" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step3.jpg" alt="Step 3: Change the line to Dashed, and Redefine."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step3-Caption">Change the Stroke Type to the long dash (bottom), and change the Stroke Weight to .75 pt. Right-click the Shape Style we're working with (top), and select Redefine Style from Selection.</div></aside> </div> <p class="articleImageCaption">Step 3: Change the line to Dashed, and Redefine.</p> <p>Keynote will verify that you want to redefine every shape in the presentation using that style - be sure Update All Objects is ticked before pressing OK:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step4');"> <div id="Highlight-Step4" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step4.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step4-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step4.jpg" alt="Step 4: Keynote will verify the Style is being updated."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">Keynote will verify the Style is being updated - be sure Update All Objects is ticked before pressing OK.</div></aside> </div> <p class="articleImageCaption">Step 4: Keynote will verify the Style is being updated - select All Objects.</p> <p>And you're done! You should see the change happen instantly on any slides you've already added:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step5');"> <div id="Highlight-Step5" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step5.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step5-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step5.jpg" alt="You're Done! You should see the change instantly."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">You're Done! You'll see the change immediately on your slides.</div></aside> </div> <p class="articleImageCaption">You're Done! You should see the change instantly on your slides.</p> <p>And if you add a new slide, you'll see that it's made the change on all of the underlying master slides throughout the presentation as well:</p> <div class="enableZoom " onclick="enlargeImage('Highlight-Step6');"> <div id="Highlight-Step6" data-group="InstantClassic" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step6.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step6-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/InstantClassic-PaloAltoNXT/InstantClassic-Palo_Alto_NXT-Step6.jpg" alt="Add a new slide, and you'll see that it's made the change on all of the underlying master slides."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Step4-Caption">Add a new slide, and you'll see that it's made the change on all of the underlying master slides.</div></aside> </div> <p class="articleImageCaption">Add a new slide to verify.</p> <p>That's all there is to it - it's a very limited form of the whole-theme change we outline in our NXT Re-coloring Tutorial. If you want to take it further and redefine the entire color model of the theme, that tutorial is a great place to start to get a better understanding of the bigger theme customization picture - the specific shapes to target for modification in Palo Alto NXT are noted in the Supplemental File.</p> <p>You can save a custom version of Palo Alto Classic from the file you changed as desired: Remove the additional slides you added during this tutorial, so that you’re left with just a Title slide. From the File menu, select Save Theme and Add to Theme Chooser to make your new theme appear in the My Themes section of the theme chooser, ready to start your next presentation with (if you ever need to remove it, Right-click or Control-click the theme in My Themes and select Delete).</p> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2017://6.0411</id>
<title type="text">Flattening Shared Presentations</title>
<published>2017-04-11T09:11:27-04:00</published>
<updated>2024-01-19T17:02:27-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/04112017/Flattening-Shared-Presentations/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/Flatten-PostInteractive/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Flatten Your Posted Presentations to Prevent Offline Editing." /></p><p class="articleBodyLede">Flatten Your Posted Interactive Presentations to Prevent Offline Editing.</p> <p>As noted in our <a href="/blog/post/03302017/Posting-Interactive-Presentations/" class="hinted">Tips and Cautions for Posting Interactive Presentations with Keynote 7.1</a> overview, this new feature makes it very easy to share your presentations on WordPress, Medium and other websites - but it leaves your presentations open to download and offline editing by anyone clicking the <em>View in Keynote</em> link at the bottom of each presentation you post.</p> <p>Apple's Product Security team has since confirmed via email that this behavior is as designed - the specific file you're sharing can't be edited once marked <em>View Only</em>, but it is "expected that users can download and edit a local copy of the presentation" once it's shared. So it doesn't look like this will be addressed any time soon - if at all - which puts a bit of a damper on this feature.</p> <p>Fortunately, it's relatively easy to create a flattened version of your presentation that you can share using this feature without leaving yourself exposed to offline editing. Bear in mind that any Object Transitions like Magic Move won't work on flats, since it's essentially transitioning from image-to-image instead of object-to-object: pre-edit a version of your show before hand as needed to optimize for simple transitions between slide-to-slide or build-to-build snapshots. </p> <h2>The Basics</h2> <p>There are only a few steps involved with creating a Flat version of your presentation. We're using the file from the Disruptor sample movie here as a quick example. From the File menu, click on Export To and Images... to start the process:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-ExportImages');"> <div id="Highlight-ExportImages" data-group="flattenInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step1.jpg" alt="Step 1: Export To - Images to create the flats..."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ExportImages-Caption">To begin the process, click on Export To and Images. Check the Create an Image for Each Stage of Builds option as needed, and select PNG as Format.</div></aside> </div> <p class="articleImageCaption">Step 1: Export To &gt; Images to create the flats...</p> <p>This will open the Image Export menu, which you may already be familiar with. If you're including any multi-step builds on your slides, be sure to check the "Create an image for each stage of builds" option. Select PNG as your Format, and click Next to select a location to save your exports.</p> <p>Start a <b>New</b> presentation, and select the <b>Black</b> or <b>White</b> theme matching your exported presentation's aspect ratio - the Black and White themes have the smallest overhead in terms of file weight, so the resulting file you'll eventually share will come down to the amount of images you're inserting in terms of overall weight.</p> <p>Open the folder containing the slides you exported in the previous step. Select all of the images in the folder, and drag them onto the navigator in your new presentation:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-DragImages');"> <div id="Highlight-DragImages" data-group="flattenInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step2.jpg" alt="Step 2: Drag the exported images to a new blank presentation"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-DragImages-Caption">Select the exported slide images, and drag them onto the navigator of a new blank presentation - use Black or White theme to keep overhead down.</div></aside> </div> <p class="articleImageCaption">Step 2: Drag the exported images to a new blank presentation.</p> <p>This will create a new slide for each slide image you're inserting into the new presentation automatically:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-Populated');"> <div id="Highlight-Populated" data-group="flattenInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step3.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step3-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/Flatten-PostInteractive/Flatten-PostInteractives_Step3.jpg" alt="Step 3: Keynote will create a new slide for each image you're inserting."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-Populated-Caption">Keynote will create a new slide for each image you're dragging in - delete Slide 1 to trim the show to only your exported slides.</div></aside> </div> <p class="articleImageCaption">Step 3: Keynote will create a new slide for each image you're inserting.</p> <p>Delete Slide 1 to remove the original Title slide you started with - you'll be left with only the slide images you exported from your original presentation.</p> <p>Now, you can add transitions between slides (or the build steps if you selected that option in the previous step). Again, Object Builds won't work here since you're transitioning between images instead of objects - so stick with simpler transition types like Cube or Doorway that work with the slides as a whole vs the individual objects. Also note that the transitions you add here won't appear during the Interactive Playback on your website - these will only appear for visitors who click the View in Keynote link to view your presentation on iCloud or in Keynote for iOS.</p> <p>Once you've saved, you can <a href="/blog/post/03302017/Posting-Interactive-Presentations/" class="hinted">Post Your Presentation</a> following the steps in our previous guide. Visitors will be able to download a copy of this file via the process we outlined earlier, but since this version of your presentation is Flattened, they won't be able to make direct edits to your work in their offline copy of the file - it's essentially an image slideshow with bonus transitions now.</p> ]]></content>
</entry>
<entry>
<id>tag:keynotepro.com,2017://5.0303</id>
<title type="text">Posting Interactive Presentations</title>
<published>2017-03-30T11:03:51-04:00</published>
<updated>2023-12-08T11:07:13-05:00</updated>
<author>
<name>KeynotePro</name>
<uri>https://keynotepro.com/</uri>
<email>info@keynotepro.com</email>
</author>
<link rel="alternate" href="https://keynotepro.com/blog/post/03302017/Posting-Interactive-Presentations/"/>
<content type="html"><![CDATA[ <p><img src="https://keynotepro.com/images/blog/pool/support/archival/PostingInteractivePresentations/4x3/preview.jpg" width="1440" height="1080" border="0" alt="Posting Interactive Presentations to the web with Keynote 7.1" /></p><p class="articleBodyLede">Some Tips - and Cautions - on Posting Interactive Presentations with Keynote 7.1</p> <p>The Keynote 7.1 Update brought an interesting new feature to Apple's presentation app: the ability to <strong>Post Interactive Presentations to WordPress, Medium and the web</strong>. We touched on this briefly in our <a href="/support/topics/The-Upgrade-Report/" title="The Upgrade Report" target="_self" class="hinted">Keynote 7.1 Upgrade Report</a>, and while the new service still has a few bugs to work out and may not be for everyone yet, there's already a lot of buzz building around the web from authors anxious to explore an easy alternative to SlideShare and other online slide-hosting services.</p><p>Apple's made it very easy - though not entirely intuitive - to share your presentations with this new feature. But you'll want to be mindful of how much you're actually sharing with this service at the moment: there are a few non-obvious Privacy/Security concerns with the current implementation that are worth noting before you rush to try this out, particularly for business presenters.</p> <h2>The Basics</h2> <p>There are only a few steps involved with the sharing process - Apple's made it as close to one-step as possible. You'll want to be working with a presentation saved to your iCloud Drive to get this working, but Keynote will prompt you to do so if you're working with a local file.</p> <p>From the <b>Share</b> menu, click on <b>Collaborate with Others</b> to start the process:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-ShareCollaborate');"> <div id="Highlight-ShareCollaborate" data-group="postInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step1.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step1-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step1.jpg" alt="Step 1: Share Menu, Collaborate with Others..."> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-ShareCollaborate-Caption">To begin the process, click on Share and Collaborate with Others. Keynote will suggest that you need to save your presentation to your iCloud Drive if you're working with a local file.</div></aside> </div> <p class="articleImageCaption">Step 1: Share &gt; Collaborate with Others...</p> <p>This will open the Real-time Collaboration menu, which you may already be familiar with. Select <b>Copy Link</b> to expose the additional options:</p> <div class="enableZoom" onclick="enlargeImage('Highlight-CopyLink');"> <div id="Highlight-CopyLink" data-group="postInteractives" class="enlargable"> <picture> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step2.jpg" media="(prefers-color-scheme:light)"> <source srcset="/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step2-D.jpg" media="(prefers-color-scheme:dark)"> <img loading="lazy" src="https://keynotepro.com/images/support/pool/archival/PostingInteractivePresentations/PostInteractives_Step2.jpg" alt="Step 1: Click Copy Link to expose the Share Options"> </picture> </div> <aside style="display: none;"><div class="hidden" id="Highlight-CopyLink-Caption">Click Copy Link to expose the Share Options: select Anyone with a Link, and select your permissions preference.</div></aside> </div> <p class="articleImageCaption">Step 2: Click Copy Link to expose the Share Options</p> <p>Under <b>Who can Access</b>, you'll want to select <i>Anyone with the Link</i> to be sure it can be viewed by anyone browsing your site. Under <b>Permission</b>, select <i>View Only</i> to restrict visitors from making changes to your presentation. *There's currently a caveat to this permission, though - see below.</p> <p>Click <b>Share</b>, and Keynote will display a <i>Starting Collaboration...</i> indicator. Once it's finished, the URL you'll want to use is actually copied to your Clipboard, though this is less than obvious the first time through.</p> <h2>Posting Your Presentation</h2> <p>Now you're ready to post your presentation. For WordPress users, this is incredibly simple: simply paste the link from your clipboard to a new line in the editor and the platform will take case of the rest. If you're publishing on Medium, click on the Add Embed button, paste the link from your clipboard, and the platform will handle the rest.</p> <p>Posting to non-WordPress/Medium sites requires a bit more effort, but not all that much. You'll need to be able to embed an iFrame element in your page to host the presentation - the code required is really straightforward, but David MacDonald has already posted a handy <a href="https://keynoteiframe.com/" class="appExternal hinted" rel="nofollow" target="_blank">keynoteiframe.com</a> site that will generate that code for you using the URL you provide and explain the parameters involved. Add the iFrame to your page, and you'll end up with something like this:</p> <iframe loading="lazy" src="https://www.icloud.com/keynote/0vP1TZDOcZ4C8YKbtKP9BBVxg?embed=true" frameborder="0" referrer="no-referrer" class="KeynoteLive-SD"></iframe> <p>The embedded presentation is essentially a flat Gallery, and doesn't include any of your builds, animations or transitions. But there's a prominent <b>Open in Keynote</b> button, which will either send your viewers to a browser-based Keynote for iCloud session on the desktop or open a copy of the presentation directly in Keynote for iOS on mobile devices, both of which will keep your builds and transitions intact.</p> <h2>A Word of Caution</h2> <p>There's something of a caveat to Apple's current implementation that should give pause to most business presenters: even if you select View Only permission, viewers who click the link to Open in Keynote at the bottom of the in-page slideshow will have the ability to download a fully-editable copy of your presentation from the Keynote for iCloud website (or via the Send a Copy function in Keynote for iOS) at any time they choose. They won't be able to edit the version of the presentation you're hosting, but they'll be able to download a complete Keynote or PowerPoint copy of your presentation to their computer or device to do with as they see fit.</p> <p>So don't post anything you wouldn't want to see edited or re-hosted by a determined party - you'll need to stick to SlideShare for the time being if you need to prohibit downloads altogether (or <a href="/blog/post/04112017/Flattening-Shared-Presentations/" class="hinted">build a "flattened" version of your show</a> with image exports of your slides in a Blank presentation). We're sure this is likely an extension of the Collaboration services this feature is built upon being originally aimed at open sharing/collaboration, but hope that Apple addresses it in the near future to make the feature more truly useful to professionals and business presenters who can't risk live files floating around openly.</p> <h4>Update April 11, 2017</h4> <p>A representative from Apple's Product Security team has since confirmed via email that the download behavior noted above is intended and behaving as designed. The specific file you're sharing can't be edited once marked <i>View Only</i>, but it is "expected that users can download and edit a local copy of the presentation" once it's shared. So it doesn't look like this will be addressed any time soon - if at all - which puts a bit of a damper on this feature for most business presenters.</p> <p>If you're concerned about live versions of the files you're posting with this feature floating around in the wild, your best bet is to flatten your show before sharing it out: we've put together a <a href="/blog/post/04112017/Flattening-Shared-Presentations/" class="hinted">Quick Tutorial</a> to walk you through the process. Likewise, SlideShare offers an option to Prevent Downloads of files you're hosting through their service, though there are a few more steps involved.</p> ]]></content>
</entry>
</feed>