<aside> <img src="/icons/home_red.svg" alt="/icons/home_red.svg" width="40px" /> 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗚𝘂𝗶𝗱𝗲

</aside>

<aside> 📢 $𝗡𝗼𝘁𝗶𝗰𝗲$

𝖯𝗅𝖾𝖺𝗌𝖾 𝖱𝖾𝖺𝖽 𝖬𝖾

</aside>

<aside> 📜 $𝗖𝗼𝗻𝘁𝗲𝗻𝘁𝘀$

𝗠𝗮𝗶𝗻 𝗣𝗮𝗴𝗲

𝖬𝖺𝗂𝗇

𝖡𝖾𝗌𝗍 𝖲𝖼𝗋𝖾𝖾𝗇𝗌𝗁𝗈𝗍𝗌

𝖳𝗈-𝖽𝗈 / 𝖬𝖾𝗆𝗈 / 𝖡𝗈𝗈𝗄𝗆𝖺𝗋𝗄𝗌

𝖦𝖺𝗆𝖾 𝖱𝖾𝖼𝗈𝗋𝖽 𝖢𝖺𝗅𝖾𝗇𝖽𝖺𝗋

𝖳𝗁𝖾 𝗇𝗎𝗆𝖻𝖾𝗋 𝗈𝖿 𝗀𝖺𝗆𝖾𝗌

𝖢𝗎𝗋𝗋𝖾𝗇𝗍 𝗌𝗍𝖺𝗍𝗎𝗌

𝖬𝖺𝗂𝗇 𝖦𝖺𝗆𝖾 𝖫𝗂𝗌𝗍

𝖲𝗎𝖻 𝗉𝖺𝗀𝖾𝗌

𝖫𝗂𝖻𝗋𝖺𝗋𝗒

𝖳𝖾𝗆𝗉𝗅𝖺𝗍𝖾 𝖦𝗎𝗂𝖽𝖾

𝖦𝖺𝗆𝖾 𝖲𝖼𝗋𝖾𝖾𝗇𝗌𝗁𝗈𝗍

𝖱𝖾𝗌𝗈𝗎𝗋𝖼𝖾 𝖫𝗂𝖻𝗋𝖺𝗋𝗒

𝖦𝖺𝗆𝖾 𝖬𝗎𝗌𝗂𝖼 𝖠𝗅𝖻𝗎𝗆

𝖦𝖺𝗆𝖾 𝖬𝗎𝗌𝗂𝖼 𝖣𝖺𝗍𝖺

𝖡𝖺𝗌𝗂𝖼 𝗎𝗌𝖺𝗀𝖾

𝖰𝗎𝗂𝖼𝗄 𝖲𝗍𝖺𝗋𝗍 𝖦𝗎𝗂𝖽𝖾

𝗖𝗼𝘃𝗲𝗿 𝗶𝗺𝗮𝗴𝗲

𝖧𝗈𝗐 𝗍𝗈 𝗆𝖺𝗄𝖾 𝖺 𝖼𝗈𝗏𝖾𝗋 𝗂𝗆𝖺𝗀𝖾

𝖧𝗈𝗐 𝗍𝗈 𝗆𝖺𝗄𝖾 𝖺 𝗆𝗎𝗌𝗂𝖼 𝖺𝗅𝖻𝗎𝗆 𝖼𝗈𝗏𝖾𝗋 𝗂𝗆𝖺𝗀𝖾

</aside>

<aside> <img src="/icons/alert_gray.svg" alt="/icons/alert_gray.svg" width="40px" /> $𝗘𝘁𝗰$

𝖴𝗉𝖽𝖺𝗍𝖾 𝖧𝗂𝗌𝗍𝗈𝗋𝗒

𝖱𝖾𝗌𝗈𝗎𝗋𝖼𝖾 𝖫𝗂𝖻𝗋𝖺𝗋𝗒

𝖧𝗈𝗐 𝗍𝗈 𝖽𝗎𝗉𝗅𝗂𝖼𝖺𝗍𝖾 𝖭𝗈𝗍𝗂𝗈𝗇 𝗍𝖾𝗆𝗉𝗅𝖺𝗍𝖾

</aside>

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f0ff1bdd-49fc-4e5c-a17d-619f7a6d1ef0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f0ff1bdd-49fc-4e5c-a17d-619f7a6d1ef0/loraticon_logo.png" width="40px" /> by Loraticon

Instagram @loraticon

</aside>

<aside> 📌 Contents

</aside>

𝗕𝗲𝘀𝘁 𝗦𝗰𝗿𝗲𝗲𝗻𝘀𝗵𝗼𝘁𝘀 𝗖𝗼𝘃𝗲𝗿 𝗜𝗺𝗮𝗴𝗲 𝗧𝗲𝗺𝗽𝗹𝗮𝘁𝗲 𝗙𝗶𝗹𝗲

Best_Screenshots_Cover_image_Template.fig

𝗕𝗮𝘀𝗶𝗰 𝗦𝗵𝗼𝗿𝘁𝗰𝘂𝘁 𝗸𝗲𝘆𝘀 𝗳𝗼𝗿 𝗳𝗶𝗴𝗺𝗮

• Copy Ctrl+C
• Paste Ctrl+V
• Undo Ctrl+Z
• Duplicate CTRL+D
• Zoom in + , Ctrl+ , Z+Click , Ctrl+wheel
• Zoom out Ctrl+- , Ctrl+wheel
• Select Multiple layers Ctrl+Click, Shift+Click

❶ Go to Figma and Login

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> If you don’t have a Figma account, please sign up (It’s free).

Figma: The Collaborative Interface Design Tool

</aside>

❷ Drag the downloaded fig file or Click Import file and select the fig file.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> The button is at the top.

</aside>

❸ Double Click the Best Screenshots Cover Image Template

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" />

</aside>

❹ Drag the image onto the canvas to import it.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> I recommend using horizontally tall images.

You can also copy an image with Ctrl+C Paste Ctrl+V.

</aside>

❺ Choose a frame that accommodates the maximum number of blocks that can fit on your screen size.

Then, drag the image layer into the frame.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> There are 4x2, 5x2, 5x3 Frames.

In the example, I chose a 4X2 frame because the maximum number of blocks in a horizontal row is 4

1.mp4

</aside>

❻ Resize the image to your desired size.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> You can select the image and resize it by pressing Alt+Drag.

You can also align it from the right panel.

2-1.mp4

</aside>

❼ Duplicate the image by copying and pasting to make a total of 8.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> Click on the image, then copy it with Ctrl+C and paste it with Ctrl+V.

3.mp4

</aside>

❽ Select the rectangle layer 1 and image 1 from the left panel, then click the mask button.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> Using Ctrl +Click To Select Multiple layers.

After clicking the mask button, double-click on the mask layer and rename it to "1.”

4-1.mp4

</aside>

❾ As done above, create masks for the remaining images and rectangles in numerical order.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> Mask Shortcut : Ctrl+Alt+M

</aside>

❿ Select groups 1 to 8 and click on Export in the bottom right corner.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> When exporting, selecting the frame will result in only one image being exported.

</aside>

❶❶ Fill the empty blocks on the Best Screenshots page with screenshots.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" /> Insert image files according to the numbers in the image below.

</aside>

❶❷ Check to see if the images are displaying properly.

<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/4ce32057-d59a-4396-856a-0cb094a969c0/loraticon_logo.png" width="40px" />

</aside>