#tut

in  which  -  mae  shares  petite  snippets  and  easy  tutorials  to  learn  how  to  edit  ₊ ⊹ like + reblog for more !

✦  chapter  one  →  dividers  𝜗𝜚

OO.  introduction :  what  are  dividers  ?

as  their  name  says ,  dividers  basically  work  to  divide  sections  of  a  website ,  post ,  profile  or  similar .  they  can  also  introduce  or  farewell ,  basically  framing  a  space  where  the  rest  of  the  information  will  go .

they  can  be  simple ,  intricate ,  monochrome  or  combine  lots  of  different  resources  to  match  the  desired  aesthetic .  today ,  we  are  going  to  learn  how  to  make  a  divider  from  scratch ,  step  by  step ,  using  free  resources  provided  by  mae !

O1.  resources

there  are  hundreds  of  sites  where  one  can  look  into  to  find  our  base  dividers ;  lots  of  talented  users  make  complex  dividers  and  post  them  for  everyone  to  use .  it’s  always  important ,  if  we  decide  to  use  those  dividers  made  by  someone  else ,  to  check  the  terms  and  conditions  of  use ,  and  give  credit  where  it’s  due . 

in  this  tutorial ,  we  are  making  our  dividers  entirely  from  a  blank  canvas ,  so  we  are  going  to  search  for  some  simpler  dividers  and  combine  them  into  a  whole  new  creation .  some  sites  i  recommend  browsing  for  those  are  tumblr ,  pinterest ,  resource  rentry’s ,  resource  carrd’s ,  etc . . .  in  this  case ,  and  for  the  sake  of  this  tutorial ,  i  made  a  drive  folder  with  lots  of  base  dividers  to  use !

* if  you  made  any  of  them  and  want  to  be  credited / want  me  to  remove  them , please  let  me  know !  there  was  no  credit  when  i  found  them .

HOW  TO :  dividers  -  bmbiies  ( click  to  see ) 

the  colors ,  patterns ,  details  and  more  do  not  really  matter ,  since  we  will  edit  them  entirely  to  match  what  we  want !  the  most  important  part  about  them  is  the  shape  and  details .

O2.  general  ideas

when  we  make  a  divider ,  experimenting  is  essential .  still ,  it’s  always  useful  to  have  an  idea  in  mind  of  what  we  like  and  what  we’d  like  to  implement  to  our  complex  divider .

in  my  case ,  for  examples ,  i  like  adding  curtain - like  pngs  that  look  like  fabrics  to  add  more  details .  for  me ,  bows  are  also  a  must ,  in  different  shapes  and  lengths  to  give  variety  and  that  delicate  touch .  in  this  tutorial  i  will  not  be  using  pngs ,  though ,  as  i’d  like  to  approach  the  treatment  of  pngs  and  icons  in  another  chapter  of  this  series !

something  i  also  really  love  in  dividers  is  when  they’re  not  exactly  straight  or  just  rectangles  that  frame  our  page .  that’s  why  i  love  to  use  rounded  dividers  and  borders  to  give  my  divider  a  better  shape  and  more  interesting  details .  we  will  comment  that  later .

O3.  main  shapes

for  starters ,  i’m  going  to  create  a  new  canvas  in  ibis  paint  x  with  a  blank  background .  since  my  dividers  are  often  used  for  tumblr ,  i  choose  a  size  that  works  best  with  this  application  -  the  width  i  always  use  is  1280  pixels ,  and  the  height  depends  on  how  “thick”  i  want  my  divider  to  be .  my  go - to  heightss  are  in  the  interval  between  250  pixels  and  500  pixels .  today ,  we  are  going  to  choose  1280 px  *  400 px . 

then ,  we  start  with  the  fun  part :  adding  our  images !  when  we  click  the  little  camera  in  the  prior  screenshot ,  our  photo  gallery  will  open .  we  will  have  needed  to  download  our  dividers  beforehand ,  so  that  we  can  add  the  pictures  and  put  them  in  place .

