How to make animated web showcase mockup banner using photoshop CC

How to make animated web showcase mockup banner using photoshop CC

September 15, 2019 7 By Peter Engel


Hello everyhone I’m Ekhtiar Mahmud Today I will show you how to make this animated showcase mockup So first we need a mockup like that I already choose this mockup from graphicriver That’s name is 3D Webs Showcase Mocups So, we need download first After downloading we have to open it in photoshop So this is my mockup And I have to replace screens There is 3 Screens First time we have to choose a web template I already choose this one This is my template So we need copy this layer from here And choose a first smart object And paste here We need to adjust this layer as size as mockup screen And save ok, this is our first screen In this way, we have to change other two screens This is screen two And paste here again Also, transform this layer as mockup size We can show different view from here This is our second view & save Now, we need to change screen three In this same way This is screen three I think it’s ok And save again Ok, this is our first view We have to must remove background layers Ok, this is cool now And save is as PNG Save Choose desktop, name this file screen 01 So, our first screen or view is done In this same way we have to Create two different View like that I already created 3 items Screen one, two & three Now, it’s time to make our animation To make the frame animation, we have to open this 3 file in photoshop select all Drag to photoshop Here is our three view, one, two & three So, I’m going to copy this file To copy Press, Ctrl+A And Ctrl+C And this is our main file I’m going to make animation In this file, so Press Ctrl+V And Drag a little bit down to adjust this view And go to second layer copy and paste it here and drag to the same position to make better animation we can on/of second layer to check, it’s ok or not I think we have to move one pixel down now it’s fine go to third layer copy and paste also third layer We have to adjust as view one so it’s fine so let’s make the animation To make the animation go to window and select timeline so this is our frame and this is our first view We have to select frame speed first select frame speed 2 second and select animation forever So viewers, this is our first view and first frame We have to create our second frame To create second frame press new layer or new frame so this is our second frame and we are going to show our second view in this same way create 3rd frame & show our 3rd view Now I think our animation is complete, let’s check press “play button” for check the animation now it’s changing so, we are going to save this file as web format and select GIF format and select forever looping & press save and give a name this file animation file and click “save” so this is our animation file, we can check this file in our browser so open in new tab Now, it’s changing and we also create successfully our animation file Thank you guys for watching my view & i will catch you later Don’t forgot to subscribe my channel