Adding a GIF to an Image in Photoshop
Вставка
- Опубліковано 18 жов 2024
- This is a tutorial for combining a GIF with a flat/static image to make a new file (GIF) for posting to social media or using on your website.
Yes, the audio is a bit low. No, you really don't have to tell me, cause I know, and I'm sorry.
Some people have reported having trouble with the step "match layers across frames" be sure to click the the frame on the timeline that shows the background (should be frame 1) before applying the match layer across frames" step." See 6:54 on video.
Also if you have multiple flat images (I am just using one in this demo) you will need to Match Layer Across Frames for EACH static (flat) layer.) Thanks to folks in the comments pointing these things out!
Disclaimer: I am NOT an Adobe Photoshop expert or tutorial-maker and there may be better ways to do what I am doing but this worked for me.
I hope it is helpful to you.
Music: Doomed Romance by Purple Planet Music
Hey, your video was so useful, and was by far the most helpful. Only stumbled on it after hours of search. I first had to suffer all the quirks you mentioned but thank God I found your video
I'm glad it helped! I wish I knew how to make it easier to find.
Great video keep them coming;
Course breakdown:
0:00 - 1:12: Explaining what is going to be created.
1:12: Setting up workspace for animation and setting timeline.
3:39: Importing a GIF file into photoshop
4:20: Copying GIF frames and pasting into a flat image jpeg.
6:29: How to ensure flat image backgroind is present through ALL gif frames
8:13: How to Move & Resize ALL gif frames through your Photoshoo document together.
10:20: How to export your image and gif document for web
You didn't mention to at least select the BG layer before hitting match layer across frames. Cause the whole time it wasn't working until i had to figure out to select it first.
I did not run into that problem. Glad you got it sorted!
Thank you for this comment!!! I was wondering what was wrong.
Thank you so much for this comment!!! This was literally my only problem I was having and it was driving me insane trying to figure it out!!
Thank you! That was diving me crazy trying to work it out!
Legend, took me far too long to read this comment.
Thx so much for this tutorial, I couldn't find it anywhere else! Also if anyone is watching this in 2020 and needs help, make sure that your "Layer 1" isn't a locked background or matching the background to the rest of the frames won't work. Make sure you unlock it and it'll become "Layer 0" :)
I never reply to videos but that was SO HELPFUL it was taking me an hour to figure out why it wasnt working!!
Thank you, Lea!
THANK YOU!
Sis, it's 2024 and I am so grateful for this comment because I could NOT figure out what was going wrong!
I think this is the first time I encounter a Photoshop tutorial that actually helped me and everything works as shown... Thank you for keeping it simple!
Glad it was helpful, thank you for taking the time to let me know!
I don't usually comment on tutorials, but this one is actually really comprehensive and easy. I also love your voice. Thanks!
Thank you for your nice comments!
Thank you, Stardust, I am obtaining my BA in Graphics, and this was VERY helpful for a class I am currently in where we had to create a GIF. Your instructions were spot on! #graphicdesigner
I've 15+ years of experience with Photoshop & have seen it evolve from v7.0 to now. Never before have I used it to create an animation until randomly stumbling across your *tut~ "I'm always learning". I WISH I had close friends like you !
Trying to do this was driving me mad! I wasted a day messing around before I found this tutorial.
Thank you!
6:40 - highlight frame with static layer content and use "match layer across frames" (in timeline panel options) to apply static layer to all frames - thanks, this is just what I needed!
Thank You so mucch for making this Video Plus You deserve a lot more subscribers than what you currently have for what you are doing so I ticked off all Your boxes... Keep Up the good work never give up
Aww thanks
I don't comment on tutorials often (I know I know how ungrateful), but I really appreciate the taste in this one. :) Thank you for the effort.
This is a great tutorial! Thank you very much. Something I noticed in the most recent version of Photoshop for Mac when I was following your instructions was that, in order to match across the layers, you have to use your selection tool to highlight the entire artboard and then it will work, but not otherwise.
Good to know, thank you for that update!
I have tried this, both by manually selecting everything, and by using Select > All and then 'copy frame across layers' but it does not work
thanx! that was soooo useful! exact what i was searching for!
This was exceptionally helpful, even years later. Lots of forums said "just use After Effects." Now I don't have to. THANK YOU! TAKE MY THUMBS UP.
Thank you so much!! it was just what I needed (my gif was 1200 layers and I had put it to the screen of laptop :) )
Exactly what I needed! Simple, clear and charismatic!
Was very usefull!, great video, nice and straight to the point :D
I use this every couple weeks to remind myself this process. Thanks again
FWIW When I've needed to do this again, I have come back to watch this myself! I don't feel that it's the most intuitive process lol
Every now and then I come back to this video! This is just so helpful. Thanks girl! ❤
You just made my day!
Thank you for posting this instructional video. I created a digital JPEG Christmas card and then had the idea on embedding an animated gif of blinking lights into the JPEG. This is perfect. Thank you for taking the time to create this video.
i'm a complete newbie to photoshop, and i probably would've never figured out how to add a gif to a static image if it wasn't for this LOL. thank you so much for this video!
U R AWESOME, MISS! THANK U
THANK YOU FOR THIS
It has been years since last working with a gif in a graphic and this tutorial helped a lot! Thank you so much!
i wish this viddeo was louder. i can barely make out what you are saying and all my settings are up to max volume
sorry :(
@@StardustLegacy its okay, I was able to come along and put a gif to an image cause of your video :)
I can hear her fine, it's prob your PC. Go to Volume Mixer by right-clicking on your sound icon (bottom right) and clicking "Open Volume Mixer" Slide chrome bar up and you should b fine
@@16usmil no it is really quiet. i have it on full volume and it sounds like its at half
Yeah. That was super low. I had to put on headphones to listen. Lol
Thanks so much for your awesome video! Re: using the "Match Layer Across Frames", make sure your background layer is UNLOCKED, otherwise it won't work. Thank you again!
omg thank you so much, it wasnt working for me and i didnt know how to fix it, but you helped me 🙏
Amazing video! You are right! Only 1 on the whole WIDE web that actually solves the big problem of pasting a GIF to a flat document. Thanks a Mill! I'm hitting subscribe
very nicely explained detailed in every way tutorial. This is the ideal tutorial thank you for making this, I'm fortunate to have found it. This is the best tutorial I think I've ever watched on YT.
Oh thank you so much! That's really kind ")
I've been working with gifs in photoshop and knew I was making it harder than it needed to be. Thank you for this!
I'm glad it helped!
Very helpful video. I had multiple images I had imported and other layers, which I needed to individually select and do "Match Frame Across Layers" for, which was a key part missing from the video, but the comments helped with that. Really happy to get this working. Thanks!
I'm glad it was helpful!
I did, in fact, address the need to "match layer across frames"-- you'll find it at 7:08 on the video :)
@@StardustLegacy It was a bad choice of words on my part. I meant to say that I only selected the bottom layer and did that - but because I had many layers, onto which a GIF went, that I needed to select all the layers that should remain stationary (about 11 of them) and continually select "Match layer across frames" many times, so all the base layers would stick through the animation. I probably could have mass-selected them in hindsight. I only mentioned it here because the other comments helped me. In the original case, there was only one background layer on the Daily Prophet, so you only needed to do it once. Your explanation was correct and useful, it's just for anyone else like me that had multiple static layers, it was a tip for what needs to be done. The Daily Prophet is a great conceptual example to demo something like this. Don't mean to give any sort of criticism, just to help others who followed but then only found the animation + one layer persisting in the final animation.
@@gergerger53 Awesome, thank you for clarifying! It's a great thing to point out for people working with multiple layers! I added a note in the video description with your tip. I appreciate it!
Make sure in the bottom right corner under all the layers before you hit match layer across , you've selected on background. otherwise it wont work. most people probably dont have this problem but if yiur having trouble give it a try..
life saver
Damn I spend half an hour messing with it loosing my sht thinking the program is bugged , thank you haha
thank you for this video. I read so many blogs and searched for many videos but only this video proved useful.
thank you soo much this was doing my head in :P
omg, really useful :D
Of course, I do not listen to the end and I wanted to export traditionally - it did not work out - good that the video also shows the saving process because the pressure jumped at the last moment during the recording when instead of a gif one frame was saved instead of the whole.
THANKS!
Excellent tutorial - exactly what I needed!
Thanks for the video - solved my particular problem. Enter is also the "yes do it" button : ) Thanks!
Thank you so much! Although I had to do some of your instructions in a different order, I wouldn't have been able to make my image without your tutorial. Thank you!
thank you! I always struggle with adding gifs, and your tutorial is the easiest one to follow I've found yet!
I appreciate you letting me know! :)
This was very helpful, thank you. :)
love the spoiler alert humor 😂😂😂😂😂, she deserves a million subs atleast
thank you so much!
I’ve been looking how to do this for years and I could never figure out how. Absolute life-saver thank you!
thank you so much!! i was confused at the timeline frame by frame animation but i was just too dumb, i now know how to impress my frends, thank you soooo much (also subscribed c; )
This really helped me out! Thanks a bunch!
very helpful! thank you!!
thankyou so much for this tutorial! I had problem with importing gifs as video in another tutorial, but this one works very well!
Thank you! This helped a ton.
Thank you! You totally deserve this like. I appreciate your instruction.
TYSMM!!! THIS WAS EXACTLY WHAT I NEEDED HELP ON AND YOU EXPLAINED IT SO WELL, I WILL DEFINITELY BE USING WHAT YOU SHOWED ME IN THE FUTURE :))
Really glad that it helped you, thanks for letting me know!
Thank you so much, if only photoshop was more intuitive :)
Thank you so much ♥♥
Thank you soooo much! I don't think I would've been able to do this without you.
Really glad it helped!
thank for the save format 🦔❄
Thank you - it is incredibly hard to find out how to do this, even though as you say we all want to do it a lot! Your video was an absolute godsend : )
Really helpful and easy to follow steps and the best bit, it works! Many thanks.
Really appreciate this tutorial! Thanks so much! I was looking to do excatly this! You mad my day
Awesome job explaining so clearly. Also enjoyed the classical music in the background 🙌❤😊
Thank Goodness I found this video. Your video answered some of those tough questions I had and now I am able to share them with my animation students. TY!
Finally found a video that was actually helpful. Thank you so much!
Thank you so much! Easy to follow and straightforward tutorial, very nice :)
I been searching for this video so long! You explain great. Thanks for share ❤
Kriiizztal glad it helped you!
Your tutorial was soooo helpful and it was just what I was looking for. Thank you, thank you, thank you!
blu butterfly I’m really glad it helped you, thank you for letting me know 😊
Thank you so much for taking the time to explain how to do this. You did an awesome job; it was just what I needed.
Thank you so much for the detailed explanation! Awesome!
Great tutorial! Exactly the info needed...clear, concise, no fluff...super easy to follow & produce your own results. thx!
Thank you! I appreciate the positive feedback :)
Thanks! very helpful video
For several years now, I've been trying to do this to create cool birthday cards to my love ones... and I researched and researched on google and UA-cam to no avail. And then I stumbled upon this just yesterday...Thank you very much!!! But Could you kindly tell me what version of photoshop are you using? Thanks so much, you're a Godsend....
I use Adobe Creative Cloud so this would have been the most current version at the time-- so, 2018
@@StardustLegacy Thank you for replying! So appreciative! Installing Adobe CC2018 now... Bless you for sharing your gift with us!
The voice. The simplicity in explaining. Midway but I just had to like. n Subscribe.
Aw thanks!
@10:10 the accept checkmark, is there is a window setting to make that toolbar visible? I can not find it, and thus can not use it. How to I make that appear if I don't have it visible?
when i click match layer so that all frames have the same background it doesnt do it and im not sure why, can anyone help me with this? thanks so much
Did you unlock the Backround?
I clicked on the 1st layer in the layers and not in lineline
@@Elmblackbird thank you soo much for this
Thank you Stardust... your video was really helpful...
Glad it helped!
Thank you this video helped me w/ this Cover for my next single dropping soon on my page!
You're a life saver! Thank you soooo much!
Very useful video, great job!
Thank you so much.... this safe my day
Background audio was most entertaining!
If you could repost this video but where your instructions are more concise, that would be enormously helpful because this video is already very helpful, but it's just a bit long for a simple process.
There's a lot of explanation and background information between each step, but I think a condensed version would be very helpful as well for being able to recap whenever I forget how it works!
Thank you.
Superb video, thank you so much for this! Easy to follow and understand. I now have a christmas themed version of my business logo for my website this year thanks to this video.
Great! I'm happy it was helpful!
Thanks for your help! Have a nice day! :)
Thank you this was SO helpful.
Thanks, some texts looked different on cs9, and I wanted to add 2 of the same gifs to an image. Had to shift some of the steps around but it worked out in the end. Had to add both gifs and then linked the background to all. Adding 1 gif then linking, then adding a 2nd same gif ended up in a broken mess for me.
Great to know! Thanks for the info
Yeah I'm having trouble adding more than 1 gif
Thanks :)
Loved this video! lifesaver. I have one issue tho, someone knows how to put more than one GIF to a still image following these steps?
Great video! Thanks for keeping it thorough, yet quick and easy.
Oh my goodness! thank you so much for making this!
You're welcome! I hope it helped you with your project :)
Thankyou.
Respect from India.
thank yoooooou
Great tutorial, thank you!
It was very niiiiiiiiice. Thank you so so much❤️❤️❤️❤️😘😘🌹
Thank you!! It is also helpful for portfolio presentation
Thank you.. and love from Cyprus
Nice work, thank you!
Wow! Thank you so much for a great tutorial!
This was easy to follow and solved my problem. Thank you!!!
How do I add more than one gif? I tried to do the same thing over again but I allways mess i up and it wont match all the frames hehe
Edit: Got my problem fixed. Now when I save the gif the quality is sandy mo matter what option I choose.
For over 24hrs I kept thinking I was messing up with trying to put a background under a gif. However, "Match layers across all frames" is NOT working for me and that's been my problem the entire time as I was not expecting the program to not do as intended. I do not know how to go about this. I'm on the latest photoshop software which is 20.0.4.
I followed your tutorial without missing a step.
I can not go pass 7:10 in the video because that is where photoshop does not do as intended for me.
I'm glad you got past the first problem. I'm not sure about the sandy GIF. Perhaps the resolution of the originals is too low or the image size of the final product is too big?
@@StardustLegacy I asked reddit and they said gifs normally are bad quality (even in the year 2019?...) And that the only way to preserve the quality is to render it as an mp4 which definitely helped but I was gunning for something that plays automatically rather than press then play. Thanks for your reply. Since you're here I'm looking to place MULTIPLE gifs in one photo while free transforming them into place like what you did. My problem here is that I CAN place multiple gifs no problem by repeating your steps but when playing the gif in the end I notice that gifs on the static image disappear and re appear due to different duration of each gif. How do I extend the gifs to have the same time frame?
You seem to be photoshop savvy so I'm looking to get as much answers out of you!
I was told on Reddit a project like the one I just described isn't the best to accomplish using photoshop but on a different adobe program. Do you by chance know how to use the others? (I'm sure there are tutorials but I'm asking anyway)
@@johnnyyusuke3450 I'm not as Photoshop savvy as you think, LOL. But based on what you described, perhaps deleting frames off of the longer GIFs so that you have GIFs that are the same length might be a work around?
for anyone who sees this later on & has this problem too: if you have this problem make sure both create new layer for each frame and new layers visible in all frames are checked, and then hit match layer across frames
Wonderful! It helped a lot :) Thank you
This video was a great amount of help. Thank you.
Nice tutorial, but a little too much talking. Just get straight to the point. Otherwise, very informative 👍👏