when  we  add  an  image ,  a  little  menu  will  come  up  in  the  bottom  right  corner  of  our  screen .  if  you  scroll  down ,  there  are  several  options  to  edit  the  size  and  positions  of  our  images !  i  like  using  the  “zoom”  tool  since  it  keeps  the  image  centered ,  and  “translation  x”  or  “translation  y”  to  move  my  images  around .  the  other  options  are  also  helpful  but  we  might  not  need  them  as  of  now .

my  dividers  have  three  essential  base  parts :  a  top  ( usually  frilly )  divider ,  then  the  rounded  divider  below  for  the  framing  effect ,  and  usually  “mini”  dividers  that  give  a  little  more  images .  below  are  the  three  step  by  step  and  how  i  layered  them . 

in  this  chapter  i  am  not  going  to  focus  nor  explain  how  to  add  effects ,  colors ,  patterns  or  others  to  our  dividers ;  if  you’d  like  it  to  be  the  next  chapter  of  this  series ,  just  comment  it  or  send  me  an  ask !  i  will  make  a  tutorial  on  ibis  paint  x  effects ,  tricks  and  such .

O4.  detailing

so  far  it’s  cute ,  right ?  the  aesthetic  we  like  should  already  be  somewhat  visible  and  understandable ,  before  we  add  more  things .  for  me ,  i  think  it’s  still  a  little  plain  so  i’m  going  to  add  more  details  on  the  sides  to  round  it  up  a  little  more !  something  that  also  helps  tremendously  is  adding  shadows  to  each  divider .  as  mentioned ,  i  will  show  that  in  future  chapters .

the  change  is  big ,  and  we  barely  did  more  than  adding  one  image  and  adding  some  shadows !  it’s  easy  like  that .  for  me ,  the  center  and  the  whole  pink  frills  look  now  a  little  empty  so  i’m  going  to  add  simple  little  bows  that  might  add  more  detail .  then ,  maybe  something  to  fill  up  the  center  as  our  main  detail  that  will  complete  the  theme .  with  that ,  we  should  be   done ! 

O5.  final  result

and  this  is  the  final  result  of  the  divider  i  did ,  with  a  few  adjustments .  it’s  now  finished  and  ready  to  be  used  anywhere ,  in  the  simple  colors  we  like !

O6.  observations

wow ,  this  was  a  fun  yet  difficult  to  make  tutorial ,  and  the  first  one  of  hopefully  many  more  to  come .  feel  free  to  leave  questions  in  my  inbox  or  comments  and  i’ll  try  to  reply ,  but  keep  in  mind  i’m  a  university  student  ( engineering ,  in  specific ) so  i  don’t  have  as  much  time .

please  let  me  know  what  should  be  my  next  chapter !  it  can  be  about  icons ,  psds ,  gifs ,  any  specific  programs  or  applications ,  or  just  anything  you  want .  reblogs  and  likes  are  extremely  appreciated  ♡

