#rentry tutorial

First, we import the frame or mask you will use. You can find these by searching "rentry frame".

Then, we will import our picture and erase any excess outside of the frame.

Then we usually add a chibi, You can do this by finding chibi art and erasing the background.

And now we will add any PNGs to the graphic. We chose circle laces for this.

Now we will duplicate the layer of our chibi.

We then use the Stroke Outer filter to find dots that weren't erased, we will go to the top original later and erase where all the exposed dots are.

After that, we delete the layer & reduplicate it. Then we use stroke outer for a white outline, and then a black one. If the chibi or whatever you are using is white or very light already, feel free to reverse the white & black.

Then we add glow outer (usually around 1-2px)

Continue this process for everything

Save it

And then we will import it into a new canvas through 'import picture' & then use the grayscale.

Now, We do not always use a gradient map. But feel free to try out gradients to see if it looks nice on the graphic. Either of the 2 top sites work.

Find a gradient that looks nice. If none fit your vision, feel free to skip it.

Now, import the new image and then add textures. Play around with blending modes & opacity until it looks right.

Boom! You've made your very own graphic.

Now for animated graphics...

(No visuals) If you'd like one where the small chibi moves, move it to be angle -5, save it, and then angle 5 and save it. (Also adjust angles if the 5 looks weird.)

Import the images into ezgif gif maker and turn on "Don't stack frames" and adjust delay time. (I usually use 80ish)

--

Animated graphics 2

Import your graphic into capcut. Add a green background or whatever color is not present on your graphic at all. Add the gif you want on the graphic. Adjust for all the images to go on for equal times so it works.

Ezgif > Mp4 to gif > Remove Background > Select hex code of background > "Replace hex with transparency" > Adjust Fuzz > Optimize

And voila, your graphic is completed! Feel free to adjust in ezgif effects if needed.

• the border i will be using for example its by @/suturical on this post

• now, how to understand this and make the magic happen?

GOTCHA!!!

1. Borders: container adjustements

• the least important thing is the container width, you can put as you please but i use it on 400px — 610px, its just my recommendation

• now the padding is important, its basically the distance between the border and the elements of your rentry

• example: padding on 25px

• example: padding 20px

2. Borders: slice

• the image slice is basically how much it will slice your border and repeat it, i recommend using it 20% – 40%, however adjust as you please!

• example: slice 37%

• example: slice 23%

big difference isnt it? and i only changed the slice part, nothing else!

3. Borders: width

• basically the width of the border, adjust as you please but i also recommend to put on 30px as its the maximum size you can put

• example: width 30px

• example: 15px width

4. Borders: repeat

• this is another thing that dont have much secret and explanation about, there are 4 repeating types for borders, they are:

• stretch: will stretch the original size of the border across the entire container

• round: most used, 'normal', will make your border get around the container

• repeat: will repeat a certain part of the graphic image across the sides

• space: will give space between the repetitions

• onto the next part, text!

2. Text: font applying

• ngl its pretty simple, first catch ANY font of the google fonts site and do like the screenshot above, detail, if you font name has a space between the name (example: playfair display) you MUST put the _ to substitute the space, or it won't work

• but if the font name doesn't have any spaces, write it normally

2. Text: text size

• also really simple, explore the sizes on the rentry, i use it 10px – 25px, adjust to your liking!

2. Text: coloring

• tired of coloring all sentences manually? just do the code from screenshot and input your color! it can be written like i did or the hex code/whatever!

• you can still color things manually even when using this

• final with all these changes:

SO THATS IT! the most important actually :33

hope it isnt confusing, any questions please send an ask!

tagging oomfie @chokingonchairs bc finally got the courage to make this and yu asked for hehe ^___^

THANKS FOR READING!

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

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!!)