#ivy-vinezz tutorials

I will be using this stamp template here, but you can use others! You will just have to figure out different resizing for the gifs if so.

Step 1: Go onto ezgif.com and click resizer

Step 2: upload your gif, and resize it to 93 x 48

Step 3: after clicking Resize image, click add image

Step 4: Extend the canvas size 1 time, then insert the overlay (the stamp template at the start of this post) and click upload image

Step 5: Set the location of the frame to 42 x 22.

Step 6: scroll all the way down, and click create animation. Afterwords, click crop.

Step 7: Click autocrop, then crop image.

Step 8: To save the gif stamp, you can hold on it if you’re on mobile, and I’m assuming you double click if your own computer. You can also click save.

Yayyyy now you have a gif stamp!

Didn’t realize I already covered this in my stamp tutorial but just think of this one as more in depth.

I use Procreate for this tutorial, which is NOT a free app— but it works virtually the same as Ibis Paint X, which IS a free app.

PNGS YOU WILL NEED (Can work with any stamp frame, this is just for the sake of simplicity)

Add your stamp frame and stamp base to a new canvas.

2. Insert a photo of your choice! Then clip it onto the base.

3. Insert the texture lines, make sure they cover the whole base.

4. Once done adjusting, clip them onto the stamp base as well, overtop the image.

5. Change the blending layer of the lines! I like to use colourburn. Also, play with the opacity.

6. (Not a required step). Now to make the stamp frame translucent, just select it and change the blending mode! I like Soft Light or Overlay.

─────────────────────

Im not really explaining anything in depth, all the extra info is in the rentry metadata docs (above). Sorry idk if this tutorial is that helpful😭

I’ll be making a rentry as I go through the tutorial. All adjustments are up to you, I’m just showing the ones I’m using.

─────────────────────

1. CONTAINER_INNER

The box where all your words/images/etc will go in the rentry!!

CONTAINER_PADDING: how far words will be from the edge of the container. I set this to CONTAINER_PADDING = 10px

CONTAINER_MAX_WIDTH: the max size your container will be. I set this to CONTAINER_MAX_WIDTH = 600px

CONTAINER_INNER_BACKGROUND_COLOR: Colour of your inner container. You can set it to transparent if you are adding an image into the container. I set this to CONTAINER_INNER_BACKGROUND_COLOR = transparent

CONTAINER_INNER_BACKGROUND_IMAGE: The background image on the inside of your container. I suggest using postimages to upload photos :D I set this to CONTAINER_INNER_BACKGROUND_IMAGE = [img link]

CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT: If the image repeats inside the container, and how it repeats if so. I set this to CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT = no-repeat

CONTAINER_INNER_BACKGROUND_IMAGE_POSITION: The position of the image within the container. I set this to CONTAINER_INNER_BACKGROUND_IMAGE_POSITION = center

CONTAINER_INNER_BACKGROUND_IMAGE_SIZE: how large the image will be in comparison to the container. I recommend putting this at the same size as CONTAINER_MAX_WIDTH. I set this to CONTAINER_INNER_BACKGROUND_IMAGE_SIZE = 600px

This is what my rentry looks like so far with all the inner-container adjustments :)

─────────────────────

2. CONTAINER_OUTER

quite literally the exact same as inner container except it’s… outer. I’ll just quickly show what I adjusted it to.

CONTAINER_OUTER_BACKGROUND_COLOR = transparent CONTAINER_OUTER_BACKGROUND_IMAGE = [img url] CONTAINER_OUTER_BACKGROUND_IMAGE_REPEAT = no-repeat CONTAINER_OUTER_BACKGROUND_IMAGE_POSITION = center CONTAINER_OUTER_BACKGROUND_IMAGE_SIZE = cover

Yippe!!

─────────────────────

3. CONTAINER_BORDER

the frilly little border around your container!!

CONTAINER_BORDER_IMAGE: the image for the border!! There are a lot on tumblr under the #rentry border tag, I’m using one from this post, but just recolouring it to my own liking. I set this to CONTAINER_BORDER_IMAGE = [img url]

CONTAINER_BORDER_IMAGE_SLICE: How many times the border image is chopped up along the edges (basically makes it bigger or smaller). I set this to CONTAINER_BORDER_IMAGE_SLICE = 25%

