#rph tutorial

#1 :     artbreeder

the  first  thing  you’re  going  to  need  to  do  is  make  an  account  on  artbreeder.     it’s  completely  free !     pick  out  some  reference  celebrities  of  who  inspires  your  original  character.     for  example,     for  serena  her  looks  are  inspired  by  natalie  portman,  dianna agron,     and  emilia  clarke.

while  it  may  seem  confusing  at  first,     you  start  with  one  image  and  sliders  come  up  to  the  side.

these  toggles  help  you  edit  the  image.     the  best  thing  to  do  is  get  a  neutral  expression,     unless  you  have  a  muse  who  is  smiling  often,     or  frowning  often . . .     but  even  then,  reface  app  seems  to  focus  a  lot  on  the  eyes  and  can  fix  the  expressions  so  long  as  they  aren’t  too  extreme.

here’s  the  artbreeder  piece  i  made  of  my  oc,     serena.

now,     all  you  have  to  do  is  download  the  reface  app  on  your  phone,     then  search  gifs  within  the  app.     i  personally  choose  to  copy     &     paste  the  gifs  into  a  private  discord  server,     and  i  screencap   /   hoard  them  there.

1. find some pictures to fit the feel you’re going for. pinterest is a great place to look and you can save them to find them again later. it’s good to have a balance of scenery / objects / people / clothes / words so it’s not too heavy on just one (unless that’s what you’re trying to capture)

2. put them in a collage. you could probably use a psd in photoshop, but i just use befunky since it’s a bit easier for me to maneuver. it doesn’t really matter what kinda grid you choose, but i either use a 2x4 or a 3x3 most times. so put in all your pictures and get them arranged (my generic pattern is to do faceless pics on the top and bottom opposite corners and then two words pictures on the inner two opposite corners and then fill the rest with whatever)

like i said in 1, it really helps to have a mix of pictures of different subjects so it doesn’t look too busy and a similar color scheme also helps it mesh (but if they don’t exactly, that’s why you edit.) you can adjust the border by going to where it says spacing and the automatic size for pics is 3988x3988 which is probably bigger than you’ll ever need so just go ahead and shrink that down as much as you need. tumblr can’t open files that big anyway. pngs preserve more quality without the fuzzy effect you sometimes see on mobile images

3. edit (optional) this helps make it look real snazzy and you can either plop that sucker in photoshop and slap a nice psd on it or you can use a website like befunky or pixlr to adjust the saturation and brightness and colors and filters and all that stuff.

don’t whitewash though! i’m not an expert on coloring to avoid that but that’s what tutorials are for so here are a few i found. x x also check out the poc friendly psd tag. 

anyway, i only made slight alterations to the saturation and brightness and such in photoshop which can easily be done in the websites i mentioned earlier and now it looks a bit more dramatic and matchy

clearly you can make more drastic changes when you edit but sometimes simple works too.

READ THE UPDATED TUTORIAL HERE

STEP ONE: 

Load all of your gifs into a post as you usually would (I keep a few packs in my drafts when they’re in progress). I usually wait until I have around 50 gifs, then I get ready to move them. Today we’ll be working with my Michael B. Jordan pack. MAKE SURE YOU SAVE THE DRAFT

STEP TWO:

Hit the gear button on the top of your page and change the Text Editor from Rich Text to Markdown

Next, change the editor from Markdown to HTML (this step is necessary because it removes the <image> tags that made the images appear in a line. removing this allows the gifs to load side by side)

STEP THREE:

Now you’re going to copy/paste your HTML. Make sure to only copy the code for the images, not any text or the read more (I use a read more to keep my drafts neat and so that it’s easier to work with).

STEP FOUR: 

Now you can create your new page. You can do so by going to Customize and then clicking “Add a page” (I have a separate blog for this @fakegifs because I make like... a lot of packs and this would have clogged up my rph)

STEP FIVE:

Now the moment we’ve all been waiting for! Click the HTML button (this is very important! If you accidentally paste your code into the regular text editor, only the urls will show up on the page instead of the images) and paste your code into the box below.

To make sure you’ve done it correctly, click the HTML button again and the images should appear.

Now that everything looks okay, add a url and hit save. (I usually go with the initials of the FC and then the acronym of the show or movie, so eventually this will be found at /mbj/tam when the pack is complete)

ALL DONE!

Now you just go to the page that you made and add /mobile to the end of the url, this will load the page as if you were on mobile, this removes all the other code on your blog and allows the gifs to be loaded more quickly and downloaded easier as well.

9/18/18 EDIT: 

Hey there! So I didn’t like how plain sidepages forced people to go to /mobile so instead I’ve started making the pages on custom pages rather than the regular sidepages. You do this by going to the drop down menu and selecting Custom Layout instead of Standard Layout.

After that I added some basic HTML that allowed me to change the size and font of the title, but that’s it because the point of the page is to allow the gifs to load quickly and bogging it down with fancy HTML to make it pretty defeats that purpose (to me, at least). It’s literally the shortest most useless code ever lmao but it’s here if you want it.

OTHER TIPS: 

