An easy Photoshop tutorial on how to add videos into a static image or a mockup. Typically using scrolling screen recordings and placing it into a website or iphone mockup! - See my instagram for examples : saffronavenue
Пікірлер: 172
@nickpage91382 жыл бұрын
I wish i saw this hours ago... thank you, this would of saved me hours of time wasted. Good job thankyou for making this, no more heartache!
@magnoliarabbit3 жыл бұрын
I googled this SO many times and didn't find what I was looking for. This is exactly what I was trying to find. Thank you so much for sharing this!
@SaffronAvenue3 жыл бұрын
Awww, I'm glad it was helpful!!
@sarahb96972 жыл бұрын
Best tutorial for video mockups, thank you!
@jordanmeek66102 жыл бұрын
Thanks so much. This is awesome. Thought I was going to have to break my brain in after effects trying to do this.
@MC_MIKE Жыл бұрын
This was MASSIVELY helpful. Thanks Saffron!
@NilsDecker2 жыл бұрын
Amazing, thanks for making this! I had the hardest time googling even the right thing but finally found your video and created my own little "video pretending to play on laptop photoshop animation tutotrial KZbin" 😂🤣
@kvl1824 жыл бұрын
Thank you so much, I was looking and looking how to do it and didn´t find the way until I stopped here. You saved me!!
@tashawalkerco Жыл бұрын
You are amazing. Thank you for sharing your knowledge so freely. Seriously just wow.
@whyRamachandran4 жыл бұрын
Thank you for this support, Angela. I was struggling to try this method for my Interface upload.
@Simranngulati Жыл бұрын
Most helpful video, thank you posting♥️
@sarahsaggiante1455 жыл бұрын
Thank you so much!! This saved my life.
@sararey9378 Жыл бұрын
GIRL TYSM FOR THIS BEEN LOOKIN AL DAY AND YOURS IS SO CLEAR THANKYOUUUU
@nniikunz3 жыл бұрын
I was looking exactly for this. Thank you so much for keeping it straight to the point!
@boblin7174 Жыл бұрын
thanks for sharing, this is the content I been looking for!!!!
@jannashaw14903 жыл бұрын
Absolutely the best tutorial I have found online for this!! Thank you so much! It was perfect and easy to follow!!!!
@SaffronAvenue3 жыл бұрын
Aww, thank you!!
@deborahkomatsu5446 Жыл бұрын
So grateful for your help! Thanks!
@deaconindustrialsupplycomp85403 жыл бұрын
Excellent Tutorial! Thank you for posting.
@tracylavorini8389 Жыл бұрын
You're a saint for real my studio project THANKS you
@charbellichaa7154 жыл бұрын
Thanks a lot I was searching for few weeks till I found you Very helpful and simple Love it
@SaffronAvenue4 жыл бұрын
Yay!
@laurenzmignolet46152 жыл бұрын
Very helpful! Worked like a charm. Thank you!
@SaffronAvenue2 жыл бұрын
Yay! I'm glad you found it!
@ken981033 жыл бұрын
Omg, thank you so much!!! This video has been a great help
@TylerDigital4 жыл бұрын
Exactly what I was looking for. Thanks so much!
@jamaalmay48882 жыл бұрын
I needed this. Thank you!
@misterellystudio3 жыл бұрын
Thanks a lot Saffron. great tutorial
@ceepeek4 жыл бұрын
That was so helpful! I was about to dive into a rabbit hole. Thanks!
@breannapairrett86754 жыл бұрын
This is so easy to follow! Thank you for this! 🙌🏼
@KaiWenFranklin11 ай бұрын
Thank you so very mush for this demo!! WOW!
@ET-kj7rf4 жыл бұрын
THANK YOU!!! Perfect, straightforward and just what I needed! This saved me too. You are awesome!!
@SaffronAvenue4 жыл бұрын
Yay, thanks!!
@abinamusic40873 жыл бұрын
Thankyouuu for sharing this!!d did'nt even know you could do that with photoshop :)
@mycall_eyeYouTube6 ай бұрын
Holy shit this is so awesome! Thank you! Aloha from Hawaii
@graceoutlaw72154 жыл бұрын
Thank you! This was so quick and easy and I didn't have to Google additional steps or info or anything ha ha. Great tutorial thanks again!
@SaffronAvenue4 жыл бұрын
Yay!
@veelvetta3 жыл бұрын
very clear and useful video, thank you so much!
@SaffronAvenue3 жыл бұрын
You're very welcome!
@ronaldogonzalez67154 жыл бұрын
Excellent video , Thank you so much 👏👏👏
@TALTULI13 жыл бұрын
Thank you for this great tutorial. The only problem I have is that in the smart object I can see the whole video (both time lines same length) and when I go back to the actual photo it plays a very small part of the video. Do you know perhaps why?
@EdenRaphaelGil344 жыл бұрын
great video! very informative. really helped me with a video mockup, cheers!
@lizco71873 жыл бұрын
How do you do this without the background? I want to place only the device and the scrolling image in my site and do not want the background scene to show.
@ianschneider39693 жыл бұрын
This is great! Thank you! How do I get rid of the search bar and bookmarks bar for the recording though?
@baay818 ай бұрын
thanks for sharing! this helped me a lot
@SaffronAvenue8 ай бұрын
I'm so glad!
@oldspicy441924 күн бұрын
Great help, thanks! 🙏🏼
@amaliap.44304 жыл бұрын
Thanks so much! Great tutorial. Can't wait to try
@Macafotografa2 жыл бұрын
It does help! Thanks so much!
@saadkhalidqazi99332 жыл бұрын
that was exactly what I was going to do thanks for the video!
@csaa83814 жыл бұрын
thank you so much!! I was about to dl some complicated software but you saved me a great lot of time !
@sirhenryhu2 жыл бұрын
So useful and great tutorial! Thank you.
@jennahlady67224 жыл бұрын
This is awesome. My only issue was the video cut off at 5 seconds when the actual screen recording was longer. Is there a way to adjust the time in photoshop?
@katebollinger73464 жыл бұрын
did you ever find a solution to this issue? same thing happened to me
@djamelkadi55194 жыл бұрын
@@katebollinger7346 maybe it's about the timeline length, did you check on that?
@kiaraoksi4 жыл бұрын
I have the same problem. Please, tell me how I can solve this problem🙏
@marizaa93174 жыл бұрын
MIND BLOWN. THANK YOU.
@mansishah71663 жыл бұрын
Thank you so much!! This is what I was looking for. You made it easy to go🤩
@SaffronAvenue3 жыл бұрын
Oh yay! Thank you :)
@Dhanushsaji4 жыл бұрын
Exactly what I'm looking.. thankuuu
@archrao21034 жыл бұрын
Just what I was looking for so well explained.
@SaffronAvenue4 жыл бұрын
Oh good!
@hombuecherkonstantin85923 жыл бұрын
Hello and thank you so much for that awesome tutorial. I got it all. The only thing that I can't solve is that after I exported and rendered the video there is a black background even though the mockup is totally isolated. How do I have to change my settings to delete the background of my mockup? I want it to be cut out precisely... 😊
@SaffronAvenue2 жыл бұрын
I'm not super sure, but maybe try doing a pen tool mask around it???
@HarisInspirasimu4 жыл бұрын
terimakasih, videonya nya bagus, saya jadi tahu bagaimana menggunakan video photoshop, salam kenal dari kami
@ilkinguliyev59183 жыл бұрын
Very helpful. The question is in which format do you save the file?
@SaffronAvenue3 жыл бұрын
I think I usually just do .mp4
@ilkinguliyev59183 жыл бұрын
No. İt just save it as video.
@btcreativestudio94523 жыл бұрын
I have needed this forever! thank you so much for making this an easy-to-follow tutorial!
@sanjanamahajan31442 жыл бұрын
Thanks a lot for this, it helped!!
@SaffronAvenue2 жыл бұрын
You are so welcome!!
@VictoriaAshleyDesigns5 ай бұрын
Just found this, thank you for posting - you've saved me spending more hours wasted 🙂
@luvhopefullie7273 жыл бұрын
Great video. Thank you.
@helenaaurellia90704 жыл бұрын
This is amazing and easy to follow. Thank you so muchh!!
@jamestill4424 жыл бұрын
Thanks for such a great tutorial, helped me immeasurably. One problem I've encountered is the background image blurring considerably after being exported. Is there anyway to fix that?
@SaffronAvenue4 жыл бұрын
Was your original image high resolution?
@oswhytecodes18 ай бұрын
LEGEND!!!!!Thank you!!
@eumm113 жыл бұрын
thank you so much, this is amazing, exactly what i was looking for!
@SaffronAvenue3 жыл бұрын
So glad!
@devashibarthwal34242 жыл бұрын
thanks a lot for the video saved my life.. :)
@tonyahesterdesign5 ай бұрын
This look great. I am having a problem importing the video into photoshop - it keeps saying that file could not be opened. It is a mp4 file - could someone advise?
@BloomSparx233 жыл бұрын
Thank you so much for this ❤️ I've been searching for this for so long!!! Can I export it as a .gif so it'll automatically play in my behance post?
@SaffronAvenue3 жыл бұрын
You could probably export it as MP4 and then just use a converter online? www.google.com/search?q=convert+mp4+to+gif&rlz=1C5CHFA_enUS728US728&oq=convert+mp4+to+gif&aqs=chrome.0.0j0i457j0l6.3485j0j7&sourceid=chrome&ie=UTF-8
@ErinGSA4 жыл бұрын
Thanks for this tutorial. For some reason when I try to drag and drop my MP4 screencast it tells me that "no parser or file format can oepn the file" and I can only find tutorials on how to fix this if the document is a jpeg, any advice?
@SaffronAvenue4 жыл бұрын
Oooh, I have never had that error before.. I just tried it again and worked, so here are my steps again! :: 1. Opened a PNG 2. Created a rectangle - made it into a 'smart object' on the layer panel 3. Opened the smart object, placed an .mov file into it 4. Under WINDOW - choose 'TIMELINE' 5. Hit 'Create Video Timeline' and 'save' - then close the Smart Object tab (window). 6. Back to original PNG I did the same 'Create Video Timeline' under the Timeline frame 7. Adjusted the layer lengths (the video/smart object to match the background image layer. 8. File - Export - 'RENDER VIDEO' - Change the size/quality - then hit 'RENDER'
@Llliesh3 жыл бұрын
I have the same! Have you found a fix?
@pytray3 жыл бұрын
super helpful! thanks!
@SaffronAvenue3 жыл бұрын
Glad it was helpful!
@ashwinr74 жыл бұрын
awesome video. Been quite sometime been thinking about how to do this thing
@yvonnegougelet1204 Жыл бұрын
does this work if I just want to put a video on top of a photo? I don't need to have it fit on a screen, I just want a video on a photo
@lauraeverard16864 жыл бұрын
Love this tutorial and how you make it look realistic...however I am unable to drag an mp4 into Photoshop...is there something I am doing wrong?
@MyCurlyAdventures4 жыл бұрын
Not sure if you figured it out, but I had to use adobe media encoder to change it to a quicktime mov file to get it to work.
@WhiteDoberman Жыл бұрын
Can WebM format be imported instead of MP4 in Photoshop?
@sandipannath95884 жыл бұрын
you saved my project! hugs..
@aneesha56854 жыл бұрын
Once you save the video mock-up file, does it have a black background to it?
@kapa42084 жыл бұрын
This is so useful! You're awesome!
@SaffronAvenue4 жыл бұрын
Thank yoU!
@GabeLogan2024 жыл бұрын
This video is a gold find for me. Thank you. I have a question if you could help... I did the export like you said but the image has two frame black line each side? How is it so. I want the same frame as the original jpeg behind my videos.Much love.
@SaffronAvenue4 жыл бұрын
I would try maybe starting over and making the rectangle the exact size of your recording. So if you recorded a screen size of 1220px wide, I would make the rectangle you place it into the same size..??
@GabeLogan2024 жыл бұрын
@@SaffronAvenue I try Exporting AS instead of Video Export and it worked! Thank you for your fast feedback. Hope now that my finding will help someone else. :) Much love.
@SaffronAvenue4 жыл бұрын
@@GabeLogan202 Oh, good to know!!
@tenayatibbs22553 жыл бұрын
Hi! This worked the first time i tried it but now i'm getting
@laurentcrottet4 жыл бұрын
Precise and clear ! Thank's a lot !
@KingOfCorinth3 жыл бұрын
You're a godsend!!
@jpm82882 жыл бұрын
Does the rendered video keep the same distortion? Would I be able to put this same mockup into a website?
@SaffronAvenue2 жыл бұрын
Hi there, when you export it should maintain! And then be able to upload it as a complete video
@bodza82183 жыл бұрын
my video is 1:12 but the video is only 5 sec, how is that? i followed everything as said, but this, I dont understand. any idea? thank you!
@aneesha56854 жыл бұрын
Great tutorial. I followed all the steps exactly but the final video has a black background to it. How do i remove it?
@silviapinazo4832 жыл бұрын
Thank you for the video!!
@SaffronAvenue2 жыл бұрын
Of course! Thanks for watching :)
@ianteh.ianteh4 жыл бұрын
May I know why the duration of the video was shortened to 5seconds? I clearly saw that the video was 19 seconds when you placed in onto the smart object.... I am confused! But nevertheless, this is a pretty good guide! Thanks a lot! (:
@SaffronAvenue4 жыл бұрын
Hi there, I'm trying to remember..but with the image itself and the 'rectangle' you can set the 'time' by dragging the image to your desired 'frame'. Although the video itself is 19 seconds in the smart object window, I choose to set the actual image 'frame' to be only 5 seconds, thus cropping down the video time. I hope that makes sense!
@l13rodrigues3 жыл бұрын
I have tried it and it went fine, but when I embed the image in a website, the animation does not work. How can I make it work?
@ShilohEsther6 ай бұрын
Hey Lady - how would I use it in Showit since I can't upload a video on Showit . . . HELP lol
@tatumwilson46553 жыл бұрын
Hello! I LOVE your videos, but I need help ): I don't have the option to do create a video timeline on my photoshop it only says create frame animation. DO you know how to fix this? I tried googling it but nothing has worked
@SaffronAvenue2 жыл бұрын
I just noticed this same thing on my new M1 mac! - If you right click on photoshop from the finder and choose 'get info' - check the 'open in rosetta' box!
@abiaka2222 жыл бұрын
hey im getting this error what have I done wrong Could not place “Screen Recording 2022-08-29 at 17.04.55.mp4” because no parser or file format can open the file.
@SaffronAvenue2 жыл бұрын
Oooh, I'm not sure if thats an actual Photoshop version error?? If not, maybe try to reduce the size of the video (I use Quicktime or 8mb.video/ )
@InbarShahak4 жыл бұрын
cool video, loved it!!!
@jessicamdo4 жыл бұрын
amazing, thank you very much for sharing!
@melissamij38602 жыл бұрын
I am not sure why, but i create the rectangle, size it and make it a dynamic object but then I can't do anything of that rectangle... crop or select. ANy idea why ?
@SaffronAvenue2 жыл бұрын
Are you creating it as a 'smart object' before you re-size, adjust, transform?
@TrickWireRecords3 жыл бұрын
Amazing. Thank you!
@MrCharlieBananas4 жыл бұрын
Video files are not dragging over? Theres that circle with a line in it, which means action not possible? Does the video file need to be a specific type/length or something?
@SaffronAvenue4 жыл бұрын
I'm not sure on length, but I would think any MP4 would work? Where do you see the circle with a line in it?
@maria-zm4bo3 жыл бұрын
@@SaffronAvenue hi! I'm having the same issue here and am using a MP4 file. The circle they are mentioning is the one that appears instead of your cursor, meaning the action you're trying to perfom is not possible.
@tonicheval14 жыл бұрын
thanks, but it seems not working recently as the PS messed the update made importing video always return with errors, I saw many with same experience and I couldn't find a workaround even I reencode it to many different types.
@SaffronAvenue4 жыл бұрын
Hmm, I wonder if it's the new PS update causing the error??
@kawacafe51494 жыл бұрын
thak you so much you helped me i needed this thank you
@briancanbefound19 күн бұрын
Thanks so much! x
@Lyubovstrauss2 жыл бұрын
How to save the file for the portfolio website? Thank you
@elisabethp24793 жыл бұрын
thank you so much!
@nascentkempt70074 жыл бұрын
Thank you, such a saver.
@CultureAndLove4 жыл бұрын
Thank you! Sure helped!
@Nogemii2 жыл бұрын
THANK YOU SO MUCH I LOVE YOU I LOVE YOU I LOVE YOU. I'm about to ask my crush out by making this kind of thing I hope she would like it!