https://imagekit.io/_next/static/chunks/pages/glossary/image-masking-61fc0498b09c79cd.js

1!function(){try{var e="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:{},i=(new e.Error).stack;i&&(e._sentryDebugIds=e._sentryDebugIds||{},e._sentryDebugIds[i]="bb7bbe23-cc25-40fa-b4d1-9b1e947f4793",e._sentryDebugIdIdentifier="sentry-dbid-bb7bbe23-cc25-40fa-b4d1-9b1e947f4793")}catch(e){}}(),(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[8061],{1612:(e,i,s)=>{"use strict";s.d(i,{R:()=>r});var t=s(91668),n=s(67614),a=s(13137);function r(e){return(0,t.R)({...e,MarkdownBody:n.mQ,Table:n.XI,table:n.XI,Collapsible:a.Nt,Figure:a.Dn,FooterText:a.$b})}},13137:(e,i,s)=>{"use strict";s.d(i,{$b:()=>v,Dn:()=>I,Nt:()=>w,T_:()=>M});var t=s(37876),n=s(14232),a=s(95062),r=s.n(a),o=s(18847),l=s.n(o),c=s(18480),h=s(53951),d=s(91668),g=s(80807),m=s(55684),p=s(67614),u=s(73813);s(8312);var f=s(19250),x=s.n(f),j=s(95580);let k=l()(()=>Promise.all([s.e(2446),s.e(3427)]).then(s.bind(s,3427)).then(e=>e.CodeSnippet),{loadableGenerated:{webpack:()=>[3427]},ssr:!0}),b=e=>{let{size:i,children:s,collapsed:n,updateCollapseState:a}=e,r=x().slug(s);return(0,t.jsxs)(i,{children:[(0,t.jsx)("a",{id:r,href:"#".concat(r),onClick:e=>{(0,p.Rt)(e)},children:(0,t.jsx)(g.bss,{size:"20"})}),s,void 0!==n&&(0,t.jsxs)("span",{className:"expand-control",onClick:()=>{a&&a(n=!n)},children:[n&&(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(g.j6J,{})}),!n&&(0,t.jsx)(t.Fragment,{children:(0,t.jsx)(g.ZsL,{})})]})]})},y=n.createContext(null);function v(e){let{children:i}=e,s=n.useContext(y);return(0,n.useEffect)(()=>{s&&i&&s(i)},[i,s]),null}let w=e=>{let{size:i,headingText:s,children:a,collapsed:r=!0}

1=e,[o,l]=(0,n.useState)(r);return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(b,{size:i,collapsed:o,updateCollapseState:e=>{l(e)},children:s}),!o&&(0,t.jsx)(t.Fragment,{children:a})]})},I=e=>(0,t.jsxs)("figure",{style:{textAlign:"center"},children:[(0,t.jsx)(u.A,{children:(0,t.jsx)("img",{src:e.src,style:{maxWidth:"100%",outline:"none",boxShadow:"0 2px 4px 0 rgba(24,35,80,0.08), 0 4px 12px 0 rgba(66,68,80,0.15)"}})}),(0,t.jsxs)("figcaption",{children:[e.caption,e.referenceLink&&(0,t.jsx)("a",{href:e.referenceLink,target:"_blank",children:"Reference"})]})]}),_=e=>{let i=e.alt&&e.alt.includes(";video"),s=i&&e.alt.includes(";controls"),[a,r]=(0,n.useState)(!1),o=e.alt&&e.alt.replace(";video","").replace(";controls","");return((0,n.useEffect)(()=>{r(!0)},[]),i)?(0,t.jsx)(t.Fragment,{children:a&&(0,t.jsxs)("figure",{children:[(0,t.jsx)("video",{...e,controls:s,autoPlay:!s,playsInline:!s,muted:!s,loop:!s,style:{maxWidth:"100%",outline:"none",boxShadow:"0 2px 4px 0 rgba(24,35,80,0.08), 0 4px 12px 0 rgba(66,68,80,0.15)"}}),o&&(0,t.jsx)("figcaption",{children:o})]})}):(0,t.jsx)(t.Fragment,{children:a&&(0,t.jsxs)("figure",{style:{textAlign:"center"},children:[(0,t.jsx)(u.A,{children:(0,t.jsx)("img",{...e,style:{maxWidth:"100%",outline:"none",boxShadow:"0 2px 4px 0 rgba(24,35,80,0.08), 0 4px 12px 0 rgba(66,68,80,0.15)"}})}),o&&(0,t.jsx)("figcaption",{children:o})]})})},M=e=>{let{children:i}=e,[s,a]=(0,n.useState)("Free until you’re ready to upgrade to the Pro plan");return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(m.z,{}),(0,t.jsx)(j.A,{}),(0,t.jsx)(c.A,{spaceFromTop:"110px"}),(0,t.jsx)(y.Provider,{value:a,children:(0,t.jsx)(d.x,{components:{MarkdownBody:p.mQ,Collapsible:w,Figure:I,FooterText:v,h1:e=>(0,t.jsx)(b,{size:"h1",...e}),h2:e=>(0,t.jsx)(b,{size:"h2",...e}),h3:e=>(0,t.jsx)(b,{size:"h3",...e}),h4:e=>(0,t.jsx)(b,{size:"h4",...e}),h5:e=>(0,t.jsx)(b,{size:"h5",...e}),h6:e=>(0,t.jsx)(b,{size:"h6",...e}),pre:e=>{var i;return e?(e=null==(i=e.children)?void 0:i.props,(0,t.jsx)("div",{style:{marginBottom:"30px"},children:(0,t.jsx)(k,{unsetHeight:!0,items:[{language:e.className&&e.className.replace("language-","")||"",codeString:"\n"===e.children[e.children.length-1]?e.children.slice(0,-1):e.children,hideLineNumbers:!0}]})})):null},img:e=>(0,t.jsx)(_,{...e}),Table:e=>(0,t.jsx)(p.XI,{...e}),table:e=>(0,t.jsx)(p.XI,{...e})},children:(0,t.jsx)("div",{className:"main-content",children:i})})}),(0,t.jsx)(h.A,{gettingStartedText:s})]})};M.propTypes={children:r().node.isRequired}},17094:(e,i,s)=>{(window.__NEXT_P=window.__NEXT_P||[]).push(["/glossary/image-masking",function(){return s(59790)}])},59790:(e,i,s)=>{"use strict";s.r(i),s.d(i,{default:()=>h});var t=s(37876),n=s(1612),a=s(13137),r=s(42432),o=s(67614);let l=function(e){let{children:i,...s}=e;return(0,t.jsx)(a.T_,{...s,children:i})};function c(e){let i={a:"a",h1:"h1",h2:"h2",h3:"h3",img:"img",li:"li",p:"p",strong:"strong",ul:"ul",...(0,n.R)(),...e.components};return(0,t.jsxs)(t.Fragment,{children:[(0,t.jsx)(r.A,{title:"What is image masking?",description:"Learn more about image masking, different types of image masking, and their applications.",ogImage:"https://ik.imagekit.io/ikmedia/Graphics/2024%20Website%20Graphics/OG%20Images/OG%20Docs%20v4.jpg?tr=w-1200:l-image,lx-N30,ly-87,i-Graphics@@ImageKit_Essentials@@imagekit_white_logo_4qKoBbo6n.png,w-200,l-end:l-text,i-Glossary,co-0350d3,bg-white,pa-5_15,lx-100,ly-80,fs-45,r-4,ff-fonts@@Poppins-Medium.ttf,l-end:l-text,i-Image Masking,co-ffffff,fs-60,lx-100,w-1000,ly-280,tg-b,ia-left,ff-fonts@@Poppins-SemiBold.ttf,l-end:f-png,e-sharpen"}),"\n",(0,t.jsx)(o.uE,{title:"Image Masking"}),"\n",(0,t.jsx)(o.F6,{children:(0,t.jsxs)(o.mQ,{children:[(0,t.jsx)(i.h1,{children:"What is Image Masking?"}),(0,t.jsx)(i.p,{children:"Image masking is a fundamental technique in photo editing and graphic design that involves isolating specific parts of an image to allow for precise adjustments and creative alterations without affecting the entire image. This editing method is non-destructive, meaning the original image remains intact while the edits are made."}),(0,t.jsx)(i.p,{children:"Different types of image masking techniques are available, each suitable for different adju

1stments and for masking different objects like hair, fur, etc. Image masks are possibly the most important tool for professional photo editing."}),(0,t.jsx)(i.h2,{children:"What are the different types of Image Masking?"}),(0,t.jsx)(i.p,{children:"Let's look at the different image masking techniques to help us pick the best one based on the requirements."}),(0,t.jsx)(i.h3,{children:"Layer Masking"}),(0,t.jsx)(i.p,{children:"Layer masking is the most basic way of masking in a tool like Photoshop. It is a non-destructive masking that involves creating a grayscale mask that determines the visibility of different parts of a layer to which the mask belongs. This technique helps make selective adjustments such as enhancing or modifying a specific part of a photo without altering the rest."}),(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{src:"https://ik.imagekit.io/ikmedia/Graphics/Image%20Masking/Image%20Masking-01.png?updatedAt=1723797490719",alt:"Example of selective colorization using Layer Masking"})}),(0,t.jsx)(i.h3,{children:"Clipping Masks"}),(0,t.jsx)(i.p,{children:"Clipping masks are an extension of layer masks that use one layer to control the visibility of another. This method often applies textures or patterns within specific shapes or text. For example, you may have seen text effects where the background image takes the shape of the text. This effect is achieved using Clipping Masks."}),(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{src:"https://ik.imagekit.io/ikmedia/Graphics/Image%20Masking/Image%20Masking-02.png?tr=w-1400&updatedAt=1723797489732",alt:"Example of clipping mask"})}),(0,t.jsx)(i.h3,{children:"Alpha Masking"}),(0,t.jsx)(i.p,{children:"Alpha masking is a more advanced masking technique ideal for complex subjects with fine details like flying hair or furry animals. It uses the color channels of an image to find high-contrast edges and stores this information in a separate channel, making it more precise and easier to clip out complex objects."}),(0,t.jsx)(i.p,{children:(0,t.jsx)(i.img,{src:"https://ik.imagekit.io/ikmedia/Graphics/Image%20Masking/Image%20Masking-03.png?updatedAt=1723797490722",alt:"Example of alpha mask that is able to separate out flying hair strands"})}),(0,t.jsx)(i.h3,{children:"Gradient and Radial Masks"}),(0,t.jsx)(i.p,{children:"Gradient masks are similar to layer masks except they use smooth gradients to create transitions between visible and hidden areas. These masks help blend different images or apply gradual adjustments. Radial masks apply similar transitions in a circular pattern, often used to highlight or emphasize parts of an image."}),(0,t.jsx)(i.h3,{children:"Vector Masks"}),(0,t.jsx)(i.p,{children:"These masks use vector shapes to define a mask's visible and hidden areas. It is helpful for masking objects with sharp geometrical boundaries that can be masked using these shapes."}),(0,t.jsx)(i.h2,{children:"What are the applications of image masking?"}),(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Separate the object from the background:"})," One of the most common uses of image masking is to remove backgrounds, particularly in product photography and portrait retouching. This allows the subject to be placed on a different background or to create a transparent background for further editing."]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Selective adjustments to the image:"})," Masking enables editors to change specific parts of an image. For example, you can enhance the sky in a landscape photo without affecting the rest of the scene or adjust the brightness of a subject's eyes in a portrait without affecting any other part of the face."]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Combining multiple images into a single image:"})," This technique is used to create artistic visuals, advertisements, and other creative projects where different elements must be seamlessly merged into a single creative."]}),"\n"]}),(0,t.jsx)(i.h2,{children:"Which tools and software can be used for image masking?"}),(0,t.jsxs)(i.ul,{children:["\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Adobe Photoshop"})," is the most popular and powerful tool for image masking and subsequent editing."]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"GIMP"})," is an open-source equivalent of Photoshop for those looking for free options."]}),"\n",(0,t.jsxs)(i.li,{children:[(0,t.jsx)(i.strong,{children:"Canva"}),", a popular online graphic creation tool, also provides basic, easy-to-use masking features that can be handy for some quick edits by beginners."]}),"\n"]}),(0,t.jsx)(i.h2,{children:"Conclusion"}),(0,t.jsx)(i.p,{children:"Mastering image masking can enhance your photo editing and graphic design skills, allowing for greater precision and creativity. Whether removing backgrounds, making selective adjustments, or creating complex composites, understanding and utilizing different masking techniques can elevate your work professionally."}),(0,t.jsxs)(i.p,{children:["If you are looking for ",(0,t.jsx)(i.a,{href:"https://imagekit.io/docs/transformations",children:"real-time image manipulation"}),", including background removal and image effects, and adding watermarks or text directly on your website or app, then you should try ",(0,t.jsx)(i.a,{href:"https://imagekit.io/docs/add-overlays-on-images",children:"ImageKit's Layers API"}),"."]})]})})]})}function h(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};return(0,t.jsx)(l,{...e,children:(0,t.jsx)(c,{...e})})}},67614:(e,i,s)=>{"use strict";s.d(i,{F6:()=>c.F6,G6:()=>c.G6,OB:()=>c.OB,Rt:()=>m,XI:()=>h,mQ:()=>g,mc:()=>c.mc,uE:()=>d});var t=s(37876);s(14232);var n=s(72497),a=s(49038),r=s(23243),o=s(8638),l=s(55684),c=s(57134);function h(e){let{className:i,children:s,...n}=e;return(0,t.jsx)("table",{className:(0,r.cn)("ik-markdown-table",i),...n,children:s})}let d=e=>{let{title:i}=e;return(0,t.jsx)(c.F6,{heroSection:!0,bg:"medium",children:(0,t.jsxs)(c.mc,{children:[(0,t.jsx)(c.OB,{children:i}),(0,t.jsx)(c.G6,{children:(0,t.jsx)(n.N_,{style:{color:o.K.LINK_COLOR},to:"/glossary",children:(0,t.jsxs)("span",{className:"flex items-center gap-2",children:[(0,t.jsx)(a._Jj,{}),(0,t.jsx)("span",{children:"Glossary"})]})})})]})})},g=e=>{let{wideTable:i,children:s}=e;return(0,t.jsx)(l.r,{children:(0,t.jsx)("div",{className:"markdown-body ".concat(i?"wide-table":""),children:s})})},m=e=>{if(e.currentTarget){var i=e.currentTarget.getAttribute("href");i&&document.getElementById(i.slice(1))&&document.getElementById(i.slice(1)).scrollIntoView()}}}},e=>{e.O(0,[241,4938,3629,2517,8585,7177,9897,1163,7141,2749,7654,2122,5008,1217,6919,636,6593,8792],()=>e(e.s=17094)),_N_E=e.O()}]);