Tumgir
#photoshop help
sith-maul · 4 months ago
Note
hi!! i am absolutely obsessed with your mulan edit (and the rest of them like. holy shit they're all fucking incredible. but that one in particular) and i was wondering if you'd mind sharing how you made the fifth gif? if you're not feeling it or don't do that sort of thing, no worries, it's just so unique and i think i can parse it but i really would love to hear about your process! regardless, thank you for sharing it and i hope you have a lovely day/night!
Hi there!! Thank you!!! 🥺 I'm always happy to talk about gif-making! 💙 (I also just made a new tag for tumblr/photoshop help and some of my other mini tutorials)
I used a few techniques in this gif. So, I'll quickly talk about the typography + shapes and multiple blended gifs. But I'll go more in-depth on the delayed fade-in transition since, I think, that's the most unique aspect of this gif (I haven't seen anyone do it before, but I'm sure I didn't break ground here either lol). I didn’t expect to get so detailed but hopefully that’s a good thing. 😅 More under the cut!
Tumblr media
If you’re not here for the typography and if you already know how to blend, skip to the end for the delayed fade-in transition effect. But since I’m not sure what you already know (and because I hope this can be helpful for others too), I’ll try to explain in as much detail as I can.
PART 1: TYPOGRAPHY + SHAPES
Here are all the specs for the typography and shapes! 
Tumblr media
The pen tool is my best friend for interesting typography. Just click to create a point and continue clicking to connect the dots with straight lines! To create a curve, you just long-press and drag your cursor until you get the curve you want. You can also use this tool to create paths, like wavy lines, and write text on them (I did this in the second gif of the same set).
PART 2: MULTIPLE BLENDED GIFS
There are lots of tutorials about how to blend gifs so I’m mostly just going to talk about the details for my gifs.
For context: I use the Timeline method — so I make my screencaps, load into stack, convert frames into smart object, sharpen, etc. [For any blending beginners: When you use Timeline to blend, it’s important to have the same amount of caps for each scene, otherwise, your gif will create duplicate frames for one scene while the other scene continues to move. This makes the animation look choppy/not smooth.]
Start with your base gifs as sharpened smart objects, then put them all into one canvas. If you don’t have a clear idea for your composition, my advice would be to make sure you have “Delete Cropped Pixels” unchecked when you use the crop tool. This will preserve the cropped out parts of your gif, so you can still use them if you decide to move things around. Do this all with the upper gif layers set to Screen, so you can see how the gifs will intersect and blend. Now, let’s talk about the coloring and blending modes I used.
THE BG: Let’s start with the background gif. I’m going to call it the BG (the one with Mulan grabbing Mushu from the sword and running away). I colored the BG as I normally would on its own. Since this was a rainbow set, I also made the blue pretty saturated. Whenever I blend, I always put all the layers per scene into groups. So I put the adjustment layers and the gif into a grouped folder. Keep this group below everything else and leave the group’s blending mode set to Pass Through.
THE FIREWORKS OVERLAY: This is the wide shot gif at the bottom. I colored this so the lighter portions (the reds and yellows of the explosion) were as vibrant as possible and the darker portion (the sky) was as black as possible. When you set the blending mode to Screen for blending, it’s important to have this contrast to make the blending as seamless as possible. The light portions are most visible when it’s overlaid above the BG. And because I made the sky super black, I didn’t have to erase the edges with a layer mask to blend it into the BG.
THE BW OVERLAY: Next is the black and white overlay gif (the one that fades in but I’ll go over that later). Color this however you like to do black and white coloring. I like gradient maps and levels. But remember, like before, creating contrast is crucial. Set this group to Screen as well and you can always go back to your adjustment layers and tinker with them until you like how the gifs blend! Here’s what it looks like broken down with the frames on their own and then blended on top of each other:
Tumblr media
PART 3: DELAYED FADE-IN TRANSITION
So, this idea came about because I didn’t like how all the light areas of the smoke blocked Mulan’s face in the BG as she was running off screen. So, I thought, if the overlay explosion happened later, just as Mulan’s face goes off screen, it wouldn’t overlap! 
Now, before I get into how I did it... remember how I said you need to have the exact same amount of caps per scene when blending, otherwise things get choppy? Well, that all kind of goes out the window here for two reasons:
Problem 1: We’re moving one smart object gif. Once you move a smart object gif layer away from the beginning of the timeline, the frame synchronization can go wonky if you’re not paying attention. 
Problem 2: We’re using Timeline’s fade tool. It’s such a handy tool, but when you convert back to Frame Animation (which you absolutely MUST do if you do the bulk of your work in Timeline), you’ll see it: revenge of the duplicate layers.
I’ll go over how to mitigate these issues as I continue explaining. I’m going to reference the different colored lines and boxes in the screenshot below as we walk through the steps I took.
Tumblr media
1. First, I moved my BW Overlay gif so it started a little later than the other gifs. You can see I moved it almost to the halfway point of the BG, where I placed the playhead (the vertical red line).
2. Problem 1 — If you were to export your gif right now and if you were lucky enough to move your gif to the perfect spot on the first try, your gif would look smooth. But if you didn’t move it to the perfect spot, you’d notice some choppy animation. Timeline does a weird thing with frame delays. You see this when you convert back to frames: some frames are at 0.07 sec and others are at 0 sec or something (that’s why we always have to reset the frame delay before exporting). I don’t know how to explain why this happens, I just know it does. But because of this, making gifs start at different points in Timeline creates gaps. The way I fixed this was by zooming in on the Timeline as much as possible. Then I kept clicking the next frame button while moving my BW Overlay over one frame at a time until all the gifs were all moving at the same time and stopped at the same time. It’s really just trial and error, and you keep nudging things til it’s in sync and the animation looks smooth.
3. Now, if I had only done these two steps, my BG and Firework Overlay would have just stopped and you would have seen the BW Overlay blended over nothing. See the vertical pink line? That’s where the gifs all stopped before I did Step 1. They wouldn’t be moving behind my BW Overlay. They wouldn’t even be visible. That’s where the green boxes come in. I labeled those green boxes “Freeze Frames” because they’re the very last frame of each gif, frozen. So, it’s as if the original gifs simply stopped on the last frame for an extended amount of time. You can have your BG continue to loop instead, but to minimize the distraction as my BW Overlay faded in, I decided to make them still frames. (You can make a freeze frame by duplicating your layer, moving the playhead/red line to the last frame of the scene, right-clicking, the layer and selecting “Rasterize Layer.” Move the freeze frame so it’s after your gif.)
4. Problem 2 — The easy part here is adding the Fade transition. The annoying part is the magically appearing duplicate layers. To do this simple Fade transition, just click that square in Timeline with the diagonal split. Then, I dragged the Fade effect (yellow box) over the beginning of my BW Overlay (other yellow box). The Fade effect is indicated by the right-angle triangle. All looks fine and dandy until you finish the rest of your gif, convert back to frames, adjust your frame delay, and see choppiness due to some duplicates. Luckily, the duplicates only pop up where the fade transition is. Again, idk how to explain why this happens, it just does. And to fix it, I simply go to the spot where the fade starts and delete all the duplicate frames until I get to the end of the fade. Once the duplicates are gone, it’s all good and the animation should be a lot smoother!
And ta-da! That’s pretty much how I made this gif:
Tumblr media
I’m sorry this was so long a;slkdfjs 😅 Please feel free to ask any specific questions if I made something unclear!! I hope this helps! 
281 notes · View notes
cavalierfou · 17 days ago
Photo
Tumblr media
PSD COLORING — tatiana
please like or reblog if using !
do not repost, redistribute, claim as your own, or use as a base !
this resource is free, but if you decide to buy it, i thank you from the bottom of my heart for supporting me ♡♡♡
you can download it HERE!
91 notes · View notes
antoniosvivaldi · 4 months ago
Note
jennnn helloww!! GURL I NEED A MOMENT TO FREAK OUT (again) ABOUT THAT EVERMORE GIFSET LIKE WHAT??? IT'S SO BEAUTIFUL!!! if it isn't too much trouble, can i ask for a tutorial on how you textured the 'willow' text in the third panel? it's the first time i'm seeing it and i would love to try it out too!
Hi Thea! Thank you so much for the compliment!! I'm happy to share how I've created the text effects on "willow" from this set :D
Tumblr media
This tutorial is structured as follows:
Preparing your text layers
Bottom group layer: photo negative effect + fill textures
Top text layer: the gold outline
What you need & need to know:
Software: Photoshop
Difficulty: Intermediate; knowledge in making gifs assumed.
Key concepts: Blend Modes / Group Layers / Layer Mask / Layer Styles 
Supplementary files: Tutorial resources
Tutorial under the cut. Like/reblog if you find this useful.
1) Preparing your gifs & text layers
Before you start adding your text layers, you need to prepare your gif & apply colourings / textures the usual way. More in-depth information could be found in the first few sections of my Texture Tutorial.
After you’ve prepared your gif composition, you need to make sure that the timeline marker is selected at 0f in the timeline interface (highlighted in green in the screenshot below).
Tumblr media
Select the type tool (press T) to create a new text layer. Choose a bold font and set the text colour to white. 
Then you duplicate this text layer (highlighted in red below) by pressing  Alt + Ctrl/Cmmd + J while having this layer selected in your layers panel.
After duplicating your text layer, you should see something like this in your layers panel. The reason why I’ve duplicated the text layers is because I’m applying different effects & doing different things on each layer. 
Tumblr media
In the screenshot below, this is what I’ll go through in the rest of this tutorial.
Highlighted in red: photo negative effect + fill textures
Highlighted in green: the gold outline
Since effects will first be applied onto the text layer highlighted in red, you can hide the other text layer (that’s highlighted in green) for now and make it visible again later.
Tumblr media
2) Bottom group layer: photo negative effect + fill textures
Most of the things here will take place within a masked group layer - since it’s more intuitive & easier to make adjustments.
To prepare a group layer that’s masked by the pixels of your text layer:
Ctrl / Cmmd + Click on your text layer (highlighted in yellow in the screenshot) to select the pixels of your text layer
Create a new group layer (highlighted in green)
Select your new group layer and apply layer mask (highlighted in red)
Then you drag your text layer into the group layer
Tumblr media
Photo negative effect: change the Blend Mode of your text layer (highlighted in red) to Exclusion / Difference (highlighted in blue).
Tumblr media
Fill textures: These layers are played right on top of the text layer inside the masked group later
Layer > New Fill Layer > Solid Colour, to add a new Fill Layer. Set it with a colour (in this tutorial, #c8aa42) and change the Blend Mode your Fill Layer to “Colour”
Tumblr media
On top of the Fill Layer, you drag a texture you want to use to add your texture layer. In this tutorial, I’ve used “gold glitter texture.png” & set the Blend Mode to Hard Light.
Tumblr media
After this, you could play around with the group layer & your textures until you’re happy with it. 
For example in this tutorial, I’ve adjusted the hue of my texture a bit & added a Drop Shadow onto my group layer. You can import “drop shadow.asl” onto your PS to use the exact Drop Shadow settings that I’ve applied here in this tutorial.
Tumblr media
After making these adjustments, the first frame of my gif looks like this. 
Tumblr media
3) Top text layer: the gold outline
Now you’ll need to make the text layer on top (highlighted in green) visible again.
The basic idea this text layer is to set the Fill to 0% (highlighted in red) and add Stroke to its layer style (highlighted in yellow). Your layer style could be modified by double clicking on “Effects”.
The exact effect as seen in this tutorial could be applied using “gold outline style.asl” from the Dropbox folder.
Tumblr media
When you’ve opened the Layer Style but double clicking, you can change the outline effect by going to the “Stroke” section. For a golden outline similar to the one that’s seen on my sample gif, you’ll need Gradient / Pattern Fill Type.
I’ve set the Blend Mode to Screen to make the outline stand out more against the rest of the composition.
Tumblr media
For Gradient Fill Type, you’ll need to select your colours manually. You can create the gold outline effect by changing the gradient into various shades of yellow / orange (as seen in the screenshot below).
Tumblr media
After applying the layer style, this is what I get from the first frame of my gif.
Tumblr media
And then I just basically added some finishing touches (e.g. another text layer & some realignments) in the final version of the gif that I’ve used in my Evermore set.
I hope this helps & feel free to message me if you need assistance or want to ask a question related to this tutorial! 
225 notes · View notes
poohsources · a month ago
Note
hi there! i'm so sorry if you've been asked this already, but how do you make an icon template with those block quotes? i don't want anything fancy, just 3-4 lines of a solid color. can you show us how if you can? i wanna learn :( thank you! (i have photoshop)
hi there ! of course, it’s quite simple if you’ve learned the basics ( and from that point forward it’s also pretty easy to make something more fancy if you ever wanna switch it up. )
Tumblr media
first off, we need our empty canvas. right now, i’ve prepared one with a size of 540x70px but you can honestly choose whatever sizes you like. just note that it’s easiest you keep the width at 540px because it’s the size of the images on the dash. you can still change it if you want, but your icons might not look like you want them too ― especially on mobile.
anyway, next i’m just gonna put an icon into it ( either pre-prepared with a coloring already applied to it or a base icons ). we don’t really have to do anything with it just yet, so you could also skip this step at first, but i like to put it there already to kinda get a better feel for the dimensions. it’s automatically gonna be put in the middle of the canvas so let’s just leave it here and move on to the next step that’s gonna be us making the actual blockquotes.
Tumblr media
click on the little plus (+) icon in the down right corner to create a new layer. you can name it blockquotes or something similar if you want because that’s where we gonna put our blockquotes. you can either use the pencil or the rectangle tool ( again, it comes down to preference ) and make them whatever color you want. tip that if you want them to have the same color as the blockquotes tumblr uses, the hex code is #ededed.
while on the designated blockquote layer, just create a vertical line in the color of your choice. again it’s up to you how far away from the edge you wanna make it, if you want it to reach all the way down or whatever. it’s best to keep them at a width of 2px but if you want them bigger or smaller that works as well. repeat this step to make however many lines you need but keep the distance between each line the same so it won’t look too asymmetrical ... unless that’s what you’re going for.
Tumblr media
we’re almost done, and the last thing to do is slide the icon to where you want it, resize it, make a border for it ― again, it’s your choice how much you wanna go out on this step. technically, we’re done yet and if you save your icon ( make the background layer invisible by clicking on the little eye icon in the layer menu and save it as a png for it to have no background ) it will look similar to this :
Tumblr media
technically, that’s all we need to do right now but i’m also gonna show you how to make an easy to use template out of it which you can just pop multiple icons into. to do this, we’re gonna create a mask with the rectangular marquee tool. use this to select a rectangle the same size of your icon and create a group by clicking the little folder icon on the bottom right. make sure you’ve selected the new group and create a vector mask ( the rectangle icon with the cirlce in the middle. ) 
Tumblr media Tumblr media
and with that we have our basic blockquote icon template. just save it and you can use it to make however many icon you like. i’m also gonna lead you to this tutorial i’ve made a while ago on how to make many icons all at once.
i hope this helps :)
73 notes · View notes
orla-mcool · 11 months ago
Photo
Tumblr media
actionpack #1 by giulia (made with Photoshop CC)
these are some actions i made for my personal use. they have always saved me A LOT of time when making gifs, but since they are kind of tailored to my giffing process, i never shared them before. but today i thought they might be helpful to some other creators as well. 
so, here they are. includes 3 actions:
setup: to be used after loading all your screencaps (it will make frames from layers, reverse them and set the current animation frame) 
shapen: to be used after cropping and sizing your gif (it’s the shapening action i use in all my gifs)
save: to be used after you’re done coloring. (this one will convert your timeline back into frame animation and set the timing to 0.05 seconds per frame. then, you can Save for Web without having to re-open your final gif to change the animation frame again before posting)
download link
247 notes · View notes
petal-web · 11 months ago
Text
Tumblr media
𝐈.⠀⠀𝕛uчcᥱ : ㅤ، 𝐬𝐞𝐧𝐩𝐚𝐢ㅤ ִֶָ ᘏ ʾㅤ友⠀ ˒ ⠀⠀psd⠀⠀🎋ㅤlıkᥱㅤ˒ㅤᥲndㅤㅅㅤrᥱblog⠀›
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀𓂃 ˳ 𓏲 𖥻 download
190 notes · View notes
castawavy · 3 months ago
Text
I learnt how to sharpen my images a lil extra today and thought I’d share:
Tumblr media Tumblr media
worked like a charm for me earlier
39 notes · View notes
jensoo · a year ago
Photo
Tumblr media Tumblr media
MAKE IT SPARKLE ✧・゚:* a photoshop action
the process of making sparkly gifs is too long so i decided to make it easier! just download this action and it will do everything for you :*
the sparkly effect is based on a tutorial by @jiminfilter which you can find here! all i did was follow it and make it into an action for easier use.
before using it you need to have an already sharpened gif converted into a smart object! just run it on that and you will end up with a beautiful sparkly gif.
have fun with it and reblog if you like it! :)
(it might not work on older photoshop versions. please don’t ask me why it’s not working for you, i don't know)
DOWNLOAD (google drive)
846 notes · View notes
walphrey · a year ago
Photo
Tumblr media Tumblr media
are you tired of how intense photoshop cc sharpening looks??? are you tired of applying 587827728 different actions??? to spare yourself, all you need to do is go to edit -> preferences -> general (or press ctrl + k on windows)
Tumblr media
and a new window will pop up! select “bicubic (best for smooth gradients)” in image interpolation, then click OK on the side (not shown in the image)
Tumblr media
you may need to close and reopen ps for the preview to adjust and it may still be a bit funky BUT when you go to save for web, it should look like that right away. hope this helped!
EDIT (2022/03/20): for it to work, you have to convert to frame animation and then size it down before you convert to timeline
422 notes · View notes
sith-maul · 7 months ago
Note
Hi Nik! How do you do glitching text like in that last darth maul edit? It's so cool!
Hi there!! Thank you so much! It's super easy to do after making your base gif [mini tutorial under the cut]:
1. Make your base gif: I cropped and colored my gif in Timeline then saved it. You can make it with text like I did in the Maul edit. Or, if you only want the text to glitch (not the whole image), make your base gif without text. 2. Open in Frame Animation: I opened my gif as frames then reset the frame delay to 0.05 seconds (bc Timeline messes that up). 3. Add glitches: My maul gif is divided into 3 sections (past, memories, and attachments). I only add the glitch to the first 2 and last 2 frames of each "section." Here's what you do for each of those frames:
Tumblr media
Select the frame's layer, make it invisible (click the eye icon), then duplicate it. (I make it invisible before duplicating so it doesn't mess up the rest of my frames.) Then, click the eye icon on both layers to make both visible on that one frame (now Frame 33 has two layers: Layer 33 + Layer 33 copy).
Tumblr media
Right-click the COPY of the layer and click "Blending Options." Uncheck "R" in channels and click "OK." Only do this to the COPY layer.
Tumblr media
Now, just nudge that COPY layer but don't move the original layer. I moved the COPY up and to the left (you can see above ^ the green text is from the COPY and the red text is from the original layer). You can move the COPY layer in any direction, but the key for a good and abrupt glitch effect is to do the next one in the opposite direction, like this:
Tumblr media
In that one ^ I also used the marquee tool to select a portion of the text to break it up from the rest (drag the rectangular marquee over any section and nudge it so only that portion gets moved). That's why part of "the past" looks like it was split in half. You can see that more clearly here:
Tumblr media
That's all! Just apply this glitch effect to the first 2 and last 2 frames of each "section" — that's 4 glitch gifs total between each section — and you should have a solid glitch transition!
Tumblr media
And if you only want to do this to text, you just have to make your base gif separate in Timeline, then add the text in frame animation and apply the effect only to the text layers.
Hope this made sense! Let me know if you have any questions!
89 notes · View notes
cavalierfou · 2 months ago
Photo
Tumblr media
ORNAMENTAL BRUSH PACK ⚜️
please like or reblog if you use !
do not repost, redistribute or claim as your own !
this resource is free, but if you chose to buy it, i thank you from the bottom of my heart for supporting me ♡
you can download it here!
130 notes · View notes
korra-of-the-watertribe · a year ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
Here are some of my PSDs!  Feel free to use in your gifs, and please like or reblog if you end up using them!  You’ll probably have to adjust the curves layers, but I’ve found that these psds have worked really well on a range of different scenes.  
159 notes · View notes
poohsources · 5 months ago
Note
hi there, I have a question for the latest blockquote icon border you posted the other day. I'm kinda a photoshop newbie and only do basic things like resizing icons or adding psds to icons. so, how do you use the blockquote icon border thingy? I tried to use it but uses transparent which unsure really. If there is a basic and simple way, I would like to hear since these are too beautiful not to use.
hello there ! i'm sure there are like a million different ways how to do it ( and probably easier and quicker ways ) but here’s what i usually do to make all my icons at once.
first , i actually prepare the icons: do the resizing ( in this case because the blockquotes have the size 540x70 px it’s best if you’re using icons with a 70x70 px size ) , put a psd on them , sort out which ones i don’t wanna use all ... all that stuff. technically , you can skip this step because you can put a psd on them in the same step as the blockquotes but that’s totally your choice. now that that’s out of the way , let’s get to the fun part. one more thing , though , be sure you have the timeline turned on. for that go to “ window ➝ timeline ” and click it once to make the timeline appear. ( if you see a checkmark there , it’s already open. )
ideally , you already have the icons you wanna use in a seperate folder so you just import them into photoshop by going to “ file ➝ scripts ➝ load files into stack ... ”
Tumblr media
next you’ll see a window to load all your icons into. just click on “ browse ” and go to the folder with the icons you wanna use. use cmd+a to select them all and press enter. next you should see them all listen in the small window of the “ load layers ” screen. if you want you can sort them by name by clicking the button and after that press enter again and they should open in a new file. ( depending on how many icons you have , it can take a while so this step takes a little patience. )
Tumblr media
all your icons should be listed in the layer panel. now click on “ create frame animaton ” on the timeline , which will make one of your icons appear in the timeline. to get them all there you have go to the small menu found at the top right of the timeline ( it should look something like this: ☰ ) and choose the option “ make frames from layers ” which will make all the icons appear in the timeline.
Tumblr media Tumblr media
for the next step you have to change the canvas size. go to “ image ➝ canvas size ... ” to make a new popup window appear. the blockquotes are 540x70 px so that’s what’ll you have put into the fields for the new size.
Tumblr media Tumblr media
next you’ll have to go back to the opened blockquote file where you’ll do the same as before to make them appear in the timeline. so again , click on “ create frame animaton ” but instead of making frames from layers , you now have to manually add frames to the timeline by clicking the little + on the bottom of the timeline. make as many of those frames as you have icons ( so for example if you have 10 icons , you have to make 10 of those frames in the timeline. tip : if you need to do a large number because you have a lot of icons , you can select multiple frames at once , so when you press the + that many frames will appear in the timeline. ) once you have as many frames as you need , go to the menu again and choose “ select all frames ” to select all the frames and then “ copy frames ” before finally going back to the file in which you’ve opened all your icons.
Tumblr media Tumblr media Tumblr media
back on the file with your icons , select all the layers in your layer panel and group them either by cmd+g or clicking the little folder icon on the bottom. you can name the group if you want but you really don’t have to. now go to the timeline menu again to select all frames. after they’re all selected , you’ll have to choose “ paste frames ” this time which will make a new pop-up window appear. pick the “ paste over selection ” option. 
Tumblr media
the blockquotes appear on your screen now , so just go ahead an pick the group with all your and put it into the group titled “ put your icons here ! ” you might have to move the icons a bit so they’ll actually fit inside the mask but once that’s done you should have your finished blockquote icons.
Tumblr media
last thing to do is save it all. of course you could go ahead an manually save every single frame but that’s quite tedious to do so. so instead go to “ file ➝ export ➝ render video ... ” there you can choose the filenames and where you want your icons to be saved. make sure you’ve selected “ photoshop image sequence ” and the format “ png ” and choose are starting number because your files are gonna be numbered. now the most important part if you want your icons to be without a background after saving make sure that in the render options you’ve selected “ straight - unmatted ” as the alpha channel. lastly just click on render and you should find your blockquote icons in the folder you’ve saved them in.
Tumblr media Tumblr media
i hope this helps. if you have any further questions please let me know.
65 notes · View notes
phbebridgers · a year ago
Note
your mobile header is so pretty!! could you please say how you did it?
absolutely,  angel  !!  below  the  cut,  you  will  find  a  STEP  BY  STEP  tutorial  on  how  to  make  a  mobile  header  like  these  two  examples  !!  
Tumblr media Tumblr media
program  ; i  use  adobe  photoshop  cc  2018,  but  any  version  of  photoshop  can  work.
difficulty  ;  easy.  knowledge  of  outer  glows  +  stroke  required
STEP  ONE  ;  making  your  document
open  up  photoshop,  or  whatever  program  you  are  using  to  edit  !!  you’re  gonna  make  a  document  that  is  640 x 360  pixels.  this  will  only  work  on  your  mobile  header  if  you  make  sure  to  STRETCH  HEADER  IMAGE  when uploading  it,  or  it’s  gonna  look  super  wonky
Tumblr media
STEP  TWO  ;  torn  paper
the  next  step  is  to  make  sure  you  have  your  torn  edge  ready  to  go  !!  i  use  a  brush  effect  that  my  best  friend  gave  me,  but  i’m  sure  you  could  also  use  an  overlay / png  !!  right  HERE  is  a  link  to  a  set  of  torn  paper  brushes  for  download,  i  THINK  they’re  the  same  ones  i  use  but  i’m  not  sure.  either  way,  they  should  work  exactly  the  same  !!  now  you  can  move  this  as  high  or  as  low  as  you  want,  depending  on  how  much  tear  you  want  and  how  much  room  you  want  for  your  content.
Tumblr media
STEP  THREE  ;  your  object  of  interest  
now  you  need  to  add  your  pngs  !!  i  like  to  do  the  three,  as  i  think  it  looks  most  pleasing  to  me,  but  you  can  get  funky  with  it  !!  you  can  cut  your  own  pngs,  but  that  can  be  pretty  time  consuming,  right  ?  i  use  THIS  website  absolutely  religiously.  it’s  super  accurate  when  cutting  your  photos  into  pngs,  and  will  even  do  so  for  objects,  not  just  people  !!
Tumblr media
STEP  FOUR  ;  choosing  your  background  +  png  glows
you  gotta  use  a  photo  that’s  gonna  compliment  the  colours  of  your  pngs  that  you  chose,  or  at  least  match  the  vibes  !!  now  is  a  great  time  to  add  your  psd  so  you  know  what’s  gonna  look  best  with  your  colouring  for  the  end  result.  it’s  also  a  great  time  for  your  png  glows  !!  if  you  don’t  know  how  to  do  it,  no  worries,  it’s  SUPER  easy  !!  all  you  need  is  stroke  +  outer  glow  !!  i’m  sure  the  majority  of  you  all  know  how  to  do  them.  these  are  my  usual  settings  for  outer  glow,  and  the  stroke  is  pretty  simple  once  the  tab  opens  up.  i  like  to  make  my  stroke  about  2  pixels  big,  as  any  bigger  makes  it  look  super  chunky.  make  sure  it’s  on  the  OUTSIDE.  but  to  each  their  own  !!  you  also  do  not  have  to  add  a  glow  (  as  seen  in  the  second  example,  there  is  no  glow  ),  i  just  think  it  looks  nice  !!
Tumblr media
STEP  FIVE  ;  time  for  text  and  finishing  touches
time  to  add  all  of  your  text  !!  super  simple  process,  i  swear  on  my  life.  make  sure  it  covers  the  entire  background,  and  then  just  duplicate  and  duplicate  and  DUPLICATE  !!!  shift  each  line  a  bit  so  it’s  not  the  EXACT  same.  add  a  stroke  on  your  text,  just  a  simple  black  line  works  for  me,  but  do  whatever  works  for  YOU  and  looks  nice.  a  couple  of  the  fonts  i  use  the  most  are  big  john,  abril  fatface,  cocogoose,  and  lemon/milk  !!  but  use  whichever  font  you  want  and  think  suits  your  project  best.  now  is  the  time  to  add  anything  else  you  may  want  !!  maybe  an  overlay,  maybe  some  cute  pngs,  maybe  some  different  text,  who  knows  !!  this  is  your  soup,  baby.
Tumblr media
STEP  SIX  ;  time  to  save  
now  we’ve  reached  the  end  of  our  goal  !!  we  have  a  header  we  are  happy  with,  and  now  it’s  time  to  save  our  gorgeous  creation  that  we  worked  so  hard  on  !!  i  like  to  save  all  my  images  by  going  FILE  >  EXPORT  >  QUICK  EXPORT  AS  PNG.  this  will  give  us  a  high  quality  image  that  we  can  be  happy  with.
Tumblr media
STEP  SEVEN  ;  uploading  your  header
great  !!  you’ve  made  it  to  the  final  step  !!  we  can  see  the  finish  line  and  we’re  just  about  there.  remember  what  i  said  earlier  ?  do  not  show  your  icon,  and  your  header  should  be  stretched,  but  make  sure  you  choose  this  option  BEFORE  you  upload  the  header.  going  back  into  photoshop,  use  your  colour  picker  to  collect  the  colour  of  your  ripped  edge  —  odds  are  that  with  your  psd  over  top  everything,  the  colour  you  originally  chose  for  the  torn  paper  may  have  changed  a  little.  for  your  accent  +  title,  go  ahead  and  use  any  colour  within  your  header  (  i  went  ahead  and  chose  the  colour  of  my  glow  )  and  save  your  creation.  voila  !!  your  new  header  is  officially  finished,  and  your  mobile  theme  looks  gorgeous  !!  if  you  need  any  help  whatsoever,  or  even  want  me  to  make  you  one,  just  send  me  an  im  !!
Tumblr media
552 notes · View notes
petal-web · 11 months ago
Text
Tumblr media
𝐈.⠀⠀ 𝕓lossom : ㅤ، 𝐟𝐥𝐞𝐮𝐫𝐛𝐥𝐮𝐬𝐡ㅤ ִֶָ ᘏ ʾㅤ友⠀ ˒ ⠀⠀psd⠀⠀🌸ㅤlıkᥱㅤ˒ㅤorㅤㅅㅤrᥱblog⠀›
🌸 download
226 notes · View notes
hovrimiyas · 9 months ago
Photo
Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media Tumblr media
base psd collection by hovrimiyas / illicitaffvirs
hello!! while cleaning my computer i found most of the psds i created for my gif packs over at @illicitaffvirs and decided to share a couple of them! although i created them for specific moments and scenes, they work on most scenes and on different shows. here you have a detailed list of the psds included on this pack and when i used them.
psd 1 - sweetbitter: mostly used on outdoor and indoor scenes with natural lightning. 
psd 2 - animal kingdom: mostly used on indoor scenes.
psd 3 - the crown: mostly used on dark indoor scenes.
psd 4 - scream tv: mostly used on dark outdoor scenes.
psd 5 - taehyung: mostly used on youtube videos.
psd 6 - skins: mostly used on indoor scenes.
you can change the settings according to your needs, but please do not redistribute them or claim as your own. 
download links:
payhip (free, pay as much as you want)
deviantart
91 notes · View notes
stevesdemobat · 2 months ago
Text
stevesnailbat’s gif tutorials: color palettes/colorful gifs
hello!! as you may know, i do a LOT of colorful gifs on this account, and i thought i’d share how exactly i make gifs with multiple vibrant colors in them (thanks to @robinsteve​ for the ask on how to do this <3) 
BEFORE this tutorial (if you’re new to PS/gifmaking) go look at my gif basics tutorial!! I would recommend a basic amount of PS knowledge before this tut :)
but with this, i’ll be showing you how to take your gifs from something like this:
Tumblr media
to this!
Tumblr media
to start, pick out a color palette or any colors that you want to use/highlight in your gifs. i’m using these two colors:
Tumblr media
after you’ve chosen your colors and have your base color correction done on your gif of choice, add a new layer that will sit ON TOP of every edit that you make to your gifs (layer>new>layer>ok-you don’t have to change any of the settings for this layer). make sure it stays as the top layer, as you’ll be color matching to that layer throughout the process! it should look like this before you click ok:
Tumblr media
now, using the paintbrush tool and the HEX codes of the colors you chose, add dots of your desired colors to any areas that you want to color match in the new layer that you just created. i like to do smaller dots, so that i can see around them while i’m working. after i add the dots to the places i want, it looks like this (don’t worry, we will delete the dots at the end!):
Tumblr media
to start, I usually do the accent colors first so they don’t get lost when i do the the main color. so for this one, that’s the red on her shirt, scrunchie and in the top right corner. when i use selective color, i basically try to isolate the color that i want into 1 or 2 channels within the selective color layer, so things don’t get too muddy or anything. 
i did 8 (yes, EIGHT) selective color layers for the red alone in this gif, and i’ll list out what i did on every one:
SC1: reds - cyan-100/magenta+100/yellow+100
magentas - cyan-100/magenta+100/yellow+100
SC2: reds - cyan-45/yellow+100/black+78
SC3: reds - cyan+71/magenta-22/black+33
SC4: yellows - cyan-100/magenta+100/yellow+100
SC5: yellows - cyan-36/magenta+100/yellow+70
SC6: reds - cyan+46/magenta+100
SC7: neutrals - cyan-100/magenta+100/yellow+100/black-59
SC8: reds - cyan-100/magenta+83/yellow+100/black-55
SC layers 1 through 5 were used to bring the red up to the saturation point that i wanted to have it at for the whole gif, while layers 6 through 8 were just focusing on the top right corner. the main advice that i have for this part is to decrease the colors that you don’t want, and increase the ones that you do (like decreasing cyans on a red layer), and to also use layer masks & mask feathering to make sure you’re not making skin tones (or anything you don’t want a specific color) too vibrant. 
to make sure i was keeping the colors similar to what i wanted originally, i compare the colors that i’m making in selective color with the dots that i had made in the beginning.
after all of those layers, here’s what the reds looked like (without the dot layer)! 
Tumblr media
after the reds, i moved on to the blues, which only took 2 layers. 
SC9: greens - cyan+100/magenta+100/yellow-100
cyans - cyan+100/magenta+100/yellow-100
blues - cyan+100/magenta-24/yellow-60
SC10: neutrals - cyan+100/magenta-15/yellow-100
i used SC9 to brighten up the blues that were already in the gif, and SC10 to bring blues that weren’t really present before into the background on the left side. 
to make colors that “aren’t there”, i like to use the “neutrals” channel in selective color, decreasing whatever color i don’t want and increasing the ones that i do, and covering the rest of the gif in layer masks so they aren’t discolored. you can also paint these on by using a new layer (layer>new>layer>change “mode” to color instead of normal>ok) and adding a vector mask to clean up the edges 
to make a vector mask on your new layer, make sure the desired layer is selected, then press the white square icon with a grey circle in the middle shown at the bottom of the layers section. it should look like the highlighted icon:
Tumblr media
after the blue layers, here’s what the gif looked like:
Tumblr media
and here’s what it looked like with the dots still showing, as reference to the original colors that i wanted: 
Tumblr media
not all of the spots are the exact color that i wanted, but they’re all very similar! 
after you’re satisfied with the coloring, you can go ahead and delete the layer with your color dots on it and sharpen/save/etc. as you usually would! i hope this is helpful to all of you that want to make colorful and fun gifsets! my dms and inbox are open to anyone who might have questions about this process <3 xoxo
14 notes · View notes
deokmis · 2 months ago
Video
youtube
Tutorial for the last gif in this set
10 notes · View notes
sersi · 13 days ago
Note
hello! for your gifs, do you usually download the entire movie or do you find pre-cut scene packs? could you recommend any specific page where you sually find what you want? also which specs do you usually use when you are saving high definition gifs?
Hi!
I use exclusively full movies/episodes for my gif making. For trailers, I mostly download from YouTube or iTunes Trailers. For movies and TV shows, I mostly t*rrent or rip my own blu-rays. When dealing with streaming only releases, I vastly prefer 4K files, since that quality level can help combat the generally lower quality of streaming rips.
I don't do anything special in terms of saving my gifs--just make sure they're correctly sized (540px for full width gifs or 268px for two gifs per row sets), sharpened, within the file size limit (10 mb) and that your coloring isn't creating an "excessive" amount of noise/graininess within the gif. (A lot of this is ultimately about personal preference, so I recommend just playing around with things until you like your end result).
7 notes · View notes
bunnygifs · 5 months ago
Note
not a request but what advice would you give for first time/beginner gif and resource makers? thank you❤️
the best piece of advice i could give is making sure you have some sort of photo editing software, whether it be gimp, photoshop or even ezgif (which is an online website for gifmakers). the latter option is, of course, not as complex, nor has it got a lot of stuff to do on it, but it is good for general things, such as: cropping, greyscale, brightness/contrast, mixing gifs together etc.
i would also look into sites where you can convert hd video clips from youtube to mp4 (mov might work too, but 1080p mp4 is always what i recommend). the sites i use varies all of the time, and can be quite a pain to navigate without an adblock. there are also accounts on instagram that create scene packs, which are always helpful - megascenes being my favourite one atm.
i, myself, read up on some amazing gif tutorials here on tumblr that i think will help beginners in making gifs, so i will list them below for you to check out too:
basic gif tutorial (photoshop) by arianagrandre
ultimate guide to making gifs (photoshop) by itsphotoshop
my gif making process (photoshop) by s-k-y-w-a-l-k-e-r
how i made & coloured this gif (photoshop) by rizahawkais
updated gif tutorial (photoshop) by whitewolfofwinterfell
how to make gifs on gimp (gimp) by dekaythepunk
gif tutorial (gimp) by dailynaruto
gif-making tutorial (gimp) by until-dong
gif graphic tutorial (gimp) by gimpblogging
25 notes · View notes