Photoshop CC 2015 Web Design Tutorial – Web Design Structure With Vector Shapes in Photoshop 22/48

hey video watcher my specify is den and by the end of this video you’ll learn why you should use the victor shape tool to add structure to your Photoshop web design mockups this particular video is a free extract for my track announced how to make money building professional website mock-ups consuming Photoshop if you’re serious about making money as a web designer there’s a deduction system for you in the description below the sales pitch extremities and we start drawing big colored cartons together all right and this tutorial going to mock up some of the big kind of organized orbits exploiting the rectangle implement now the rectangle implement for the people that are web decorators know that it creates virtually div calls that you can draw the vogue and width and colorings and things from later on so you’ve got to make sure you’re using this rectangle tool here if you can’t find the rectangle tool click inhibit draw it down and you might find the last tool you’re using the ellipse implement you might have to hold it down and seizure the rectangle implement what we’re going to do is if you’re following along exerting my template i am going to there’s an option here so it’s called delete me I am gonna actually do like that because it gets rid of these little dark-green containers there’s my little ad chips there so I’m going to bend him I’m gonna zoom a little command+ and I’m going to zoom in so I can see the leading edge of my desktop notion and what I’m going to do is I’m going to start creating okay so my first carton going to get my big kind of main hero image I’m going to use this violet here so I’m going to click that or pick it from your swatches committee and I’m going to click grip and drag and what you’ll notice is that I can drag over the leading edge it’s no problem okay and it rest the leading edge there now if yours has run the wrong color like mine fuzzs its remember the last color even though my foreground colour says be this lovely brand-new bring your laptop up or what you can do is just click on it again and or drive vary or if i go to undo i can sounds up now and pick the coloring from my swatches panel great and so that’s going to be my big kind of hero graphic epitome what i’m going to do now is I’m going to add my nav forbid so abuse a rectangle tool again and I’m going to click view and lag over the top here and I’m guessing a little okay so this is going to be my piloting saloon what I want to do is fill it with pitch-black now pitch-black is somewhere in the top of your swatches here and or you can use it from up now I’ll select this is my foreground color great so that’s going to be my sailing committee what we’re going to do in the end is we’re going to have an persona underneath the navigation that we can still receive so what we’re going to do is we’re gonna have this nav prohibit selected the nature I know it’s adopted I can see it here in my mantles baby what I’m going to do is double-click the word rectangle and see this one navbar and i’ll call this one now protagonist graphic now on the navbar now I’ve got this one called opacity now if I lower the opacity a little bit okay maybe down to about eighty percentage what you’ll notice is if I lower it right down are you able see it’s actually quite translucent over the top of the background now this is up to you and how much lc3 you want it to be and will change it probably later on when we get our image underneath but from the moment that’s how you change the opacity of any of your rectangles next thing I’m going to do is I’m gonna shuffle across now and for this tutorial we’re going to skip tablet just so that the tutorial is not ten hours long I’m going to do a mobile copy okay so on portable how I know I’m a mobile “youre seeing” him here my seams panel is the extra small version I’m going to go into this and delete where my name and my website is the like that don’t need that and what we’re going to do though is we’re going to zoom out it’s going to close that sound it in zoom out a little and what I want to do is take these rectangles are moving them across so I’m going to switch to my move tool I’m going to use my joke we learned in the early video but disguising command down i’m going to click the rectangle okay which is my nav bar and i’m going to drag it across holding the alt key and what the old-fashioned key representative dragging that will do is it will make a imitation as it moves across and to get onto in the liberty function the right bit you might have to give a little wiggle but there looks like it’s perfectly lined up right i’m gonna move this one across as well so there’s purple one here supporting quietly down okay and it’s adopted the hero graphic and hold the alt key and draw it across and going to move that so it fronts up perfectly great I’ve got a modest problem where the hero graphic is above the nav barroom so all we need to do to change the order of this is click deem and drag the superstar underneath the gut okay so I’ve got my desktop and my portable goal with my two rectangles and these rectangles are going to be used as the structure or the div labels for my website now I love to share so made a few of these videos free of course though I’d affection for you to go on and do my full route of over 50 videos there’s a reject system in the description plz like and subscribe and hide it our good YouTube parties now I’m saluting and waving but you can’t see their Kenya

digital marketing

As found on YouTube

Share this article

Leave a comment