UPLOADING WITHOUT TAKING FIVE YEARS: So I usually upload my gifs as I make them, not when I’m done with the pack. I will usually make about five or ten gifs, then open up my drafts, save them in a post, and go make more gifs. I keep adding to the post until I have around 50 gifs or have finished an episode/clip/etc. before I move them to the page. By doing so, I keep the page code light so it doesn’t constantly have to load hundreds of gifs every time I add to the post. This also ensures that I don’t accidentally skip any gifs or have the gifs load out of order (which is a pet peeve of mine but not necessarily a necessity).

HOW TO MAKE GIFS SAVE SIDE BY SIDE IN A POST: If you just want to make your gifs load side by side without having to make a side page, then just complete steps One and Two. After changing your editor to Markdown, change it back to Rich Text. From here, you can add your little blurb above the gifs and add in a Read More. 

just start off with the very basics. Or however you write your replies. I don’t know your life. This is just an example post.

now you format it! add icons, bold/italicize words, add links, headers, etc. I guarantee it will be easier to do this now than in HTML (which will be next).

spicy, right? Now for the HTML bit. If you don’t know how to get to that, no worries, it’s right here!

sweet. now once you are in HTML format it’s going to look like this which unless you know code (which i dont lmao) is going to look like a fucking mess. Fear not! just locate the part you want to color in (and if it’s a lot of text try ctrl+f) and copy it. Then you take it to THIS SITE

pick the colors you want here

and then hit the RUN button to make it work.

then you simply COPY the bottom part, and PASTE from where the original text was.

Hit preview to make sure it worked

I’m going to be using google chrome throughout the tutorial just because that’s the browser I already use and can easily explain. For safari, firefox, etc. there will probably only be a few minor differences. If the screencaps are too blurry in the post, I’ve linked more HQ versions of them in the punctuation before the pictures :)

1) Instagram

First, it’s important to remember that you want to be using the permalink, or the exact link, for saving videos. Don’t try to do it straight from their instagram profile or it’s not going to work correctly.

I’ll be using this instavideo for my example.

Right click basically anywhere on the page except for the video

This is the golden ticket you’re looking for:

After you’ve clicked that, you should get a page that looks like this:

You’re that much closer. What I find easiest to do next is to search for “.mp4″ using command + f on the keyboard.

Both of those are working links to the video. So you’ll want to highlight the link and go to it. It’ll bring you to the video that’s separate from instagram and if you right click on the video, you’ll notice that the save video as option is there. Once you click that, you’re all set to save it!

2) Keek

Keek is a little different than Instagram when it comes to saving videos, but not by too much. Again, you don’t want to do this from their profile, but from the exact page where the video is located.

I’ll be using this video for my example.

You’ll be doing the same thing as you did with instagram, right click anywhere except on the video and click “View Page Source”

This page will look a lot more hectic than instagram’s, but it’s not a problem. Again you’ll search but instead of putting “.mp4″ you’ll be searching for “mp4″.

Now here’s where it gets a little tricky. 

Despite all that mumbo jumbo, all you need is to follow the link that appears before where it says data-video-type=“mp4″ and it will take you to the video separate from Keek’s website. Then just like with instagram, you’ll right click the video and the save video as option will be there.

3) Vine

Not much different than the other two. 

I’ll be using this vine as my example.

Go to the video itself, right click and select view page source. Once there, you’ll search for “.mp4″ 

For vine, it’s pretty easy. It’s always going to be the second .mp4 on the page. The first one will take you to a photo which isn’t much use. 

So highlight and follow that second link, it’ll take you to the video away from the vine website and you’ll be able to right click and save the video as.

Create a Gmail account.

Already have a Gmail account you want to use? Awesome! Feel free to skip this step.Don’t have a Gmail? Just as awesome! Head over to Gmail and create one, easy peasy! Sometimes, it does ask you to give your phone number to send a verification code to after you submit the form. It doesn’t always ask you for your phone number, though, and oftentimes, it shows up for awhile, and then goes away. You can get the verification code immediately and start going from there, or you can wait awhile and keep checking back to see if it’s working - the choice is yours!

Create an account on Tumblr.

For the sake of this tutorial, I created two accounts: one with the Gmail I created for character accounts, and one with the same Gmail, to show you that it works! Sign up for a Tumblr account using your email, like this. Go check your email and look for the email from Tumblr support (it should show up under the Social tab), click the verification link, and set up the account. This should be easy peasy. I hope you know how to register for Tumblr by now if you’re reading this! If not, it is easy peasy lemon squeezy and very self-explanatory. But if you have questions, don’t hesitate to ask! See, this is the Tumblr dashboard of redandblueguy after it’s all set up. 

Sign up for a second account on Tumblr - using the same email.

Like I said, you can use the same email. But that sounds weird, right? That doesn’t sound possible! Here’s the trick: let’s say the email you used is [email protected]. Now you want to make a second blog with the same email, but you do have to make some modifications. So, you add a plus sign (+) after the username, and then add an identifier that makes it easy to remember which account is for which. So if my second blog is a Tumblr for a character named Myriam, I would probably use [email protected], so I remember that the account is Myriam’s! When you’re signing up, it should look like this.

Verify the Tumblr blog - with the same email!

The verification email will be sent to the same email you used for the first account! If I’m continuing my previous example, the email would go to [email protected], like this. When I clicked on the email, it showed up like this, with the strange rectangle with three dots inside of it! Just click on that little button and you should get to this.

And enjoy!