໒꒰ྀི´ ˘ ` ꒱ྀིა farewell  from  mae 

First, grab your png. You can find pngs on pinterest by searching up “Rentry resources” or “Png dumps” on Tumblr. Anything works.

Now, grayscale that png. “But why, iTrapped?” If you don’t grayscale it, well, in my earnest opinion and experience…the colors look funky…and not up to my taste.

Make a new layer, now. And then clip it.

Now, let’s head over to the paint bucket and follow the setting I did.

Choose a color to make it pretty. (Use the paint bucket to color it for you by tapping on the screen. Do this on the layer that you clipped.) For me, I’ll be going with blue. AFTER you choose a color, you can choose the blending mode for it. I’ll be doing overlay as I’m used to it

Guess what? Now we get overlays. Choose any that appeal to you and slap it on. That’s what makes graphics beautiful!

Hold your horses, we aren’t quite done yet. Now, go on the layer where your png is — and click on “Filters.” Choose “Stroke (Outer)”

Fool around with the settings and do what you like the most. After this, click on “Stroke (Outer)” again. But this time, use a lighter color (since I chose a dark outline. But if you did a light outline do a dark one.)

One more step, now, click on “Glow (Outer)” this last step is like the previous one. I’ll be doing a dark outline.

Final result:

Now, since you know how to do the basics (like making this — you will repeat this process with making a graphic)

TIPS AND POINTERS (though it’s how I make my stuff:)

“How do you format/make the graphic, iTrapped?” Well, you usually grab a frame, like what I stated in step one, resources here and other apps are essentially the best. Once you grab that frame, put a character or picture behind that frame (behind the layer that the frame is on.) After that, go BONKERS! (Well that’s what I do…since I just slam on pngs, chibis, etc around the frame.)

If your png has dots, just carefully erase them and you’ll be ok. (I’ve seen others also recommend bg removers, they are pretty good.)

You CAN use graident maps if you desire, but usually I go on Pinterest to find colorings for my edits.

Try to take inspo, maybe from an editor you admire. But again, try to be creative. (This is honestly how I make my graphics and stuff.)

Stroke and glow are like the goats, it defines the png more and you can see it much better than just coloring it and calling it a day.

Never rush yourself to finish a graphic, pretty obvious I know but still. Editblr and editing is for fun, not a competition to see who makes the best edits.

Overlays are really good, you can fool around in the “Blending Mode” to see what you end up with.

If you have any questions or need help with something, send me an ask in my inbox and I’ll help.

STEP ONE: COLORED GRADIENT TEXT. link

STEP TWO: DIVIDERS AND PICTURES.

dividers, pngs, headers. 👇

⬆️ some of my favorite resource peoples.

and you can find pictures on pinterest.

if you layer things right (dividers, pics, gifs), you can make things like this. 👇

(the pic below features dividers from @/uzmacchiato and a gif from pinterest.)

and always make sure to state that whatever you use isnt yours and credit them by tagging them like this ' dividers by @/whoever and pics found on pinterest. ' so that you dont take credit!

the style i use for layering usually is one divider, one or two pics, one divider, if you use all of that in one go it will be thin and weird, so take your time.

STEP THREE: LAYOUT FOR YOUR FANFICS.

when youre making fanfics, you should be able to preview it and see what youre going to read. for example, this is how i do it and here are some tips i added.

if you try reading a fic and it says absolutely nothing about what youre about to read, it feels a bit confusing (at least for me), so i make layouts like the pics above.

(using my fanfic OCEAN EYES as an example) for tagging, if its fluff, pay attention to the tags and try not to click whatever pops up. instead, think about your fanfic and the genre of it, and choose what fits. 👇

STEP FOUR: ADDING MUSIC TO YOUR POSTS.

STEP FIVE: MATURITY

most of tumblr are teenagers, so make sure to add maturity to your posts or fanfics is they feature triggering or inappropriate topics or themes.

STEP SIX: LINKING

just double tap on your text, drag the bar away, click the circle with the chain, paste your link, and tap away.

STEP SEVEN: TAGLISTS AND MASTERLISTS

PART ONE: TAGLISTS

taglists are easy, just make a post and tag a few friends, copy it to your clipboard, and paste it whenever you make fanfics or anything important.

TAGLIST: @/whoever @/whoever @/whoever

PART TWO: MASTERLISTS

it might seem intimidating, but masterlists are just the same. make a post, type the name, date, and optionally the summary of your fic (link the fic to the name).

STEP EIGHT: BANNERS link

you can make your own headers and banners if you dont want to search pinterest for the perfect one, just use some pictures and add them onto a banner and download it.

《》《》《》《》《》《》《》《》《》《》《》《》《》《》

i just told you everything i know, omg. might add more to it later, BUT HOPE THIS HELPS.

asking for a friend