CINXE.COM

<!doctype html> <html lang="en-US"> <head> <meta charset="UTF-8" />  <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= 'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-MSMLW6S');</script>  <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="profile" href="https://gmpg.org/xfn/11" /> <title>Ajar Productions – Software for Digital Designers</title> <meta name='robots' content='max-image-preview:large' /> <style>img:is([sizes="auto" i], [sizes^="auto," i]) { contain-intrinsic-size: 3000px 1500px }</style> <link rel='dns-prefetch' href='//secure.gravatar.com' /> <link rel='dns-prefetch' href='//stats.wp.com' /> <link rel='dns-prefetch' href='//maxcdn.bootstrapcdn.com' /> <link rel='dns-prefetch' href='//v0.wordpress.com' /> <link rel="alternate" type="application/rss+xml" title="Ajar Productions » Feed" href="https://ajarproductions.com/blog/feed/" /> <link rel="alternate" type="application/rss+xml" title="Ajar Productions » Comments Feed" href="https://ajarproductions.com/blog/comments/feed/" /> <script type="text/javascript"> /* <![CDATA[ */ window._wpemojiSettings = {"baseUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/72x72\/","ext":".png","svgUrl":"https:\/\/s.w.org\/images\/core\/emoji\/15.0.3\/svg\/","svgExt":".svg","source":{"concatemoji":"https:\/\/ajarproductions.com\/blog\/wp-includes\/js\/wp-emoji-release.min.js?ver=6.7.2"}}; /*! This file is auto-generated */ !function(i,n){var o,s,e;function c(e){try{var t={supportTests:e,timestamp:(new Date).valueOf()};sessionStorage.setItem(o,JSON.stringify(t))}catch(e){}}function p(e,t,n){e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(t,0,0);var t=new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data),r=(e.clearRect(0,0,e.canvas.width,e.canvas.height),e.fillText(n,0,0),new Uint32Array(e.getImageData(0,0,e.canvas.width,e.canvas.height).data));return t.every(function(e,t){return e===r[t]})}function u(e,t,n){switch(t){case"flag":return n(e,"\ud83c\udff3\ufe0f\u200d\u26a7\ufe0f","\ud83c\udff3\ufe0f\u200b\u26a7\ufe0f")?!1:!n(e,"\ud83c\uddfa\ud83c\uddf3","\ud83c\uddfa\u200b\ud83c\uddf3")&&!n(e,"\ud83c\udff4\udb40\udc67\udb40\udc62\udb40\udc65\udb40\udc6e\udb40\udc67\udb40\udc7f","\ud83c\udff4\u200b\udb40\udc67\u200b\udb40\udc62\u200b\udb40\udc65\u200b\udb40\udc6e\u200b\udb40\udc67\u200b\udb40\udc7f");case"emoji":return!n(e,"\ud83d\udc26\u200d\u2b1b","\ud83d\udc26\u200b\u2b1b")}return!1}function f(e,t,n){var r="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?new OffscreenCanvas(300,150):i.createElement("canvas"),a=r.getContext("2d",{willReadFrequently:!0}),o=(a.textBaseline="top",a.font="600 32px Arial",{});return e.forEach(function(e){o[e]=t(a,e,n)}),o}function t(e){var t=i.createElement("script");t.src=e,t.defer=!0,i.head.appendChild(t)}"undefined"!=typeof Promise&&(o="wpEmojiSettingsSupports",s=["flag","emoji"],n.supports={everything:!0,everythingExceptFlag:!0},e=new Promise(function(e){i.addEventListener("DOMContentLoaded",e,{once:!0})}),new Promise(function(t){var n=function(){try{var e=JSON.parse(sessionStorage.getItem(o));if("object"==typeof e&&"number"==typeof e.timestamp&&(new Date).valueOf()<e.timestamp+604800&&"object"==typeof e.supportTests)return e.supportTests}catch(e){}return null}();if(!n){if("undefined"!=typeof Worker&&"undefined"!=typeof OffscreenCanvas&&"undefined"!=typeof URL&&URL.createObjectURL&&"undefined"!=typeof Blob)try{var e="postMessage("+f.toString()+"("+[JSON.stringify(s),u.toString(),p.toString()].join(",")+"));",r=new Blob([e],{type:"text/javascript"}),a=new Worker(URL.createObjectURL(r),{name:"wpTestEmojiSupports"});return void(a.onmessage=function(e){c(n=e.data),a.terminate(),t(n)})}catch(e){}c(n=f(s,u,p))}t(n)}).then(function(e){for(var t in e)n.supports[t]=e[t],n.supports.everything=n.supports.everything&&n.supports[t],"flag"!==t&&(n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&n.supports[t]);n.supports.everythingExceptFlag=n.supports.everythingExceptFlag&&!n.supports.flag,n.DOMReady=!1,n.readyCallback=function(){n.DOMReady=!0}}).then(function(){return e}).then(function(){var e;n.supports.everything||(n.readyCallback(),(e=n.source||{}).concatemoji?t(e.concatemoji):e.wpemoji&&e.twemoji&&(t(e.twemoji),t(e.wpemoji)))}))}((window,document),window._wpemojiSettings); /* ]]> */ </script> <style id='wp-emoji-styles-inline-css' type='text/css'> img.wp-smiley, img.emoji { display: inline !important; border: none !important; box-shadow: none !important; height: 1em !important; width: 1em !important; margin: 0 0.07em !important; vertical-align: -0.1em !important; background: none !important; padding: 0 !important; } </style> <link rel='stylesheet' id='wp-block-library-css' href='https://ajarproductions.com/blog/wp-includes/css/dist/block-library/style.min.css?ver=6.7.2' type='text/css' media='all' /> <style id='wp-block-library-theme-inline-css' type='text/css'> .wp-block-audio :where(figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-audio :where(figcaption){color:#ffffffa6}.wp-block-audio{margin:0 0 1em}.wp-block-code{border:1px solid #ccc;border-radius:4px;font-family:Menlo,Consolas,monaco,monospace;padding:.8em 1em}.wp-block-embed :where(figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-embed :where(figcaption){color:#ffffffa6}.wp-block-embed{margin:0 0 1em}.blocks-gallery-caption{color:#555;font-size:13px;text-align:center}.is-dark-theme .blocks-gallery-caption{color:#ffffffa6}:root :where(.wp-block-image figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme :root :where(.wp-block-image figcaption){color:#ffffffa6}.wp-block-image{margin:0 0 1em}.wp-block-pullquote{border-bottom:4px solid;border-top:4px solid;color:currentColor;margin-bottom:1.75em}.wp-block-pullquote cite,.wp-block-pullquote footer,.wp-block-pullquote__citation{color:currentColor;font-size:.8125em;font-style:normal;text-transform:uppercase}.wp-block-quote{border-left:.25em solid;margin:0 0 1.75em;padding-left:1em}.wp-block-quote cite,.wp-block-quote footer{color:currentColor;font-size:.8125em;font-style:normal;position:relative}.wp-block-quote:where(.has-text-align-right){border-left:none;border-right:.25em solid;padding-left:0;padding-right:1em}.wp-block-quote:where(.has-text-align-center){border:none;padding-left:0}.wp-block-quote.is-large,.wp-block-quote.is-style-large,.wp-block-quote:where(.is-style-plain){border:none}.wp-block-search .wp-block-search__label{font-weight:700}.wp-block-search__button{border:1px solid #ccc;padding:.375em .625em}:where(.wp-block-group.has-background){padding:1.25em 2.375em}.wp-block-separator.has-css-opacity{opacity:.4}.wp-block-separator{border:none;border-bottom:2px solid;margin-left:auto;margin-right:auto}.wp-block-separator.has-alpha-channel-opacity{opacity:1}.wp-block-separator:not(.is-style-wide):not(.is-style-dots){width:100px}.wp-block-separator.has-background:not(.is-style-dots){border-bottom:none;height:1px}.wp-block-separator.has-background:not(.is-style-wide):not(.is-style-dots){height:2px}.wp-block-table{margin:0 0 1em}.wp-block-table td,.wp-block-table th{word-break:normal}.wp-block-table :where(figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-table :where(figcaption){color:#ffffffa6}.wp-block-video :where(figcaption){color:#555;font-size:13px;text-align:center}.is-dark-theme .wp-block-video :where(figcaption){color:#ffffffa6}.wp-block-video{margin:0 0 1em}:root :where(.wp-block-template-part.has-background){margin-bottom:0;margin-top:0;padding:1.25em 2.375em} </style> <link rel='stylesheet' id='mediaelement-css' href='https://ajarproductions.com/blog/wp-includes/js/mediaelement/mediaelementplayer-legacy.min.css?ver=4.2.17' type='text/css' media='all' /> <link rel='stylesheet' id='wp-mediaelement-css' href='https://ajarproductions.com/blog/wp-includes/js/mediaelement/wp-mediaelement.min.css?ver=6.7.2' type='text/css' media='all' /> <style id='jetpack-sharing-buttons-style-inline-css' type='text/css'> .jetpack-sharing-buttons__services-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:0;list-style-type:none;margin:5px;padding:0}.jetpack-sharing-buttons__services-list.has-small-icon-size{font-size:12px}.jetpack-sharing-buttons__services-list.has-normal-icon-size{font-size:16px}.jetpack-sharing-buttons__services-list.has-large-icon-size{font-size:24px}.jetpack-sharing-buttons__services-list.has-huge-icon-size{font-size:36px}@media print{.jetpack-sharing-buttons__services-list{display:none!important}}.editor-styles-wrapper .wp-block-jetpack-sharing-buttons{gap:0;padding-inline-start:0}ul.jetpack-sharing-buttons__services-list.has-background{padding:1.25em 2.375em} </style> <link rel='stylesheet' id='in5_wp_embed-cgb-style-css-css' href='https://ajarproductions.com/blog/wp-content/plugins/ajar-productions-in5-embed/gutenberg/dist/blocks.style.build.css?ver=6.7.2' type='text/css' media='all' /> <link rel='stylesheet' id='convertkit-broadcasts-css' href='https://ajarproductions.com/blog/wp-content/plugins/convertkit/resources/frontend/css/broadcasts.css?ver=2.7.0' type='text/css' media='all' /> <link rel='stylesheet' id='convertkit-button-css' href='https://ajarproductions.com/blog/wp-content/plugins/convertkit/resources/frontend/css/button.css?ver=2.7.0' type='text/css' media='all' /> <link rel='stylesheet' id='convertkit-form-css' href='https://ajarproductions.com/blog/wp-content/plugins/convertkit/resources/frontend/css/form.css?ver=2.7.0' type='text/css' media='all' /> <style id='classic-theme-styles-inline-css' type='text/css'> /*! This file is auto-generated */ .wp-block-button__link{color:#fff;background-color:#32373c;border-radius:9999px;box-shadow:none;text-decoration:none;padding:calc(.667em + 2px) calc(1.333em + 2px);font-size:1.125em}.wp-block-file__button{background:#32373c;color:#fff;text-decoration:none} </style> <style id='global-styles-inline-css' type='text/css'> :root{--wp--preset--aspect-ratio--square: 1;--wp--preset--aspect-ratio--4-3: 4/3;--wp--preset--aspect-ratio--3-4: 3/4;--wp--preset--aspect-ratio--3-2: 3/2;--wp--preset--aspect-ratio--2-3: 2/3;--wp--preset--aspect-ratio--16-9: 16/9;--wp--preset--aspect-ratio--9-16: 9/16;--wp--preset--color--black: #000000;--wp--preset--color--cyan-bluish-gray: #abb8c3;--wp--preset--color--white: #ffffff;--wp--preset--color--pale-pink: #f78da7;--wp--preset--color--vivid-red: #cf2e2e;--wp--preset--color--luminous-vivid-orange: #ff6900;--wp--preset--color--luminous-vivid-amber: #fcb900;--wp--preset--color--light-green-cyan: #7bdcb5;--wp--preset--color--vivid-green-cyan: #00d084;--wp--preset--color--pale-cyan-blue: #8ed1fc;--wp--preset--color--vivid-cyan-blue: #0693e3;--wp--preset--color--vivid-purple: #9b51e0;--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg,rgba(6,147,227,1) 0%,rgb(155,81,224) 100%);--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg,rgb(122,220,180) 0%,rgb(0,208,130) 100%);--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg,rgba(252,185,0,1) 0%,rgba(255,105,0,1) 100%);--wp--preset--gradient--luminous-vivid-orange-to-vivid-red: linear-gradient(135deg,rgba(255,105,0,1) 0%,rgb(207,46,46) 100%);--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg,rgb(238,238,238) 0%,rgb(169,184,195) 100%);--wp--preset--gradient--cool-to-warm-spectrum: linear-gradient(135deg,rgb(74,234,220) 0%,rgb(151,120,209) 20%,rgb(207,42,186) 40%,rgb(238,44,130) 60%,rgb(251,105,98) 80%,rgb(254,248,76) 100%);--wp--preset--gradient--blush-light-purple: linear-gradient(135deg,rgb(255,206,236) 0%,rgb(152,150,240) 100%);--wp--preset--gradient--blush-bordeaux: linear-gradient(135deg,rgb(254,205,165) 0%,rgb(254,45,45) 50%,rgb(107,0,62) 100%);--wp--preset--gradient--luminous-dusk: linear-gradient(135deg,rgb(255,203,112) 0%,rgb(199,81,192) 50%,rgb(65,88,208) 100%);--wp--preset--gradient--pale-ocean: linear-gradient(135deg,rgb(255,245,203) 0%,rgb(182,227,212) 50%,rgb(51,167,181) 100%);--wp--preset--gradient--electric-grass: linear-gradient(135deg,rgb(202,248,128) 0%,rgb(113,206,126) 100%);--wp--preset--gradient--midnight: linear-gradient(135deg,rgb(2,3,129) 0%,rgb(40,116,252) 100%);--wp--preset--font-size--small: 19.5px;--wp--preset--font-size--medium: 20px;--wp--preset--font-size--large: 36.5px;--wp--preset--font-size--x-large: 42px;--wp--preset--font-size--normal: 22px;--wp--preset--font-size--huge: 49.5px;--wp--preset--spacing--20: 0.44rem;--wp--preset--spacing--30: 0.67rem;--wp--preset--spacing--40: 1rem;--wp--preset--spacing--50: 1.5rem;--wp--preset--spacing--60: 2.25rem;--wp--preset--spacing--70: 3.38rem;--wp--preset--spacing--80: 5.06rem;--wp--preset--shadow--natural: 6px 6px 9px rgba(0, 0, 0, 0.2);--wp--preset--shadow--deep: 12px 12px 50px rgba(0, 0, 0, 0.4);--wp--preset--shadow--sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);--wp--preset--shadow--outlined: 6px 6px 0px -3px rgba(255, 255, 255, 1), 6px 6px rgba(0, 0, 0, 1);--wp--preset--shadow--crisp: 6px 6px 0px rgba(0, 0, 0, 1);}:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;}:where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;}.has-black-color{color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-color{color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-color{color: var(--wp--preset--color--white) !important;}.has-pale-pink-color{color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-color{color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-color{color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-color{color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-color{color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-color{color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-color{color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-color{color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-color{color: var(--wp--preset--color--vivid-purple) !important;}.has-black-background-color{background-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-background-color{background-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-background-color{background-color: var(--wp--preset--color--white) !important;}.has-pale-pink-background-color{background-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-background-color{background-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-background-color{background-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-background-color{background-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-background-color{background-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-background-color{background-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-background-color{background-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-background-color{background-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-background-color{background-color: var(--wp--preset--color--vivid-purple) !important;}.has-black-border-color{border-color: var(--wp--preset--color--black) !important;}.has-cyan-bluish-gray-border-color{border-color: var(--wp--preset--color--cyan-bluish-gray) !important;}.has-white-border-color{border-color: var(--wp--preset--color--white) !important;}.has-pale-pink-border-color{border-color: var(--wp--preset--color--pale-pink) !important;}.has-vivid-red-border-color{border-color: var(--wp--preset--color--vivid-red) !important;}.has-luminous-vivid-orange-border-color{border-color: var(--wp--preset--color--luminous-vivid-orange) !important;}.has-luminous-vivid-amber-border-color{border-color: var(--wp--preset--color--luminous-vivid-amber) !important;}.has-light-green-cyan-border-color{border-color: var(--wp--preset--color--light-green-cyan) !important;}.has-vivid-green-cyan-border-color{border-color: var(--wp--preset--color--vivid-green-cyan) !important;}.has-pale-cyan-blue-border-color{border-color: var(--wp--preset--color--pale-cyan-blue) !important;}.has-vivid-cyan-blue-border-color{border-color: var(--wp--preset--color--vivid-cyan-blue) !important;}.has-vivid-purple-border-color{border-color: var(--wp--preset--color--vivid-purple) !important;}.has-vivid-cyan-blue-to-vivid-purple-gradient-background{background: var(--wp--preset--gradient--vivid-cyan-blue-to-vivid-purple) !important;}.has-light-green-cyan-to-vivid-green-cyan-gradient-background{background: var(--wp--preset--gradient--light-green-cyan-to-vivid-green-cyan) !important;}.has-luminous-vivid-amber-to-luminous-vivid-orange-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-amber-to-luminous-vivid-orange) !important;}.has-luminous-vivid-orange-to-vivid-red-gradient-background{background: var(--wp--preset--gradient--luminous-vivid-orange-to-vivid-red) !important;}.has-very-light-gray-to-cyan-bluish-gray-gradient-background{background: var(--wp--preset--gradient--very-light-gray-to-cyan-bluish-gray) !important;}.has-cool-to-warm-spectrum-gradient-background{background: var(--wp--preset--gradient--cool-to-warm-spectrum) !important;}.has-blush-light-purple-gradient-background{background: var(--wp--preset--gradient--blush-light-purple) !important;}.has-blush-bordeaux-gradient-background{background: var(--wp--preset--gradient--blush-bordeaux) !important;}.has-luminous-dusk-gradient-background{background: var(--wp--preset--gradient--luminous-dusk) !important;}.has-pale-ocean-gradient-background{background: var(--wp--preset--gradient--pale-ocean) !important;}.has-electric-grass-gradient-background{background: var(--wp--preset--gradient--electric-grass) !important;}.has-midnight-gradient-background{background: var(--wp--preset--gradient--midnight) !important;}.has-small-font-size{font-size: var(--wp--preset--font-size--small) !important;}.has-medium-font-size{font-size: var(--wp--preset--font-size--medium) !important;}.has-large-font-size{font-size: var(--wp--preset--font-size--large) !important;}.has-x-large-font-size{font-size: var(--wp--preset--font-size--x-large) !important;} :where(.wp-block-post-template.is-layout-flex){gap: 1.25em;}:where(.wp-block-post-template.is-layout-grid){gap: 1.25em;} :where(.wp-block-columns.is-layout-flex){gap: 2em;}:where(.wp-block-columns.is-layout-grid){gap: 2em;} :root :where(.wp-block-pullquote){font-size: 1.5em;line-height: 1.6;} </style> <link rel='stylesheet' id='in5-public-css' href='https://ajarproductions.com/blog/wp-content/plugins/ajar-productions-in5-embed/assets/css/public.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='font-awesome-css' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css?ver=6.7.2' type='text/css' media='all' /> <link rel='stylesheet' id='cptch_stylesheet-css' href='https://ajarproductions.com/blog/wp-content/plugins/captcha/css/front_end_style.css?ver=4.4.5' type='text/css' media='all' /> <link rel='stylesheet' id='dashicons-css' href='https://ajarproductions.com/blog/wp-includes/css/dashicons.min.css?ver=6.7.2' type='text/css' media='all' /> <link rel='stylesheet' id='cptch_desktop_style-css' href='https://ajarproductions.com/blog/wp-content/plugins/captcha/css/desktop_style.css?ver=4.4.5' type='text/css' media='all' /> <link rel='stylesheet' id='youtube-subscribe-bar-style-css' href='https://ajarproductions.com/blog/wp-content/plugins/subscribe-bar-youtube/assets/build/frontend.css?ver=d864dd402deed7316c271841c0dfb778' type='text/css' media='all' /> <link rel='stylesheet' id='twentynineteen-style-css' href='https://ajarproductions.com/blog/wp-content/themes/ajartwoone/style.css?ver=1.0.0' type='text/css' media='all' /> <link rel='stylesheet' id='twentynineteen-print-style-css' href='https://ajarproductions.com/blog/wp-content/themes/ajartwoone/print.css?ver=1.0.0' type='text/css' media='print' /> <link rel='stylesheet' id='tablepress-default-css' href='https://ajarproductions.com/blog/wp-content/plugins/tablepress/css/build/default.css?ver=3.0.1' type='text/css' media='all' /> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-content/plugins/ajar-productions-in5-embed/assets/js/screenfull.js?ver=1.0.0" id="screenfull-js"></script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-includes/js/jquery/jquery.min.js?ver=3.7.1" id="jquery-core-js"></script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.4.1" id="jquery-migrate-js"></script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-content/plugins/ajar-productions-in5-embed/assets/js/public.js?ver=1.0.0" id="in5-public-js"></script> <link rel="https://api.w.org/" href="https://ajarproductions.com/blog/wp-json/" /><link rel="EditURI" type="application/rsd+xml" title="RSD" href="https://ajarproductions.com/blog/xmlrpc.php?rsd" /> <meta name="generator" content="WordPress 6.7.2" />  <style>img#wpstats{display:none}</style>  <meta property="og:type" content="website" /> <meta property="og:title" content="Ajar Productions" /> <meta property="og:description" content="Software for Digital Designers" /> <meta property="og:url" content="https://ajarproductions.com/blog/" /> <meta property="og:site_name" content="Ajar Productions" /> <meta property="og:image" content="https://s0.wp.com/i/blank.jpg" /> <meta property="og:image:alt" content="" /> <meta property="og:locale" content="en_US" /> <meta name="twitter:site" content="@ajarproductions" />  <script> (function (jQuery) { window.$ = jQuery.noConflict(); })(jQuery); </script> </head> <body class="home blog wp-embed-responsive has-submenu hfeed image-filters-enabled">  <noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-MSMLW6S" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>  <div id="header"> <div> <a href="https://ajarproductions.com"> <img src="https://ajarproductions.com/pages/images/ajar_logo_two-one_reversed_2x-opt.png" id="header-logo" border="0" alt="Ajar Productions logo" /> </a> <ul id="headernav"><li><a href="//ajarproductions.com/pages/products/in5">in5</a><ul><li><a href="//ajarproductions.com/pages/products/in5">in5 Main Page</a></li><li><a href="//ajarproductions.com/pages/products/in5/showcase.php">in5 Customer Stories</a></li><li><a href="//ajarproductions.com/pages/products/in5/download.php">in5 Download</a></li><li><a href="//ajarproductions.com/pages/products/in5/purchase.php">in5 Pricing</a></li><li><a href="//ajarproductions.com/pages/products/in5/demos.php">in5 Demos</a></li><li><a href="//ajarproductions.com/pages/products/in5/support.php">in5 Support</a></li><li><a href="//ajarproductions.com/account">in5 Account Login</a></li></ul></li><li><a href="https://ajarproductions.com/pages/products">create</a><ul><li><a href="https://ajarproductions.com/pages/products/in5">in5 (Interactive InDesign)</a></li><li><a href="https://ajarproductions.com/account">in5 Online Account Login</a></li><li><a href="https://ajarproductions.com/blog/adobe-extensions/">Adobe Scripts</a></li><li><a href="https://ajarproductions.com/pages/products/">Additional Products...</a></li></ul></li><li><a href="https://ajarproductions.com/blog">learn</a><ul><li><a href="https://academy.ajarproductions.com">Ajar Academy Video Courses</a></li><li><a href="https://ajarproductions.com/in5course">Digital Publishing Course</a></li><li><a href="https://ajarproductions.com/blog/">Blog Articles</a></li><li><a href="https://ajarproductions.com/blog/indesign-ux-resources/">InDesign UX Resources</a></li></ul></li><li><a href="https://ajarproductions.com/pages/about.php">about</a></li><li><a href="https://ajarproductions.com/pages/contact.php">contact</a></li> </ul> <nav id="mobile_menu" onclick="document.body.classList.add('menu-expanded');" > <img src="https://ajarproductions.com/pages/images/hamburger_menu.svg" id="mobile_menu_expand" alt="expand menu"/> </nav> </div> </div> <script> document.addEventListener('scroll', function(e) { var exmenu = document.querySelector('body.menu-expanded'); if(exmenu) exmenu.classList.remove('menu-expanded'); }); </script> <div id="subheader"><div><div class="breadcrumb"><a href="https://ajarproductions.com">Home</a> > <a href="https://ajarproductions.com/blog">Blog</a></div> <div id="search"> <form id="searchform" method="get" action="/blog/index.php"> <div> <input type="text" name="s" id="s" placeholder="search blog articles"> <input type="submit" alt="submit search" value="Search"> </div> </form> </div> </div></div> <div id="page" class="site"> <a class="skip-link screen-reader-text" href="#content">Skip to content</a> </header> <div id="content" class="site-content"> <div id="primary" class="content-area"> <main id="main" class="site-main"> <article id="post-4565" class="post-4565 post type-post status-publish format-standard has-post-thumbnail hentry category-articles category-html5 category-in5-compare category-indesign category-misc category-pdf category-publishing entry"> <header class="entry-header"> <h2 class="entry-title h1 no-hover"><a href="https://ajarproductions.com/blog/2024/09/26/ways-to-make-html5-from-your-pdf-with-indesign-and-in5/" class="no-hover" rel="bookmark">Ways to make HTML5 from your PDF with InDesign and in5</a></h2><span class="byline entry-meta"><div class="author-avatar vcard"><img alt='' src='https://secure.gravatar.com/avatar/f7cc245668131fbff6241578b6dd5629?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/f7cc245668131fbff6241578b6dd5629?s=100&d=mm&r=g 2x' class='avatar avatar-50 photo' height='50' width='50' decoding='async'/></div><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="https://ajarproductions.com/blog/author/myraf/">Myra Ferguson</a></span></span> </header> <figure class="post-thumbnail"> <a class="post-thumbnail-inner" href="https://ajarproductions.com/blog/2024/09/26/ways-to-make-html5-from-your-pdf-with-indesign-and-in5/" aria-hidden="true" tabindex="-1"> </a> </figure> <div class="entry-content"> <img decoding="async" class="alignnone wp-image-4568 size-full" src="https://ajarproductions.com/blog/wp-content/uploads/2024/09/from-PDF-to-HTML5-with-in5.png" alt="" width="744" height="400" srcset="https://ajarproductions.com/blog/wp-content/uploads/2024/09/from-PDF-to-HTML5-with-in5.png 744w, https://ajarproductions.com/blog/wp-content/uploads/2024/09/from-PDF-to-HTML5-with-in5-300x161.png 300w" sizes="(max-width: 744px) 100vw, 744px" /><p></p> <p>If you have a PDF that you would like to convert to HTML5, you have a variety of options. Because in5 is an InDesign plugin, the interactive features and conversion to HTML5 let you take advantage of InDesign’s features. The best way to convert your content to HTML5 is to start with the original InDesign document and export with in5. However, even though there is no mechanism for directly converting an existing PDF to HTML with in5, there are some ways to start with a PDF and export HTML 5 with in5 without having the original InDesign layout.</p> <h2>Ways to get the PDF into InDesign</h2> <p>There are a few</p> <h3>Convert the PDF back to an InDesign document</h3> <p>This option converts the entire document to something you can edit in InDesign, which will give you the most flexibility.</p> <p>If the PDF was created in InDesign, you are online, and you have signed into your Adobe account; you can use the PDF to InDesign feature currently in beta at the time of this article’s publishing. Locate the public InDesign (Beta) with Adobe CC to convert your PDF back into an InDesign document. Then you can export the InDesign layout with in5.<br /> <img loading="lazy" decoding="async" class="wp-image-4570 size-full alignnone" src="https://ajarproductions.com/blog/wp-content/uploads/2024/09/InDesign-beta.png" alt="" width="391" height="170" srcset="https://ajarproductions.com/blog/wp-content/uploads/2024/09/InDesign-beta.png 391w, https://ajarproductions.com/blog/wp-content/uploads/2024/09/InDesign-beta-300x130.png 300w" sizes="auto, (max-width: 391px) 100vw, 391px" /></p> <p>You could instead use a third-party tool, such as PDFMarkz (or the older PDF2DTP), to convert your PDF to an InDesign document so that you can export it with in5. These are commercial options, but have been around for much longer and may work better than InDesign’s brand new (beta) feature.</p> <h3>Place the pages of the PDF onto individual pages</h3> <p>Alternatively, you can insert the PDF pages into InDesign as objects, but they won’t be editable and they’ll simply get exported as images.</p> <p>Place (<em>File > Place…</em>) the pages of the PDF onto individual pages in a new InDesign document as images. Select <em>Show Import Options</em> in the Place dialog box so that you can select <em>All pages</em>.<br /> <img loading="lazy" decoding="async" class="wp-image-4572 size-full alignnone" src="https://ajarproductions.com/blog/wp-content/uploads/2024/09/select-all-pages-when-placing-pdf.png" alt="" width="624" height="393" srcset="https://ajarproductions.com/blog/wp-content/uploads/2024/09/select-all-pages-when-placing-pdf.png 624w, https://ajarproductions.com/blog/wp-content/uploads/2024/09/select-all-pages-when-placing-pdf-300x189.png 300w" sizes="auto, (max-width: 624px) 100vw, 624px" /><br /> The cursor changes into a Place Gun loaded with each page of the PDF as an individual image that you can add to each page separately. Then export this InDesign document with in5.</p> <p class="featurebox"><strong>Note:</strong> as placed images, the pages from the PDF won’t retain their original interactivity, and you may need to <a href="https://ajar.freshdesk.com/support/solutions/articles/26000035926-what-to-do-when-images-are-fuzzy-or-blurry-when-exporting-from-indesign-with-in5" target="_blank" rel="noopener">adjust the image quality to increase the resolution</a> so that text in the PDF that has been converted to an image will be clearer.</p> <h2>Create a document that links to the PDF</h2> <p>You could instead decide to create a document that is made to be online and links to your PDF. Here are a few ways to do that:</p> <ul> <li><a href="https://ajar.freshdesk.com/support/solutions/articles/26000039713-how-to-include-a-downloadable-pdf-in-the-output" target="_blank" rel="noopener">Export the HTML5 content with the Viewer Display and add a downloadable PDF</a> that in5 can generate from InDesign or that you can create separately and specify as the downloadable PDF.</li> <li>Create a <a href="https://ajarproductions.com/in5course/?lesson=hyperlinks" target="_blank" rel="noopener">hyperlink</a> to a PDF.</li> <li>Create <a href="https://ajar.freshdesk.com/support/solutions/articles/26000054903-how-to-make-buttons-to-download-multiple-pdfs-throughout-your-publication" target="_blank" rel="noopener">buttons in an InDesign document to go to the PDF and add the folder than contains the PDF</a> as a resource.</li> </ul> <h2>in5 vs PDF Flipbook Makers</h2> <p>Although it is possible to create a flipbook from a PDF with an online service instead of in5, exporting your content with in5 directly from InDesign has multiple advantages over these services.</p> <p>First, be aware that the <a href="https://ajarproductions.com/blog/2018/03/26/interactive-pdf-is-dead-heres-what-you-can-create-from-indesign-thats-even-better/">PDF format doesn’t support most of the interactive features in InDesign</a>.</p> <p>In order to add interactivity to a flipbook from an online service, you need to learn how to use their proprietary tools.</p> <p>Additionally, if you need to make a change in the original document, you’ll need to re-export it after making changes, bring it back into the proprietary tool, and re-make all of the interactivity.</p> <p>Instead of learning how to use proprietary tools, you can create your content using the familiar tools in InDesign and export your content with in5. And your changes will always live with your InDesign file. You can simply re-export with in5.</p> <p>You also don’t need to be limited to creating a flipbook. With in5, you can turn your content into a variety of types of interactive content:</p> <ul> <li>Flipbooks (of course)</li> <li>Modern digital (an online publication with fade-in transitions between pages and the Viewer Display which is a navigation bar with a variety of options)</li> <li>Longform ebook</li> <li>Mobile app</li> <li>Web app</li> <li>One-page site (a vertically scrolling site with no spaces between the pages)</li> <li>Landing page (responds more like a traditional website)</li> <li>Microsite</li> <li>Scrolling Doc (a vertically scrolling publication with spaces between the pages)</li> <li>Banner Ad (for Google Ads)</li> <li>Presentation</li> <li>Animated GIFs (created using InDesign animation presets and the in5 Animated GIF Maker)</li> <li>MP4s (also created using InDesign animation presets and the in5 Animated GIF Maker)</li> </ul> <p>In addition, with other services, you only have access to your online content there while you have an active subscription with them, and they only store your content for 90 days after your subscription ends. After that, your HTML5 content gets deleted.</p> <p>If archiving your content is a concern, rest assured that the content you export with in5 is yours to keep and will continue to work–even after your subscription ends. If you need to re-export from InDesign, you would need an active subscription.</p> <p>If you’d like to try the approaches described here in order to turn your PDFs into HTML5 content with no coding required, download the free trial of in5:</p> <p style="text-align: center;"><a class="cta" href="https://ajarproductions.com/pages/products/in5/download.php">Download the free trial of in5</a></p> </div> <footer class="entry-footer"> <span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="https://ajarproductions.com/blog/2024/09/26/ways-to-make-html5-from-your-pdf-with-indesign-and-in5/" rel="bookmark"><time class="updated" datetime="2024-09-29T18:12:01-07:00">2024-09-29</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="https://ajarproductions.com/blog/category/articles/" rel="category tag">articles</a>, <a href="https://ajarproductions.com/blog/category/html5/" rel="category tag">HTML5</a>, <a href="https://ajarproductions.com/blog/category/in5-compare/" rel="category tag">in5 comparisions</a>, <a href="https://ajarproductions.com/blog/category/indesign/" rel="category tag">InDesign</a>, <a href="https://ajarproductions.com/blog/category/misc/" rel="category tag">Misc</a>, <a href="https://ajarproductions.com/blog/category/pdf/" rel="category tag">PDF</a>, <a href="https://ajarproductions.com/blog/category/publishing/" rel="category tag">publishing</a></span><span class="comments-link"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M21.99 4c0-1.1-.89-2-1.99-2H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h14l4 4-.01-18z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><a href="https://ajarproductions.com/blog/2024/09/26/ways-to-make-html5-from-your-pdf-with-indesign-and-in5/#comments">3 Comments<span class="screen-reader-text"> on Ways to make HTML5 from your PDF with InDesign and in5</span></a></span> </footer> </article> <article id="post-4361" class="post-4361 post type-post status-publish format-standard has-post-thumbnail hentry category-design category-html5 category-indesign category-interaction entry"> <header class="entry-header"> <h2 class="entry-title h1 no-hover"><a href="https://ajarproductions.com/blog/2023/08/31/how-to-create-an-html-slideshow-with-adobe-indesign/" class="no-hover" rel="bookmark">How to Create an HTML Slideshow with Adobe InDesign</a></h2><span class="byline entry-meta"><div class="author-avatar vcard"><img alt='' src='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=100&d=mm&r=g 2x' class='avatar avatar-50 photo' height='50' width='50' loading='lazy' decoding='async'/></div><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="https://ajarproductions.com/blog/author/justin/">Justin</a></span></span> </header> <figure class="post-thumbnail"> <a class="post-thumbnail-inner" href="https://ajarproductions.com/blog/2023/08/31/how-to-create-an-html-slideshow-with-adobe-indesign/" aria-hidden="true" tabindex="-1"> </a> </figure> <div class="entry-content"> <p>There are multiple ways to create a slideshow using InDesign. Let’s go through the options and how to export your content to HTML.</p> <p>We’ll cover the following slideshow options:</p> <ul> <li>Multi-State Objects with Button Navigation</li> <li>Autoplaying Slideshow using the Animation Panel</li> <li>Easy Slideshows using the in5 Slideshow and Image Sequence Widgets</li> <li>Using in5’s Slideshow Builder to make life crazy easy</li> <li>in5’s Presentation Mode</li> </ul> <p>There are two main ways to create HTML from InDesign: Publish Online, which is built into InDesign; and in5, which is a paid add-on made by Ajar Productions. You can see a <a href="https://ajarproductions.com/blog/2021/12/09/publish-online-vs-in5-digital-publishing-from-indesign-compared/" target="_blank" rel="noopener">comparison of Publish Online and in5 in this post</a>.</p> <h2>Creating an Interactive Slideshow with Object States</h2> <p>You can create a Multi-State Object (MSO) using InDesign’s Object States panel, found under <em>Window > Interactive</em>.</p> <img loading="lazy" decoding="async" class="alignright size-full wp-image-4362" src="https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.17.11-AM.png" alt="object states panel" width="252" height="313" srcset="https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.17.11-AM.png 252w, https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.17.11-AM-242x300.png 242w" sizes="auto, (max-width: 252px) 100vw, 252px" /><p>When you create Object States, you’ve effectively created different visual versions of your content.</p> <p>Each one of these states can act as a slide in your slideshow.</p> <p>The nice thing is that you can control these states with InDesign’s button actions…the downside is that you can’t easily transition between states with animation when exporting to Publish Online (though you can do it using in5’s Slideshow Widget, see more below).</p> <h2>Animating Between Objects to Create Slide Transitions</h2> <p>You can use InDesign’s Animation and Timing panels to take a stack of photos and animation them from hidden to visible one-at-a-time, showing the top photo last. Each new photo effectively hides the one behind it as it fades in.</p> <p>This option is a little messy to set up, but it can be exported to Publish Online. in5’s Image Sequence and Slideshow Widgets provide a much easier way to do this (see more below).</p> <h2>Easy Slideshows using the in5 Slideshow and Image Sequence Widgets</h2> <img loading="lazy" decoding="async" class="alignright size-full wp-image-4363" src="https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.11.59-AM.png" alt="" width="282" height="475" srcset="https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.11.59-AM.png 282w, https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.11.59-AM-178x300.png 178w" sizes="auto, (max-width: 282px) 100vw, 282px" /><p>The in5 Slideshow Widget <em>(in5 > Interactive Widgets > Slideshow)</em> can take any MSO in your document and turn it into a slideshow with animated transitions.</p> <p>All you have to do is select the relevant options in the panel and <a href="https://ajarproductions.com/pages/products/in5" target="_blank" rel="noopener">export with in5</a>.</p> <p>Using this option, you can still have complex and interactive content within your Object States.</p> <img loading="lazy" decoding="async" class="alignright size-full wp-image-4365" src="https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.11.46-AM.png" alt="image sequence widget" width="366" height="475" srcset="https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.11.46-AM.png 366w, https://ajarproductions.com/blog/wp-content/uploads/2023/08/Screen-Shot-2023-08-31-at-10.11.46-AM-231x300.png 231w" sizes="auto, (max-width: 366px) 100vw, 366px" /><p>If you want a simple image slideshow, using the Image Sequence Widget <em>(in5 > Interactive Widgets > Image Sequence)</em> is even easier.</p> <p>For an image sequence, you can simply select a folder filled with images and in5 will turn it into a self-running slideshow for you.</p> <h2>Using in5’s Slideshow Builder to make life crazy easy</h2> <p>If you want to build a slideshow the fastest and easiest way possible—be it interactive or animated—and you have an <a href="https://ajarproductions.com/pages/products/in5/purchase.php#plan_compare_grid" target="_blank" rel="noopener">in5 Pro plan or higher</a>, you can simply run the Slideshow builder…which will create thumbnails, navigation buttons, and animated transitions for you.</p> <p>See it in action in the video below.</p> <div class="youtube-subscribe-bar-container"> <div><iframe loading="lazy" title="Instant Slideshows in Adobe InDesign — in5 v3.4 features" width="640" height="360" src="https://www.youtube.com/embed/hsfkgl3fse4?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></div> <div class="youtube-subscribe-bar" style="color: #ffffff;background-color: #1b1b1b;"> <div>Subscribe to the Ajar YouTube Channel</div> <div> <iframe src="https://www.youtube.com/subscribe_embed?usegapi=1&channelid=WeAreAjar&layout=default&theme=default&count=default&origin=https%3A%2F%2Fajarproductions.com%2Fblog%2F"></iframe></div> <div class="clear"></div> </div> </div> <h2>in5’s Presentation Mode</h2> <p>If you want to get really sophisticated with your slides using InDesign pages, then in5 can turn your entire document into an HTML slideshow using Presentation Mode with the autoplay feature. You can learn more about <a href="https://ajarproductions.com/blog/2018/05/30/create-awesome-slides-from-indesign-using-in5s-presentation-mode/" target="_blank" rel="noopener">in5’s Presentation Mode in this post</a> and see an <a href="https://ajarproductions.com/blog/2018/11/08/gouarte-creates-self-running-tradeshow-presentations-with-indesign-in5/" target="_blank" rel="noopener">example of a self-running slideshow in this post</a>.</p> <div class="featurebox"> <h2>More UX Design Patterns for InDesign</h2> <p><a href="http://ajarproductions.com/iduxpatterns?utm_source=blog&utm_medium=link&utm_campaign=blog_iduxpatterns&ref=blog_dropdownmenusample"><img loading="lazy" decoding="async" class="alignright wp-image-2906 size-full" src="https://ajarproductions.com/blog/wp-content/uploads/2017/06/Small-Book.png" alt="InDesign UX Design Patterns full guide (cover image)" width="198" height="257" /></a>Do you want to learn how to create more working User Experience (UX) and User Interface (UI) elements from InDesign without coding?</p> <p>Check out the complete <a href="http://ajarproductions.com/iduxpatterns?utm_source=blog&utm_medium=link&utm_campaign=blog_iduxpatterns&ref=blog_dropdownmenusample" target="_blank" rel="noopener noreferrer">InDesign UX Design Patterns guide</a> (it’s free with an email sign-up).</p> <p><a class="cta" href="http://ajarproductions.com/iduxpatterns?utm_source=blog&utm_medium=link&utm_campaign=blog_iduxpatterns&ref=blog_dropdownmenusample">Get the guide</a></p> </div> </div> <footer class="entry-footer"> <span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="https://ajarproductions.com/blog/2023/08/31/how-to-create-an-html-slideshow-with-adobe-indesign/" rel="bookmark"><time class="updated" datetime="2024-07-18T17:25:54-07:00">2024-07-18</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="https://ajarproductions.com/blog/category/design/" rel="category tag">design</a>, <a href="https://ajarproductions.com/blog/category/html5/" rel="category tag">HTML5</a>, <a href="https://ajarproductions.com/blog/category/indesign/" rel="category tag">InDesign</a>, <a href="https://ajarproductions.com/blog/category/interaction/" rel="category tag">interaction</a></span> </footer> </article> <article id="post-4339" class="post-4339 post type-post status-publish format-standard has-post-thumbnail hentry category-design category-html5 category-in5-compare category-indesign category-pdf category-publishing entry"> <header class="entry-header"> <h2 class="entry-title h1 no-hover"><a href="https://ajarproductions.com/blog/2023/01/19/stop-struggling-with-animation-in-pdfs-discover-the-indesign-alternatives/" class="no-hover" rel="bookmark">Stop Struggling with Animation in PDFs: Discover the InDesign Alternatives</a></h2><span class="byline entry-meta"><div class="author-avatar vcard"><img alt='' src='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=100&d=mm&r=g 2x' class='avatar avatar-50 photo' height='50' width='50' loading='lazy' decoding='async'/></div><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="https://ajarproductions.com/blog/author/justin/">Justin</a></span></span> </header> <figure class="post-thumbnail"> <a class="post-thumbnail-inner" href="https://ajarproductions.com/blog/2023/01/19/stop-struggling-with-animation-in-pdfs-discover-the-indesign-alternatives/" aria-hidden="true" tabindex="-1"> </a> </figure> <div class="entry-content"> <img loading="lazy" decoding="async" class="alignnone size-full wp-image-4340" src="https://ajarproductions.com/blog/wp-content/uploads/2023/01/animation_in_pdf_hero.jpg" alt="" width="744" height="400" srcset="https://ajarproductions.com/blog/wp-content/uploads/2023/01/animation_in_pdf_hero.jpg 744w, https://ajarproductions.com/blog/wp-content/uploads/2023/01/animation_in_pdf_hero-300x161.jpg 300w" sizes="auto, (max-width: 744px) 100vw, 744px" /><p></p> <p>Animation can add a dynamic and engaging element to your designs, but <em>can animation be used in PDFs?</em> Unfortunately, the short answer is no. While it may seem like a convenient option, using animation in PDFs can be problematic due to inconsistent support across different applications, the death of the Flash Player, and the fact that PDF was never built to support animation (<em>e.g.,</em> animation from InDesign, or formats like animated GIFs)…all of which can cause playback issues and visual holes in your documents.</p> <img loading="lazy" decoding="async" class="alignright wp-image-3227" src="https://ajarproductions.com/blog/wp-content/uploads/2018/03/Flash-Player-8-icon-broken.png" alt="" width="163" height="165" /><p>In the past, PDFs were primarily opened with Adobe software, which included the Flash Player bundled right inside it. This allowed for some use of animation in PDFs through the use of Flash Player content (though only by embedding SWFs, not using InDesign’s native Animation panel). However, with the demise of Flash, this option is no longer available. So, what are the alternatives?</p> <p>The answer is HTML5. This browser-native format is capable of replicating the capabilities of Flash and it <em>does not require coding</em> to create content visually in InDesign and export it to multiple HTML-based formats. In this article, we will explore three formats that support animation: fixed layout ePub, Publish Online, and in5 (InDesign to HTML5). All three formats support animation that you can easily create with InDesign’s native Animation panel.</p> <div class="read-more-wrap"><a href="https://ajarproductions.com/blog/2023/01/19/stop-struggling-with-animation-in-pdfs-discover-the-indesign-alternatives/#more-4339" class="more-link cta-btn">Continue reading…</a></div> </div> <footer class="entry-footer"> <span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="https://ajarproductions.com/blog/2023/01/19/stop-struggling-with-animation-in-pdfs-discover-the-indesign-alternatives/" rel="bookmark"><time class="updated" datetime="2024-07-18T17:25:54-07:00">2024-07-18</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="https://ajarproductions.com/blog/category/design/" rel="category tag">design</a>, <a href="https://ajarproductions.com/blog/category/html5/" rel="category tag">HTML5</a>, <a href="https://ajarproductions.com/blog/category/in5-compare/" rel="category tag">in5 comparisions</a>, <a href="https://ajarproductions.com/blog/category/indesign/" rel="category tag">InDesign</a>, <a href="https://ajarproductions.com/blog/category/pdf/" rel="category tag">PDF</a>, <a href="https://ajarproductions.com/blog/category/publishing/" rel="category tag">publishing</a></span> </footer> </article> <article id="post-4322" class="post-4322 post type-post status-publish format-standard has-post-thumbnail hentry category-html5 category-indesign category-pdf category-tips category-video entry"> <header class="entry-header"> <h2 class="entry-title h1 no-hover"><a href="https://ajarproductions.com/blog/2023/01/12/say-goodbye-to-video-in-pdfs-why-you-should-avoid-it-at-all-costs/" class="no-hover" rel="bookmark">Say Goodbye to Video in PDFs: Why You Should Avoid It at All Costs</a></h2><span class="byline entry-meta"><div class="author-avatar vcard"><img alt='' src='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=100&d=mm&r=g 2x' class='avatar avatar-50 photo' height='50' width='50' loading='lazy' decoding='async'/></div><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="https://ajarproductions.com/blog/author/justin/">Justin</a></span></span> </header> <figure class="post-thumbnail"> <a class="post-thumbnail-inner" href="https://ajarproductions.com/blog/2023/01/12/say-goodbye-to-video-in-pdfs-why-you-should-avoid-it-at-all-costs/" aria-hidden="true" tabindex="-1"> </a> </figure> <div class="entry-content"> <img loading="lazy" decoding="async" class="alignnone size-full wp-image-4326" src="https://ajarproductions.com/blog/wp-content/uploads/2023/01/avoid_pdf_video_hero.jpg" alt="" width="744" height="400" srcset="https://ajarproductions.com/blog/wp-content/uploads/2023/01/avoid_pdf_video_hero.jpg 744w, https://ajarproductions.com/blog/wp-content/uploads/2023/01/avoid_pdf_video_hero-300x161.jpg 300w" sizes="auto, (max-width: 744px) 100vw, 744px" /><p></p> <p>When working with multimedia in design projects, it’s natural to want to include video content in your PDFs. However, it’s important to understand that the use of video in PDFs can be problematic in a number of ways and may not provide the consistent support and playback that you desire.</p> <div class="read-more-wrap"><a href="https://ajarproductions.com/blog/2023/01/12/say-goodbye-to-video-in-pdfs-why-you-should-avoid-it-at-all-costs/#more-4322" class="more-link cta-btn">Continue reading…</a></div> </div> <footer class="entry-footer"> <span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="https://ajarproductions.com/blog/2023/01/12/say-goodbye-to-video-in-pdfs-why-you-should-avoid-it-at-all-costs/" rel="bookmark"><time class="updated" datetime="2024-07-18T17:25:54-07:00">2024-07-18</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="https://ajarproductions.com/blog/category/html5/" rel="category tag">HTML5</a>, <a href="https://ajarproductions.com/blog/category/indesign/" rel="category tag">InDesign</a>, <a href="https://ajarproductions.com/blog/category/pdf/" rel="category tag">PDF</a>, <a href="https://ajarproductions.com/blog/category/tips/" rel="category tag">tips</a>, <a href="https://ajarproductions.com/blog/category/video/" rel="category tag">video</a></span> </footer> </article> <article id="post-4249" class="post-4249 post type-post status-publish format-standard has-post-thumbnail hentry category-design category-html5 category-indesign category-publishing entry"> <header class="entry-header"> <h2 class="entry-title h1 no-hover"><a href="https://ajarproductions.com/blog/2022/02/08/how-to-create-a-skip-link-for-screen-readers-with-indesign-in5/" class="no-hover" rel="bookmark">How to Create a Skip Link for Screen Readers with InDesign & in5</a></h2><span class="byline entry-meta"><div class="author-avatar vcard"><img alt='' src='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=50&d=mm&r=g' srcset='https://secure.gravatar.com/avatar/dc2f497676054022ee04fb8d6ff49ba6?s=100&d=mm&r=g 2x' class='avatar avatar-50 photo' height='50' width='50' loading='lazy' decoding='async'/></div><span class="screen-reader-text">Posted by</span><span class="author vcard"><a class="url fn n" href="https://ajarproductions.com/blog/author/justin/">Justin</a></span></span> </header> <figure class="post-thumbnail"> <a class="post-thumbnail-inner" href="https://ajarproductions.com/blog/2022/02/08/how-to-create-a-skip-link-for-screen-readers-with-indesign-in5/" aria-hidden="true" tabindex="-1"> </a> </figure> <div class="entry-content"> <p>A Skip Link lets disabled users easily skip over purely visual content and jump ahead to substantial content (<em>e.g.</em>, skip over a cover page to the main story).</p> <p>To create a Skip Link with InDesign & in5:</p> <ol> <li>Create a Button or Hyperlink from the element that you would like to use as a Skip Link.</li> <li>Point that link to the page with the main content.</li> <li>Use the Accessibility panel* to designate a text frame on your target page as a <em><main></em> element using the <em>Custom Tag</em> drop-down (optional).</li> <li>In the Accessibility panel, select <em>Treat as Skip Link</em>.</li> <li>In the Accessibility panel, choose <em>Show ONLY to Screen Reader</em> under the <em>Screen Reader Visibility</em> (optional).</li> </ol> <p>* The Accessibility panel is only available to <a href="https://ajarproductions.com/pages/products/in5/purchase.php" target="_blank" rel="noopener">Elite and Enterprise plans</a>.</p> <p>Treating the element as a Skip Link means that in5 will move it off the page and into the top of the reading order in the output, ensuring that a screen reader sees it immediately.</p> <p>You can see in the video below why I suggest that you create the Hyperlink or Button first.</p> <div class="read-more-wrap"><a href="https://ajarproductions.com/blog/2022/02/08/how-to-create-a-skip-link-for-screen-readers-with-indesign-in5/#more-4249" class="more-link cta-btn">Continue reading…</a></div> </div> <footer class="entry-footer"> <span class="posted-on"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><defs><path id="a" d="M0 0h24v24H0V0z"></path></defs><clipPath id="b"><use xlink:href="#a" overflow="visible"></use></clipPath><path clip-path="url(#b)" d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10 10-4.5 10-10S17.5 2 12 2zm4.2 14.2L11 13V7h1.5v5.2l4.5 2.7-.8 1.3z"></path></svg><a href="https://ajarproductions.com/blog/2022/02/08/how-to-create-a-skip-link-for-screen-readers-with-indesign-in5/" rel="bookmark"><time class="updated" datetime="2024-07-18T17:25:54-07:00">2024-07-18</time></a></span><span class="cat-links"><svg class="svg-icon" width="16" height="16" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg><span class="screen-reader-text">Posted in</span><a href="https://ajarproductions.com/blog/category/design/" rel="category tag">design</a>, <a href="https://ajarproductions.com/blog/category/html5/" rel="category tag">HTML5</a>, <a href="https://ajarproductions.com/blog/category/indesign/" rel="category tag">InDesign</a>, <a href="https://ajarproductions.com/blog/category/publishing/" rel="category tag">publishing</a></span> </footer> </article> <nav class="navigation pagination" aria-label="Posts pagination"> <h2 class="screen-reader-text">Posts pagination</h2> <div class="nav-links"><span aria-current="page" class="page-numbers current">1</span> <a class="page-numbers" href="https://ajarproductions.com/blog/page/2/">2</a> <a class="page-numbers" href="https://ajarproductions.com/blog/page/3/">3</a> <span class="page-numbers dots">…</span> <a class="page-numbers" href="https://ajarproductions.com/blog/page/27/">27</a> <a class="next page-numbers" href="https://ajarproductions.com/blog/page/2/"><span class="nav-next-text">Older posts</span> <svg class="svg-icon" width="22" height="22" aria-hidden="true" role="img" focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg></a></div> </nav> </main> </div> </div> </div> <div style="display:none"> <div class="grofile-hash-map-f7cc245668131fbff6241578b6dd5629"> </div> <div class="grofile-hash-map-dc2f497676054022ee04fb8d6ff49ba6"> </div> </div> <script type="text/javascript" id="convertkit-broadcasts-js-extra"> /* <![CDATA[ */ var convertkit_broadcasts = {"ajax_url":"https:\/\/ajarproductions.com\/blog\/wp-admin\/admin-ajax.php","action":"convertkit_broadcasts_render","debug":""}; /* ]]> */ </script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-content/plugins/convertkit/resources/frontend/js/broadcasts.js?ver=2.7.0" id="convertkit-broadcasts-js"></script> <script type="text/javascript" id="convertkit-js-js-extra"> /* <![CDATA[ */ var convertkit = {"ajaxurl":"https:\/\/ajarproductions.com\/blog\/wp-admin\/admin-ajax.php","debug":"","nonce":"93ddebf05d","subscriber_id":""}; /* ]]> */ </script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-content/plugins/convertkit/resources/frontend/js/convertkit.js?ver=2.7.0" id="convertkit-js-js"></script> <script type="text/javascript" src="https://secure.gravatar.com/js/gprofiles.js?ver=202508" id="grofiles-cards-js"></script> <script type="text/javascript" id="wpgroho-js-extra"> /* <![CDATA[ */ var WPGroHo = {"my_hash":""}; /* ]]> */ </script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-content/plugins/jetpack/modules/wpgroho.js?ver=14.1" id="wpgroho-js"></script> <script type="text/javascript" src="https://stats.wp.com/e-202508.js" id="jetpack-stats-js" data-wp-strategy="defer"></script> <script type="text/javascript" id="jetpack-stats-js-after"> /* <![CDATA[ */ _stq = window._stq || []; _stq.push([ "view", JSON.parse("{\"v\":\"ext\",\"blog\":\"5834846\",\"post\":\"0\",\"tz\":\"-8\",\"srv\":\"ajarproductions.com\",\"j\":\"1:14.1\"}") ]); _stq.push([ "clickTrackerInit", "5834846", "0" ]); /* ]]> */ </script> <script type="text/javascript" src="https://ajarproductions.com/blog/wp-content/themes/ajartwoone/js/header.ids.js?ver=1.0" id="script-js"></script> <script> /(trident|msie)/i.test(navigator.userAgent)&&document.getElementById&&window.addEventListener&&window.addEventListener("hashchange",function(){var t,e=location.hash.substring(1);/^[A-z0-9_-]+$/.test(e)&&(t=document.getElementById(e))&&(/^(?:a|select|input|button|textarea)$/i.test(t.tagName)||(t.tabIndex=-1),t.focus())},!1); </script> <div id="footer" class="standard"> <div> <a href="https://ajarproductions.com/subscribe/?ref=sitefooter">Newsletter</a> | <a href="https://ajarproductions.com/legal">Legal Notices</a> | <span>© Ajar Productions 2004-2025, All rights reserved.</span> <div id="social-icons"> <a href="https://www.youtube.com/c/Ajarproductions" target="_blank"><img src="/../pages/images/social/youtube-nobg.svg" class="social-icon" alt="Ajar Productions YouTube Channel" title="Ajar Productions Video on YouTube"/></a> <a href="https://twitter.com/ajarproductions" target="_blank"><img src="/../pages/images/social/twitter-nobg.svg" class="social-icon" alt="Ajar on Twitter" title="Ajar Productions on Twitter"/></a> <a href="https://www.facebook.com/ajarproductions/" target="_blank"><img src="/../pages/images/social/facebook-nobg.svg" class="social-icon" alt="Ajar on Facebook" title="Ajar Productions' page on Facebook'"/></a> <a href="https://www.linkedin.com/company/1168775/" target="_blank"><img src="/../pages/images/social/linkedin-nobg.svg" class="social-icon" alt="Ajar on Linkedin" title="Ajar Productions on Linkedin"/></a> <a href="https://ajarproductions.com/blog/feed/" target="_blank"><img src="/../pages/images/social/feed-nobg.svg" class="social-icon" alt="RSS Feed" title="Ajar Productions Blog RSS Feed"/></a> <a href="https://ajarproductions.com/subscribe/?ref=sitefooter_img" target="_blank"><img src="/../pages/images/social/newsletter-nobg.svg" class="social-icon" alt="newsletter" title="Subscribe to Ajar Productions Email Newsletter"/></a> </div> </div>  <script type="text/javascript"> (function(p, a, n, d, o, b, c) { o = n.createElement('script'); o.type = 'text/javascript'; o.async = true; o.src = 'https://tb.rightmessage.com/'+p+'.js'; b = n.getElementsByTagName('script')[0]; d = function(h, u, i) { var c = n.createElement('style'); c.id = 'rmcloak'+i; c.type = 'text/css'; c.appendChild(n.createTextNode('.rmcloak'+h+'{visibility:hidden}.rmcloak'+u+'{display:none}')); b.parentNode.insertBefore(c, b); return c; }; c = d('', '-hidden', ''); d('-stay-invisible', '-stay-hidden', '-stay'); setTimeout(o.onerror = function() { c.parentNode && c.parentNode.removeChild(c); }, a); b.parentNode.insertBefore(o, b); })('1395353841', 20000, document); </script> </div> </body> </html>