CONTAINER_BORDER_IMAGE_WIDTH: the thickness of the border. I set this to CONTAINER_BORDER_IMAGE_WIDTH = 30px

CONTAINER_BORDER_IMAGE_OUTSET: how far the border is from the edge of your container. The first number is how far it is from the sides, the second number is how far it is from the top and bottom. I set this to CONTAINER_BORDER_IMAGE_OUTSET = 4px 15px

CONTAINER_BORDER_IMAGE_REPEAT: If the border image repeats or not (I strongly recommend making it repeat). I set this to CONTAINER_BORDER_IMAGE_REPEAT = round

CONTAINER_BORDER_RADIUS: If you would like your container rounder or sharp! For a perfect square, use 0% and for a perfect circle, use 50%. For a rounder square, use a digit in between! I set this to CONTAINER_BORDER_RADIUS = 0%

Ahhh look at this cute border!!!

─────────────────────

4. CONTENT_TEXT

CONTENT_FONT: The font of all your text! Every permitted font can be found on Google fonts. If your font name has more than one word, for example Roboto Mono, it must be typed in as Roboto_Mono. I set this to CONTENT_FONT = Gaegu

CONTENT_FONT_WEIGHT: how thick the lines of your letters will be. Can be from 100 - 900. I set this to CONTENT_FONT_WEIGHT = 400

CONTENT_TEXT_SIZE: The size of your font! You can make this a lost more specific for each font type, that is explained in the metadata doc. The default font size is 16px. I set this to CONTENT_TEXT_SIZE = 18px

CONTENT_TEXT_DIRECTION: Which direction your text reads from. (Left to right or Right to left). Ltr is recommended for most languages, rtl is recommended for languages such as Arabic or Hebrew. I set this to CONTENT_TEXT_DIRECTION = ltr

CONTENT_TEXT_ALIGN: Where your text will automatically align (left, right, center, or justify). I recommend justify, which lets you specifically position each block of text within the markdown editing. I set this to CONTENT_TEXT_ALIGN = justify

CONTENT_TEXT_SHADOW_OFFSET: If you would like a little shadow beneath your text, this decides how far the shadow is from the text itself. First digit is for the x axis, second digit is for the y axis. I set this to: CONTENT_TEXT_SHADOW_OFFSET = 1px 1px

CONTENT_TEXT_SHADOW_BLUR: How blurred the shadow itself is. I set this to CONTENT_TEXT_SHADOW_BLUR = 4px

CONTENT_TEXT_SHADOW_COLOR: the colour of the shadow! I set this to CONTENT_TEXT_SHADOW_COLOR = #9D7178

CONTENT_TEXT_COLOR: Colour of the text itself. I set this to CONTENT_TEXT_COLOR = #4C393D

CONTENT_LINK_COLOR: The colour of links! If you don’t add tjis attribute, link colours will be the same as your chosen text colour. I set this to CONTENT_LINK_COLOR = #9B6972

Pretty font :D

─────────────────────

5. PAGE / EXTRA

PAGE_TITLE: The title at the top of your tab. I set this to PAGE_TITLE = Mooooo >_<

PAGE_ICON: The icon next to the title in your tab. I set this to PAGE_ICON = [img url]

the little R should be where the image I inserted is… sometimes it takes a while to load though, thats why it’s default in the photo.

ACCESS_RECOMMENDED_THEME: Can be either light or dark. Sets the edit button, export button, and donate banner to either black or white. This can be changed manually, as well. I set this to ACCESS_RECOMMENDED_THEME = light

The buttons have changed to light. I can press the little sun to change my theme to dark, if wanted.

─────────────────────

all metadata used

PAGE_TITLE = Mooooo >_< PAGE_IMAGE = https://i.postimg.cc/qvbd6zPy/IMG-3953.png PAGE_ICON = https://i.postimg.cc/qvbd6zPy/IMG-3953.png ACCESS_RECOMMENDED_THEME = light CONTAINER_PADDING = 10px CONTAINER_MAX_WIDTH = 600px CONTAINER_INNER_BACKGROUND_COLOR = transparent CONTAINER_INNER_BACKGROUND_IMAGE = https://i.postimg.cc/441gzLth/IMG-3955.png CONTAINER_INNER_BACKGROUND_IMAGE_REPEAT = no-repeat CONTAINER_INNER_BACKGROUND_IMAGE_POSITION = center CONTAINER_INNER_BACKGROUND_IMAGE_SIZE = 600px CONTAINER_OUTER_BACKGROUND_IMAGE = https://i.postimg.cc/DyQsqbPk/IMG-3971.png

