How to Design a Website in Photoshop

1. Intro: Hi, my name is Dan. I'll be leading you through this course on how to build professional Website Mockups using Photoshop. These are the skills employers want, and UX/UI design skills are where the high paying jobs are at. I began my life as a graphic designer and quickly found out that it was quite competitive and the pay wasn't super exciting. It wasn't until I upscaled into the world of web design before my career really took off. I built this course for beginners, for people nervous about changing their careers into web design, for people new to the web world, as well as developers who lack any previous design training. We cover everything you need to design your first Web Mockups without getting too technical. During the course, we'll create a website for a mock creative agency developing their mobile, tablet, and desktop views. With the exercise files you can download and work along with me. With a principal PDF you can follow along and create your own personal notes. I'll be teaching you how to set up new documents and how to work with mobile, tablet, and desktop views. You can easily pick website colors and fonts and preview them on your iPhone or iPad. You'll learn how to crop images and make full backgrounds all the way through to exporting all the right files that you need for a website. Though that I'll be around to help. When you're ready, you can send me your files and I'll take a look and offer any suggestions. Now it's time to upgrade your skills, get that bid of job, and impress your clients. 2. What do we need to deliver at the end of our project: To be a commercial web designer, there is more to make than just a thoughtful website mark-up. There are some final deliverables, some tangible files and information that you'll need to handover before the coding of your website can begin. Our aim before the end of this course is to have a folder filled with web-ready images that follow the Crickweb naming conventions. You'll also be producing what's called a CSS sheet that is used by a developer to know what fonts you were using, the heights and widths of your navigation box or your photo box. You'll learn how to pass on the correct color codes, the line height, spacing for your website so that the lovely person who's building your website can get to work fast, and not have to make huge guesses from your mark-up. 3. What is Photoshop's role when designing a website: Photoshop is amazing at many things. In terms of designing websites, it's the most commonly used tool and if you're looking for employment in the web design world, it's essential. Now website builds with mockups. These are visuals of what you think a website should look like. You do this before actually coding of the website. Why? Because it's a lot quicker. Making changes in Photoshop is only a matter of selecting the right layer and dragging the page elements around. In code there can be a lot more implications for simply moving things around. Photoshop does all the planning and design work. Then your mockup is built and coded up as a website. If you are interested in doing the development work yourself and you're unsure about where to get started, drop me a line in the discussion or the forum, I'm really happy to help point you in the right direction there. 4. What are the production videos: What are the production videos that are in this course? These are the sessions where I'm busy building the concept site using the tools that we've already learned. These can contain little nuggets of workflow, gold and others can be me just doing the work and can get a little bit boring. I won't be offended if you don't watch them all, all the way through. 5. Getting your workspace ready for UI work: In this video, we're going to look at resetting your workspace. Now you'd reset your workspace, if you opened up Photoshop and it was looking different from my version and you want to get it to look the same so you can follow along. Now, I'm using Photoshop CC 2015. If you're using other versions, it might look slightly different. But let's say that you've been using it for other things and you've moved these palettes, you drag around or you've accidentally done it. You've done this during the tutorial. You can come back to this video. All you need to do is get it back to normal to make it look right, it's up here, it says Essentials. Let's make sure it set to Essentials first, and then click on where it says "Reset Essentials". Then I put everything back in its place and look like mine for this tutorial. 6. Adjusting the Photoshop preferences: Hi. In this video we're going to look at changing your preferences to work with web. Now, by default Photoshop comes out of the box ready to do a lot more print orientated work. What we need to do is go into our Preferences and change it for web. Now, first thing we're going to do is turn on our Rulers. We're going to go to View, and down to Rulers. What that'll do is it'll show me how wide this document is. Mine is set to centimeters, because I'm in Europe and yours will be set to inches if you're in America. Now, what's happening here is you can see it's hanging about 16 centimeters. Now when we're dealing with web, we don't want to know what the centimeter value is, we want to know what the pixels are. We need to change this unit of measurement to pixels. To do that, we'll go up to, on a Mac, go to Photoshop CC, go to Preferences, and go to one that says Units & Rulers. Now, if you're on a PC, it's in a slightly different place. You go to Edit, then right down at the bottom here, there would be one that says Preferences, and then you go to Units & Rulers. Whichever one, let's make it to units and rulers. What we want to do is, mine is set to centimeters, yours might be set to inches or millimeters. Let's change the rulers to pixels. The other thing we need to change is the type. Type uses points typically when we're dealing with print. But what we want to do is we want to switch now to pixels because that's the measurement we use dealing with web. When I click "Okay" you'll notice that it's now roughly about 1,200 pixels wide. When I go to the Type tool, which is this T here, you'll notice that I'm dealing with pixels instead of points. One thing to note is that if you're a person that is moving from print to web, you're going to have to go back and change those provinces every time you want to work on a different type of document. To do it on a Mac, we're going to go to Photoshop down to Preferences, and go down to Units & Rulers, remember if you're a PC, it's under Edit, Preferences, Units & Rulers, and you're going to put it back to either inches or centimeters, and type goes back to points. But of a pain, but that's what we have to do. I'm going to click "Cancel" because I want to leave it, as it was, set to pixels. 7. Download the exercise files: Hi, in this video we're going to look at how to download the exercise files that go along with this course. Now you don't have to have these files, but it's really helpful if you want to follow along step-by-step. Within the files, drop your email address here in the middle, and I'll email you out the images that go along with the course, along with things like the fonts and colors that we use. What I've also done is that at the end of each video, I've saved a Photoshop document that represents where we're up to. So if you get lost or your file is not working the way it does through the videos, you can compare your file to the downloaded file, so you can see where you might have gone wrong. Throughout the course, I referred to lots of different references and resources, things like syntax and websites, they'll all be part of this exercise files here. All right, let's keep going. 8. Understanding responsive mobile & tablet design: Responsive web design is a way to change a website depending on the browser size. Now I'm showing him Smashing Magazine. Smashing Magazine is website that I read a lot and I really like the effort they went into to redesign the different pages depending on the browser size. At the moment we're looking at it as you would on say, a big screen like an iMac or a 4K monitor or something really big and high definition. You can see there's a nav on the left, a sub nav, main content and some ads. But once I get smaller, say down to a regular desktop view, can you see it changes, it goes down to this navigation here, our main content and ads, but as it gets smaller, say down to say, tablet view. Changes quite a bit, ditches is the ads, the navigation becomes comes a bit smaller, this is along the top here, now. If I get down into smaller, down to the mobile view, things change quite a bit again. Now what you need to take from that is that when you are designing in Photoshop, Photoshop is aesthetic medium. It's not scalable, stretchy one, like you can get when it's finally put out as a website. So the trick for designers when mocking up a prototype in Photoshop is that you'll need to design the different views so that when you hand it over to the developer, they know what the site does when it gets down to mobile. What happens when the menu is in tablet view? And all those questions need to be answered in your mock-up. What you don't want is loads of questions back and forth between you and the developer trying to answer questions that should have been fleshed out in the concept stage. And that is a quick introduction to responsive web design. 9. Understanding grid systems & Bootstrap: Now the most popular solution to handle different browser sizes at the moment is the grid system. Of the grid systems, something called Bootstrap is by far the most common. Now, whether you are using Bootstrap or any other way to build your website, you're probably going to be using the grid system. That's what we'll use in our Photoshop document. The grid system allows designers to work from a base 12-column grid. Designers can spend any amount of those columns to suit their website. Let's take a look at this example of grid system here on Edward Robertson site. You can see it up here, it's called responsivegridsystem.com. Now, what you'll see down if I scroll all the way to the bottom here, it starts at a base columns of 12. Now, I'm yet to see anybody use exactly all 12 of them unless there maybe bullet points or lists or something similar. What tends to happen is designers end up spending a few of these columns. Down the bottom here, you'll see that it starts at a base level of 12 columns. At the top here you can see we can easily span those 12 columns, say six of them and six again, to curve our website in half. This is a really nice way. Twelve is a really nice number because we can cut it into thirds, and quarters, and sixs, all very easily using the 12-column grid. This is another example here on Edward site. You can see a couple of example layouts for responsive. Now, this intro page here, forget the heights because the heights are really short. But see the different cut ups in terms of the navigation. You can see here this is where my logo goes and this other chunk here, this other two thirds would be where my navigation goes. This is span at all and this might be say a rotating carousel like they've got written here. These are feature boxes all curved into thirds. Four columns, four columns, four columns, and then my footer would be spanning all three. You can see here's a couple of different examples of ways of cutting out websites. I've switched here to the Photoshop file that you can download as part of the exercise files and if you haven't done that, do that from the link below. Otherwise, you can create your own pages. Now what I've done is, if I go to "View" and I go to "Show", and I go to "Guides", you'll see that it's been cut up into columns of 12 with a bit of padding and between them all. I've done it for desktop, tablet and mobile. Now you'll notice here on mobile, the mobile doesn't actually have 12 columns like the tablet and desktop. We do this because 12 columns on such a small size becomes this dense mass of columns and nobody actually cuts a mobile site up into 12 distinct columns. Now, when deciding what pages and what sizes they should be, you can see the desktop here is 960 pixels wide. When you're deciding what size desktop should be, and tablet to be, and mobile to be, don't get too caught up on actual pixel dimensions because there are so many different screen sizes, it's impossible to group them all together into one exact pixel size. You pick a generic size that fits mobile, desktop, and tablets that are common at the moment, and that's going to change as time goes along as well. Be prepared for in a couple of years when screen resolutions are all changed, or there's a new feblety, desktopy, mobile version that you might have to go through and design a separate style to accommodate that screen size. If you are looking for exact dimensions to get started with, then you can download the Photoshop template that I've got in the resources. Or if you're using say Bootstrap, you can go and check Bootstrap to see what the media break star views. What they consider mobile is, what they consider tablet is. If we can have a look. Now I'm over at Bootstrap, at getbootstrap.com. I'm on the slightly preview version in version four. At the moment, we're up to version three, but version four will be out really soon, so we'll be using that for this course. Click "Documentation" then I go down to "Layout" and pick "Grid." Now if I scroll down here, this one here says grid options. You can see here, here's my small case that'd be mobile in portrait. Then I've got small which is considered phone at landscape, medium tablet, large is say a laptop screen and extra large is a really big say IMAX screen. You see the sizes here are written in this measurement called REM, which is a root EM. If you've never used this measurement before, don't worry. Essentially, you take the 45 and you times it by 16. Sixteen is considered the default size in a browser. So 45 times 16 gives us 720 pixels. If we go back to Photoshop, you'll see that I've used 720 pixels for this tablet. Now when we get up to Bootstrap five and Bootstrap six, that'll go and adjust these things depending on what the most common sizes are. They might get bigger, they might get smaller, whatever is really popular at the time. That's a good place for us to start for our Photoshop mock up. Now what I've done for you here as well is that these guides can be a little hard to work with as well because they stretch past the pages. What I've done in here is, say you're working on your desktop view, you can toggle this layers down, and you'll notice in here, I've got this one called helpful column guides. If I toggle that down, I've laid out a couple of basic column grids. Watch this. I'm going to turn my View, Show, Guides off and I prefer to work this way. If I'm doing something that is meant to be three columns, I'm going to click this on my three columns and it's just the transparent background, so that I know when I'm working with my document. I am dragging it around and I know I'm working within these three columns here. When you finish using the column, you can turn the eyeball on and turn off on another one to work on a slightly different layout or a different grid system. Now you'll notice in this tutorial that we're using only three of the sizes. We're using the small, the less than 34ems for portrait mobile, the tablet and desktop. Now we haven't done this one that's in-between here, which is our landscape phone. We haven't done the really large or extra large desktop as well. It's mainly just to keep the time down from this tutorial, and it depends on I guess the level of complexity your website has. If it's a quick throw out website, you might not spend as much time with the Excel or the small version, which is the small landscape phone version, and until maybe the site is a little bit more mature. If you are working on a bigger project, then definitely you're going to be looking at all five media queries and all five sizes here in Photoshop. 10. Tips for zooming & navigating your document: Hi. In this video, we're going to look at zooming and moving around in a document. Now, there are many ways to zoom in and out of a document. I'm going to show you the quickest and the easiest way. On a Mac, you hold down the Command key and tap the "Plus" on your keyboard. Now if you're on a PC, hold down the Control key and tap "Plus" and it will zoom in. Now, holding that same key and tapping the "Minus" will zoom out. What we want do is we want to make sure that we're viewing our Photoshop mockup at the same size it's going to be rendered in a web browser. Because a web browser, obviously, we can't zoom in and out like we can do in Photoshop, so what we want to do is see it at actual size. To do this, if you're on any computer other than a new MacBook Pro, the easiest way is to go to View and pick a 100 percent. That will show it at it's actual size. Now, you can see on mine here, it is about half the size it should be because I'm using a MacBook Pro with a retina display in. Long story short, it essentially shows you everything at about half size. Now what we need to do, with anybody with a MacBook Pro, is that you need to reset to this 200 percent, brought up twice the size. Photoshop will show at the same size it will show you on a website so you can be a bit clearer about what font sizes you want to pick. So to be clear, if you're on any computer but a MacBook Pro retina display, use this 100 percent. If you are on a retina display, use 200 percent. Now that we're in this closer zoom level, we want to move around. The long way is I could drag these little sliders around and that works. A nicer way to work is if I hold down my Spacebar key on my keyboard, you'll see my cursor changes from move tool to this little hand and this hand will allow me to click, hold, and drag my mouse and move around my document. I'm holding my Spacebar key down the whole time and I'm clicking and I'm dragging and then letting go with my mouse. This is a nice, easy way to move around the document. That's zooming and navigating your document. 11. Measuring & spacing tools: Hi, in this video we're going to look at rules in measuring things. We do this for two reasons. One is that we want some even spacing between boxes and also we might be doing this because the person building the website, if it's not us, might want the measurements to know how far apart things should be or the padding between objects. To do this, there's two ways, there is the official way and then there's the way that I use. Now the official way of doing it is to use the Ruler Tool. Now the Ruler Tool is hiding underneath the Eyedropper Tool here. If I click hold, hold, hold, there it's there, grab the Ruler Tool. Say I want to measure the distance between this More button and the box underneath it. What I do is I click and hold and drag. What you'll see is in the top left hand up in the app bar, that the measurements are changing as I'm dragging this around. Now by default its stretching goes anywhere. What I want to do is hold down the Shift key to lock it in this vertical position, so I can scroll it down. You'll see there it set to 77 pixels between this one and this one. Now, what you have to do is zoom in a little bit just to ensure that it's actually very close. You can see because I was so far out, it hasn't been perfect. I can click hold and drag it just to clean it up and say actually I want it to be there. Now it's more like 81 pixels. Now that's the official way. I'm going to clear my rulers, to get rid of it, I'm going to zoom out by holding Command or Control minus. Now that's the official measuring tool and it's great. What is better though is to use the Rectangle Tool, the Rectangle Tool here has a big benefit in the fact that it snaps to the edges of things on the page. Whereas we had to do some adjustments with the Ruler Tool afterwards to make sure it was all measured right. Watch this, I'm going to measure the distance between here and here. I'm going to click hold and drag and see there's like pink lines that are appearing everywhere. That's because it's trying to line up with lots of different things on the pages. Mine is quite a complex page, so there's lots of things that's trying to line up with, but it's pretty good at just snapping, watch this. If I just drag it down here, it's pretty good it got out 81 pixels. I'm going to zoom in and double-check. Let's bang on, it is perfect. Now the Rectangle Tool is really good for spacing out objects as well. I'm going to delete this layer down here. I'm going to zoom out a bit and move down holding my Spacebar, click, and drag down. I'm going to zoom in here to my little portfolio list. Now I've got some even spacing between these two objects. I'm using column widths, so let's View, Show, and I'm going to turn on Guides. You can see there I've used the spacing between these columns. Now what I want to do is make sure that the spacing is exactly the same between here and it's obviously not. To make it perfect what I can do is using my Rectangle Tool, I can click hold and drag the rectangle between these two and you'll notice that, you see it snap to the edge is perfect. But you'll notice that I want it to be perfectly square. I'm going to undo that by going to Edit, Step Backwards. What I'm going to do is I'm going to hold down the Shift key while I'm dragging my rectangle, if I hold the Shift key it'll lock the constraints. You can see it's 30 pixels by 30 pixels now. Now if I use my Move tool, click, hold, and drag them down and we use them like a spacer. I'm going to snip into the bottom of that, now it's there. Now I'm going to move this image up. Now, sometimes it doesn't snip, so in this case it's not. What you can do is you can use the arrow keys on the keyboard. I'm just going to use the arrow keys that bump it up. Using rectangles is a good way to make sure that the padding is the same between these images and the same underneath here. The only trouble with them is that they are physical, which means this thing here is going to print or go out on your mock up. You must make sure when you are finished with it, that you select it in your Layers panel and you delete it. All right, and that's how you measure up things in Photoshop. 12. Layer shortcuts you need to know: In this video, we're going to look at some of the essential shortcuts you need in terms of dealing with layers. Now, with layers panel you see down here, I'm working on a final image here. You can see the layers are being built up over time, and there are hundreds of them now. So it's not really practical to go through and try and remember the names of them all, so you'd know which layer you're working on. So you need a trick. The best one and the one that I use constantly is make sure you're in your move tool and make sure that your move tool is set to layer. Now what will happen is you're going learn a little shortcut. We're on some random layer at the moment. I want to click this word. This is More. Now I'm going to zoom a little bit, select More. What I need to do is hold down the command key on a Mac or the control key on the PC. What you'll notice is that, can you see up in the top EPA? It changes this thing called auto-select. It just toggles it on while you need it. If I hold down the command key and I click the word more, can you see in my layers panel, it jumped to the More. I can move this around. Then say I want to move the green box as well. I'll hold down my command key and the little auto-select tool comes on, I click on this. Even though it's got some random name called Rectangle 2, I can still move it around. Okay, so I can click More and move him across, click the rectangle, move him across. Hold down Let's Make Awesome. It's just a really easy way to pick the layers and move them around and really essential when you are working on such a layer heavy document. I'm going to go to edit. Step backwards, and a step backwards, and a step backwards. Another useful shortcut is if you've got a really complex set of layers all on top of each other, it's really hard to select the one you want. What you can do is let's pretend for a second that we see this image in the background here? I want to select using this little area here, but I can't because there is a black box in front of it. If I use my command click trick, it's going to pick this rectangular every time. Of course, I can pick down here, but that ruins my example. What I can do is if I right-click and if you're on a Mac and you don't have a right-click, you control-click. If you're on a PC, it's easy to right-click and you'll notice that it picks everything in my little layer order here. That is the black rectangle. Underneath it there is something called layer 2 and that is my little image. Another useful shortcut that you're going to need is if you're using my template and you're using the column grids. You need to be able to go to view show guides. These can be really great when you're lining things up but real pain when you're trying to look at things visually because it ruins the look of everything with the lines everywhere. So the shortcut for this, if you're on a Mac, it's command and use the colon key on your keyboard. If you're on a PC, it's control and colon and you toggle these on and off. I do this quite a bit when I'm working with these grids when I want to line things up and then I turn it off again when I'm trying to look at things and see how they line up. 13. The eye dropper tool: Now the next tool in your web designer toolkit is going to be eye dropper tool. That's an easy tool for knowing which color that you're working with. It's hiding underneath the ruler tool and it should be set to the eyedropper tool by default, but we were using this earlier, remember? I'm going to use eyedropper tool and it's just really good for picking color. I want to know what color this green is. I'm going to click on it and you'll notice that up here, my color swatches that points to it and here my foreground color it selects it. Let's double click the foreground color down here and you'll notice that we get our hexadecimal number, and this is the number that generally gets used in web design to establish color. There are some other ways to deal with RGBA which we'll look at later on, but you can use these RGB colors as well if you need to. Let's click "Okay". That is the eyedropper tool for picking color. Let's say we want to use that color over and over again in our document. What you can do is you can create what's called a swatch. Now, to do a swatch, let's say I want this peach color here. If I select it, I can move it in my swatch panels and I can use this little flag here that says "New Swatch" and it uses my foreground color that was picked with the algebra tool and I can call this BYOL Peach. Click "Okay". Now, what you'll do is you'll see him just appear in the end of my little swatch panel here. That means that I get to reuse that when I need to. Let say that I want to switch it back to black and white, I'm going to use my rectangle tool and I'm going to draw a rectangle and it's going to be black. But what I can do is I can use this little drop-down and you'll see there's my peach color at the end of my swatches, and I can reuse that color over and over. 14. The transform tool: One of the rather more useful tools is your 'Transform Tool'. Now, I use this a lot through this class, and a lot on my own work. It's often used as a shortcut. The long way is under edit, and it's this one called free transform tool here. Now, I'm going to use the shortcut throughout this course, and it's really good one for you to learn as well. You can see on a Mac it's Command T, and on a PC it's Control T. So I'm going to hit Command T on my keyboard. Watch this, because I've got my grid viewed here, okay? If you haven't you're grid showing, got a view, show and go to guides. Watch this, because my guides are out it'll snap to it and say I want it to get quite a bit bigger and I want to snap it out so it expands four columns here for this button. Great, so it will snap to the guides if it needs to. You could turn the guides off and it won't. Now a couple of other handy modifier tools is let's say the escape. The escape gets rid of our transformation and let's go to Command T or Control T on a PC and watch this. If I hold down the Shift key while I'm dragging one of these corners, can you see that the height and width is exactly the same? So if I undo that, if I don't hold the Shift key down, I can move at any old sides I like, which is handy, but also really good if you hold the Shift key down. Now I've hit escape again, let's look at one of the modifier key, so Command T and it's the ALT key. So if we're holding the ALT key down, and say I want to make this four columns for holding the ALT key to this one side. Watch what happens? Can see the opposite side comes along for the ride. That's the ALT key, if I hold that down while I'm stretching it out. When you're finished and you're finished transformation and you like it hit 'Enter' on your keyboard or 'Return' and that'll commit that. That'll finish the transformation, you're ready to go. 15. The 'f' key: Now this tool is really handy when you want to get a sense of how the website's going to look without all the junk are on the outside, all of the Photoshop tools and tabs and toolbars. Now to do this, you go to "View", there's one called Screen Mode and you use this one here. Now for some reason, I know it's the shortcut key of F but some reason on this mark here I'm not sure if on a PC, but it doesn't have the shortcut, so we're going to ignore that little bit and use the quick little shortcut key. If I tap the F key once, it hides half of it. Type the F key again on my keyboard, it gets rid of all the toolbars except for the rulers. Now what I want to do is I'm going to toggle back one more and turn the rulers off, rulers turn them off. Then remember, once for the F key, twice for the F key and I can see my document and I can move it around and I can hold my space-bar. I can move it around and it gives me just a bit of sense of what my website is looking like at the moment. An F key a third time, will get you back to square one. So this is a three sittings. There's this one here, and then this next one, and then this full screen. They cycle around by using the F key. Now, another nice thing I like to do is I get F key twice to get into the full screen mode is I don't like this white background, especially when I'm dealing with such a dark website. I want this background here not be white. So what you can do, you can right-click it and pick either dark gray, right-click it and pick black, and it just changes the background color. If I zoom out, you'll notice that it changes forever my little background color. If I have F key back, it's up to you how you prefer to work. I like to work on a dark screen or dark gray just so I can get nicer scenes of my website. 16. Screen sizes for desktop, tablet & mobile: Hi. In this video, we're going to look at screen resolution versus our actual pixel size. This can be a little confusing when you're starting, you're thinking, "Great, I'm going to do a mock up for an iPhone 6." You go off into Photoshop and here is the dimensions. You Google it, and it says it's this pixel width by this pixel height, and you decide, "I'm going to make that. I'm going to go into Photoshop, I'm going to make a new document that it's going to be 750 by this 1,334." You make it and you end up with this size here. Now, this isn't the true size, it's going to be. Let's look back at that website here and we'll see that it's the CSS width that we really need to observe when we are designing for mobile, because we all know that mobile phones, apart from a couple of them, all are very similar in the size. But what will happen is this pixel ratio here, you can see when it is one to one, that whatever physical size that is, is the actual size of the screen here. There's no real density, and if you've seen an old iPhone 3, you'll notice that the graphics aren't great, but it's the physical same size as an iPhone 6. But what happens is when you get this denser pixel ratio, the same physical size, we see is doubled here. The actual pixels get a lot bigger, but the actual size of the phone is exactly the same. You'll notice say this LG G4, this one here has a picture ratio of four, so it's quite a small phone, so the size is as the iPhone 6, but you can see it's hugely big in terms of its physical width. But we have a look at it here in comparison with each other, they're actually not that different. Slightly bigger, the iPhone 6 is slightly bigger, but not a huge big jump as in this indication here. So they can be quite confusing when you're new. The basics are is that when you're designing a Photoshop, designing for this physical size will give you the best representation of the actual phone rather than following these physical pixel widths over in the slide here. 17. Testing on iPhone & iPad using Adobe Device Preview: Adobe Preview or Device Preview is a way of showing what you're working on on Photoshop directly onto a mobile device, either an iPhone or an iPad while you're working. This means that you could be making a mock-ups on your computer, but actually seeing what it looks like on a mobile device. Now, this app only works for iPhone and iPad at the moment, there's no Android equivalent yet and probably won't be, but keep checking to see whether Adobe do release anything for Android. Next thing you need to do is you need to download the app for your iPhone and iPad. Now, I've got on the iPhone here, ignore the wallpaper there of my very handsome son. Once you've done it, you open it up and in there, you'll have to sign in with what's called your Adobe ID. Now, if you don't have an Adobe ID, you probably do, you just don't know what it is, the way to find out is to go up to here, go up to Help. I'm in Photoshop, go up to Help and you can see here mine is DANIEL@BRINGYOUROWNLAPTOP. Now, don't click "Sign Out", this is just a guide here to know what your email address is for your Adobe ID. If you can't remember your password, try using this email address in Adobe.com and try and sign in and if you can't remember your password, click the button that says, "Send me out a new password". Once you've got that, sign in to your app. From there, one or two things needs to happen, you need to either have it connected like I have to your plug, this is just a plug that comes via charger, plug it into your computer and use that to connect it up; or you can use Wi-Fi without the plug. Now, using Wi-Fi just means that this phone needs to be connected to the same router that your computer is, they need to be hooked up to the same network and then it'll work wirelessly. Now what we need to do, is we need to have our Device Preview open. You can see it here, this little icon. If you can't see it there, it's under Window and it's called Device Preview. Now if they're both connected up, you'll see on your screen, it will have the name of your phone and on your app it'll have here that you're connected. Next thing to do, is to make sure you have our file open on Photoshop. I'm going to open up the file that we're going to be using or creating during this course, that is the final version. You can see here on my phone, it's all being displayed. Now the really nice thing here, it's that it's usable, I can scroll through it and see what all the design looks like on this phone. It's independent of Photoshop. You can see it's not doing anything, but it's displaying here. Now, a really nice thing is that it's dynamic, which means that when I update something in Photoshop it's going to instantly update on my phone without me doing anything, so watch this. I've noticed on my phone that both BYOL and the Navigation Bar is quite big, so what I'm going to do is I'm going to make it smaller. I'm going to zoom in on this top part here. You'll notice if I find my navigation and I make it nice and small, you'll see if I grab my navigation and I make it a bit smaller, click "Enter", you'll notice very quickly that it's updating on the phone, takes about a second or two, but totally usable. Same thing with this Bring Your Laptop here, the font is too big. Grab the Font, make it smaller, let's turn it down to something like 45, move along, move around and you'll notice that it updates as I'm moving around with about a second or two delay. Let's say the same for this text here. This white text here looks a little small on my mobile device, so I'm going to grab the Type Tool, I'll select it all and I'll move it from 16, bump it up to say 18 and you'll notice in my phone it'll update automatically. A couple things you can do with the Device Preview, is if you click it once, at the top here there's a drop down and it means you can shuffle through the different art boards you've got. For me it's not that useful because I've got the different Artboards are tablet and desktop and it's interesting to see it down on the slides, but not really going to help me my workflow. What was really good for, is say you're developing an app or say you're at that concept stage for mobile and you've got a couple of different versions. That means you can toggle through and click the different Artboards to see them in comparison to each other. One thing to note as well, is that you don't actually have to have Artboard set up in Photoshop for this to work, you can open up any old file and it will load up in the app. Now, I'm the first one in when there's any tech that connects my phone and my computer and does demoing and stuff and often they don't work very well and I'll struggle along with them for quite a bit of time, but this particular one, Adobe Preview is brilliant. It works, it's quick, and it really does help my workflow. Now, if you're designing for mobile and tablet, now you should be using something like this throughout your build because so many designers wait till right at the end, so the website is actually built before they really get down and test what it's going to do on mobile and tablet, and that's far too far along the design process to be doing something like that. Be testing, have it open, have it on the whole time so you can see and review as you go along. Now, probably the most important thing to remember when using Adobe Preview is to make sure that you connect up a couple of phones, a couple of iPads, you pin them all around your screen here to make it look like you're super important and also it'll look like you're working on the Minority Report, like Tom Cruise, moving things around, swiping them around and it'll totally impress your colleagues. All right, that's it for Adobe Preview. 18. What is technically possible in web design: In this video we're going to look at ways that we can help ourselves when we're building our site after Photoshop. In Photoshop we have an infinite amount of things we could do. We could have a great theme with a drop shadow with unicorns flying out of it and fire and all things. We can do that in Photoshop, that's that kind of program but when it comes to Web design we're quite limited in terms of the types of things we can put on a website down to its code, and mainly comes down to the browsers and how old the browsers are depending on what they can and can't support. Flying unicorns, no, there's no CSS feature for that but there are features for gradients and drop shadows. What we can do is we can use this website called caniuse.com. Now there are other sites like this one. I really like this site, and let's say we want to work with gradients. If I type in gradient here it tells me that the CSS gradient works on everything except Opera Mini. Now if you need to support Opera Mini then you're going to have to think twice about using CSS gradients, luckily gradients are out at the moment and it's all about flat design. But say you need to have a gradient that if you have to support this Opera Mini, then you'll going to have to not use CSS gradients. Another thing that you might need to find out whether you have to support some older browsers. If you're building a website and the rule is we have to support at least a minimum of Internet Explorer 9, you are not going to be having CSS gradients. Now, it doesn't mean you can't use it, it just means they're not going to appear. You might design it so that if the gradient is not applied, that there is just a flat background color and that might be fine because it's in the background it's not a huge important part of it. Let's say something like, let's look at shadows. There's couple of different shadows, box-shadow. Box-shadows, they're shadows that hang off the sides of div tags that works pretty consistently. Let's look at text-shadows. It's not supported in IE9 again. Now this might be more important because you might be deciding that I'm going to have this very light blue text on this white background but it's totally not readable unless there's a drop shadow behind it. You're relying on that drop shadow for the text to be read. What that'll do is that Internet Explorer 9 is going to be this really faded out text on white background so it's a little bit more important. Just to have a look at this site sometimes you're thinking, I wonder if I can do that on a website or not. This Can I Use. Now, another nice little extra for the site is here. It's to take that I'm in Ireland that's where I'm filming at the moment. If I click "Import" it gives me this nice stuff. At the moment by default it gave me the global stuff and now it gives me actually what's happening in Ireland. You can see globally that it is 90 percent supported but in Ireland it's 97 percent supported. Global takes into all countries whereas Ireland technologically quite modern so a lot more is going to be supported, quite modern browsers and modern computers. Now if you were doing a site that is specifically for say a developing nation you're going to have a different ratio here. You're going to have a lot lower. You're not going to be able to use some of these features as much as say we came here in Ireland. All right, and that's the Can I Use website. 19. Using art boards: Hi. In this video we're going to look at Artboards. Artboards is a new feature that came out in Photoshop CC 2015. Now if you're using later version, it's going to work fine. If you're using an earlier version though, there was no such thing as art boards in 2014. What you're going to have to do is, you're going to have to use just separate pages. But if you are using my version or later, essentially all they are is a way of having multiple pages on the one document rather than separating them into separate Photoshop documents. To do it, let's go to File, let's go to New and let's pick Art Board from the New Document window and let's put in our widths that we discussed earlier in terms of the physical sizes of our, let's start with our desktop view. Our desktop is going to be 960 pixels, now the height doesn't really matter because websites change height depending on what the content is. I'm going to put in, let's say 1500 and click Okay. This is my first Artboard. It's called Artboard one and you can see my layers here. It's a slightly new one. If you're used to using Photoshop before, there's a slightly new grouping system with art boards. So I'm going to double-click art board one to rename it. This one's going to be called desktop, and it's going to be 960 pixels wide. Great. You can see the name changes along the top here. To add another view, so let's all work on a tablet view next. There's a couple different ways of doing it. The easiest way I've found is using Layer, New, and using this one, that says art board. This one's going to be called Tablets, and it's going to be 720 pixels wide. I'm going to make sure it says 720 pixels down here and use the same height. Click Okay, and it slips it next to it there. The last view we're going to do is the mobile view. We're going to go along to Layer, New. We're going to go to art board and we're going to pick mobile and this one is going to be 360 pixels. That's just the name along the top there. I need to actually change the pixels down the bottom here and we use the same height and we'll click Okay. So we've got tablet view, desktop view, and mobile view all next to each other. Now, where it becomes quite useful is when you start designing across all three and you want to make sure they're all consistent. Let's say that I'm going to use my rectangle tool. I'm going to pick a swatch color in here, any random color and not that color. One of the big perks for using art boards is the fact that I can draw something that's actually quite far over the edge here. You see it's quite at the edge here and I let go, you see it crops it down to my desktop view. It's a nice little feature. Now the next thing I'm going to do is I want the same. Let's say this is my nav bar. So I'm going to double-click this as my big navigation bar along the top. I've double-clicked the name down the bottom and renamed it. I now want to move it across. Now I'm going to switch back to the Move Tool, it defaults to this Artboard tool quite a bit when you're working with Artboards. I moved the Move Tool and what I'd like to do is I'm going to duplicate nav bar. I'm going to right-click it and click the one that says duplicate. I'm going to call it Nav Bar. I've got two of them now, I'm going to use the Move Tool and I'm going to click hold and drag it across the tablet. What can happen when you're dragging it, I'll undo that just to show you again, is I'm going to drag nav bar cross. Initially, it doesn't actually move across. Sometimes you got to give them a bit of a wiggle, just to get it to appear in the tablet view, then I can let go and it's in there. You can see now that there's nav bar in my desktop view, and I've got it in my tablet view. So, the last one, I'm going to duplicate it again. Duplicate Layer, I'm going to call it nav bar and in the mobile view, I'm going to click hold and drag it, and then give it a wiggle and it'll appear on my mobile view. Now you can see the benefits for this. I'm going to pop them in there and if you're working on a separate documents and you have to switch between them, it's really hard to know, is it the same color? Is it lined up the same way? Is it looking consistent across all the different views and art boards is a really nice little new perk for Photoshop. And that is Artboards. 20. What about page heights: When we started creating our artboards, we all made them a height of I think 1500 pixels high. Now let's look at my final version here and you'll notice that, say my desktop view here versus my mobile. My mobile was a lot longer and my desktop view is actually longer than what I've originally done now as well. So as you're working along, you're going to end up changing the height of your website quite a bit to accommodate the content that you're going to add in there. What you don't know yet, so it's going to change as you go along. Now to change these heights as you go, you want to use the artboard tool. To find the artboard told, you click and hold down the move tool and there it is. There's my artboard tool. Now to slick to say my desktop to make it longer by clicking the middle, it doesn't really work, right? I got to click on this edge here and make it a little longer. So click on the edge, you get the artboard and I can drag it down, and that's it. Okay, that's made my desktop view that much longer. You can obviously contract it as well. Now these little handles will stay on the outside and until you've slick on anything else other than this high level artboard here, click on my Nav bar and they will disappear. Obviously, you can do it for any of the pages. I can then go to my artboard tool, make sure I click on the edge here of my mobile device and I can make this say a lot longer as I'm working, I'm going to finish, click on anything else inside my layers and those little transform windows will be gone. All right, that's how you resize your webpage using the artboard tool. 21. Page guides, columns & rulers: When you're working with a responsive layout in Photoshop, I used the term column grids and guides a lot interchangeably. Because the overall term is called a grid, but really when you're looking at them, they're just columns. To define those columns in Photoshop, we use guides. Confusing? Yes, kind of. All right. Let's have a look at the finished version of this one. You can see here, these little blue lines, these light blue lines are guides and they help me make up my columns in my responsive layout. If I go back to my empty document, how to make a guide? How do you make your own guide? Just go to View, and you got to make sure something called the rulers is turned on. What you'll notice is, on the sides here, the top and the bottom, that these little rulers are repeated. What we can do is anywhere in this area, here we can click hold, drag, drag, drag, drag, drag. That would dump a guide on our layout. We jump once from the top as well. What will happen is when you're working with the downloaded template that I've given you, is that you might need to move them or turn them off or lock them. Let's look at that. By default, your template is probably locked. The guides on your template is probably locked. That's because I didn't want you to go and wreck the guides. But if you want to move them around or lock them or unlock them, go to View, get onto Lock Guides. What that means is that I won't be able to move these. I won't be able to move them much. They are all stuck there. If I want to unlock them, I untick this. Then because it changes a little bit, and I can move them around afterwards. Say there's a guide that I don't need anymore. What you can do is you can select it. To delete it, you click hold and drag it. You just drag it back into the ruler where you got it and it disappears forever. I'm going to delete that one and go back over there. When you are working though, you'll notice on, say this one here, those guides can be quite distracting. Helpful when you're first laying out, but quite distracting later on. What you can do is turn them on and off. Go to View, there's one under Show, and it's this one here called Guides. Now, you see this [inaudible] here, it's Command and Semicolon or Control Semicolon on a PC. [inaudible] quite a bit. When I'm working, I'm heading Command Semicolon on and off to turn them on and off when I'm working, because it's a lot easier to see and get a bit of a visual going without the guides. But structurally, the guides go out full. This will [inaudible] on how to create, modify, and delete guides. 22. Picking website colors: In this video, we're going to look at using color. Now you can attack color from a couple of ways. When you're drawing your boxes and coloring things in, you can use this little color panel here. What you do is you drag this up and down to get the hue. Then we move this little circle around by clicking and dragging it to pick the color. You'll notice that in the front here is my foreground color. There it is down here as well. If I got my type tool, can see here? It'll use the same color. If I use my rectangle tool, it'll use whatever's in that foreground color, because watch this, I can change it and all of these things would change at the same time and I can start drawing things and making color. To get a little bit more technical, if you are working on a brand of a company that has specific colors, you'll need to enter these, and you can do these by creating what's called a swatch. To do a swatch, first we'll go a color, and what we're going to do is, instead of dragging things around, what we're going to do is double-click the swatch here and we're going to type it in. If you're working with a brand that has existing colors, you can type in the details that you know. If you know the RGB color, you can type it in, say zero, say it's 200, and 220, it's going to give me this color, light blue, so I know exactly that that's the right color. You might also get this number down here next to the hashes, the hexadecimal number. So you might get to type this in, and it can be three or six digits, depending on what you're given. Now both work. If you're given the CMYK details, you can pop them in here as well. To pick this color, say we've got this magic swatch that we need, we can click this one that says "Add to swatches". We give it a name and let's call this one the example blue. What you'll notice is I'll click "Okay", is in my swatches panel right down the bottom of this list here. Now there is this color here called example blue that I can reuse over and over again. Say if I switch to another color because I'm using it and it's going to this pink, purpley color, if I get my type tool now and I need to make some type that is blue, I just got to make sure that I click on "Blue" before I start typing and it will change it. If I need to change it afterwards, I can select the type and then pick any swatch in here, and it will change once I go back to the move tool. Great. For the people that aren't following a real big guide for colors and you're able to pick your own colors, you obviously can pick your own, but sometimes you can get caught up not knowing which color to pick, what works with what. So what you can do is use something called Adobe Color. Now it's built into Photoshop. Let's go to Window, down to extensions, and this one called Adobe Color themes. Open it up, you need to be connected to the net, and you need to be signed into your Creative Cloud account. Once you're in here, and this is one here could explore. For inspiration, I like to go to this one that says most popular, and this is the one that's being most used by people through this little system here. Quite often to the top here is a nice group of five colors that you can use to lay out your website. As part of daily color themes, you can go and upload your own swatches as well. So if you've created a corporate theme and you want to share it with other designers throughout the business, what you can do is you can upload them to color themes. I won't cover it in this tutorial, but you can upload your own swatches to this Adobe Color themes. What I've done for you, if you type in B-Y-O-L, hit "Enter", you'll find the colors that I'm using in this tutorial that you can download and use. Now, to download them and add them to your swatches, swatches versus Actions here, drop this down, and said, "Add to my swatches", and you'll see them. They all appear just from the bottom here of my swatches panel. What you'll also see is, can you see they've been added to my library here? If you're using an earlier version of Photoshop, this first part will work, but this library's option won't be, we're in 2015, this library option's a really great way to pick colors. So I'm going to pop that in and we all should be working off these colors now. Obviously through the store, you can pick your own colors, but if you want to follow along exactly, that's the way to do it. 23. Adding structure to your site with the vector shapes: All right, in this tutorial we're going to mock up some of the big kind of structured areas using the rectangle tool. The rectangle tool, for the people that are web designers, know that it creates essentially div tags that you can pull the style and size and colors and things from later on. You've got to make sure you're using this rectangle tool here. If you can't find the rectangle tool, click, hold, drag it down and you might find the last two U using the ellipse tool, you might have to hold it down and grab the Rectangle tool. What we're going to do, is if you're following along using my template, I'm going to, there's an option here, it says called Delete Me. I am going to actually delete that because it gets rid of these little green boxes. That's my little advertising bits there. I'm going to bin him and I'm going to zoom in a little bit, command plus and I'm going to zoom in so I can see the edges of my desktop view. What I'm going to do is, I'm going to start creating. Okay. So my first box is going to be my big kind of main hero image and I'm going to use this purple here, so I'm going to click that or pick it from this swatches panel, and I'm going to click hold and drag. What you'll notice is that I can drag over the edges, it's my problem and at rest, the edges there. If yours is got the wrong color like mine has, its remembered the last color even though my foreground color says be this lovely new Bring Your Own Laptop Purple. What you can do is, just click on it again and it will draw and change, or if I go to undo, I can click up here and pick the color from my swatches panel. Great. That's going to be my big kind of hero graphic image. What am going to do now, is I'm going to add my nav bar. So I'll use the rectangle tool again and I'm going to click hold and drag over the top here and I'm guessing a little bit. This is going to be my navigation bar. What I want to do is fill it with black. Black is somewhere in the top of your swatches here and or you can use it from up here. I'll pick this as my foreground color. Great, so that's going to be my navigation panel. What we're going to do in the end, is we're going to have an image underneath the navigation that we can still see. What we're going to do is, we're going to have this nav bar selected. The way I know it's selected, I can see it here in my layers part. What I'm going to do is double-click the word rectangle and call this one, nav bar. I'll call this one here, Hero Graphic. On the nav bar here, I've got this one called opacity. If I lower the opacity a little bit, I'm maybe down to about 80%. What you'll notice, is that if I lower it right down, can you see it's actually quite transparent over the top of the background and that's up to you and how much see through you want it to be. We'll change it probably later on when we get our image underneath, but for the moment, that's how you change the opacity of any of your rectangles. Next thing I'm going to do is, I'm going to shuffle across here. For this tutorial, we're going to skip tablet just so that the tutorial's not 10 hours long. I'm going to do a mobile version. On mobile, how I know am on mobile, you can see him here in my layers panel, is the extra small version. I'm going to go into this and delete where my name and my website is, delete that, we don't need that. What we're going to do though is we're going to zoom out. So I'm going to close that, pop it in, zoom out a little bit. What I want to do is take these rectangles and move them across. I'm going to switch to my move tool. I'm going to use my trick we learned in early video, about holding the command down. I'm going to click the rectangle which is my nav bar and I'm going to drag it across holding the O key and what the O key member dragging that will do, is it will make a copy as it moves across. To get it in the right function and the right bit, you might have to give a little wiggle but it looks like it's perfectly lined up. Correct. I'm going to move this one across as well so this purple one here holding [inaudible] key down. It's selected the hero graphic. Hold the O key and drag it across and I'm going to move it so it lines up perfectly. Great. Got a slight problem where the hero graphic is above the nav bar. All we need to do is, to change the order of this as click Hold and Drag the hero underneath the Nav. Okay, so I've got my desktop and my mobile view with my two rectangles. These rectangles are going to be used as the structure or the div tags for my website. 24. Production video - adding structure to your web design: In this video, we looked at the basics of our rectangle tool to create the structured boxes for our website. What we're going to do now is do a bit of a session where I go through and add all the boxes. You can watch us at double speed or skip it if you want to. What I'm going to do is I've got my first box here. What I'm going to do is just duplicate this box over and over again for the different areas. I'm going to use my trick to select it, Hero Graphic. I'm going to hold down Alt and drag it down. I'm going to hold Shift at the same time, and it snaps it all the way underneath. With this graphic here, I'm going to call this one. I'm going to open up this tool here, my Properties panel. I'm going to pick this one. This is kind of peachy color. This one, that's going to be called the Box - Who we are. I add box to the front just to make it clear from a distance. What. I'm looking at the structured boxes. I'm going to do the same thing with this one. I'm going to drag him underneath, and he's in Properties panel. Here's the dark purple, and here's box. Here's the services box. I'm going to hold him down, drag him down, and he is going to be the box for our portfolio. We've run out of the edge of our pages. Let's change the color of him first actually. Here's that color. Now, we've run on to the edge. What we can do, remember, is grab our Artboard tool, make sure we select on the desktop version, and I'm going to drag it down. Now, how far to drag it down. I'll zoom that a little bit. Who knows at the beginning? It's not until you get all your content on it you know how big it's going to be. I'm going to oversize it for the moment, make it nice and big. Then going to go back into my Move tool, I'm going to click on him, is the box portfolio, and I'm going to hold down the Alt key, drag it underneath. Actually, this chunk in here is going to be a big white area. It's got to have my people or team area. This last bit here is going to be the green. This one here is going to be called my Contact Form. Then just underneath it, drag it down, I'm going to have this last one is one of the non-official colors, like a dark gray for my footer. Now, it's a little big, so what I'm going to use as my Transform tool, so Command T, remember. Command T. I'll make it a little smaller. That's going to be my footer. Now I have a rough idea of the page height. I'm going to suck it backup using the Artboard tool, click on this top one here, and it should snap to the bottom there. Back to the Move tool when you're finished. Now that I've got a desktop done, I could move everything across to my mobile version and start laying that one up. What I find, it's a lot easier to work on one and then once you've completed one and finished and looked all the bugs out of one of the views, is to then start on, say, the next one, and then work in to mobile. Now, a lot of people who start with mobile first, if that's the priority for their website, it's definitely the way to go. There's definitely a lot more challenges getting everything ready for mobile. For me, primarily my sites are being used as desktop, so I start with desktop. 25. Expanding & fixed width text boxes in Photoshop: In this video, we're going to look at type or text. First thing we need to do is grab the Type tool and then we're going to look out for a couple of things. There's some shapes that the cursor can change into that you want to be aware of. By default, it's this square here, and that is great. Watch what happens to the cursor changes when I get in front of this box because I have the hieroglyphic selected here, it changes to the circle around it. This other one, which is the dotted line. Now, this is really what I'm looking for. I want to dump a bit of ticks on a layer by itself that I can move around and work on. If I click on this "Layer", what it's going to do is, it's going to turn my rectangle, my hieroglyphic, into a shape box for it to fit inside. Watch this. If I click "Inside", it's going to keep typing, and it's going to use the edges of this box, which can be a little confusing when you're new. To get out that I'm going to hit "Escape". That'll get rid of my text. So what I want to do is either have something else selected, like the Nav Bar, then it's nothing selected or just type the type lower and move it in when you're finished. So what I'm going to do is just have the overall art board selected and that'll let me type anywhere using the square cursor, and I'm going to show you two ways of applying text. One is an expandable text box and one is a fixed width. So expandable means that I can type something and you'll see that it keeps on going forever. It will just keep stretching off to the right there. Now, another way of doing it, I'm going to hit "Escape" on my keyboard, gets rid of that text and is to click "Hold" and drag of that text. What that means is that it'll fix width. That means that when I get to the edge, it will break onto two lines or as many lines that will fit. So this is the two boxes we're going to use when we're working with Photoshop. So the first one we're going to do is, I'm going to hit "Escape" again. I'm going to click once and I'm going to type in our logo. That's going to be capital B-Y-O-L. I'm going to move it using my move tool into the Nav Bar here. If you're finding its hidden where you can't see it, it's probably because it's on a lower layer. To move the layers, you click "Hold" and drag it above to where you need it to be. To change the font, it's nice and easy. Make sure you're on the Type tool. Make sure you're on your Type Layer and play around with the fonts in here. Now, if yours is not set to pixels and set to points, you might need to go and change that in your preferences, which is in an earlier video. So there's two ways of doing it. You can use the drop-down and pick some of these sizes. Now, I find quite useful is actually dragging this one here, can you see if I hover above this icon here, click it, drag it right or left, you can see the font changes depending on where you dragging. Right to go higher, left to go lower. Let's say I'm going to pick 40 for the moment, you can type it in. So let's say, I pick 40 pixels in the moment, and I'm going to use the move tool and move it in here. To change the color of the text, I'm going to make sure I'm on my Type tool, I make sure I'm on my layer I've got selected, here's my type layer, and up here is where the font color is. I click this, I'm going to click "Hold" and drag this around to pick the color I want. I want white, so I'm going to drag it all the way into the top left corner, you can see I dragged it past where it needs to go, so it gets more joined up in the corner there. Definitely set to white, fff. Click "Okay". If you want to use one of your special swatches, what you do is you click on this and over here you can see the eyedropper appears and he will pick the color that you need from the swatches. I'm going to go back and pick white and click "Okay". 26. How to design using web safe fonts via Google fonts: The next thing we're going to do is look at changing our fonts. Now, by default, old-school web design, you only had some really basic fonts to pick from, like Arial, and Georgia, and Times. What we can do now though, is we can pick a huge variety of fonts now. There's a couple of methods to do it. Probably the most common one to do is something called Google Fonts and that's what we'll do in here because it's quick, it's easy, it's free. You can also use Typekit, or Adobe Edge Web Fonts, or Squirrel Fonts. There's a lot of different ways of [inaudible] fonts onto both your desktop mock up and through to your website. The big thing to know then is that not all fonts that you have on your machine will convert and be able to be used online. So the way to check is to use a service like Google Fonts to find a font that you want to use. So let's do that. Let's switch out to Google fonts. So google.com/fonts. Google have got a whole lot of commercial use fonts that we get to use. What I'm going to do is I'm going to look for a font. So I'm going to use preview text of BYOL, because that's the font that I'm looking for. I'm going to go through and pick a font. Now, I'm going to use Roboto as my body copy font. There's another one called Roboto Slab that I'll use for my headings. To be able to use these web fonts on your desktop via Photoshop, that they can later then be used on your website, what you need to do is pick on one of them, click "Add to collection." I'm going to use another font. I'm going to type in Roboto here. There is another one of font called Roboto Slab that I want to use and I'm going to add that to collection. So I got two added to my collection, the normal one, normal Roboto and this Roboto slab. Now, what we're going to do is click "Use." Now, let's just pick the basics, the normal version. What I want is I want a light version and I'd like a bold version. I'd like this one here, a light version. A light version and a bold version. Now, the more fonts you add, you could add all of these and download them. That's totally fine for while you're working on your Photoshop mock up. But what will happen is, if they all have to be used on your website, it's going to make the page load a little slow. As you can see over here exactly here, Google is giving me a little speed counter, knowing that the one's I've got is in the green area, as in it'll load fast enough. If you start getting to orange, it's going to slow it right down, and red is way too many fonts downloaded for a page, and it's going to impact your page load time too much. Once you've got them, what we're going to do is we're going to download them to use on our machine. To do that, there's this little arrow at the top here. Here's a little Download button. I'm going to download this collection as a Zip file, and I'm going to stick it onto my Desktop. Now, for you guys, if you want to follow along, I've already got the fonts ready for you go and downloaded already in the exercise files. So download the exercise files and you should find them in the fonts folder. Now, to install the fonts on your machine, it depends if you're on a Mac or PC. Essentially, they're the same. If you've got a modern PC, or a modern Mac, you simply just double-click the fonts and they will install. So this is the font that I just downloaded from Google Fonts. If you're looking for the same things, they're all in here, in your example files, if you don't want to go through the hassle of downloading these. I'm going to double-click the Zip file, it opens it up. Here's my little fonts folder and here the two groups of fonts. I'm going to twirl that down. What I want to do is I'm going to select all of these, and I'm going to double-click them. Then I click "Install." My little Mac is going to chugs away and install all of these fonts here. Might have come up with an error now just to say that the already installed, because I've done it previously before this tutorial. Yours won't have them. Close down my fonts folder. I'll have to do the same for Roboto Slab. Select all of these, double-click them, and they'll all install. Now, on a PC, it's a really similar process. If you're unsure how to install them on your machine, either drop me a message or have a little Google and see how you can install them on your machine. Now, let's have a look in Photoshop now. The good thing about Photoshop is you won't have to restart it, or restart your machine, or anything like that, Photoshop will pick up your new fonts. You can see here is my Roboto fonts, and they're ready to start being used in my design. Knowing because we use Google Fonts, it's a font that we can use online for our website in the end. 27. Place holder text with Lorem Ipsum: This video we're going to look at something called Lorem Ipsum. All of the time when you are designing a website, maybe the text isn't written, or it's being written at the same time. It's quite often you have to put in dummy text or place holder text. What people tend to do is use something called Lorem Ipsum, and it's built into Photoshop so we can add that. I'm going to zoom in on my desktop and around. What I'm going to do is I'm going to put in a fixed width box, and I want it to match my column song, and I go to "View", and turn on my "Show", "Guides". Zoom out a little bit. I wanted to expand across maybe four of these in the middle, maybe six. I'm going to grab the type tool, and then click hold and drag. I'm going to add a type box that spans six of my columns. I'm going to pick an appropriate font size and maybe 16 pixels. What I want to do is go to "Type" and I'm going to go to "Paste Lorem Ipsum". Essentially, what it does is just dumps in a mixed up bit of Latin words. There are actual Latin words, but they don't mean anything in the flow of texts there. It's a good quick way to dump in lots of extra texts. What you will notice though is that the box is over six. It means that there's more texts is a little kind, a little plus you can't really see down the bottom corner here. But know that if I delete this, can you see there's lots of extra stuff over the edges. Depending on how much you need, you might have to delete some of them. You can't really dump in a set amount, it just dumps in a predefined amount. 28. Production video - adding all of our text: This is a process video, so I'm going to go through and start styling my website. First of all, the Bring Your Own Laptop layer here, the logo. You've got a logo, obviously, you'll be dimming in the company logo.. What I'm going to do is I'm going to have this guy sitting next to this column here. Now, if you are moving things around and it tries to snap to too many things, it snapped to the other guide there okay, you can use your left and right arrow keys on your keyboard just a tap things along and get them in the right place. I'm going to pick a font. With the layer selected, grab the type tool. I'm going to use my Roboto. I'm going to use the slab one, I'll use the bold version for this. What is the font size? There's no guaranteed font size. I'm going to use this one here, tap it down a little bit using my arrow keys. Now I'm going to look at adding my navigation panel, which is over here. I'm going to grab the type tool, I'm going to get it so it spans. We've got a lot of room to work with, so I'm going to get it so it spans that column all the way long. How many is that? About nine columns. Inside here, I'm going to zoom in a little bit and I'm going to type in home. If, like me, you can't see your text and its disappeared, it's because the font's actually really big. Remember the font from the last thing we were doing? That's why I expand it out here. Here, there he is. But if he is small and you can't see him because the text box is too small, just expand the box out, select all the text and make it an appropriate size. I'm going to put mine down to 12, actually, maybe 16 pixels for the moment, and then I can move it back up again so I can see it. For the text here, I'm going to use capitals. This first one here is going to be SERVICES, then I'm going to put a space between them. I'm going to put two tabs in between mine. The next one's going to be PORTFOLIO, two tabs. Now, in terms of should I be using tabs or spaces or should they be in separate boxes, it really doesn't matter because this is just a visual. When it comes to web design, they'll have to be separated properly, but for the moment, it's up to you what you use to space them out. Now maybe lets go 1, 2, 3, 4, 5, 6, 7, 8, 9, 10. I'm going to copy that, select through copy it so I know that the spacing here is exactly 10. Then I am going to use TEAM, put the same spacing in, and then we're going to have a CONTACTUS. What I also want to do is I'm going to select all this text and I'm going to make it up the top here to be left aligned so it's always left aligned along that column grid there. Font size is fine, but the font style I'm going to switch back to our plain old Roboto. I'm going to select this text here, type in Roboto, and now I'm just going to use medium for the moment. I'm going to turn my grids off using Command, semicolon. To get a sense of it I'm going to zoom out a little bit. I don't like the text. Instead of medium, I'm going to pick the light version. I like that nicer. Now, next thing we are going to look at, we're going to put a big headline above this piece of lorem ipsum here. I'm going to find the lorem ipsum in my menu, drag it down. I am going to use my type tool. I am going to draw a fixed width box because I want it to sit inside of here. Even when you're dragging out text boxes, you should use the grids to line things up, using these columns, just that it makes it a lot easier when it comes to development time. What is this one? I'm going to make sure it's centered. This one's going to be, Let's Make This Awesome. Selecting the text, make it a nice size. When I say nice, appropriate for this one, a nice, big, super graphic. I'm going to pick Roboto, and I'll use the slab. I'll use thin for this one here. In terms of color, I'm going to use one of my swatches that I use. Down the bottom here, I'm going to use this color here. How to do it, with it selected, I've clicked on "Swatch" here and that switched the color out. I'm going to turn my guides off. I'm going to move that down. This text here, I'd like it to be centered as well. I'm going go to grab my type tool, click inside of it, and I'm going to make you centered. If you're finding problems with this hyphenation, what you can do is you can click this icon here, which will bring up your Character panel, you can switch to Paragraph and turn hyphenate off, if you are having trouble with hyphenation. I hate hyphenation. Popping back in. Let's just say, for this bit of text, it's actually only going to be three lines. I'm going to try and get the copywriter to work three lines for this one, and I'm going to move him up a little bit, grab "Let's Make" down. Actually, one little bit I've forgotten is I'm going to add a nice, big call-to-action button here. I'm going to my type tool and I'm going to click once, and this one's going to be called the More, I have a plus. What text am I going to pick? I'm going to make it a little smaller, maybe about 30. I'm going to make it a lot heavier, bold. I'm going to make it white, place the thing up here. I'm going to grab my rectangle tool. It's going to be above this guy, but we can change the layers in a second. But what I want to do is turn my guides on, Command, colon. I'm going to get this one to be snapped between these two center ones. What color is it going to be? I'm going to pick my green. I want to make sure More is above that rectangle. I'm going to give this rectangle a name and call this one BT, so I know it's a button. This one's going to be the More button. I am going to grab my More text, grab my move tool and move it around. Remember, if you can't get in the line, just use your cursor to move it around. Everything needs to be moved up a little bit. To do that, I can hold down my Command key and I've got more selected already. Hold down Command key, click button "More". Let's make this Awesome and Loren ipsum. Those are the four parts I want to move, and I'm going to click and drag it up. Remember, if you're unsure about if it snaps to the wrong points, maybe you can just use your arrow key just to tap it up and tap it down. Turn my guides off. We're almost there. That More is a bit big. Let's grab back my More layer, grab my type tool, turn it down to 24. Nice. Move it up a tad, there we go. 29. Adjusting your page edges: Before we get into images, I'm going to show you, I find it tough to work to the exact measurement size, the 690 pixels wide. That's exactly what we should be working too, but I need to see a little buffer around the edges here, a little bit of aging just to see what it's like when it's sitting inside of a bigger screen. To do that, I'm going to grab the Artboard tool hiding underneath the Move tool. I'm going to click on this one here where it says LG Desktop, and I'm going to scroll down until I get to the middle, but I'm going to drag this a little bit. Drag that a bit. It doesn't really matter how far, because what's going to happen is if I turn my guides back on, you'll see the guide to still where they should be. They're still that 960 wide including the padding on the outside. Next thing we need to do is we've got a lot of boxes in here aren't the right size. What I'm going to do is I'm going to scroll down and find my Nav Bar. I'm going to hold command key down on my Mac or control key on a PC, and select all of the boxes that I need to go and change. There is the footer. I'm going to zoom out quite a bit so I can see everything, and what I'm going to do is I'm going to use my transformed tools remember command T on the Mac and control T on a PC. Then I'm going to drag these out to match the sides of all done Alt, it'll drag both sides with me evenly, okay. Just make sure they're overlapping a bit over the edge there. When you're finished, hit Enter on your keyboard, and just gives us a bit more breathing room. I'm going to turn our guides off, which is still perfect. I'm going too zoom in a bit. This is just going to give me a little breathing room around the outside before I start working on the next part. 30. Where to get commercial use free images: In this video, we're going to look at where to get images from. Now when you're doing you concepts, you might be say you're working for yourself and you don't have a budget for paid imagery or to get a photographer to work, you can find free images, commercial use stock images. This is probably the best site here it's called freeimages.com. Now, if I want an image say of bricks, did I spell it right? You'll find loads of free images for bricks. Now you got to be careful that these ones over here, well, not careful, these ones over here are paid ones. So these always look very pretty and sexy, but these ones are downloaded from iStock. But you've got to pay. The prices are reasonable, but if you want free, we need these ones over here. What I like to do is not relevancy, but probably most downloaded tends to be the ones that come to the top are the ones that are better shot, better quality, maybe ones that you might want to use more. You'll have to login to download them and buy them. Say that you do want this with a brick look. Okay. You can download them, and depending on the size that they're originally uploaded, you can download them. So you'll have to sign in and download it. It's free to sign in and it's a great way to get free stock images. Now if you want paid images, iStock is probably the best place to go. There's lots of competitors to iStock. Adobe have their own one at the moment called adobe.stock, but this one here is a real typical one to use for lots of people. So far on bricks in here, you'll find the quality is a lot better, you will find the resolution is quite higher than the free image. Now say that I want this brick work here, I've decided that's the background that I want to use. It will come up with how many credits is going to take. This one here is going to cost me three credits. Whereas say if I went to something like this one here, this one here I went to this one is one credit. Okay. Roughly C3 credits is 24 euros. Now if you're in the US, the Euro is about the same at the moment, not exactly, but close enough for comparison. There in budget for most small businesses. So to make it easy, I've downloaded a bunch of free images that you can use for this particular tutorial. So download those if you haven't from the exercise files and we'll get on with importing. 31. Embedding or linking your images?: In this video, we're going to look at how to bring in images. Now, there's many ways of bringing in images from different programs. The easiest ways is to go to File and you've got these two: Place Embedded or Place Linked. Now, we're going to use Place Embedded. It's definitely a better way of working when you are new to web design or new to designing in Photoshop. Linked files can be quite handy if your file size is getting really high. They don't tend to get super high when you're dealing with web design because the resolution is not huge and there's not a lot of detail to some of the effects that you're doing. But let's just have a quick look at the difference. Go to your Photoshop web exercise files. I'm going to open up this one called image books and I'm going to place it in. He comes in, you get to resize him, I'm going to leave him exactly how he came in and hit "Return". Now, you'll see him in my Layers panel here, he's called image books. What's happened though is that it's being put inside this document and will be carried around. If I send somebody my Photoshop document, it's going to come along for the ride. Now, if I do it the other way, if I go to Place Linked, what will happen is the image will come in, it'll look the same, I hit "Enter", I got two images the same. You'll see the icon changes, this one has got a little linking icon. It just means that if I now send this, say, to my designer or my web developer to build, they're not going to have the images unless I send them separately. I'm going to need that image books.JPEG to send along, whereas the embedded one gets stuck in the file and it's a little bit easier to share. The other problem you need to watch out for linked ones like this is if I go to my desktop now and I go and delete image books, you can see in here, there's a little question mark. It means that, hey, I'm freaking out because I've lost that image in here. It'll come up with the error saying, "I can't find it, I don't know where it is." So it is a bit easier at the beginning to use embedded. The reason you'd use linked images is that if you're using that same image over and over again in lots of files. You don't really want to have lots of copies of it everywhere, taking up lots of file size. It also can be we're working on really complex document with lots of embedded images, it can start running really slow. If you got a terrible old laptop that you're using, that's something you might want to consider. For the moment though, I'm going to delete this layer here and leave the one that was embedded. 32. How to mask your image using a clipping mask: In this video, we're going to look at how to use a clipping mask. Now, a clipping mask is a really great way of cropping an image down to use. Let's see what that final product is going to look like. It's the square image here. I'm going to show you how to do that with what's called a clipping mask. First thing is let's turn this eyeball off on our image books layer, and what we do is we start with a rectangle. I'm going to turn my guides back on, Command Colon. I want it to span, say four guides here. I want to be a perfect square, so what I do is I hold down Shift while I'm dragging it, and can you see it locks the height and width along. I'm going to drag it so it fits across these four. Now, it doesn't really matter what color we're going to use at the moment, because clipping mask don't matter that much. I'm going to use my Move tool and I'm going to move it down a little bit. It's in the center of my box, and what I want to do now is, I'm going to pop it in and I'm going to turn my image back on. Now, my image needs to be a bit more of an appropriate size for this square. With a Layer Selector, I'm going to use my Transform Tool, Command T. Well, Control T on a PC and I'm going to holding the Shift Key down on the corners, to lock the height and width. Otherwise, it ends up stretching it and distorting it. I'm going to use the Shift Key down. I'm not too worried that it's going to be perfect around here, I'm going to cropping it in for effect. I'm going to Enter when its transform is done. What I need to do is I need to make sure that the image is above my rectangle. I'm going to rename this rectangle and let's call this ones the Who- Image, so my Who Yeah Page. This underneath, now what I want to do is crop this guy, which is the image about the books to the square. To do it, the easy way is with the image layer selected, hold on the Alt key. Can you see this little icon here with the box with the arrow? This is going to turn top image and bottom image, and join them together and make a clipping mask. You can see what happened in the structure here in the layers, and you can see what's happened over here in my actual image. I'm going to turn my guides off to make it pretty. The beauty of that is that this Who box underneath here and this image, they're actually separate so I can move them around. What I can do is, let's say that the box I want to crop slightly differently and I haven't selected here. Watch this. With my Move tool, I can move it around and you see I can move it around and adjust. It's like a little window. Likewise, the image underneath can be moved around, the box around can be moved around to find where we need to go. Now, what you want to be careful of is, if you want to move them both together, you need to hold Command down and click them both. With them both selected, I can move them around. Now, if you want to move them around permanently together, well, now I'll have to select them both. Is you can right-click these two. After the selected and there's one in here this is Link Layers. You see this linking icon appears, just means that if I have, say my background back selected, and then go back and click just one of these two guys, you can see just one of them selected, they both come along for the ride, because the have been linked. If you need to un-link them, right-click them, and there's one here that says, Unlink Layers. I'll leave my link for the moment. 33. Masking images for rounded corners & circles: This video is the same technique but a slightly different flavor. We're going to look at using a clipping mask, but using circles and rounded corners. Now, see down the bottom here is my finished example. I'm going to do it down the bottom here in this white part, where I've got my team's photographs. What I'm going to do is I'm going to scroll down here using my spacebar. I'm going to zoom in using my command plus. Slowly get down the bottom. I'm going to click hold down the rectangle tool. Click and hold it down until I get to the Ellipse tool. Now, the Ellipse tool, if I click and drag it, it's going to give me ellipse that goes anywhere. Now, if I hold down the Shift key, remember, I locked the high-end width to a size that I need. What I'm going to do is I'm going to turn on my guides and I'm going to delete that. I'm going to draw one that spans, say, three columns. I'm going to hold shift, down and I'm going to get it so it snaps to these three. I'm going to go to my Move tool, I'm going to move it down a little bit. Now, it doesn't really matter what color it is because just like we did the last image, is going to get covered up by the image. Let's go to File and let's go to Place Embedded. We're going to grab the desktop, we'll grab push-up exercise files. This team 1, which is going to be the first one. I'm going to hit Place. Now, I'm going to move it so it's over the top here, and I'm going to hold Shift, scale it down before I hit Enter just to get it to appropriate size. I'm going to move it in roughly about there. We can resize it afterwards. Remember, here's an ellipse, and this one's going to be Team Circle1. I am going to, remember, hold down my Alt key on a PC or Option key on a Mac, and it's going to join the two. If you are unhappy with the crop, remember, I click this one, this is team-1, and I can use my arrow keys just to tap it around to get it to where I want. I can transform it using my Command T. I can scale it up. Hit Enter. Use my keys just to tap it around again. That's how you crop to a circle. I'll quickly do how you crop to a rounded corners. If you are using rounded corners, click and hold down the Rectangle tool or the Ellipse tool, and there's one here called rounded corners. Now, before you get started, pick a radius. If you're unsure, don't worry, you can change it afterwards. I'm going to click and drag. This little box here will allow me to change the radius corners. I'm going to change the radius corners to say something like 30. Big mess of rounded corners. Then I can bring in another image. I can go to File, Place Embedded. I'm going to bring in team 2. Place it over the top, scale it down it, hit Enter. Remember, holding down the Alt key or Option key, depending if you're a Mac or PC, and it will crop to the rounded corners rectangle. That's how to crop to a circle and a rectangle with rounded corners. 34. How to create large background images: In this video, we're going to look at how to make a background image. Now, background images tend to be quite washed out or darkened. At the moment it's quite stylish, and they seem to fill the whole background using 100 percent stretching and covering CSS. Let's look at doing that. I'm going to turn off my guides, I'm going to go to File, Place Embedded, under our PS Web Exercise Files, find the one that says, background-brick-building and bring that one. Now in terms of the size-wise, it's going to fit, but it's not quite big enough. What I'm going to do is I'm going to scale it up. Scaling it up in Photoshop is a terrible thing to do. But I'm going to show you a couple of techniques to hide if it does not speculating. This one's not because it's a reasonably good image and it's scaling up more at about 120 percent, so it's going to be okay. I'm going to click Enter. Next thing I want to do is I want to clip it, so that it's being clipped to this purple box here. I'm going to overlay that one there, and I'm going to find my background's called the Hero image. What I'm going to have to do, is drag it so it's above this box here called Box-Hero Graphic. I'm going to drag it down, scale, scale. Now what you will find is that it can be a bit of a pain to get it to the right part. What you can do is you can collapse these one here, like this library, I haven't used that for a while. I'm going to double-click the tab Libraries, I'm going to double-click the type Swatches, just that my layers are nice and big. I can work on them and it's easier to drag them around. My background-brick-building is above my box here on graphic, and then I'm going to hold down the Option key on a Mac or Alt key on a PC to crop it in. What I'd like to do is, well is actually before I do that, I'm going to undo that, so it is a step backwards. I'm going to turn off this layer, and instead of this being purple, what I'm going to do is I'm going to make it black. With this selected, I'm going to go to this panel here's called the Properties, and I'm going to select black from my colors. I'm going to do this because when I turn this one on, I'm going to make it actually a little bit transparent, so it starts to show the color underneath. Earlier when we did clipping videos, I said it doesn't matter what color the boxes because you're going to use an image on top to clip it. It doesn't really matter. In this case, it is because I'm going to make this slightly transparent. I'm going to hold down Alt or Option, and it's going to crop to this graphic here. This box here, our graphic lab. What I'd like to do though is make this one slightly transparent. Turn the transparency down until it gets to a point where I can start to see the tics quite clearly above it. It's up to you, and it's going to depend on the image you used and how opaque you make it, but just make sure the graphic color underneath it is nice solid black, and it's going to show it through. Obviously, you get down to zero. The image is completely see through and we see the box underneath it, so I'm going to clip it up so it's still visible. What I also want to do to make that background more awesome, is I'd like to make it a little bit blurry. There's lots of different ways of blurring the background, because I don't want to, I like the effect of seeing the old brick building in the background, but I don't want to actually be able to read grains seeds. What I want to do is use Filter. There's lots of things under Blur. There's whole Blur Gallery and there's another Blur Gallery. There's lots of them. Gaussian blurs are really popular one. I like to use this one now called Field Blur. I like Field Blur mainly because it allows me to blur. You can see it's going to go off and do its blur, blur to default of 15 pixels. It's probably a little too strong, so I'm going to turn it down to maybe something like 10. It's going to redraw it. Now you can see it's there, I can see what it is, but I cannot start to read the names very well. The reason I like this is because there is this little option here says Noise. I click on Noise, well, I need to put it appear on here, and I'm going to kick on Mount, and if I click right up, it's going to go a bit crazy, but you'd be able to see what I mean. I'm going to zoom in a bit. Can you see, it's put this noise background, so I will turn noise off, on, off, on. It gives us some low light noise which hides some of the smooth Days of Our Lives effect that it ends up happening. How much you apply is totally up to you and your image. I'm going to apply maybe not that much, turn it down a little bit, 20 percent. It can take a little while to redraw depending on how good your computer is. When you finish, you need to click this one up here that says "Okay". The beautiful thing about using this type of method, is that it's something that's being turned into what's called a Smart Filter. We can turn it on and off. Say a client comes back and says, "I like it, but it's not blurry enough or too blurry." What you can do is you can double-click the word Blur Gallery, go back in and sanctioning or turn it down a little bit to maybe six. I'm going to turn the grain up a little bit to 40, and then click "Okay". It's totally reusable when you've used the technique that we've done in this course here. Now that's how to make an awesome background where we used a bit of opacity to show through the box underneath, we also used a better blur and a better noise to push it into the background. 35. Production video - adding our images: Welcome to the image production video, where I'm going to go through a few of the manual things or monotonous things. I've got my first circle. What I want to do is make two other circles and then I want to get rid of those rounded corners. First of all, I'll use my trick by Command or Control clicking the layer, that's my guy here. What I want to do is I want to bend that layer, get a rounded corner layer, I've got my team 2. Now, I want to use the same circle size. If I grab this team circle1 and I right-click it and go to duplicate. I'm going to call it team circle2, it's going to wreck it. Why? Because this team circle2 has appeared in between that clipping mask that I had. It's split it apart and wrecked it all. What I need to do is move that guy back down and join them back up by holding down the Alt key on a PC or Option key on the Mac and click these two again to get my clipping mask. Now, this team circle2, and he is here sitting right over the top. What I'm going to do is use my Move tool, hold down Shift so it drags straight and I'm going to drag it, so it's about in the center of my document. With it center, I'm going to turn that layer off, drag at this center. Awesome. Great. Now I'm going to turn this guy back on and I'm going to make a clipping mask. Maybe holding down the older Option key. I'm going to scale this top one using Control T. I'm going to get it so he's filling up as much as we can with this cropped image. The same thing to duplicate the circle. Again, the same problem. If I duplicate this guy, right-click, duplicate, I want it to be Team Circle3. It's split these two apart. I'm going to drag him back up there. Drag those two up, Circle3. Drag them across to the edge. I'm going to bring in my next image. I'm going to go to File, Place Embedded. In my exercise files is one called team-3. Bring this one. I'm going to scale it down holding Shift, get it lined up. Hit Enter, pick a clipping mask, bit round, my keyboard. That's about right for me. What you'll notice is these guys aren't lined at all even though I thought I was doing it was putting it two columns that side, one column that side. What happens with, I'm trying to break it into threes. What I'm going to do is I'm going to turn on my helpful, where is it? Down here right down the bottom is my helpful column guides. I'm going to break it into three columns, I'm going to turn that on. You'll notice that this is an easier way to get things lined out rather than trying to count them. A new, select that layer, so team-1 and team-1 circle and team-1 is going to go into the center of this. Let me use this one here. Team member 2 and I'm going to grab team member 3 and get them in the middle of the layer. I'm going to do add some type to them. Actually, I'm going to select you, you, you, you, I'll move them above a little bit. Add some type, grab the Type tool. I'm going to click Escape there, I click once over here. I'm going to make sure it's centered and I'm going to type in my name, Daniel Walter Scott. I'm going to select the text, make it black, click OK, and using the Move tool, move it in, taking a little bit. Move it around zoom, then it's on the center of there, and that's going to be black. That's right. The size, I'm going to duplicate that layer. I'm going to use this tricky way by using my Move tool, hold down the Alt option key, click and drag it, and then you'll see it makes a duplicate. I'll change this one and I am the founder. I do caps to the FOUNDER. I'm going to make it Roboto. But I'll use just Regular. Size-wise, let's make it a little smaller. Make it down to 17. A little bit up. Next, put a text and put them on Twitter address. @danlovesadobe. Actually, I'm going to do it in caps. This one here is going to be the bold. Lovely. I'll want to duplicate these, so I use them again and again. I'm going to grab all three of these. I'm going to hold down the Alt key on my keyboard. I'm on my Move tool and I'm going to drag it across. Holding Shift as well, Shift danlove but a finger gymnastics. What it means it's made duplicate of that whole chunk, you can see that's original copy, that's the new one. I'm going to change this one, switch to my Tag tool. This one here, it's John Smith, he is going to be, move slight here, he is going to be our developer maybe, and his Twitter address is going to be @johnsmith. Again, going to do the same for this lady here. I'm going to grab all three of these guys, hold down Alt, drag it across, centered. She is definitely not John Smith. She's going to be Jane, I don't want to call it Doe, means she's dead. Let's call her Jane Smith, Jane even. She's going to be our designer, @janesmith. The text for those, I'm going to turn off my, we're done the bottom here, I'm going to turn off my Helpful Column Guides, especially just the third one there. Next, we're going to do is there's a bit of portfolio here. It's going to look like this with lots of different images around this little rectangle. With my guides on, it's going to help. I'm going to grab my Rectangle tool. I want my portfolio images to be into full columns. I want to spend just three of them each, it doesn't really matter what color the rectangles are, because you are going to be clipping using Clipping Master the images, but it's painful when they're the same color as the background. I'll switch it to red. Don't move your guides, I want to edit undo. If you are finding your guides are moving and they shouldn't, it's got a Lock Guides that don't move. I got my first rectangle. Instead of doing them one at a time like I did the circles, I had the problem with the circles where I keep duplicating the ellipses and it broke my clipping mask. I'm going to do it slightly different this way. I'm going to duplicate the rectangles before I go through and add my images. I've got both of these two images. I'm going to grab both of those. I wish they go across there. Grab those ones. Let's grab this one. Let's grab this last chunk. Close it down. I'm going to bring in my images. Let's name these before we get too far along, which ones we're dealing with. That's the number 1 there, no this was number 1. This one is going to be called Portfolio 1, copy up. It's going to be Portfolio 2, Portfolio 3, Portfolio 4, Portfolio 5, Portfolio 6, Portfolio 7, and Portfolio 8. To be honest, when I'm working by myself and I don't do this naming till the end. I'm doing it now to make a little easier for you to follow along. But quite often, I left as just a rectangle copy 15 as I'm going along. I'm going to bring some images, I'm going to go to File and I'm going to go Place Embedded. I'm going to bring in Thumbnail 1. This is roughly the right size. I'm going to scale them down. Enter. I'm going to make sure he's above Portfolio 1 and clip them. Same again. Place Embedded. You get down to the right size, roughly. Quite. I'm going to stick them above Portfolio 2, clip it. Let's bring another one. If you are finding it's taking forever to do things or at least quite monotonous and you want shortcuts. So Place Embedded is something that I use quite a bit. It's going to edit, create shortcuts. You can't go into here and say, I'd like this one that says File. This one in here that says Place Embedded and make a shortcut. I'm going to go Command Shift I. It's already in use, I Select Inverse. Actually, I like that one, so I'm not going to do that one. I'm going to try Command Option Shift E. It's already being used by Merge a copy of all visible layers. I don't use that shortcuts. I'm going to accept it. Just go with the top of that one. It means that now I can go Command Option Shift E. We'll go to my Place Embedded. Sum up to what? About the third one. So that you don't fall asleep and get super board, this is essentially the same thing over and over eight times. I'm going to skip along until we get to this last one right here. Over here. Now, it's here. All right back to regular speed now. That's the end of this production video where we've gone through, we have done some clipping mouse, add some texts and got us up to speed. 36. Where to get commercial use, free icons for your Photoshop web design: In this video, we're going to look at icons. Now in this video, we're going to need four icons used for our services. When looking for icons, let's say, in this case we're looking for free icons. There's lots of free icons online. Quite often though, when you're searching for them, it's hard to find some good stuff. I really like this site here called iconfinder.com, and this site is really good for finding free commercial use, as well as commercial icons. So I'm going to type in this case art, what we're looking to do is we're looking to switch it to free, and instead of no licensing, we're going to go back to no back link, okay. That just means we get to use it and we don't have to add any links to it, so you can obviously add a back link in, there's is a bit more to choose from and what I'm going to do is I'm going to use this one here. The best thing about icon finder is often when you find one that you do like, it's part of that larger set that is also free. I'm going to use this camera one, this desktop one, and a couple of others. Now, if you'd like to, you can skip ahead, and in the exercise files I've got four icons for you to start with. If you want to play along with this one, what you do is you, say we pick this camera here. Before you download it, what you want to do is pick a size that you want. Now, I like to pick the largest size I can find. So that later on if I need to use it for something else, or a super graphic or a big tile for something, I've got a large version of it around. So and then to download, we're going to use the PNG version and download it to your desktop and then import it into Photoshop. What's I've done for you though is, let's go to Photoshop and lets import the images that I've already downloaded. So we're going to go to File, Place Embedded, and there's icon 1, 2, 3, and 4. So we're going to bring in all of these. So first of all, I'm going to place the first one. Okay, I'm just going to leave it at the size it came in at and hit Enter. The reason I do this is I'm going to scale them all down together, so I want them all on the page, select them all and scale them all down the exact same size, and rather than trying to do it separately and trying to match them. So let's go to File, Place Embedded, let's bring on icon 2, hit Enter. File, Place Embedded, icon 3, hit Return. File, Place Embedded, and let's bring in the last one. Great, so I've got four icons here. You can see them all in my layers. I am going to command, select all of these or hold down the control key, if you are on a PC just click each individually. Now, they should move along together and we're going to use our shortcut command T or control T, and I'm going to scale them down all to be the same type of size. Now actually before I do that, I'm going to hit Escape, and what I want to do is I want to see my full com guide just to get a sense of what size they should be. Guide's on. I've got the four icons selected. I'm going to use my transform tool. I'm going to scale them down till I fit. Okay, they fit across 1, 2, 3 columns, so across three columns in four little groups. All right, so I'm going to zoom out a little bit. I'm going to distribute them basically just to get them in a rough position to get started and then the last one. The way to get a little sense within the guides, what you'll watch out for is, say I select icon 1, is that you'll notice that when I drag it around, can you notice, see that little blue line that appeared? Okay. If I moved it across again and back. We're looking for those, is telling us that it's in the middle of something. So I'm going to grab icon 2, turn it around so it's in the middle there because it has a tendency to lock on to loads of different things in the document, what you can do is if it gets far off, just use your arrow keys to tap it along until you feel like it's pretty close to the end. Now, what we need to do though is get them to line up center. So I'm going to select all of these guys, one, holding down the command key. There's actually four of these, and I've got these options along the top here you can see I can align them along the top, align them along the bottom or I can align them along their centers, and that's what I'm going to do, align them along their centers. The next thing I need to do is color them. So we're going to color one first so we'll color icon one first. Turn off my guide, zoom in a little bit. I'm going to color this guy. I'm going to use this option down here called a layer style, okay. So with icon one selected, click on FX, and then go in and pick color overlay. Now, color overlay, at the moment, you can see it's overlaying it with gray. What I can do is I am going to click this little color one and I am going to pick one of my colors from my color libraries. Now this little color picker doesn't have your swatches. So what I'm going to do is I'm going to make sure at the top here that I can see my swatches, especially the three that I've imported. So the greens and these guys, so that when I click gray, I can use my eyedropper tool to pick the color that I want. Then I click Okay, click Okay again, and you can see the color has been overlaid. Now I want to apply the color effect to all the different icons. There's a couple of different ways you can right-click it and say copy, layer style, and then paste it on the different ones. Or this is a nice easy trick, is that if you can see your icons, which says I can click hold and drag it, just drag it onto the phone. Okay. Drag it onto the camera, and I click and hold and drag it onto the TV set there. Great, that's a way to bring in icons for our design. 37. Production video - adding our icons: It's going to be a production video. We're just going to add some text underneath our icons. I'm going to grab my type tool, click once and make sure it's at the center. I'm going to pick a color of white. I'm going to pick font or Roboto bold, and the size wise, I'm going to bump it up to, I'll show you, about 30 maybe. The first service is going to print, it's going to be all caps. The next bit is I'm going grab my type tool. I'm going to put a little bit of body copy underneath it. I'm going to open up my guides to make sure I go over the top. It's going to be patterned and a little bit extra, and I'm going to add some text. Remember, we going to go to type, Paste Lorem Ipsum. It's going to put loads of Lorem Ipsum in there. Now, if I want to select all the Lorem Ipsum and change the size of it, if I drag a box, unfortunately, if I change the size of this one down to something like 12, you've only selected that part. What you want to do is triple-click, so 1, 2, 3, 4. When I said triple-click, I mean four clicks, so 1, 2, 3, 4, it grabs every bit of text and it will grab the text that you cant see well. I'm going to bump this down to, say 14 pixels. We'll move it to, say the regular. How many lines do I want in this case? I'm going to bump it up because I like the look of three lines. Remember also if I click in here with my type tool, I will turn my hyphenation off. To do it, click this little box here. Click Paragraph, turn Hyphenate off, and we'll get rid of that hyphenation that I don't like. What I like to do is these two text boxes here,]. I've going print and Lorem ipsum selected. I'm going to hold down the Alt key, actually turn my guides on first, holding my Alt key and use the move tool to drag out a copy. I'm holding down the Shift key while I'm dragging it, to make sure it comes perfectly to the side here. I'm going to do that for all of these. I'm going to drag them across. I've got four sets, and I'm going to go in and change it. This one's called App Dev. This one here is going to be Photography, this is going to be Video. I'm going to leave the Lorem ipsum because it doesn't mean anything anyway. Turn off my guards, make sure everything lines up. Lines up okay, lines are okay. What I might do is I'm going to grab all the Lorem ipsums and just bump them up a little bit. There you go. There's all four of them, and use my arrow keys just to type them up so they join that bit a little bit. What I also might do is grab my icons, I've icon 1, 2 and this other guy, there he is underneath my text. I like it along the base. Happy enough. That's the end of the production video. 38. How to tidy up with layer grouping: In this video, we're going to look at using Layers. Now, I'll document slowly what's surely becoming into a crazy mess of things everywhere. It's going to be little a little hard to work with, especially if we send it to somebody who's, say, we're designing it and we're sending it to somebody, say, is a developer and doesn't use Photoshop very much and has to work with it, it can be really complicated for them to use. It's even becoming a little bit too complicated for us to use. What we're going to use is something called Layer Groups. Now, Layer Groups is a way of just grouping everything together, and it makes our Layers look a little tidier. What we'll do is we'll start with our group of our Navigation. There's a couple of tricks we can use to find everything. What I wanted to do is actually let's use this hero box here. I'm going to use a little trick. Turn on the "Auto-select". Auto-select allows us to do is drag a box around everything here, and it will select everything it can underneath that little dotted line. You'll notice in my Layers panel here, right in the bottom here, it's picked everything that it found hidden in that Layer. Turn "Auto-select" off and give it a wiggle just to make sure it's got everything we need and nothing it doesn't. Then I'm going to go to Edit, Undo or Edit, Step Backwards and put it back where it was. Now I know it's all in the right place. All you do is click this "Group" button. Photoshop is pretty clever, and it sticks them all in a nice little Group. The Group's ended up above our Navigation, but that's something we can fix afterwards. We call this one Box Hero. That's this one. I'll turn it off at the moment. The next thing I'm going to do is select the Navigation. I'm going to turn my "Auto-select" on, grab everything along here, and you'll see it's picked these three elements here, which is perfect. If I go "Auto-Select" off and give it a wiggle, just to make sure it's got everything I want and nothing I don't. Hit the "Group" button. Let's call this one Box Navigation. I'm going to drag him above this guy. I dragged him into it. So be careful when you're dragging. I drag this, can you see the little line running around the outside? That's going to drag it inside my Hero Box. What I want to do is actually drag above, and you'll see the difference. You see that little line that appears between them rather than over them? That will mean it's just above. I'm going to turn both of these off. Now I'm going to grab my tool again, select both of these guys. It's picked everything I need. Group them. This one's going to be called Box, and this one was our Who We Are box. I'm going to turn them off now. We'll turn that one off. Now we're up to Our Services page. I'm going to grab the same tool, Auto-select on, select them all. I like to turn them off. Give it a wiggle. Make sure they're all what we've got selected, nothing we don't. Then group them. This one is our Box Services. Auto-select on, grab all of these guys, and then group. Let's call this one Box, and this one is going to be, Portfolio. Turn this one off. This is our Teams one. So all of these on. Turn it off. A good wiggle. We're going to group this one together. This one is going to be called Team Box. Team, great. Turn that one off, and we're down to nothing really else. We've got our Contact Form and Footer. What we'll do is we may as well put those into group, this one here. If it doesn't end up in the Group, what you can do is click hold and drag it into the Group, like I did there. This one's going to be called Box Contact Form. This last one, we'll put it in here. We'll drag it inside. This one is going to be called Box, and this is going to called, Footer. Turn all these up. Using the Layers, turn them off. You'll see this guy, a little lone ranger here, who's a Type Layer, but he is called Layer 1. If there's a Type Layer and it's called Layer 1, it means there's a Type Layer with no type on it. So actually, this thing has no purpose in the world. It's something that I've started to type, and I've not got around to doing it and forgotten about and left it there. This guy here's a lone ranger, so he doesn't appear anywhere on this. If it has a word in here, it'll be a word somewhere hidden on your document that you need to go find. In this case, I'm going to delete it. Click "Delete". You can see now that I've gone through and grouped everything, it becomes a lot easier to work with, especially when we start doing our mobile design. I can turn everything on, and what I might have to do is play around with the Layer order depending on which Layers they're on. I'm going to turn my helpful column guides off. But everything else is stacked up nicely on top of each other, and we're ready to go. 39. Find what you need quickly with layer search: In this video, we're going to show you how to use layers a little bit more. Now, there's going to be times where you work on a document and you really want to find something particularly on the document. Rather than going through and trying to find it through the search items, what you can do is you can use some of these search filters. Some of these layer filters along the top here. What you can do is say you want to find everything in this document that's typed, because say you've changed the body could be font from Roboto back to Arial for some reason. What you can do is filter just the layers, you see these just have the type, and what I could do. Click the top one, hold Shift, click the last one and go up here into my type tool and change them all to Arial. I'll pick Arial bold. Now you see everything is now Arial. That's an nice easy way to do that. I'm going to undo that because I don't like Arial. So you want to go through and start playing with the colors. What you can do is you can click on this one here, it's just a shapes layers. All our rectangles appear. Say you've got a group of things that have a drop shadow on it, and you want to go and change the drop shadow. What you could do is you can go to this one, go to a fix, and use this drop down here and say everything that's got a drop shadow appeared. I got a thing using drop shadow in this case. I got nothing show in my last panel here. If you get to a point where you didn't realize you changed this or you've opened up another document and it's got this layer effect applied too, what you can do is just flip the switch there to off. It goes back to normal, and you can turn on and off to toggle between the last search and everything back on. 40. Naming your layers like a pro: One of the other nice things you can do when you are working with your Layers panel, and you're trying to get things ready to send out to your designer or developer, you might find lots of times where you've got lots of things called as rectangle one or type one or box two and they're not really that useful for the developer. But what you can do is let's go down to our icons which is our services. I'm going to open that up. Say you want to start naming these, say icon one, three, and two. It is a video, photography, and our app. We'll go down and do the last one down here. Actually we'll drag him out for the moment. Let's get him up to be with his friends. What we came do is a nice little option for naming things. Otherwise, you can double-click everything to get into it and you can spend ages doing it. The way to do this is to tab between them. I'm going to double-click this one, I'm going to call this one icon hyphen and I'm going to call this one video. I'm going to tab down, you can see icon photography. Rather than having to click on every single one to get it to work, you can just tab between them, okay? Icon hyphen. This one's going to be called app, and this one's going to be called Icon hyphen print. All right. Nice little shortcut for naming your Layers. 41. Designing a form for your website: Hi. In this video, we're going to look at how to start a form. Forms are essentially just a group of rectangles. In this case, we're going to use a rectangle tool. We'll pull a fill of white. Now, the big thing to check with strokes is that, by default, they're set two points, which is more of a printing term. What we want to do, is we want to do one pixel, or two pixels, or three pixels. You can just type it in there over top of whatever is in there. I'm going to draw my rectangle. Now, I'm going to turn on my guides to make sure that they are within everything and so I have it going from this outer guide, over across to about the middle. I'm going to turn my guides off and then take a look and see what I think are the edges here. So you can see here, it's got a dark gray edge with a white center. Do I like it? Yeah, it's all right. I'm going to add some text to it. So I'm going to grab the type tool. Now remember, I'm not going to click inside of this because it's going to turn this rectangle into a box, so that's not really what I want. What I want to do is click off down here and this one's going to be my name. I'll select it all and I'm going to make it Roboto. I'm going to make it Roboto light and I'll make it a dark gray color here. Go back to my Move tool, zoom in. [inaudible] it's actually, he's big so I'm going to turn it down to 20 and just have it sitting in about there. Now, grids are back on, I'm going to select both the name and the rectangle. Actually, this is going to be my form name, lower case. I'm going to select both of these and I'm going to hold down my "Alt key, my Option key," and I hold and drag it down. I'm going to give myself three of those. This one is going to be name, this one is going to be email and this one here is going to be phone number. Okay. I'm going to get them all to line up on the left-hand side. So I'm going to have phone, email, and name selected and I'm going to go back to my move tool and then I can use this one here, which is align left edges, they should line up. Okay, I'm going to do one of the box. I'm going to go to the rectangle tool, make sure everything is still set. I'll get back to my full color of white box, it's going to start up here and it's going to go down to the bottom of my phone box. I'm going to grab one of these guys, maybe phone, actually name because it's lined up, hold down my alt key and drag them across holding shift. This is behind where I need it to be, so I'm going to drag it up and drag it back across a little bit. Actually, I'm going to change this first and I'm going to call this one message, Move tool and move it along so it lines up there. Try to name everything. So I've got this box which is form email, this one is form phone and this one here is called form message. Next I'm going to add a submit button. So my submit button is just going to be another little rectangle. In this case it goes down here. It's going to cross three of them. I'm going to give it a fill color of dark purple and I'll grab my tab tool, click once down here. I'll call this one submit. I'm going to make it roboto, but I'll make this one roboto slab bold. Actually, what did we use up here? Here I am going to grab my type tool and just click in here and to check. I've grabbed my type tool, slip inside, this one was roboto slab 24. So I'm going to do the same with this one. Grab my type tool, click inside roboto slab bold 24 and I'll make it a color white. Move tool, drag it up if it's behind it, no, it's in the right position. Turn my guides off, close that up. Great. There's a little contact box and put them all inside their own group. So remember using our trick, auto select on, drag a box across all of them, move them all inside contact box. Turn that up, on an off. Here they all are. All right, and that's how to mock up a form in Photo-shop. 42. How to create a footer for your website: In this video, we're going to mock-up our footer. It's pretty basic, we're going to bring in a group of icons, we're going to get our file, "Place Embedded" and I've got this one called "Icons-social", it's an illustrator file. I'm going to place this one. Great, move it down, I'm going to place it so it lines up with one of the column codes here. Zoom in to double-check, take it across, hit "Enter" when I'm ready. I'll zoom out. What I'd like to do is make sure it's in the right place. I'm going to make sure it's inside my footer box. Everything else, I'm going to make the same colors as my icon, so I'm going to find my icons. I'm going to select icon here. What I'm going to do is right click it and go to copy layer style. Go down, find my graphic and my footer. Right-click him and go to the one that says "Paste layer style" and it's going to be the same. Add one last thing to my photo, I'm going to grab the type tool and I'm going to add my copyright. I'm going to click once and I'm going to paste in my all rights reserved, pick a font that's a little bit more appropriate for us. So it's going to be Roboto, it's going to be medium. That's going to be quite small, so it's going to be down to 12 pixels. Great, and that's going to be my footer. 43. Production video - finishing up our desktop: All right, in this last little bit we're going to tidy up. One last little missing bit is that up here, I haven't put in my type yet for the who we are, so I'm going to do that. I've got my type tool, and I'll make sure I'm in the right box as well. At the moment, I need to be in the one that says Who. Once selected, if I click once, you'll notice that my typing's up inside of it, it's a good starting point at least. Okay, this one's going to be who we are. I'm going to pick Text. I'm going to use my Roboto, but I'm going to use Slab, and use my Bolds. It's going to be white, size-wise, that's going to work for me, my move tool, move them across, undo. I wanted to move them across an add my "Lorem ipsum." So I'm going to click hold and drag. This one is going to go out, I think, in the last column here, and let's go to Type, and I'm going to go Paste "Lorem ipsum". The fonts obviously really big, when I use four clicks and turn it down to more manageable size of maybe 14 pixels. I'm going to make left lines, I'm going to pick Roboto, I'm going to use Regular. Choose lighten this case. Great, and that going to be it for this one. 44. Designing your mobile website view: In this video, we're going to look at mobile design. Probably the most important part when looking at building a mobile site is probably the navigation, how you get around. Because of the limited space, you can't have that big menus like we have on our desktop view. Knowing which one to pick can be difficult. A really good site here is this exisweb.net site. It's an incredibly long link, so use the link on the screen now to go and find all the different useful links everywhere. Now, we're not going to have a chance to go through them because there are so many different ways of considering mobile menus. But let's look at the main groups. This one here, where we've got this thing called the burger or the sandwich. The sandwich or the three horizontal lines, whatever you want to call it. This thing here clicks and the whole site shifts to the right, and this menu appears. There's another option here where they stack. You can see here, this is the desktop view, but when it gets to mobile, they stack as nice big buttons on top of each other with some other ones. This one here I like, just the burger by itself when it clicks, there's a drop-down menu from it. There are lots of different options. Have a look through the site, there's a crazy amount to pick from. They're all flavors of a similar thing. The big thing to decide is whether you're going to burger or no burger. Like Smashing Magazine, we looked at this earlier. Watch this, if I collapse this down, they've decided no burger, they've got this word "menu" and that's totally cool. But you can see even in my Chrome plug-in, I've used the burger. Let's do a little stunt. It may be a fad. I think it's probably around to stay. It's a nice new icon for mobile menus. Let's go and build one. What we're going to do is we're going to start with the mobile site. So we're going to get start at building a couple of parts of it, dragging parts of the desktop across, and then rebuild the menu. The things I want to start with is the navigation here and hero box. I've selected both of these by holding Command and clicking both of them or Control on a PC. What I'm going to do is click, hold and drag, but holding on the O key first, click and hold and drag, move it across, get it same to this over here. Line it up. You'll notice that they've all move to my mobile version. I'm going to zoom in. There's lot of work to fix it up. So I'm going to zoom in a bit. What I want to do is I'm going to have to use this. So I'm going to go to my navigation box and the bring your own laptop logo. I'm going to move across. I can't see it because it's over this side here. But I know if I hold Shift and drag it across, it'll move along in a nice, perfect line. It goes perfect. My hero box needs to come up a little bit. Lovely. Bring your laptop, it's going to be there. I'm going to move it up to be centered. This navigation though, is going to disappear, because services just doesn't fit. So I'm going to turn that off. I'm going to draw my three horizontal lines. It's really easy. Just use the Rectangle tool. Make sure your fill is set to white. I'm going to have my stroke set to none, and I'm going to draw. You could do it with a Line tool as well if you wanted to do it, I find it's just easy enough to use the Rectangle tool, I make them feel like lines. It's a bit big, so I'm going to zoom in. You find if you're nice and close when you're working on, it becomes a little easier to work with. If I'm far out and I'm dragging these lines around, they seem to snap, but it's a lot easy when close in. I'm going to hold down Alt and draw my burger. You can see here my smart guide is telling me that it's matching the distance away from that top one, from the bottom one. Great. Now, the burger is quite big. So I'm going to select all of them, transform them, and scale them down a little bit, maybe make them a little shorter. So that's my mobile burger menu. Great. What I'd like to do is when that button is clicked, I'd like to overlay all of the stuff here with a new div tag up there. I'm going to use the Rectangle tool, and I'm going to draw a nice big rectangle for my menu, and I'm going to put it inside. I'm going to give it a color. I'm going to use purple. Now, I'm going to use a little bit of transparency. There's no reason you have to, it just looks cool. So I'm going to change it down to 90 percent just so you can faintly aware, see the stuff behind it, so when it slides down you know that it can be potentially slide backup and it's not a new page. Let's look at doing some naming. Let's put my bring your laptop in the navigation menu. This one is going to be box navigation. What I'm going to do is I'm going to start a second one. This one's going to be called mobile Dropdown. I'm going to keep everything separate. I'm going to grab the Rectangle tool. Is that my rectangle? That's up. I put him in there. I'm going to grab these three guys. These guys here are my burger menu. What I'm going to do is group them together or link them. The easy way to do that is to right-click them and convert them into what's called a smart object. Then I'll rename it, I'm going to call it Burger Menu. I'm going to slide that up into Mobile Dropdown. Great. Now, I've got that, I got that. What I'm going to do now is I'm going to switch out my Burger Menu so I'm going to have two. So this is Burger Menu Inactive, and I'm going to have a second one, which is going to be my Burger Menu Active. Because what I want to do is do what I've done in this site here. If I scale this down. This is what I've done on my New Zealand site, where I got my burger, and I click it and there's a little cross to know that you can click it and close it afterwards. So let's switch back to that. Or to create it, I could use a few different tricks. The easiest way I find to get a perfect cross is click once. Have a plus. I don't use X because they look like Xs they don't look like a cross. What I want is a plus on its side, so I'm going to use plus. Some fonts don't look great using this technique because they're quite stylized pluses, so Arial Regular is great for this one. What I want to do is transform it. So I'm going to use my Command-T or Control-T on a PC. I'm going to rotate it around, say, 45 degrees. Click "Apply". It looks like a nice, good cross. I'm going to scale it up a little bit, Control-T, make it a little bit bigger just to match my navigation burger. Cool. I'm going to copy that and I'm going to paste that here. He is going to be active. What's going to happen is that's going to turn off and they're going to switch between each other. Actually, what I might do to make it clearer for the web designer is that I'm going to put the Burger Menu in the actual navigation itself so when people turn that on and off it's behind there and this guy's at the front. Next thing I need to do is add the ticks. So I'm going to grab my Type tool, and I'm going to click and drag a box out, and I'm going to type in my bit. It's going to be SERVICES, I'm going to do it in caps. I'm going to do PORTFOLIO, I'm going to do TEAM, and I'm going to do CONTACT. I'm going to select them all, change the font, dragging it down. I'm going to use my Roboto. I'm going to use Roboto Light. Now, what you want to do is make sure that there's enough space between these words. You don't want to have people clicking one and then inadvertently clicking the other. So a good bit of line spacing is great. Mine's got it by default because I've been playing around with it already. If you grab the Type tool and select everything, what you want to be looking for is, let's click on this icon here, bring out your Character panel. This option here, yours is probably set to Auto, which is 28. It's probably going to be about 30 in terms of the line spacing. I'm going to crank mine up to about 60. Depending on the font size you're using, what kind of font, it's up to you. Now, that's going to work for me. Actually, maybe even a little bit bigger up to 70. Just so there's a nice big gap between them, so that big fat fingers can click on them really easily. This is going to be my Nav dropdown. Lovely. That's going to be my dropdown navigation. Now I need to go through and transfer all the things that I've been doing on desktop and make them work on mobile. We'll do that in the next video. 45. Production video - completing our mobile view: In this video, we're going to be at this one for a little while, because we're going to translate everything from our desktop to our mobile. You might be building mobile first, you might be doing the opposite, unpacking it, giving it space to work, and use on a desktop. We're doing it the other way around. I've moved my first block along, which is called box navigation and box hero. I'm going to get rid of copy, and I'm going to start working on this one here. There's lots of elongation that's going to happen, there's some font sizes that I'm going to have to play around with, and some alignment to do. Let's get into it. I'm going to zoom in, "Control Plus", use my Spacebar to move around, maybe I zoomed in a little bit too much. Great. First thing is, I'm going to use let's make this happen, grab the font size and drag it down. This is all right. What I might do is get it to break onto two lines actually, because it's getting quite small there. I'm going to select it, bring it back up to our font size, it's going to break down to that when it's on mobile. This bit of Lorem ipsum needs to come down and needs to get a lot. The box needs to get a lot smaller to fit in this impeding on the sides here. It's going to break to five lines, that's okay. Font sizing, I'll leave as is, it's set to 16 pixels, which is a big enough font. When you're dealing with font size on mobile, you need to really test. But as a guess, their is about as small as I want to go, and 16 is quite a big font, but quite legible. Because this is more kind of sales takes, it's happy to be that little size, so I'm going make it just a tiny bit small. My more box is going to have to come down and this whole container is going to have to get bigger. I've got two parts to do. I've got my box, which is the underlying underneath my clipping pass there. I close it down, to make it easier. I'm going to make this bigger first. You'll see that it's actually way off the sides of the pages. Is up to you. It doesn't really matter for our mock up, but just to make everything but more usable, I'm going to drag it in and it's going to be about that much bigger. You might have to resize the bricks image as well or reposition it depending on where you want it to be or scale it down. I've used "Control T" and I'm going to scale it down to fit. You can see a bit more. You'll notice that the blur has disappeared, but when I click "Enter" the blur will come back, eventually. I'm zoom in. I'm going to move both of these, I'm holding "Shift" to click both of them all, and move them around. That's going to be the hero box moved across. Next one is to do with the Hair box. I'm going to grab him, hold down "Alt" while I'm dragging it across, move it across. Where am I going to position it? I'm going to start so I can see it at all. I'm going to butt it up the bottom, the hero box, I'm going zoom in. How am I going to do this? What you're going to have to do is make some tough decisions when it comes to mobile. What's going to make for great experience? For me I've decided that I'm going to get rid of the copy and I'm going to decide that actually these two are gone, which is the rectangle and the image that sits at the top of it. I'm just going to use who we are and the Lorem ipsum there. Who we are needs to get smaller, grab my type tool click in here, I'm going to select it all, and bring it down, this one, grab this one. Move it in and I grab the "Lorem Ipsum" move it in, use my type tool to shrink the sides in. How close to the edge you want to get? Just doing about I, who we are, that padding. It's going work for me. Now this box is going to have to get a little smaller or is he there. Here's my transform tool and what I might do is do what I did on the other box. Zoom out and just shrink it down so it's bit more appropriate. Next one we're going to do is the services box. I'm going to find my services box, there it's there. I'm going to zoom out and I'm going to "Alt", drag it across. My muzzle start. Doesn't really matter where you start. Here we go. We've got lots to do in this one here. I'm going to grab that purple box. So it's called box services and a transform. It's great. We're going to have to do some stuff for these icon. First of all, I want to get the icons to stack above each other, then I work on the text. All my icons, there they are. Now, these little boxes here, I'm going to twill down just to make them tidy up. It's the color overlay, so I'm just going twill it up still. Just means, it looks a little prettier all my layers. I'm going to select all of them. What I might first do is actually just scale it down a little bit. I'm going to use my transform tool. How big? It's probably very small, because I want to stack them on top of each other. In order to be roughly right there. Click "Enter". Now what I'll do is, you can see my words are flown all around the place in terms of my document. Where are they all? There's one there, there's one there. It's because I was dragging them, rounded up on different artboards and that's one of the common problems with his new artboard systems. Caution on what you have to do is redrag them, just get them back to the same place. Watch this. I'm just going to drag them back to where it was and they all group back. I've got my print, I've got my app there and my photography minute video. So the up one is going to go there, then the underneath, and the photography one, where is he? There he is, over there. Come back, and then the video one, where's he? There he is there. It's quite good to be out this far when you are dragging icons that I can a little bit lost in the artboard because you notice before if I undo that, when I started dragging it, it appeared up there and if you zoomed into close, you'll never see it and you'll never know which way to drag it to. Just lining them up, I'm going to go print is going to be about there and I'll grab all of these guys and there's an option here that says align, all line up. Change the distribute centers, there's this option here. Now, it never works perfectly distribute centers. You You feel if I zoom in, for me it feels like those gaps are even, but this one here is a lot bigger. Even though you have done that, I'm going to just make them a little bit bigger. I'm going to make video, take him down. I'm going to go to Photography, take him down. I'm taking him down using my keyboard and the app using the tap-down as well. Now comes the tick. I'm going to keep print. I've decided in this case that the Lorem ipsum down here, the text is actually going to be too small to be usable in this field. I'm going to use the high level bits of text, so Lorem Ipsum, Lorem Ipsum, Lorem Ipsum, I'm going to bin. So I'm just going to use these four and trying get them all on screen, I'm going to left align them. What I'll do is print, move up, up, move to over there. Photography, move down, video move down, and change the size. They are pretty much determined by this photography one, that's the largest of the gang and he hangs off the side. I'm going to do a couple of things. I'm going to select them all. Then across a bit, I want to grab all my icons. Pushing them across a bit. Back to my print, these guys, across, and I'm going to now grabbed my type tool. Because I have the most selected, I'm going to be able to change them all the same. I'm going to click and "Hold and drag" and I'm going to make sure they're all left aligned. Go back to my Move Tool, align them all again on the left. I'll go back to my Type Tool and choose a font sizes. Actually back to my Move Tool, move him across. That's about me for the sizes. I'm happy with that. It's at what? Twenty three point and it all lines up. It all fits, is nice, clear distances between them to be able to tap them, to jump to the services pages. Next, is going to be portfolio. Now, you'll notice in my desktop view, I've got quite a big set of portfolios. We've got eight different blocks. What I'm going to do is I'm going to hide half of them when it's done to mobile to give a good sense of what we do, but not have this apically scrolling page because I'm going to have one box on stacked on top of each other. You could try and do two. They can be quite small, I prefer in this case to do one. I'm just going to be four on top of each other and exclude the other four. What we're going to do is move them across to here. First of all, what I'm going to do is, instead of dragging the whole bunch of them across, I'm going to drag one at a time to make it a little bit easier on myself. This one here is, up on my desktop view, this is under my portfolio. First thing I'm going to do is, I'm just right down the bottom here. It's this here, the box portfolio which is this colored box in the background on hold "Alt", I drag it across, get it lined up, transform to get him in there. You'll notice that my mobile view is too short, so I'm going to grab my Artboard Tool, click on it once. If that doesn't work, you've got to get the edge. If that doesn't work though, you just click the "High-level list" here on the navigation, drag it right down, because how big is this going to be? It's probably going to be a little longer than my actual desktop view. When you've finished, just got back to the Move Tool. How big should this colored box be? Probably quite long. It's going to fit all my portfolios in there. Let's go up, what we do is portfolio 1, I'm going to drag him across, so I've selected the box underneath and the image that is clipped to it. I'm going to hold down my "Alt key", drag it across. That's that guy. I'm going to grab two and I'm going to hold "Alt", drag it across. I'm not scaled them yet, I'll try and do them all at the same time. Grab three, I'll drag it across and then four, I'll drag him across. They're all in here. Now what we need to do is transform them all to be about the same size. I have selected them all in here and I click the "Bottom one" and I hold "Shift: and click the "Top one" and it stacks everything in between. Let's use the transform tool and hold I "Shift" to make sure it's all perfect. I'm going to get them up to a size. It looks like it's going to fit, about there. Around. Okay. Nice and big to fit in the mobile view. So now I just need to line them all up. So I'm going to grab number two, and zoom in, and hopefully get in to snap together or at least line centered. I grab portfolio 3, about to be centered, and the same thing with portfolio 4. Great, I'm going to make sure that this is a little bit shorter so it fits everything. I've been moving them around quite mechanically. If you want to join them up so that you can do things like distribute centers, because if I select all of these and do distribute centers, it's not going to do what we want. It shifts the boxes separate from the images. So what you need to do is select each of them, right-click them, or if you're on a Mac or a MacBook Pro with no right-click, whole Control in your keyboard and then click them, and go to Convert to Smart Object, and sticks them together. It's like grouping, but what you can do later on if you want to get them apart again you right-click and there's one that says Edit Contents, and what happens is watch Photoshop, edit it. It opens up a separate tab with these little two guys by themselves. That can be a little confusing when you're new, so only maybe you only use smart objects when you're a little bit more experienced with Photoshop. Convert to Smart Object and these guys, Convert to Smart Object, and next step, great. Now they're core locked together, I can now use that distribute centers. Let's look at the next bit, which is our teams. So I'm going to bring these across. I'm going to actually bring the whole thing across the teams box, and I'm going to drag it across, holding Alt and bring it all the way across to Mobile View. I'll start with this first one. Then in our team box, what I might do is group all of these guys. So I select them all, I'm going to go to Group, and this one here is my Box Portfolio. Okay, Box Team copy. Get rid of team with the OCD, and in here we've got and we'll grab Developer John Smith and his face. So there's our circle team, Circle 2. I think that's all the guy. Great, I'm not going to resize this because it fits nicely in Mobile and though I'm going to have to make the page even longer, but remember clicking the edge and then zoom out and I'm going to make it really big. I get back to the Move tool and what I want to do now is find Jane, the designer, Jane Smith, and she was team three. Bring her across, and there she goes, zoom in, and make her in the middle. Okay, it looks like I've left off the bit of text for our man here, so where is he, he is John Smith. Where is that text, bring him in. What I might do is make the text little bit I guess. So we're stuck with Daniel being the longest one. Then you, Jane Smith and John Smith, and I grab my Tag tool and drag them a little bigger. That works, Daniel still fits in there. Then let's go to Designer, Developer, Founder, let's maybe make it up to 20, just make it a little more legible in mobile, and then grab all the Twitter handles, let's grab him from 17, let's put it up. Not 204 let's just do 24. Correct Move Tool, tap him down a little bit, just make it a little easier for mobile. Great, everything's in its little boxes. Let's have a look at our Contact Form. So I'm going to select Contact Form in this top view, and zoom out, hold on Alt, drag it across. I'll start with all of these guys. Grab the green box. Green box needs to get bigger and this wide. Now all of these guys, so there is Form Name, Form Email, Form iPhone, I'm going to transform them and zoom them in a little bit. What I might do is bump them across just so we'll use as much space as we can. I've selected them all, I've transferred them all in one in big go, it means that all are going to line up and then worry up to Form Message. So I'm going to have to grab Form Message, drag him down. Okay, Transform him, get him to line up with these guys, grab Message. He's around there somewhere and there he is, get him to line up with these guys. These are all probably a little too far to the left now. So I'm going to grab you, Email, Name, Phone and drop you across. There you go. Last thing is this Submit button, I forgot to name it and this is going to be my Button, I grab the Submit, and what I might do for this one is just make it the full width. So selecting just the button, make it wider. Submit button across, shrink down the green bit, awesome. That's going to be my Form. Last bit is the Footer. When I zoom out I got my Footer here. So I'm going to grab the Footer, where is he, there it is there. Alt, drag it across. I'll start with that side, because there's little icons there. Grab these icons, move them across, great. Make the Footer a little bit taller, bring in that so it's not so wide. Whatever else, we've got Social icons and there was something else there it is there the privacy and pieces. So I zoom in, great. So I might break that into two lines, and make the font a little bit more legible on mobile. That's probably too big, let's just make it 16, it's not super important. Let's get it down to a nicer size. Transform my Footer and make him in the right size. Now let's get my Artboard in, come on Artboard, and just get him to snap to the bottom there. Back to the Move Tool, click off somewhere else. See see the little bit of white line there, I'm going to tap that up, excellent. That is my mobile version. Now this is a pretty quick mock up of our mobile layout. Now this video is really a how to make a mobile version. Now if you want to look at why you build different things on mobile versus desktop, you want to start looking into Dev world of user experience or UX design. You also have to start working with the website and prototyping it so that you can see what it actually looks like in a website. It's one thing to design in Photoshop, and it's another to see it working on a mobile device and the different kinds of mobile devices. Whether it's a really big Huawei G7 like I've got, or one of the little mini Samsung's that are around. You'll need to play around with both of them to make sure that your site is actually usable. Last things I'll do before I leave this version is, I'm going to tidy up my folders. So I've got my Footer, he should be in there. My Submit button should be in that, that should all be inside my Contact Form, and there's all my buttons with my mobile Dropdown that can be turned on and off. All right, that's it for this video. 46. Exporting your web images: Now in this video, we're going to look at how to get your images out of Photoshop so that you can hand them over to your developer to start building the website. Now what they're going to want is some web ready images, not just the big Photoshop file. If your developer does use Photoshop then potentially you could just hand over this PSD and leave them to it. But often it's the designer's role to get the images out ready for web. There are pretty much two formats we're going to work with. There's going to be a JPEG and a PNG. Now, essentially JPEGs are great for photographs and PNGs are really great for any kind of linear icons, logos, ticks, those types of things. It's reasonably easy to know which one to use because it comes down to file size versus quality. If it looks great and it's small, then you should be using that format. You check both of them, JPEG versus PNG, see which is the smallest, see which looks the best and then use that. We're using a new feature in Photoshop CC 2015. If you're using an early version, you're going to have to use something called the Slice Tool. But because we're using the newer version, we're going to use this fancy awesome way called the Export As. To do it, let's look at doing this image first. So slipped into my Layers, there's this image sitting on top of the box. It doesn't really matter which one you export, whether its the box or the image, it'll work for both of them. What we're going to do is right-click it and we're going to go down to this one that says Export As. When we get on top when we know it's a PNG, we can use Quick Export but at the moment, I know because it's an image, it's going to be a JPEG. So we're going to get Export As. So it tells me the size and it tells me that as a PNG, this one's going to be set at 76 kilobytes and that's pretty big. So you've got a relative scale. Once you start getting close to 100, that's far too big for an image this size. So when you're at 100 kilobytes, you're way above what it should be. So, what we can do is switch it to JPEG. Then you've got this quality slider. Very rarely does it go out on a 100 percent. You want to drag it down until you've got this balance of it's very small in terms of file sizes, but there's almost no noticeable degrading of the image. So what you do is you drag it right down to something silly. So we're down at 15 percent and it's hard to know, is it good? Is it bad? What I like to do is click up here and click back down and decide how low can you go. Now in this case, it can get quite low because the image itself is quite noisy and it's black and white. We can get away with quite a lot of low quality, but you can see the size becoming quite low. So when it's up at a 100, it's at a reasonably good 38 kilobytes, but I can get it a lot lower. Now my rules, I hang around in there between 30 and 60 depending on the image. This one can go quite low because it is quite noisy, so at 30 percent of its original quality we're at 12 kilobytes and that's a nice fine size for me. I'm going to hit Export. The last thing you need to do is when you are exporting this, I'm going to hit this little option here so I can see, I'm going to put it on my Desktop. I'm going to put it in a special folder called Web Ready Images that I've made. The other thing you need to know that when you are naming your images, is you need to make sure there's no spaces, and you need to make sure you don't use any of the crazy characters that are along the top of your keyboard. So just keep it to numbers and letters, and make sure there are no spaces. I'm going to hit Export, and that's my JPEG out. Now we can move around, let's say it's my portfolio here. It doesn't really matter which of these two boxes I select, but I can right-click it and say Export As and hopefully it will remember what I last did, so 30 percent. You can see in this case 30 percent is not great for me. If I drag up to 100, it might be hard to see on the video that you're watching unless you're in HD. But at 30 percent, it's not great. So different images will allow you go higher and lower depending on the quality of them and what stuffs in them. So, I told you I go up to about a high of 60, in this case I might go just a little bit higher because the trade-off is, can you see down here [inaudible] at 5 kilobytes is something that's quite small. So I'm going to hit Export, and that's going to be Portfolio 1. It's taken the name of the Layer. So, when you are naming your Layers and you want to save some time later on is to use hyphens instead of spaces. I like to use lower case. It doesn't really matter when it comes to web design but I like to be consistent. Hit Export. So that's that one and you can move through, export this one. Now what you can do is you can export lots at the same time. So I'm going to click Portfolio 2, 3 and 4, right-click, go to Export As and what will happen is it'll tile it on this left-hand side here. So you have this one selected, 70 percent is fine, it's small, this one here, this one ends up at 7 kilobytes. Can you see the difference? They're the same size, but there's a lot of different content going along in this image. A lot more different colors and color variations. So, this one's a lot higher and you might be able to go a little bit lower in terms of the quality. It'll depend on your image, so we can wait through them. This one looks great. This one looks fine. That one looks fine at 40, maybe not, 60. We're going to click Export, and the only problem with this though is that naming them, it's going to dump them all in this folder without putting our little hyphens and so we can do that later. So it exported them. I'm going to go and find it on my Desktop and web ready images, there is Portfolio 1, 2 and 3. You'll save yourself a lot of time later on by using lowercase if you want to and make sure there's hyphens instead of spaces, or you can use underscores, it doesn't really matter. Now the next format we're going to look at is PNG. So PNG format gets used when there's one of two things happen, that there is really flat graphics like these icons, nice things like icons and fonts and logos, anything that has really aesthetic, flat design to it comes out really good as a PNG. PNGs have a really good way of keeping nice, crisp edges at really small file sizes. The other benefit of a PNG is that it uses transparency whereas a JPEG doesn't. So I want these icons here to be see-through so that I can change the background color like this and it's still see-through. So I can go through, change the background color and there's holes in the middle of here to show it through. If I use a JPEG, it doesn't allow me to do it, it has to have a solid background copy changed. It's the same here for these graphics here. Even though there were an image and I said, "JPEGs are great for images," in this case, I'm going to have to take the hit on file size to be a little bit larger because I want transparent background and I'll show you why. This is a really good example to show you. So I'm going to find Team 1, I'm going to right-click it and there's Quick Export as PNG. Now when you're new, you're not too sure if it should be a PNG or not, you can use the Export As which is the slightly long way. So I've got the JPEG format and you can see in JPEG that the quality, change it up to something like 70, the quality is what, 10 kilobytes, nice and small, but it's got this white background. The JPEG will not allow transparency, it's not in its makeup. So we're going to have to do a PNG and we've got two kinds. There is PNG 8, which is fine and this file size is quite small, but the actual color palette it can use is actually quite small, it's only 256 colors. So if you want to use a full-color PNG you have to use this one up here, which is called a PNG 24. Even then I write it there. So PNG 8 versus PNG 4. You'll see the file size is substantially different. This one here, up to PNG 24. This is really big. But this is the trade-off of having transparency, JPEGs are really small but graphics they have to have transparent backgrounds and have to use full-color, have to use this PNG here. So I'm going to use full-color PNG, hit Export, and Team 1, click OK. So I should now work through and do the same for the other two heads and the rest of the images here, let's look at doing it for this icon along the top, and it would be the exact same process of exporting this image along the bottom here. I've got my icon, and I know this needs to be a PNG. Why? Because it needs transparent background which default makes it a PNG, and it is a nice flat graphic which means it's going to be nice and small. Right-click. I could use my Quick Export as P&G now because I know it's going to be a PNG because it's flat graphics that needs transparency, it's definitely a PNG. So I'm going to hit Export as PNG and I'm going to go straight to here and I'm going to put it on my desktop under my web ready graphics and I'm going to put it in there. Now I'll just work through the different icons and to say Export As PNG, let's have a quick look at the PNG size. So you can see this one here, 90 kilobytes really big because it's PNG trying to do what JPEGs do. But you can see PNGs with transparency doing what it does well, see it's down to 2 kilobytes nice and small. These are the kinds of graphics that you're going to need to hand over to your web developer for your website build. 47. Exporting CSS from photoshop: In this video, we're going to look at how to get something called the CSS out of your document. The web developer is going to say, "What color is this? What size is this? What font is it? What's the spacing between the lines?" You could go through with the Type Tool and write them all out and explain what they all are. A nice little helpful thing you can do to make it little easier for them is to export the CSS. Now, let's say that they want to know what font this is and what font size it is. What we can do with my cursor, there it is, here we are. What I selected is one here that says Copy CSS. If I copy CSS, nothing seems to happen. What it's done is it has copied it and to your clipboard like you've gotten in at copy. Now you can open up, and [inaudible] at a word or checking at an e-mail and hit paste. What it's done is that it's created this class along the top there, which we probably don't need. It's got all the important stuff like font size, font family, font color, the font weight, the line heights with the centered. This type of thing, position, left, top, send it to develop anyway. They're probably going to ignore all this. If you are web designer, you'll just know what to pick out of this and what you don't need. Now I can explain to my web developer that the hero heading text is this. They'll be able to use their magic web design skills to style the text to make it match exactly like your Photoshop mockup. Let's look at doing it full some of the structured parts. I like this navigation box at the top, because what we need is maybe the height and we need what color it is and what the Alpha transparency is, or the opacity is. I'm going to select them as my Nav Bar. I'm going to go up to Layer, I'm going to go to Copy CSS, and I'm going to jump into Notepad. This is going to be my nav bar. I'm going to hit Paste. There's bits they're going to be able to use and bits that's not. If you're not a web designer and you have no idea what this junk is, just send in the whole lot and they can pick through it. I know that we don't need the class, and we'll use background color, we'll use the opacity, but we don't need any of this, but we do need the height. Those are the things I'm probably looking for as a web designer that I need to go and style to make sure it's the same, and then it does take a lot of the guesswork out of me as a web developer to say, "It's about that high and it's about that transparency," and to send it back to you as the design for you to come back and say, "Hey, it's not the right one, and what's it toing and froing?" This will help remove a lot of that. That's one of the nice new features and Photoshop CC. If you're using CS6 or CS5, unfortunately, it's not a feature for you. You're going to have to do a lot more of the toing and froing and typing out and explaining what the font is, what the font size is, color it is, what opacity it is, and labeling that out for them, or if they have some Photoshop skill themselves, they can go into it and do it. That's exploiting CSS from Photoshop. 48. Using Adobe Generate to make image export amazing: Now this video is a very similar technique that we did when we were doing the Export As feature. So we right-clicked the layer and we said export As or use the Quick Export. This one does a similar job, but it's a lot more automated and it's really great when you are working, especially with yourself, you're developing stuff from Photoshop as a mock up and then you're getting essays ready and developing it as a website and you can come back and forth quite quickly using this Adobe Generate. First thing you need to do, is turn Adobe regenerate on. If you don't have Adobe Generate here, it means you're using an early vision, either CS6 and earlier, and you're not going to have this feature. But if you are in the any of the later versions, we can get a file and we can turn this one that says image assets. You turn it on and nothing happens, okay. So File generate and he sees a little techniques to it. So I know it's on, it's doing something. What I'm going to do is save my document in a special place just so I know where it is and I save on my desktop, I'm going to make a new folder for you guys just so you can see it. This is going to be my generate export folder. I'm just saving the PSD into this folder here version of it. Click "Okay". So I'll show you here on the desktop. On my desktop it's called generate export folder and this is the PSD that I'm working on, just sitting by itself. Make sure Generate is on, for me it's turned itself off because of the Save As, make sure it's ticked on. Now what I want to do is, let's say this image here I would like to save it out. With a bit of experience, you know that it's going to be a JPG because it doesn't need transparency and it's an image. So what I'm going to do is I'm going to name this one here, dot JPG. I've image hyphen books dot JPG. What you'll notice is, back at that same folder, do you see magically it's created this folder called export generate essence. Here is my image, my layer export as a JPG. Okay, it's done, it all automatically. Same thing is, say if I wanted it actually to be a PNG. I can just, in my layers menu here, name it a PNG. Those over here, it's actually removed the JPG and switched it out for a PNG. Okay, so this is a really quick and easy way to export files, but it's also a really nice way if you are making adjustments, because it's a dynamic link, it's always adjusting. So it deletes the JPG and adds a PNG. So I've got this image bookings dot PNG selected and what I'm going to do is, I'm going to add a layer effects and I'm going to add a color overlay and I'm going to play around with, instead of normal which is [inaudible] I'm going to switch it to multiply, pick a color, and I'll make it kind of like an old CPS style. You'll notice, as soon as I click "Okay", if I switch out to my Images, can you see it was getting remade as I turned up and it's a new PNG with the new color scheme in there. If I go through and change it again, will change into something a bit more, a bit stronger. Okay, its green. Watch it in here, it's re-making it in the green, so it's a dynamic link. You can keep moving, it keeps making the images. So I know that one needs to be a JPG. Okay, when it comes to JPGs, I know that it's coming through is JPG, watch this, there it is. Now JPG that's quite big, it's 56. So what I can do is there, is a bit of syntax that I can add to this guy to make it a different resolution. At the end, can you see down here in my last panel, I might make this a little bit bigger so you can see on the screen-cast, is that at the end here, I can type in. If I type in a one and it's going to make it a 10 percent JPG and remake it. Watch this, it's remaking it 10 percent, it is really small file size, but it's probably bad quality. So if you know, after a bit of experience, you start knowing that. I know that if I probably go at about 40, just before the end, it's going to remake it, it's a reasonable size, the quality is fine. Same thing happens if I want it to be a PNG. If I want it to be a PNG and I know I want to be a PNG eight, or if you know you want it to be a 24, you can type both of those in and it will make the PNG eight versus 24, whatever you need. Now there are a bunch of different syntax you can add to the end and the beginning for quality, emphasize, I haven't got time to go through every single one of them here. So, if you want a printable sheet for all the different syntax, download them from this link here. One last thing before we go is, you can start doing groups. Let's say that you've got a logo here, but it's got a circle as part of it, okay, there's different part to your logo and you want to export it as one big lump, okay. So it's a white spot with the word, bring your laptop. Now what you can do is, watch this, is my ellipse and there is my bring your laptop, they're there. Because if I give these separate names, it's going to export them separately. So what I want to do is with them selected, group them, and in this group here, I can name this group. So this one is going to be called BYOL logo and it's going to be a dot PNG and it's going to be an eight. Great, if I jump out to here, I should have logo, PNG and it's an eight, [inaudible] , transparency, awesome size, tiny. It's another great trick to use with Adobe Generate. 49. I don't want this to be over. What next, Dan?: Where do we go from here? Once you've finished your mock-up, please send me a screenshot, or a JPEG version via the forum or the discussion on this page. I'd love to see what you've made. Video training can be really one-way traffic. I get my thrills from seeing what students have made. To make this course as good as it can be, please pass on any suggestions and ask any questions. For any persistent questions, I'll add new videos to the course to make it even bigger. Place stay connected via your favorite social media channel. There are lots of awesome things coming up in future versions of Photoshop and I'd love to share them with you. That's it for me. Bye for now.