How To Create A Box Particle Scroll Effect in Adobe Muse CC | Adobe Photoshop

hello everyone and welcome to me's for you this is John your Adobe News instructor and in today's video I'm gonna show you how to create a box particle scroll effect now I'm going to keep this video under 10 minutes so I might go over some things fairly quickly and if you want me to if you have any questions just feel free to ask me in the comments section and I'll be happy to answer them so the effect that we'll be creating today is let me just open up my nice file ok now we have this what's called a badge this is called a hipster badge and if I hit command shift e we're gonna see what this scroll effect looks like you can see we have I'm calling the scroll effect the box particle scroll effect because we have all these squares just scattered around and when you scroll everything comes together like so and then voila you have your badge there or you can call it a logo there you go I got this dis badge from code drops comm so if you go to code drops comm and then you can just search for badges and here it is free b32 hipster badges and all I did to get the badge was I I opened it and let's see the folder this is the folder here so I opened let's see Adobe Illustrator I think it was this one here and I just opened it in Illustrator and we'll just wait till it opens and yeah so did it open here yep here it is all right so I grabbed this one here oops yeah we can just delete that back on there so I just grabbed this one well first I have to right-click and ungroup so I can select each one individually I hit command C on my Mac I right-click oh yeah command C or control V on a on a PC then I went to file a new click I think I'm gonna get a thousand a thousand let me see how big I made this one here okay let's see right okay yeah so basically I just copied and pasted this here and I'm just trying to see how big I made it so that if you have if you want to know how big to make it let me just open this file here this one is 500 by 500 okay yeah there we go so I made the badge I go back to illustrator I made this badge here after I copied it I made it yeah and it's already 500 by 500 so you can just leave it as it is and you can change the width and height oh no sorry I wasn't 500 by 500 there we go and that seems pretty good 500 and just to be exact I'll make the height 500 as well right up here alright so that's pretty much it and if I go to object artboards fit to artboard bounds our boards fit to artwork bounds it'll just kind of clip it around the image here and then I went to file save export and let's go back to my Skillshare folder school effects and cool effect too and then I just saved it as a logo I'll save it local three and then optimize this yep looks good you can leave all that like that click OK and if we go back to the folder now I have this logo 3 here hipster badge looks good now what I want to do is after I've saved the badge or logo whichever name is fine we just want to right click open with and Adobe Photoshop now this is gonna let me cut up this image into a hundred different pieces and that's how we actually got this this I can get to it yeah the scroll effect here see it's a hundred different pieces and when you scroll it all comes together like that alright so here we are in Photoshop I opened it in Photoshop now to slice this into a hundred different pieces what I want to select is this slice tool right over here on the left it's the slice select tool so you click here and if it's on crop or anything like that you just hold hold your mouse over it and then you you select the slice select tool alright and then I click on the actual artboard here that are the image or the you know the Badger logo and then up here we now get the the word divide so we want to click on divide and we want to divide horizontally into ten and then we want to divide vertically into ten this is going to give me a hundred fifty by fifty squares alright so let me do that one more time so I select the slice tool slice select tool click on the artboard if you don't click on it you're not going to be able to you know this might not be selectable but if you do click here on the artboard it'll be selectable and you click divide divided horizontally into ten divided vertically into ten and click OK now if I go to file save for web this is very important what you want to do here is zoom out so you can see the whole image and you see you have all these slices here and what you want to do is select over here in the gray area and just drag over the whole image here at the whole badge there you go and you'll notice that the lines turn yellow and that's what you want because now this is gonna save out the hundred different pieces if you don't select it and it's just blue it'll just say about the image as one single image so you want to select all you want to select the whole all the pieces all the hundred pieces and I click Save and I'm gonna go back here to scroll effects go Effect 2 I'm gonna make a new folder images 3 and I'm just going to number it 1 okay now if we go to that folder images 3 that I just created we have another images folder that he created and we have all our hundred pieces here perfect that's exactly what we want alright I have two two and a half minutes left so let me just show you what I did in Adobe muse alright so if I select all of these rectangles here you can see it's all of them are hundred pieces and all I did was I created a 50 50 by 50 square and I'll just change the height and width there I'll go to fill add image and then let me go to desktop Skillshare scroll effects let's scroll affect two images three images okay and all I did was fill it with one so there's one i centered it scaled to fill and that's it and what I did is I just copied okay let's try this again actually before I fill it let me just delete this image I'll just show you how I made the grid okay paste okay all right so that's all I did I copied and pasted till I get a hundred by hundred grid one two three four five six seven eight nine okay so there's ten you copy this there's and so on alright so that's how I did it until I got a hundred by a hundred grid which is right here at the bottom and after I did that what I did was okay so so I got the hundred by a hundred grid and then I went in and filled every block I went one you know one and then scaled to fill Center it then you know went to the next block fill add image went to the second one and so on and so on these are empty because up here you notice that there's nothing new there but if I go to like this one I go to fill add image three scale - oh yeah three is let me just find one that has something in it so that I can show you it's like you know fifteen alright so that was my time I'm gonna try just to go over maybe two minutes because my ten minutes are up but basically just go ahead 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 you know so on and so on so 1 1 through 10 11 through 20 and so on so this is what I did with this one down here I just filled them in 100 through 1 through 100 and it created the badge and yeah that's pretty much it and if if it doesn't start to look like one cohesive image just make sure that you either skill to fit or scale to fill something I'm pretty sure it's skill to fit that use for most of these fail no skill to fill I did skill to fill and then yeah that's pretty much it just skill to fill and then it should create the whole cohesive image if it doesn't just ask me a question in the comments and I'll see how I can you know guide you in the right direction so that it creates one cohesive image and then after I had all the squares there what I did was I selected ten random you'll notice that these are all different colors and I'll show you why so what I did is I selected ten you know if I hold down the shift key I can select ten squares at a time all right so that's what I did and then I went to my layers panel right over here and you'll notice I have one two three four five six seven eight nine ten I have ten layers here also eleven but I only needed ten so basically what I did is I selected ten random rectangles by selecting one holding shift and selecting you know just ten random rectangles anywhere in the grid 100 by 100 grid and then what I did once I had those selected was that I created well first I created the layer so like I created a new layer by selecting new layer here and then after I've selected them so I'll just show you as an example also like ten here actually this might not work too well but yeah I'll select ten here because these are new you see one two three four five six seven eight nine ten all right ten and now they're in layer four so what I'm gonna do is go to layer four and select any boxes that are checked in the blue and I do that by holding down ctrl or command on my Mac and selecting all the blue and there we go I've selected all the blue and now I'm just gonna drag all of these under layer twelve and you'll notice the squares turned red and that's what we want so basically I did that and of ten and what this allowed me to do is to see one layer at a time so like I've created ten groups of ten blocks so I can go ahead and unlike just view and just view these ten so there's ten blocks here and all I did with this was go to my scroll effects so each block I went to scroll effects right up here and I just you know messed around with the scroll motion and I gave each block a scroll of speed from one to ten to create more of an effect if you'll notice here the the initial motions is set to seven here set to nine so I went through one through ten and the final motion I set to zero so that it can all come in together and and stay just create the image at the end so the final motion is gonna be exactly where how it looks like right now but the initial motion on this one is three so it's going to start the speed is gonna it's going to calculate it so that the block is going to be at a distance of a scroll speed of three from the original position and with all of the blocks every single one the key position I set to 200 that way you know it's gonna the final motion when you scroll when this hits the top of the browser it's gonna it's going to be it's going to create the the image yeah let me know if you have any questions I know this is a lot of information but basically yeah I just set it to 200 you can actually set it higher and I'll show you if I set this higher on this one I'll show you what's going to happen you can't really you can't really tell on this one but let me just undo that let's try the tracker I set the key position up here yeah so you notice that the key position on this one it's the is set to the top of the browser so this is the top of the browser and because the key position picture the key position right up here this block doesn't move these move because the key position is set at like 200 so it has some some scroll space all right let me know if you have any questions I know that's quite a bit of information but I'll just leave it at 200 so now if I go back to my layers and I preview this one you'll notice that all of them the key position is that 200 so again yeah and you can play with the scroll effects you know I have them coming you know down from the right and some I have coming in up and from left to right and I just change the scroll speed just to get a really random thing going so I did that in groups of 10 and each layer has a different set of you know just I'm just going to delete this because we don't need this here and I'm going to delete layer 12 okay all right so each layer has its own set of different ways it comes in comes out and things like that so yeah so then we get this here and let me just take this image over here so we get you know this really interesting effect where they ought they're all like particles and they all come to create one image you know so they're all separate and then BOOM it's a pretty cool effect I quit enjoy watching it and looking at it you can do this with anything any image you can do this with and it can be a lot of fun for anybody to to see it alright it does take a bit of time because you got to fill in all the rectangles and then you got to give each square in groups of ten you know all the different scroll effects you know at different speeds different directions but it does make for a really awesome effect I think I went over my time probably by probably over five minutes so it might be like 15 17 minute video but I think it's worth it to get this really cool effect and yeah if you have any questions please ask me in the comment section and if it's on Skillshare just ask me in the discussion section if you do want to take more classes you know just join my school sure class and there'll be many more scroll effects to come thanks for watching and I'll see you in the next video

Channel: Muse For You

Views: 27,367

Keywords: adobe muse, adobe muse cc, adobe muse cc 2014, box particle scroll effect, scroll effects, ux design, ui design, websites, hosting, web hosting, bluehost

Id: k0flBh2BeNo

Length: 18min 31sec (1111 seconds)

Published: Sat Nov 08 2014