hey everyone! I’ve been seeing a lot of people asking about how to make text dividers + banners on my feed, thought I would just do a quick tutorial on how I make my stuff!
link to banner tutorial here.
For context - I don’t have photoshop, and I pretty much had zero experience in anything graphic/web design when I first started making these for my blog. I’ll be using free programs that are all accessible through a web browser, so there is no need for you to download any kind of software to do this!
photopea is free to use and it has a browser mode so you don’t need to download it to be able to use/edit photos! The only downside is that it won’t save projects after you close your tab. So you’ll need to make sure to download png/jpgs of anything you make in photopea onto your computer (which you’d need to do anyways to insert the banners into a tumblr post) before closing the tab.
1) go to photopea (photopea.com)
3) Create a new project - for my dividers I usually use 520 px (horizontal) by 5 px (vertical). I also usually title my dividers, so if I need to reuse them (for a series/multiple creations) I can find them in my downloads/writing folder.
You should now see a white bar in your workspace. Click on the color picker tool. It’s the icon with two overlapping squares near the bottom of the tool bar on the left side of your screen
I usually just try to choose a color that matches the banner/aesthetic of my banner for the series/writing piece. Click “OK” when you’re happy with the color.
If you want to directly sample a color from a banner, you can use the sample/inkdrop tool in photopea. You can do this by opening your banner image in photopea (I’m using one of my banners as an example).
you can click on any part of your banner using the inkdrop tool (it automatically records it in the color picker tool) to sample that color, then switch back to your divider tab.
6) Fill your divider - go to the Edit Menu (upper left corner) > Fill
Then fill your divider (I usually use 100% opacity and don’t really mess with the settings)
7) IMPORTANT: DOWNLOAD YOUR DIVIDER AS AN IMAGE (JPG recommended)
This is really important! Since photopea’s free version DOES NOT SAVE projects, make sure to download anything you’ve finished before closing the tab. I recommend downloading in JPG format, as tumblr now resizes png images/messes up the look on desktop for PNGs.
8) Add the banner to you post!
I usually use the photo post option when using banners (Banner goes in the photo album part of the post, and the caption is my writing)
You can add the banner by clicking the camera button in the draft editor (press enter to create an empty line and you should be able to see it)
And then you’ll have the pretty line/text divider!
Hope this helps if anyone needs it - if you need help with banners, I made a quick tutorial about using Canva + where to find images to use for banners!
prguitarman
dededos
izzy806
ellievsbear
pixelskylines
