i've had my beloved blog for what feels like forever, but today it turns 13, so in celebration and as a little thank you to all of you for following my nonsense and sticking around, i've decided to share some of my favourite layouts that i've created.
PLEASE credit if you use any of these! either link to this post or the original sets linked below!!! (except of course the sharpening actions!)
HEXAGON LAYOUT - this is my favourite kind of set to make so i hope y'all have as much fun with this as i do. there's two folders of the layout, one is just the reverse of the other depending on how you want your gifs to look, just clip your gifs to each hexagon and watch it all take shape!
[first seen here]
PALETTE MOVIE POSTER - this psd has folders for each element, so the text layers are labelled in a group, and then the palette boxes are grouped together too, just fill each layer clipped to a palette square with your chosen colour!
[first seen here]
LETTERBOXD TEMPLATE - i almost didn't share this one because of the labour of love it was to make, but feel like i'm so proud of it, it deserves to be shared. each movie space is split into a group, and within that there's the folders for the star ratings. you can toggle on/off the heart/review/date (as the ratings change you'll just have to shift over these logos to keep things uniform!) and clip your gif over the shape for the movie poster.
[first seen here]
DIAMOND MULTI GIF LAYOUT - the most simple of all the layouts, but it got a really great reaction so i'm throwing that in here too, again like the hexagons, there's two versions. one being the reverse of the others, just clip your gifs to each shape.
[first seen here]
SHARPEN ACTIONS - VERSION #1 & VERSION #2 - have been asked about sharing these recently so thought i'd add this in, i mostly use version one but occasionally it's too sharp for certain media, so i use version two, which is just the same thing without the last extra sharpening!
hello. it’s me again who asked for the ripped paper tutorial. i can’t wait to try it out later!! are you able to make a tutorial on how you put the text on the ripped paper? thank you so much ☺️
hello! sure! i'll explain how i made the ripped paper effect from this gifset in more details under the cut 😊 (it’s a different method than what i did on my previous tutorial here)
i apologize in advance for my lack of coherence, i’m not always the best at explaining stuff, especially not in english haha
first things first: make your gif, color it, sharpen it etc etc, and put all of it's layers in a group. i called mine “blended gifs”. oh and make sure you are in timeline mode, not frame animation!
then you want to import the ripped paper texture(s) you want to use onto your canvas and position them the way you want them to be on top of your gif, like this:
(i am using these textures for most of this gifset)
what you want to do next is create a mask of this torn up area so the gif layers only show up around the "hole". to do that, select the texture layer and press "ctrl" while clicking on the texture's thumbnail. this will create a selection of your ripped paper texture (you'll see a flashing dotted line showing your selection).
btw: the ctrl + click method works only if the image/texture has transparency like this texture does.
[if you want yo create your own torn/ripped shape with 2 or more textures, you can place them on top of each other and create a mask by doing ctrl + selecting the thumbnail of the first one, then while still holding ctrl, also hold the shift key and click on the second texture’s thumbnail (and the third, fourth, etc). this will add the shapes to the same selection and then you can create one layer mask with all of the shapes selected together.]
with that selection still active, you want to select your gif's folder you created earlier and click on the add layer mask button.
this will create a mask for the ripped paper edges on your gif, the group layer should look like this:
now disable the torn paper texture (by clicking on the eye next to it, you won’t need that torn paper texture layer again), and your gif should look like this so far:
as you can see, there's a transparency issue, and we're losing the top part of the gif. to fix that, you need to brush some white color onto the mask.
to do that, hit ctrl and select the group's mask thumbnail again, you will see the same selection as earlier show up. with the selection ready, select the brush tool in the color white (and 100% opacity), and go brush/paint some white over the whole layer mask. this should fix the transparency issue and the gif should look like this:
once you're done, hit ctrl + D to make the selection disappear, and still with the layer mask selected on the gif's group, with the brush tool paint some white at the top so we get the top of the image back. it should look like this:
(you can also brush more white or black to add/remove parts to this layer mask if you want to, it’s what i did for the original gif, actually.)
now you should be ready to put whatever you want in that ripped edges “hole” you’ve created.
what i did for this gifset is i found a random paper texture on google and used it as a background for my text. make sure you put this background texture under the gif folder, so it will only show up in the “hole”. (i put my texture in a group i renamed “text” because i love my psd compositions to be tidy lol)
then i just typed the text i wanted and positioned it the way i wanted it to look. the text layer should be over the paper texture but still under the gif folder:
to finalize the look I color corrected the paper to be a bit more bright and added some highlight on the text, here you can do whatever you want to make the text look the way you want it to look.
i also added a bit of dropped shadow on the edges of the ripped paper. to do that I selected the mask (ctrl + click the smart mask thumbnail), created a new color fill layer (the color is not important). this will create a layer with a layer mask of the selection. i then selected the smart mask thumbnail and hit ctrl + i to invert it, so my mask is not only the inside of the “hole”. then i put this layer on top of everything, and the fill at 0%. finally i added an inner shadow in the layer style options (by double clicking on that color fill layer).
and that is the final result!
i hope that wasn’t all too over the place or not too detailed? i wasn’t sure how familiar with photoshop you are 😊
Hey Mona! Really loved this gifset of yours https://www.tumblr.com/usergif/803605192280031232/omg-its-blorbo-bleebus-inspo?source=share and i was wondering if I could bother you by asking about the names of the fonts you used in it, if not don't worry!
hi tan! i'm so sorry for the delay on this one.
thank you! 🥹🥹🥹 it means a lot to me that you liked it!💛 that set took me over a month to make and it's one of my favorite sets i've ever done. link to the set.
ANYWAY, on to the important bit—the fonts!
(click thru for larger images)
(will i ever not do too much? unlikely.)
i used a lot of the same fonts in this set to give the set some consistency, but it felt weird not to diagram the whole thing, so here we are. i hope it's all legible.
here are the names of the fonts:
adobe
revla
behance
sunday market
creative market
rampsey
vvds halau serif
dafont
esplanade script
fontdinerdotcom
horseshoes
kids magazine
remachine script
filmotype
horizon
lakeside
maxwell
melon
modern
prima
house industries
signpainter houseupright
retro supply
right price
note: a lot of the official sites are paid, but if you do some digging you can usually find free versions. that's what i usually do! you can always message me if you have questions or need more info. happy creating!
hi everyone, i was very inspired by @snake-feather‘s letterboxd template that you can view here, and i decided to make one for what a letterboxd movie page looks like ! it was really fun to make. i initially made this for an au i was working on but i decided i wanted to release it as well. i think this could be useful for things like celebrity roleplays or even just to make your dream movie. it’s pretty customizable but with that being said, you should be well-versed in photoshop to use this template.
dimensions are 1563x847
the dimensions for the poster are 405x527
fonts used are source serif pro which can be downloaded here & open sans pro which can be downloaded here if you don’t have adobe fonts
the only tricky thing about using this psd is you have to move some stuff around depending on cast members names/description lengths, but i think it should be pretty straight forward as everything is labeled & you can always ask me for help
you are allowed to edit this psd to your heart’s content but you are not under any circumstances allowed to redistribute it. or claim as your own
the psd (not included in the file) that i used was cotton candy by @redjamies
please like/reblog if you’re using
if you enjoy my content, please consider supporting me on ko-fi or donating to feeding america !
✽ please do not edit & redistribute or claim as your own .
✽ a like + reblog would be greatly appreciated .
✽ you'll need the font poppins .
✽ please make sure you are knowledgeable on clipping masks .
🐇 click the source link to download this template .
magazines.psd is a templated inspired by gq & forbes . it features two magazine covers & pages . i made the entire thing completely from scratch ( except for the images used , of course ) so everything is fully customizable . you'll need the ff. fonts : radwave , mazzard , poppins , minion variable concept , & didtot lt std . please do not edit & redistribute or claim as your own . as always , a like + reblog would be greatly appreciated ♡
🐇 click the source link to download this template .
desktop.psd is a social media profile template based on the website / desktop version of instagram . everything is fully customizable , just make sure you have the font poppin installed & you're knowledgable on clipping masks . as always , a like + reblog would be greatly appreciated ♡
🪽 click the source link to download this colouring .
hello, emily! I love your gifs and tutorials! do you mind making a tutorial on making transition like this? thank you :) mcuchallenge/tumblr/com/post/771584811626315776/
hi, sure! from what I can tell, you're asking how to combine multiple scenes into one gif? tutorial will be below the cut. if this is helpful, please like and/or reblog <3 it’s nice to know since tutorials take time! and if you try this out you can always tag me using #emilyblr.
if you’re having trouble seeing, click on the pictures to see the full image!
i. make your individual gifs
here is my photoshop window. at the top you'll see there are three tabs with each of my individual gifs (I don't save the gifs individually and I also decided not to use the second gif I made, thus: untitled-1, untitled-3, and untitled-4). color each gif individually, make sure the dimensions for each gif are the same (in this case, 540 x 540), and set the frame delay to 0 sec. for each gif.
ii. group gifs (optional)
to make it easier on the eyes, you can create a group for each gif. select all your layers by selecting your first layer at the bottom, holding the shift button, and selecting the last layer at the top (see top right; all visible layers are selected). then press the folder button to create a group and name the group. I usually name the episode, which is why this one is 109. do this in each tab for each gif.
iii. copy frames
go to your second gif (as shown in the photo, my second gif is in the second tab). select all your frames in the timeline (bottom of the photo), then press the hamburger menu in the top right corner of the timeline panel and press copy frames.
iv. paste frames
go back to your first gif and select the last frame in your timeline panel (bottom right). go back to the hamburger menu and press paste frames. you'll get a pop-up that asks which paste method to use. paste after selection will automatically be selected, which is what you are going to use. press ok.
as you can see, the frames for your second gif are now pasted after your first gif. on the right, you can see the two gif groups.
v. repeat
repeat steps three and four with every gif you want to combine.
vi. save your gif
once all of your gifs are in the same window, select all frames in the timeline and click on the arrow next to "0 sec." on any of the frames. select other and enter the frame delay (in this case, I did 0.05 seconds). save your gif as you normally would. if your gif is too big, you can delete individual frames until your gif is under 10MB.
and that’s it! hope that helps. my tag for gif-related things is #em.gif and there are some other tutorials and tips there if anything is confusing, but you’re also welcome to ask questions!
hi! thank you so much <3 The blending is actually fairly simple/minimal, I'll do my best to explain! I'll use the blue gif for my example but the process is more or less the same for every gif. if this is helpful, please like and/or reblog <3 it’s nice to know since tutorials take time! and if you try this out you can always tag me using #emilyblr.
if you’re having trouble seeing, click on the pictures to see the full image!
i. make your individual gifs
Make and color your individual gifs. After you've done that, make sure to group your gifs (explanation on creating groups in this tutorial). As you'll see, I group mine and use the episode number as a name, but use whatever makes sense to you.
IMPORTANT: Make sure each gif has the same number of frames (for this gif I had 54 each).
ii. layer gifs
Gif 1: Mulder
Gif 2: Scully
I put gif 1 over gif 2 by selecting all the frames of gif 1, copying them, moving to gif 2, selecting all the frames of gif 2, then selecting paste over selection. Gif 2 (Scully) will then be hidden by gif 1 (Mulder) until the next step.
Immediately after pasting the frames from gif 1 over gif 2, change the blending mode from pass through to screen. The reason I say to do this immediately is because then all your frames will already be selected and you won't have to worry about the blending mode changing for only one frame, but you can also just make sure you select all the frames yourself and then change the blending mode.
Here is what we have now:
Gif 1 (Mulder) over gif 2 (Scully), blending mode set to screen, no masking.
iii. add layer masks and blend
LEFT: First I add a black solid color layer and move it to the bottom (underneath all other layers).
RIGHT: Add a mask to each gif by selecting the gif's folder and pressing the mask button.
TOP: Make sure you have the mask layer selected. I am first masking gif 1 (Mulder).
MIDDLE: These are the brush settings I use for my initial masking. The size varies, but basically it's the soft round brush with 0% hardness set to a fairly large size.
BOTTOM: Using black, I paint over the parts of gif 1 (Mulder) that I want to hide.
Here is what we have now:
I mainly focused on making Scully more visible.
Although I always start with black (completely masking the gif), I usually end up adding grey and white back into the mask so that it's a smoother layered effect.
I turned off the other layers so you can see what the mask looks like. As you can see, it's pretty transparent in most places, and I added back in some white where Mulder's face is because I want him to be visible as well.
Here is what the gif looks like now:
Now I move to gif 2 (Scully) and repeat the process.
As you can see, I mainly masked the part of the gif that overlaps with Mulder so that his face is more visible. I started with black but then used a dark grey to mask so that it was almost completely erased, but you can still faintly see Scully.
I decided I was happy with how the blending looked, so here is the gif before I start adding in layers of color:
iv. add coloring
For this gif in particular, I added a gradient. It's much more typical, though, for me to add color with a brush (as I show here). That said, I'm using the gradient for this tutorial since I'm showing you how I made this specific gif.
I created a gradient fill layer on top of the gif. You can see my settings on the right. The reason I used a gradient is because this was a text-heavy gifset, so the coloring I added was more opaque than what I usually do.
And here you have the finished gif before I added the text! For the text tutorial, you can go here.
so there you have it! hope that helps. my tag for gif-related things is #em.gif and there are some other tutorials and tips there if anything is confusing, but you’re also welcome to ask questions!
deuxmoi.psd is a photoshop template based on the anonymous account that shares unverified celebrity gossip , blind items , etc . i've made this from scratch so everything is fully customizable ! just make sure you know how to use clipping masks & have the following fonts : poppins & radwave . please do not edit & redistribute or claim as your own . as always , a like + reblog would be greatly appreciated ♡
just wanted to share an update on my past gif actions since i no longer use that anymore. there a bunch of actions out there but if anyone is curious on my process <3
action includes:
load files fast: open with image sequence with frame rate delay of 25 (you'll need to configure this to your own folder)
6 sharpening actions
brighten: duplicates smart object sets the mode to "screen" i use these for dark scenes
frame delay: convert layers in video timeline to frame layers in frame animation and sets frame delay to 0.04
convert to video timeline: layers in frame animation are put into a smart object in video timeline
text: sets a drop shadow and stroke setting to text
download here // crop presets // psd
+small tutorial w/ video under
Load Files Fast action opens up a folder where you put your own screencaps in and loads the caps in PS and makes it into a smart object. You will need to configure this yourself since it uses my own folder. Click on Load Files Fast, select "Record" button and then choose File > Open, navigate to the folder that you use to store your screencaps, select the first cap, click on the "Image Sequence" option on the bottom right of the dialog box and then click "Open". It will then ask you to specify the frame rate, I use 25, then click OK. Then you click on the "Stop" button and your action is saved. [video on how here]
After it is put into a Smart Object, I use one of my crop presets I've made. To load them into Photoshop, click on the down arrow next to the crop bottom, click Load Tool Preset and select my preset.
Then I choose a sharpening I want to use. I'm either use 'high pass' or the 'sharper w/o grain' one.
OPTIONAL - Brighten action, brightens the scene using 'Screen' mode. I use these for really dark scenes.
After that I color the gif and add text if needed.
If I want to change the frame delay, I use the 'frame delay' action and set my delay to 0.04 and then save the gif!
If you do decided to use the frame delay action, you won't be able to change the coloring and text once its in frame animation. So you can decide to do your coloring/text after you use this action so you don't have to go back and forth if you decide you want to change your coloring or text.
Hi! Thanks so much for asking <3 The gif referenced is below and the tutorial is below the cut! This is my first tutorial, so hopefully everything is clear enough.
Feel free to tag me using #emilyblr if you try it! If this is helpful, I'd appreciate you liking and/or reblogging this post to let me know. 🩵
NOTE: If something doesn't make sense or you don't see the settings, click on the photo! They are cropped in order to unify the size, however if you click on it you will see the full picture I included.
EDIT: For some reason, the formatting gets messed up for me when you click the read more on the dashboard. But if you go to this post on my blog, the photos seem to be in the correct places!
I. Create Your Base Text
First I create a new text layer and figure out my font settings (font, size, etc.). The text color should be white.
The picture on the right shows my settings—I like to unify the layer position and effects so that it applies to my entire gif (note: I make frames from layers so it's necessary for me; I'm not sure if it is necessary if you do the text in timeline).
Change the blending mode to exclusion (right), which gives you the image on the left.
Right click on the text layer and go to blending options. First I select drop shadow and use the settings in the photo on the top right.
Add gradient overlay. For this particular gifset, I used overlay for the blend mode (bottom left). The blend mode I use for the gradient changes based on the gif and the coloring, so play around with what blend mode looks best to you!
Add color overlay. I also play around with the blend mode and opacity for each gif; in this case, I set it to color burn and 50% opacity.
This is what we have so far.
II. Create Text Outline
Right click your text layer and duplicate the layer.
Open blending options and de-select drop shadow, gradient overlay, and color overlay (alternatively, you can right click and clear effects before opening blending options, but this is the way I do it).
Go to the blending options panel and set fill opacity to 0%.
Add stroke with the settings pictured in the bottom right picture (1px, white, inside, normal blend). The opacity for this gif is set to 58%, but I play around with the opacity for each gifset.
Use the arrow keys to offset the outline however you would like. I usually move it slightly to the left and up, as shown above.
III. Masking
Create a new text layer and style it how you would like. In this case, I just added a drop shadow with the settings pictured on the right.
Move the text layer to where you would like it to be (left).
Use the rectangular marquee tool to select the area with your text layer (top left).
Make sure you have the base text layer selected (top right).
With your text area selected, add a mask by clicking the third button from the left in the layers panel (bottom right). Now we have the image on the bottom left.
Select the mask you created and invert it, which gives you the image on the top left.
Hold the option key and drag the mask for your base text layer to the outline layer.
IV. Finishing Touches
Now that the focal text has been added, I can finish adding the rest of the text. And that's it!
hi! just uploaded for you :) get this template free via ko-fi! make sure you get the fonts needed below the cut
ADDITIONAL RESOURCES:
– gifset examples: spotify series
– cutout tutorial
– fonts: Poppins Bold (Google), Circular Std Black (azfonts.net)
– tip: play with your export settings for the cleanest result. exporting gifs with large areas of solid colors can sometimes produce a noticeable pixelated effect (see example below; left). while I normally export using adaptive-diffusion, sometimes selective-diffusion works better. try out different combos until you get something smooth!
