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!
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!
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:
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.
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:
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!
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!
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
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:
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).
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.
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.
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
Photo negative effect: change the Blend Mode of your text layer (highlighted in red) to Exclusion / Difference (highlighted in blue).
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”
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.
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.
After making these adjustments, the first frame of my gif looks like this.
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.
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.
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).
After applying the layer style, this is what I get from the first frame of my gif.
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!
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. )
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.
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.
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 :
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. )
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 :)
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)
𝐈.⠀⠀𝕛uчcᥱ : ㅤ، 𝐬𝐞𝐧𝐩𝐚𝐢ㅤ ִֶָ ᘏ ʾㅤ友⠀ ˒ ⠀⠀psd⠀⠀🎋ㅤlıkᥱㅤ˒ㅤᥲndㅤㅅㅤrᥱblog⠀›
⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀⠀𓂃 ˳ 𓏲 𖥻 download
I learnt how to sharpen my images a lil extra today and thought I’d share:
worked like a charm for me earlier
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)
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)
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)
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
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:
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).
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.
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:
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:
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!
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!
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!
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 ... ”
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. )
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.
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.
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.
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.
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.
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.
i hope this helps. if you have any further questions please let me know.
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 !!
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
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.
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 !!
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 !!
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.
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.
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 !!
𝐈.⠀⠀ 𝕓lossom : ㅤ، 𝐟𝐥𝐞𝐮𝐫𝐛𝐥𝐮𝐬𝐡ㅤ ִֶָ ᘏ ʾㅤ友⠀ ˒ ⠀⠀psd⠀⠀🌸ㅤlıkᥱㅤ˒ㅤorㅤㅅㅤrᥱblog⠀›
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.
payhip (free, pay as much as you want)
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:
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:
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:
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!):
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)!
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:
after the blue layers, here’s what the gif looked like:
and here’s what it looked like with the dots still showing, as reference to the original colors that i wanted:
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
Tutorial for the last gif in this set
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?
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).
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