CONTAINER_OUTER_BACKGROUND_COLOR = transparent CONTAINER_OUTER_BACKGROUND_IMAGE_REPEAT = no-repeat CONTAINER_OUTER_BACKGROUND_IMAGE_POSITION = center CONTAINER_OUTER_BACKGROUND_IMAGE_SIZE = cover CONTAINER_BORDER_IMAGE = https://i.postimg.cc/3rpxvFJ5/IMG-3963.png CONTAINER_BORDER_IMAGE_SLICE = 25% CONTAINER_BORDER_IMAGE_WIDTH = 30px CONTAINER_BORDER_IMAGE_OUTSET = 4px 15px CONTAINER_BORDER_IMAGE_REPEAT = round CONTAINER_BORDER_RADIUS = 0% CONTENT_FONT = Gaegu CONTENT_FONT_WEIGHT = 400 CONTENT_TEXT_DIRECTION = ltr CONTENT_TEXT_SIZE = 18px CONTENT_TEXT_ALIGN = justify CONTENT_TEXT_SHADOW_COLOR = #9D7178 CONTENT_TEXT_SHADOW_OFFSET = 1px 1px CONTENT_TEXT_SHADOW_BLUR = 4px CONTENT_TEXT_COLOR = #4C393D CONTENT_LINK_COLOR = #9B6972

And here is the rentry!! I haven’t added any fancy markdown editing, but this is what it looks like with just the metadata!! I hope the tutorial/guide thingy was somewhat helpful. Basically, there’s no specific “way” to do metadata. Just whatever you think looks good!! I also skipped over a LOTTT of metadata so refer to the metadata docs to see more!

heres the rentry btw (feel free to copy stuff from it!!)

Find a banner mask. You don’t technically need one, but for cute frilly edges and such they are nice. I have a lot of them saved here. This is the one I’m using.

2. Upload the mask to a canvas that is 1280x720px.

3. Begin adding background images! You can also start colouring them using the Gradient Map feature (on procreate), or layering different blending modes and colours overtop the images. (I’m using a picture of Davesprite to colour-pick)

4. Add PNGs, more colouring, whatever you see fit. MAKE SURE THE BACKGROUND IS TRANSPARENT BEFORE SAVING THE IMAGE.

This is what the banner looks like so far, but now I’ll upload it to Photopea to insert the Davesprite gif!!

5. Go to the Photopea website, and click “Open from computer”. Then, upload the banner.

6. Once the banner is uploaded, go the top left corner and select “File”. Then select “Open”, and choose the gif you want to overlay on your banner.

7. Select the gif folder. On the top bar of the screen, press “Layer”, then “Duplicate Into”.

8. The destination should be the tab where the banner itself is.

9. This is what it should look like.

10. Next, you have to make the gif clip onto the banner.

Select the banner layer, then find the little magic wand tool on the left side. When you press the banner, it should select it.

11. While you have the banner selected, look at the bottom of tje layers tab.

First, click the folder button.

Second, click the square with the circle in it.

12. This is what your layers should look like.

13. Now, you want to drag the entire gif folder INTO the banner folder.

Press and hold on the gif folder, then drag it overtop the banner folder. When you let go, it should be nestled in the banner folder.

14. Now you can resize the gif until it’s the size you want :)

15. You can change the blending mode of the gif!!

I changed it to linear light.

16. As well, you can add more images to overlay!! Make sure you are still nested within the banner folder. At the top left, click “File” then “Open and Place”.

17. Once your desired overlay is added, resize it as you please. I don’t know why I drew that red circle.

18. As well, change the blending mask and the opacity of this image!!

19. When you are happy with how the banner looks, save it!!

Go to “File” then “Export As” then “GIF”. The image will be downloaded.

20. And there ya have it!! Of course, there are ways to complicate this or simplify it!! As always, just mess around and find out what you like :)