Lessons

Lesson Info

Designing Web Page Comps in Photoshop

- [Melissa] Because we're going to start in Dreamweaver from scratch. And I want to show you, how do we get started with all this fun stuff, anyway? I'm a Bridge girl, so I use Bridge for everything. I'm going to come into Bridge and I'm going to look for… It's not in there. It's just in here. And I'm going to show you what I did. So, I don't know if you guys know, but Photoshop now has artboards. Did you guys know that? I know, you're like, "Why does it have artboards? Those are dumb. What am I going to do with artboards?" I thought that, too, and so I started playing around with them. I'm like, "Maybe they're not so dumb. Maybe I can figure out how to use these artboard thingies in Photoshop." And I did. So, it's really good for web design. It's actually really good for other things too, I've decided. I'm missing fonts. We're going to talk about Typekit and stuff, that's okay. Hit Next. Oh, yeah. I don't have those fonts. Things might look funny. I forgot to install those fonts. That...

's okay. We are going to… We should be able to resolve this one. That's all right. I'm going to say Don't Resolve and not worry about it. And it all looks good anyway. Okay, perfect. Okay, so here I am in Photoshop, and I have two artboards. And when I wanted to start designing this, actually, the first thing that I did… I have another one to open up. The first thing that I did was I went into Dreamweaver and I did a screenshot of the template that we were going to design over, right? Because I'm like, "Well, I should know what it looks like that I'm going to design, right?" And here that is. So, literally, I did three screenshots. I did screenshot, scroll, screenshot, scroll, screenshot, scroll. And you can see here in my handy dandy little Layers, there's my three screenshots. So, I just created a new document and kind of put it all together so I could see what I had to work with, and I'm like, "Okay, cool." So, I know all the pieces and parts and I can just start to overlay everything. And then I started with a moodboard. So I'm just double-clicking. I don't want Device Preview. I'm going to double-click on my Hand Tool. It's not working. Let's just zoom in here. I started on a moodboard in one of my artboards. So, I made an artboard and I just kind of pulled out… I had a bunch of graphics that I had to work with, and so I just dropped a bunch of graphics in here and I've got some icons. I actually made the little donut icon from the O, and I've got a coffee cup, and I've got some other icons here. And these actually come from a font called Font Awesome, which we're going to talk about, and Bootstrap also has what's called glyphicons built into it, okay, which are dingbat fonts. And we're going to talk about these things. And so I just created a bunch on here in my moodboard to see what it would look like, I created some colors, I was playing around with text just to get an idea of where I wanted to go with my design. And before, I would have something like this and then I would make a whole brand new page to go ahead and do the webpage, and I'm like, "Oh, but we got those cool artboard thingies. Maybe I can just do it all in the same thing, right?" And I've kind of been reluctant to use artboards because I'm always afraid, "But it's going to slow it down. I'm going to have so many layers." It hasn't slowed it down. It doesn't take any more time to open or anything else, so I haven't actually experienced that yet. So, I created a second artboard. So, if you guys look in my Layers…let's close this up…you can see I have a Moodboard. This isn't actually… It's an artboard. When you first create an artboard, you actually have an Artboard Tool, just to give you guys a little heads up here. So, underneath your Move Tool, there's an Artboard Tool. So if you guys use Illustrator and artboards in Illustrator, it actually works a lot like that. They're not exactly the same, but they're pretty close. So, you take your Artboard Tool, you can click on the screen, you can make new artboards, you can resize them, you can move them around, whatever. So, that's how I got them in here, and I just changed their names. So, when they come in, just like in Illustrator, it's named artboard1, which doesn't help me at all, right? So I renamed them. So, I've got my Moodboard and I've got my Computer Layer artboard. So, inside of my Moodboard, if I expand the layers… Let's close these up so it's not so messy…You can see that that's where all of my layers are. And just by moving them around, like in Illustrator, it will move from one artboard to another. So, the layers will jump. You know what I'm saying? So if I grab the coffee on the Moodboard one and I drag it over here… Actually, it did, right? Where'd it go? Yes, it did. See? So, it jumped into the Computer Layout artboard, right? Which is what you would expect, right? So, they're all kind of organized that way. So, I've got my cool little Moodboard and I've got my cool little Computer Layout. I'm going to just hide this so it's not distracting for a second. So, there's my Template, right? So, I've brought this guy in here. So, I have this design on top and I just went through, right? So, the Main Links. So, I had that boring, ugly, gray bar that doesn't work for me. I don't need a search and all that stuff in there, I don't need two sides, and I just put what I wanted on top, with my colors. And then, for the Hero section…that's just what they call it. They just call it a Hero. So, when you see a big, giant section, they say, "That's the Hero." I don't know. I'm like, "Should we put Spiderman in there?" I don't know, right? It's like the superhero section of the website. So, our Hero section, and then we have this little About Section. And my template had too much space, so I went off a little bit. And then this other Main Section. So, what was under here? I'm like, "Yeah, I don't need all that junk, right? That's not going to work for me." I mean, if that works for you, you can use it, but that wasn't going to work for what I was doing. And then I come down and there's this Other Section. I don't want that. I don't have that much content to put in there. And then, the More Info Section, and then the Footer section. And, of course, I can turn off the Template in the background so it looks good. Okay. So, that's kind of how I started with my design for the whole thing. All right. Let's take a look here. One of the things that I do… Once I get my colors down, I want to have those colors available to me at all times and I don't want to have to keep jumping back into Photoshop. So stickies are your best friend, okay? Stickies. Everybody needs a good supply of stickies, right? So, what I do is I come in here and I'm like, "All right, let's check these colors." So, I come in, and I get my color, and I go into my Color Picker, and I'm like, "All right, that pink." I got pink, and pink is #ed9acc. Awesome. And then I say, "All right, we got purple." And purple is… Purple, #8e789d. - [Man] Hey, Melissa. Can I jump in really quickly? - Uh, huh. - Could you tell us exactly what that means, because some of us are used to colors in the numerical areas? - Yep. - What's that pound? - So, this is called a hexadecimal color and it's just based on alphanumeric characters, right? So it goes from 1 to 0 and from A to F, okay? And it's some combination of six. It's a combination of six. I'll give you guys a history. I shouldn't do this, then you guys are going to know how old I am. Okay, so there's this web-only color. If I click on this guy in here, you can see that it changes what my Color Picker look like. And notice that the numbers… So, the numbers changed, obviously, but these numbers are in pairs, right? 996699. And back in the day, when I started hand coding HTML, we all had 14-inch monitors. And those crappy little 14-inch monitors all could show a whopping 256 colors, and there were 216 colors that the Mac and the PC shared, and that was our web-safe color palette. And, of course, for years I'm like, "This is dinosaur stuff. Why is this even here?" No kidding, last week, one of my students sends me a piece of paper. She's like, "This is what I have to do." And it explicitly says, from this ad company, "Use web-safe colors." I'm like, "What?" So, there you go. I'm telling everybody to ignore it and then she has a project where she needs to use it. So I guess that's why it's still in there, right? Just so you know, if you do run across that, there's a couple of little other icons in here that... I don't know if you guys know what they are, but just to let you know, the first one, the one on top with the exclamation, that one says, "Hey, I cannot be recreated in CMYK. So if that's important to you, you better click me and I will jump to the closest color that can be recreated in CMYK." While the other one with the little box is like, "Hey, I'm not a web-safe color. If you click me, I will jump to the closest web-safe color." Just a little side note, okay? - [Woman] Melissa? - Mm-hmm. - I've got a question, too. In Photoshop, you can create your palette and export it for the other programs or not? - Yes, you can, actually. That's a very good question. - Okay. So, you're going to be doing that? - I will show you that right now… - Awesome. - …since you asked. So, what I can do, I can come over here. And I do do that… I'm going to do it in Libraries, and I don't really use Libraries a whole lot in Dreamweaver. And I said I'm a Bridge girl, too, but I don't really use Bridge for Dreamweaver. When you do web design, you kind of have to have everything separate, right? Make sure that your links are working and all that stuff. So even though I'm navigating the desktop with Bridge, I'm not using Bridge to really manage my assets, okay? Once we get into Dreamweaver, I'm going to show you that. I'm going to use Dreamweaver to manage my assets. But, yes. So, we have these new things called Libraries. So, if I go to Window... All of your Adobe applications, all of your panels, are always under the Window menu, if you didn't know that. Always, always, always. And I am looking for Libraries. So, here's my library, and let's see if they all loaded up. I can actually… You know what? Forget it. I'm just going to make a new one. This is actually pretty cool. So, your library… Do I have an empty one? I'll make an empty one. I'm just going to create a new blank one. I think I already have one named Blank, but that's okay. So, if you are not using libraries, this is what your library is going to look like. It's going to be empty. There's not going to be anything in it, okay? Each library can hold 99 images, okay? It's pretty busy when you get 99 images in there. So, I have a ton of libraries, right? Every time I do a project, "Oh! I need a new library." Right? Libraries are great. So, anyway. So, I've got my new blank library and I want to create a brand new library from my document, okay? So, I want my colors, right? It's magic. So I go to my Libraries flyout menu, and I say Create New Library from Document, and I just sit back and be like, "Okay. I'll take Character Styles, I'll take Colors, I'll take Layer Styles. Sure, I don't know what layer styles I have in there, but I'll take them. And I'll take Smart Objects. Awesome." And I just wait. Ooh, I have a lot of character styles. And there we go. So, there's my pictures, I have one layer style, and there's all my colors. Now, obviously, this isn't very helpful, right? I've got way too much stuff going on. But it's all good, because then I just come in here and I'm going to be like, "Ooh, I don't need all of those." I just throw them in the trash, okay? And I think I have a good, organized library already, if I can find it. I have too many libraries, you guys. Donut Website. Yeah. There we go. There's my colors. Yeah, so they're all in there. And then, just so I know what I got to work with, let's look at Donuts. And donuts here. So, I still have my colors, and I got a bunch…I think I want the Donut Website one or donutwebpage. Oh, I don't want that. I want Donut Website. But I can get rid of it, right? So, now that I made that, and I don't want that, and I know that I'm going to keep going to the wrong one, which is donutwebpage, I can go out to the flyout menu... Yes, I can. Go. All right. I'm not in the flyout menu, that's why it's not working. And I can choose Delete donutwebpage. So I'll just delete that whole library. You guys have no idea how many libraries I deleted to come here. I'm going to go home and be like, "Man, I deleted that library!" Oh, well. That's all right. I can make more. I can make more. And I always have libraries sitting right here so I can always access them, right? And yeah, so now, those libraries, they're available to me in Illustrator, and InDesign, and Dreamweaver, and other applications that I don't use.