Using Photoshop to Showcase Mobile Projects

Key Takeaways

all right hello and welcome my name is Gary Simon of design course comm and today is an exciting day for two reasons versus January 1st 2014 and second this is the first video in what will be 365 videos completed before the end of 2014 so we're going to be covering all things design so Photoshop Illustrator html5 css3 we're gonna take a little bit of a look at 3d in blender which is a free application so right now if you would just bring up another browser window head on over to design course comm and you'll see an area to submit your email and you will get frequent emails about design maybe new tutorials and videos and also when I launch a full course on my website so hopefully you'll do that on your own free will if you like these videos enough and not just because I'm telling you to do it so this video our first video we're going to cover mobile presentations so basically if you've ever seen the different designers portfolios whether it be on dribble calm or behance net you'll see sometimes it's really impressive when they have the actual mobile graphic user interface or the website that showcase it in a perspective view on a phone whether it be an iPhone or Android or whatever so we're gonna focus on creating something like that and what goes into creating that and imposing your own work into a perspective phone eye and we're gonna use Photoshop and something called smart object layers it's easy so let's go ahead and get started so to get started the first thing you want to do is underneath this video if you're watching this in YouTube it's click on the link in the description which will take you to the specific page on design course comm where you can download the project files I've also linked the two different sources I for crediting the assets that we're going to use in this group description so let's go ahead to file open and here are the project files so basically let's just go ahead and open all three of these and this phone example is the one phone design example that we're going to use and this is something I created a while ago when I went to create a mobile app for Android and then here's one view of a phone and then just another one that's perspective on its side so let's create a new document and we're going to specify the name as just mobile presentation and the width I'm just gonna choo-choos here 800 and this works well with my current resolution and then the height we'll leave it around 2000 so we'll hit okay and so we're at 25% I'm just gonna real quickly change this background here to white and it may already be white for you I if you went to file new my background contents that that if it's been set to transparent so by default they're white so that's why it would be different if it was so I we have a layer one and we've coated it in here with white and now what we want to do is copy our phone object here so what I want to do is just take all these and just flatten so we're gonna take the top layer hold shift and then select the bottom layer hit control E and that will just basically flatten everything to a single layer hit ctrl a to select all and then ctrl C to copy so let's go ahead and paste that in and as you can see it's really large so I'm gonna hit ctrl T and hold shift and scale down right around there and we're going to put this one at the bottom we can go ahead and close this one out and then I'm going to take this and I'm also going to go ahead and flatten this I'm gonna get rid of the glare I don't think we need that so just take that layer a top layer and hit ctrl E and then ctrl a and ctrl C to copy and we will paste that in right there all right so I'm going to zoom up now to 100% or you could hit control wine and we're gonna move this up make sure auto select is checked with layer up there and right around here seems good alright so now what we want to do is create a new layer so we're gonna go over here to the rectangle tool and we're just going to click once left-click and that brings up the create rectangle dialog so the width we're gonna specify 480 by 854 and I'll tell you why and okay we go to our phone example when we go to image image size and we change this to pixels we'll see it's 480 by 854 we basically want to get the exact dimensions of whatever it is we're we're dealing with to match here obviously there's standard dimensions and that is one of them all right so I'm going to close out this one real quick as well and then I'm going to go ahead and hit control a and then control C to get this copied and then I'm just going to exit out of that and for this rectangle one I'm just going to get a gray color just so we can see it and I'm going to drag it down here alright so now what we want to do is right-click on it and we're going to convert to smart object so now it's converted to what's not called a smart object and you can see the icon changes here to reflect that and what this means is if we double click on this and we hit control V to paste that our design and then ctrl s to save if we close this out or switch to the other one we'll see that it now updates here now what's really cool about this is now we can take this go to edit transform and distort so we can take this position that there put this top right around there and we're going to go ahead and zoom up a little bit more after this to make sure everything is placed correctly take this there all right and then when you have it that's looking pretty accurate we can go ahead select move tool and hit place and I'm just gonna zoom up real quick and I'm gonna do that again so we'll go to file or we go to edit sorry transform distort and we'll go ahead and drag this up and that seems pretty good I'm just going to use a mouse wheel and move around here real quickly get around there and then finally right there so we'll hit place and hit control 1 and there is our design so what's cool is if we make any change to this over here it will automatically reflect back to the original document so if we went to adjustments and brightness and contrast and did this to it obviously you wouldn't there's no reason to do that but just to show you we can put anything we can do anything to this document and it will reflect here alright so I'm just gonna undo that and then hit save alright so now if we want to do this for this one right here it's basically the same process all we have to do is right click and duplicate that and we'll go ahead and scroll up we'll bring this down oops and then we'll go to edit transform distort and we'll do the same thing all right we'll hit place and if you want to you can definitely zoom up and correct anything mine looks a little well actually done here and what we can do so we can see behind it we can take this app acity down quite a bit and then go to edit transform distort you'll see it's kind of off and drag this up all right hit place get it back up 200 zoom out 100% if you don't think this really looks too natural which I don't I think the lighting is off what you can do is come over here right click double click on the right side of the layer and we'll get a layer styles up here and we can make some adjustments here so we could do color overlay we can go to moles make this black and be drop this opacity down so that it will automatically kind of match the lighting it seemed too bright they didn't seem real so if we just drop it down slightly there hit OK and there we go we're good to go I so one final thing we could do is we could take this first layer that we created and duplicate that drop it all the way down and say if we wanted to put it there we can double click on the layer style we can specify a drop shadow and just tinker around with it just slightly and play with the opacity and hit okay and sometimes you'll see this type of perspective view when it comes to presentations alright so I that is it so if we were to take any of these we're all going to go to the same rectangle one dot PSB layer and basically any change that's made here will automatically be reflected in all three of these presentations all right so i'm gary simon with design course comm if you enjoyed the video please Like us or follow us or tweet us on any of the social accounts which are linked below this video and also check out design course comm alright I'll see you next time