🚀 Overview
The three ways you can use images in Amped
Image elements
Image backgrounds
SVG masks
How to remove the background of your image
If you're needing more info on the different types of image formats to use in Amped, check this article here!
🎥 Watch this quick video!
📸 How To Upload An Image
There are two different 'elements' in the Amped editor that can be used for Images. Containers, and Image Elements. Depending on how you need/want your image to interact with your campaign, you can choose the element you use accordingly!
The two elements in Amped used for images👆
Image Elements - When/Why To Use Them
Convenient since they auto size and only require one level of measurement (width OR height)
Have option to ✨ Remove Background from them
Have option to use percentage sizing as well as px and em measurements
Image Backgrounds (Container Elements) - When/Why To Use Them
Convenient to use for larger images that needs to adjust to your content for a more responsive design
Like image elements, image background has ✨ Remove Background feature
Like image elements, container elements show option to use percentage sizing as well as px and em measurements
Unlike image elements, image backgrounds have option to size, repeat, or align your image to it's container
Size: Limit your image to the container you've set it in (cover) or show the entirety of the image (contain). If none of these options suit you, customize your own image size using custom.
Repeat: Create a pattern of your image into a line or grid within the container
Align: Optimize your design by aligning your image so that the subject is in frame
SVG Masks (Container Elements) - When/Why To Use Them
Can be used to mask images or colors on the larger scale of the design
Can also be used for the benefit of editing the color of a file within Amped (think logos and icons)
❌ Removing the Background of Your Image
✨ Remove Background + Auto Crop: cuts out image, but also crops the dead pixels/ empty space around the image
✨ Remove Background Only: cuts out image, but leaves the size/space the same
*** make sure you adjust your image alignment if needed after removing the background, so that the image doesn't appear "cut off"
