Graphic Design Bootcamp: Layout and Workflow Basics | Shawn Barry | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Graphic Design Bootcamp: Layout and Workflow Basics

teacher avatar Shawn Barry, Creative Director, and Educator

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (1h 24m)
    • 1. Video 01 Introduction and Course Objectives Skillshare

    • 2. Video 02 Describe the Project

    • 3. Video 03 Reviewing the Assets

    • 4. Video 04 Setting up our page for the layout process to begin

    • 5. Video 05 Poster and Post Card Design

    • 6. Video 06 Website Desktop

    • 7. Video 07 Website Smart Phone

    • 8. Video 08 Recap and Conclusion

    • 9. Video 09 Whats Next

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

In this course, you'll enter a bootcamp for page layout, and basic professional workflow, used by creative industry pros. As a graphic designer, it's equally important to work with files, assets and creative in an organized manner as it is to be creative. Every designer, art director and creative director knows the importance of good files and workflow. It's the key ingredient that separates the pros, from the enthusiasts. Talent isn't going to get you that next gig, if you don't work like a pro. This course will set you on the proper path.


Meet Your Teacher

Teacher Profile Image

Shawn Barry

Creative Director, and Educator


My name is Shawn Barry, and I'm a creative professional with over 30 years experience. I'm also partner and Creative Director at a small boutique agency in Toronto Ontario Canada, called Booster Rocket Media.

See full profile

Class Ratings

Expectations Met?
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Video 01 Introduction and Course Objectives Skillshare: a skill share. My name is Shawn Berry, and I'm a creative professional with 30 years experience, and I'm also a partner and creative director in a small boutique agency here in Toronto, Ontario, Canada called Booster Rocket Media, where we do all kinds of cool stuff like website design and development. We do videos. We do animation and advertising, traditional and digital. So I've done everything from studio artists all the way up to creative director in some big agencies here in Canada as well. So I'm gonna try and bring some of that experience to you in this first course, which is called Layout Basics. So Layout Basics is going to be sort of a boot camp for a professional workflow. It's not gonna be so much about design and typography, although we're gonna create some of that. But I'm going to focus mostly on how to prepare your work so that it makes sense when you actually see it, either on the Web or in print, because it's all kinds of little tricks that you need to know in order to properly create your design. Because so many beginners and even pros who have been doing this for like 5 10 years will run into the same problem where you design on your screen and something looks up closer. It looks far away, but it's not relative. You're not thinking about where it's going to be on a wall, 10 feet away from you or, you know, on a billboard across the highway or on a small device that you're looking at. So these things have an effect on the design process quite significantly at a good professional workflow can help you to avoid the problems of having a poster with ah fought this big. For some reason, that doesn't make any visual sense or being on a smartphone, but not being able to read anything because it's too small. I'm going to show you all the ways that you need to get around that problem. But we're also going to do some cool design in the process, so that would be the point. Now. I'm not going to teach you anything about illustrator or Photoshopped those of the applications that I've used to create this material, but you can use gam poor CorelDraw or any other thing that you can use that you can actually create layouts in because we're going to focus on the workflow itself, not on the software or the techniques. So whatever you have on whatever you're comfortable with, that's what you can do. And I've also created some design work for you. So we're gonna work with stuff that I've created, which I'll show you. But you can either follow along with me or you can create your own. And I'll tell you how you can do that, cause I'm really excited to begin my first course, so let's get into it. 2. Video 02 Describe the Project: Okay, let's get down to it. It happens to be a nice, beautiful Saturday afternoon here in Toronto, Ontario, Canada. The sun is out, and that always makes me think of music. And, uh, it also makes me think of transit just by the way you will occasionally here, a streetcar in the distance squealing very painfully in a city of millions. Like Toronto. We have an enormous transit system, which, by the way, goes around my building and back out the other way. So there's nothing I can do to stop the noise. So you occasionally hear a crazy screech in the background as the transit. Nothing I could do about it. Let's just get on with it. So, music. Everybody loves music. I love music. You love music. So let's use music as our subject matter, because that's really great. And speaking of music, my nephew has a band, and it's called Gracie may not. My nephew and his bandmates are there. They're punks, but they're good guys and they do good music. Good Canadian, Anna, alternative rock. And I'm gonna show you where you can listen to that in the next video. But they are our client for today. Now, before I get into it, if you would prefer to follow alone and actually go and find a different band, maybe it's your favorite band. It doesn't matter who it is. You could find some images online, and you can follow along with my material, but design your own stuff. If you want to do that, that is solid. But if you want to follow me the first time through, I've created all the assets that you'll need, and you could just follow along with the videos and follow my process, and you'll still be able to create some cool stuff you'll be proud of. But if you want to do your own thing, that of the awesome. So the objective of our course is Gracie Mei is going to have a show. Now it's a real band. They really do shows, but this show is fake. We've made up for the purpose of this course, so the concert is going to happen and they need a poster and they need some postcards. And here's what those air going to look like. So the poster is 11 by 17 inches, and the postcard is five by seven inches, so the poster could be on a wall in a venue somewhere. And the postcard they'll hand out. They throw some of their knapsack when they're out the door, and they give them out to their fans when they see them. And so they're gonna promote the show that way. But that's not quite enough. Let's assume that there have no website because they've never needed one before. But now they're getting popular and we need to build something so people can actually see who they are and they can see the show promotion coming up, which is Ah, really useful thing to have on your website, of course. So we're gonna build both the poster and the post car, but we're also going to do a fully responsive website design. Now we're only going to focus on full sized desktop and then smallest smartphone view. So we're just gonna focus on those two things and the response of world. There's several stages that a website can go down to, and you've got to consider those things in design. But we're not going to do that. We're gonna focus just on those two and on the two pieces of creative that we talked about for print. So I'm going to first take you through how to set your pages up and then how all of that stuff works to keep you together and in line when you're designing your work and you'll avoid all those pitfalls we talked about, like things being too big on a poster too small on the website, all that kind of good stuff. So next thing we're gonna do is go through all the assets and break down what we've got in our project folder, which is available on the project page for you to download and use. And we're gonna make sense out of this stuff and actually get some design work done. So let's sit down, get ready to get to work. 3. Video 03 Reviewing the Assets: Okay, We're gonna get started now, So the first thing we want to do is review the assets. Now, depending on how your client send you the assets on any project or whether you're doing your own project gathering your own assets, you may get them through email. You may get them through, we transfer, you might get them through. Ah, you know, some kind of a little stick or a disk or who knows what. So I've created these folders for you, so I'm gonna show you my structure. I want you to use that structure and duplicate that on your future projects. You've got it for now in the course files. But, um, just pay attention. We're gonna walk through and you'll see what I'm talking about. But we're going to review how all the assets are organized and kind of what that means. And eso I've got material that I've designed for you. Of course. Now you can use my material, and you can design exactly what I design using the assets I've created and just follow the process. And don't do any new creative yourself if you wish. You can also recreate the band assets that I have built. Maybe you want to do it slightly differently with slightly different colors. You may feel free to, of course, do that as well. All the raw material is in there for you. And if you're photo shop savvy, you want to give it a shot. You can go ahead and do that, and I'll show you as we get into it. Some of those techniques that I use to build it. The other option, of course, as we talked about, is that you could just find your own band on. You could grab their images off the net, grab their logo and substitute Gracie May for whatever it might be. And that's totally cool. And just if you do that, just organize it the way that I've organized it and you'll see as we get into it, how all that works. So let's just get down to it. So here we are, the finder in the Project Dash folder. This is available to you through the course page. You'll be able to download that and get all the resources here so quickly. This is a folder structure that you should follow this structure, by the way, for your projects Something similar to this. Maybe not exactly. Word for word but copy. Images, layout, Photoshopped, Russians is something a little bit different. I'll explain in a moment. Normally you wouldn't have this. And proofs, which could also be called pdf Sore renders if you're working on video. So inside the copy folder, you're going to see three different copy decks. I happen to have those open in, Ah, my Google docks. But you can just look at the files and they will look exactly like this. We have the course outline, page layout, dash outline is the name of that file. And this is not a file that you need. There's no copying here you require. It's just a bit of a breakdown on the course itself. A little reminder here. If you read this again later, six months from now, you want to revisit this material. Just a little reminder of how we approached it. So, first of all, we have a copy deck for the print elements, so this will be the poster and the promotional card. So we've got a headline detail copy, small copy and visuals, and we'll go through that when we hit the layouts, and similarly, we have the Web design deck, which has a little more information on it, because there's more to communicate on the Web. And, uh, this is not an asset in the folders that you'll find, but I did want to show you really quickly a couple of websites that you'll want to use, and we'll get to the folder with images in a moment. But you want to do a quick Google search for font awesome cheat sheet. You'll see that there's this page full of all these little icons and symbols, and the point of these is that this is a Web fund. So your developer, when you work on a Web project, can actually incorporate all these great shapes, particularly if you come down to the bottom. You'll see that there is the Twitter bird here in the Twitter bird. Inside the box tumbler icon. There's a Facebook icon up in the EFS. This is all alphabetical, so if you're in F in, you'll see rate. Here. There's FAA, which stands for font awesome Facebook Dash F, and that is next to the symbol of the actual Facebook logo. So this is a handy little tool to have when you're doing Web development stuff because these icons come in handy, you'll see how we use them on our Web design. I also want to show you this page, which is gracie mei dot band camp dot com slash music. This is the band camp page for my nephews band. Gracie May. Now we're going to represent these in our design as full albums, but of course they're not. If you click on the sinking, you'll get one track, which is the sinking. And, uh, as you click on the others, you'll see that there was one track. One or two of these have two tracks in them, but I would encourage you to come here, listen to the music, get a sense for what they're all about, and that will help you with the design process to kind of envision what you want. And it's also just fun. Teoh support the band by a couple of tracks if you like it, but anyway, that's where you can hear the music. The other Web resource. We're going to use his triple w dot google dot com slash fonts. There are some Google funds that you'll need here. We're going. Teoh, use a couple of them, which I will identify when we get into the design work and you'll come here and you can actually add these to your collection and click used to download them and install them in your system. If you do a quick Google search on Google Fonts tutorial, you'll see how easy these are to use these air Web savvy fonts, which is important for what we're going to do. And these are also free and fully available for you to use in any way that you like. You can use them on the Web, and you can use them in your print and design on your desktop, and they're a great resource. So that's what we're going to use on the Web Now. I'm gonna pop over to the finder and come back to our project folder. Here is those copy decks or what we began with inside the Images folder. I want to show you this really quickly. We have band images. These are a variety of J pegs of ah, the band and various concert photos that we're going to use and, uh, exploit in our design. A little bit s. So we got some cool stuff there. We have what I call CDs, and these essentially are going to represent our full album covers. When we get into our website design, you'll see how that works, and you'll occasionally see in here that I've included a dot psd file. Whenever you see that, it's because I have included a layered file that you can use if you wish. If you have Photoshopped, otherwise you can use these flat J pegs. Here we have the Gracie Mei logo, which is our word mark, essentially, which we will get to in the design video. We have live promo images, so these are the images that are associated with the upcoming live show, and we have AH, Safari Browser Window here, which I will show you how that works. Once we get to the website design theme images, the band's main image, we will call it. This is what we're going to use to represent the band, not specifically an album or a performance. Just Hey, this is Gracie Mei, and it's a bit of a creative shot and some vlogs thumbnails that will use in the Web design you want to see a Layouts folder here, which we will get Teoh inside of the tutorial themselves and Photoshopped rushes. The reason I've included this is that there's actually a splatter brush, which is a Photoshopped rush that you can install. You could do a quick Google search on how to install a brush in photo shop, and it's a special effects brush that's going to give us that splatter pattern. I'll show you how that works once we get into it. And proofs is where we're actually going to save our J pegs or PDF proofs that we want to show the client later that we want to remember. Okay, these are the versions that we did on Tuesday, and maybe we have another folder that says Wednesday, and you know, if we had any revisions. So those are the assets in the folders that we're gonna use to create all of our good stuff , and, uh, I just want to walk you through that structure so you kind of know what we have to work with. Okay, so now that we've got all the assets, sort of that we can actually begin building files, but we're not gonna do any design work yet. We're not actually gonna begin building creative, but we're going to prep the creative so that we can actually build it smart and in context for the View port and the View Port is actually a term that relates specifically to the screen on a hand held device or your computer monitor. That's the actual definition of a view port. But I'm going to use Vieux Port in a broader sense because what if you're looking at that poster on that wall 10 feet away? There is a view port consideration there, too. When we get into it, I'll show you how all that works. But the first job is to build proper files in preparation for that. And there's some other little pitfalls. We're going to get around in proper preparation as well. I'll discuss those two, so I'll see when the next video and we're gonna begin building files 4. Video 04 Setting up our page for the layout process to begin: Okay, so now that all of our assets are organized, we're gonna begin building files because we have print files. There are certain issues around print, both in the trimming and in the viewing that we need to know. I'm gonna talk briefly about those things, and once we get the design, we're going, you'll start to see how they work. But for right now, we're just gonna build the files in preparation for that and for the website. The considerations are a bit different, but they're still related to the same kind of thing. The poster, which is at a very great distance, has different design challenges than looking at something on a desktop screen versus a smartphone. So we're gonna build smart, prepped files that give us guidelines so that we can understand how things were consumed and how we can make sure that while we're looking at it on screen, no matter whether it's a smartphone, whether it is a screen website full size or whether it's a poster on the wall, we're gonna make sure it's all proper size and proper context for whatever the finished piece might be. So let's just get into it. I'll show you what I mean, So we'll begin with a poster. This poster is 11 by 17 inches printed, so some posters could be 24 by 36 at full size. Typically, there are some posters that are much larger, of course, depending on the venue and what you need. Movie posters, things like that. But 11 by 17 would be a standard size for a an independent band. They don't want to spend a ton on printing bars, and music venues don't generally give them lots of space to display. So 11 by 17 is the size that works for us. So because this is a printed piece, there are a few things in the design process that we want to be aware of. So we're going to set up our page with those things in mind. So I want you to start a new file in whatever lay a program that you choose to use. I'm using Illustrator CC 2014 so I'm going to select inches. We're going to use tabloid, which is in fact, 11 by 17. So I want you to go ahead and set that up. Now what we're going to do is we're gonna add Bleed. Bleed, if you don't know, is the area around the outer edge of your layout and I'm gonna show you why that's important. In just a moment, the advanced tab will give you some color mode options. We are going to choose C M y que for the poster, and that's because it's print versus Web, and I won't get into the differences there in any great detail. But just know that C. N Y. K stands for cyan, magenta, yellow and black, which are the inks that are used on a printing press to recreate colors with ink. But RGB is red, green and blue, which is a photographic Wilmore, accurately light based color. So in the C m y que world all colors combine to create black in the RGB, all colors combined to create white. Because light in combination becomes much stronger, Inc in combination becomes much darker, so we need to sort of know that's which way we're working. It isn't the end of the world if you do a print peace and RGB, but let's stick with C M. Y que because that is the correct way to do it. we were bleed set up our tabloid and we click. OK, now the further thing I'm going to do is I'm going to turn on my rulers, which you can do in Adobe Illustrator with Command plus R for Ruler. And what I'm gonna do is zoom into the page just a little bit enough that I can see my ruler numbers up a little more closely and you'll see that this is obviously zero toe one, which means that is 1/2 which means this is 1/4. So we're going to drag a guideline to 1/4 inside of the edge so likewise on the ruler on the side. Here, let's just get our aero too. You'll see that were at 1/4 of an inch. I'm gonna do the same on this side and the same or doubt the bottom of my layout. The reason that I've done this is because the outer edges of this page I happen to know because printing is a process where the ink is put on the page and then the pages cut with big cutters. You sell them, print something to a sheet of paper, 11 by 17. This will be on a sheet of patron paper much larger, and they would put several of these all lined up in a certain way to make them more efficient print. So we're going to use what's called Bleed to extend the ink past the trim, which allows us to avoid the errors. If the cutter is not 100% accurate, we don't want a sliver of page with no ink on it, so we use bleed now. Likewise, Thean side of the page. I have a margin set to 1/4 of an inch. Now that could be 1/2 of an inch, but I know that 1/4 is enough, but I really feel like I want to play it safe. I'll move it to 1/2 for today. We'll move it to 1/4 and live dangerously s. So we're gonna use that as a guideline to let us know. Don't put anything important outside of 1/4 inch. Now that may seem like it's really simple when you consider all the space inside of here. But depending on your design, it may not be that cut and dry and you'll see as we begin to build our page. Just how close to that we get now we're going to save this. So in our layouts, we have our original files, which we won't overwrite. But this one we're going to call Gracie May concert. I can't tight today. So now we're going to start our promo card. Because if you remember from our Photoshopped files, if I flip over to the promo card, we have now Ah, horizontal piece, which is five inches by seven. Actually, you would correctly say that seven by five. You always describe print dimensions and with first height Second, that's just sort of a standard thing that avoids you getting back the wrong size and your printed materials. If you ask for a five by seven, you might get a shock. So it's a seven by five promotional card. So we're gonna come back to Illustrator. We're going to say seven inches wide by five inches tall. Once again, we have bleed. My illustrators already populated the bleed from my last entry. It's already set two inches. You'll want to check these things in your respective layout programs. If you're not in illustrator once again, we want C M Y K. We can go ahead and pre populate the file name, which we will do now, let's just call it that. You could give it another semantically similar name if you wish, but I'm going to go with that. So, uh, now we're gonna do the same thing. We want to show our ruler and we're going to set our safety once again to 1/4 inch, all the way around and you can see our bleed is there as well, which is what we want. So now I'm going to hit save because we've pre populated the file name, but we haven't saved it yet. So let's save that file now for our web page. We're going to set up a file right now as well, but we're gonna do that slightly differently. So we're going to start a new document RGB color space, and we're going to set our measurement two pixels and so with pixels were actually going to set a dimension of 1900 and 20. So we're going to set 3000 pixels for the height. Now, we don't need any bleed an RGB color space, which is fine. Let's pre populate the file name with all of our dimensions in place, we're going to hit. Okay. Now, even though we don't have trim and bleed, we still do need to plug in some numbers here to help us out. So I'm going to review of the ruler, which now is in pixels, not inches anymore. But we're also going to set up a grid. So what I want you to do is go into your preferences in Illustrator. That's if you're using Illustrator. This is illustrator again. So in your left side, under general sync settings, etcetera, I want you to go to guides and grid. Now I've set this color is accustomed. Color green. This is basically just so I can see it more easily because you want to make sure that your your colors don't merge with your creative colors because then it gets really hard to see what you're doing. So ah, grid line every 160 pixels based on our dimensions is what we want and subdivisions isn't is important for now. But this is the basic math that you want and you hit OK and I want I want you to do is you can reveal the grid. If you look under view, you'll have hide and show grid so under view again. If I go show grid that I can see the grid now, the next thing that we're gonna do in the particularly in this file is I want you to go file place. We're going to pick up safari defaults dot j Peg and I'm gonna places up in the top corner . Now you'll notice that it is. It is the with that we've set 1920. So if I click this and I use illustrators, alignment tools, I can see that it's at zero and zero pixels, which is snugged into the corner, which is what I want. Now we're gonna create several layers here, So let's just begin by clicking a bunch of layers and we're gonna populate thes appropriately. So we're gonna move this layer to the top. We're going to call it browser top. What you gonna do is lock that one down, so that's not going to go anywhere. That's going to stay there the entire time. Now, the next layer I want you to create is called Vieux Port, and I'm gonna show you what that means in just a moment. You essentially want to identify your layers and this will help us in the layup process once we get rolling. So now we have the Browns or top in the view port. I'm gonna show you a little bit of a trick and we're gonna get into this as we do the layout as well. I'm gonna bring my rectangle tool. I'm gonna bring it to the corner edge. I'm going to click it once, which is going to give me a dialog box. I'm going to type in 1920 by 10. 80. And that is, uh, has to do with the size of this standard. While standard current monitors of a 16 by nine ratio and eso an HD monitor an HD television is formatted properly to fit in HD movie, which is 1920 pixels and with by 1000 and 80 pixels in height. So there's nothing filling that image. But I'm going to go now and create this sort of really striking green, and I'm going to give it a stroke of Let's do two points instead of one point. Now if I click off in de Select and I hide my grids. I want you to notice that you can see that green box. Now what I'm gonna do is grab the top of the green box and slide it down to where the browser bottom shows up. Now, it's gonna make sense once we get into it. But the purpose that this serves is to show us how the design is going to look in a desktop browser, and that's very important. So I'm going to click an option, drag and get a 2nd 1 which I'm gonna line up with the 1st 1 again. This wall kind of makes sense as we get into it. But I want you, Teoh. Just follow along with me for the moment and just do that. Now. What I'm gonna do is I'm gonna grab my art board tool. I'm just gonna drag the art board down so it matches that third square. Now, these dimensions again may change a little bit as we get into the layout once we see how much space we need. No, If we zoom in a little bit, you'll notice down here in the bottom corner that we are at 50% view that's important to note, and I'll get to that again as the layup process begins. But basically what we've done here and I'm gonna lock down this Vieux port layer is we have we are designing now with purpose, because these green boxes represent if I flip over to my safari window, you can see that this entire browser, including the menu up here. So anything we see in any website we visit is minus this information at the top. Well, we want to account for that in our design in depending on which website I'm looking at. For example, this one, the background takes up some of that space. If I just moved us all the way over, uh, the header image takes up some of that, but you can see, so does the browser. And so does the menu at the top. These things all have to be accounted for. So if we designed for the full size of this browser, But we're gonna end up with these pixels that are not accounted for and suddenly our design gets pushed out of you at the bottom. We don't want that The top of this green to the bottom of that green. This is the view port area that I know all of my website stuff will be inside of. So if I can design each of my elements to fit this space that I have designed optimally for the Web, that would be the idea. So as I moved down, these will just become visual reminders. And I'll explain that Maura's we get into the layup process, but this is pretty important to do. So now our website, uh, file is ready to save, so we've pre populated that name. So we just need to save it into our layouts folder, which we will do and the last one that we're gonna create a mobile, this one we're going to make Let's start with 2000 pixels wide by 1000 pixels high. Now what we're going to do here is we're going to actually place an image from our Images folder, which is our smartphone dot PNG. So I want you to place that into your document. However, that's not where the story is gonna end, because now we have to set up a dimension which makes sense because we're just guessing this is not development. We're not writing code at this point, but we're simply trying to give the developer a basic idea of how big this is going to be. And it also gives us something to designed to, which makes sense. And I'll explain that once we get into the layup process, you'll see how this works. But if I flip over to photo shop and I click on this smartphone guide, I want you to notice the dimension here is 4.7 inches on a diagonal. So we're going to grab our line tool. We have to first flip over two inches. So I want you to transform your ruler two inches for a moment. Click your line to a once and you're going to type in 4.7 inches in length. This is where things get a little bit tricky. The idea is that we want to duplicate this 4.7 inch size as closely as possible with this iPhone image here, and then we can now delete that. So, basically, now we have an image which properly represents the size of a smartphone. So what I'm gonna do is I'm gonna put this up in the corner. I'm going to option drag one and then duplicate that 2345 six We'll give ourselves six toe work with. I think that's a much as we need and then I'm going to adjust my art board now what's again going to create a bunch of layers? I'm gonna leave this one of the bottom. I'm gonna lock it down. So we have our smartphone, our background images and type players. We've already pre populated the file names. We could go ahead and save this once again into our layouts folder. Click. OK, and we verified That is indeed RGB. That's Ah RGB for our website C m y que for our printed postcard and see him y que for our poster. Okay, so that was the unfunded stuff, but still important stuff. So we have that ready now. Now it's time to jump in and get creative, and we're gonna be able to get creative now because we have put those stakes in the ground and that's super important. So now we can think about things a little more like I like the way this looks through that color is cool, but we're going to be reminded through the process by those guidelines by those little smartphones. They're all gonna help us keep our design accurate for riel consumption. So in the next video, we actually get down to the fun stuff and let's get to it. I'll see you in the next video. 5. Video 05 Poster and Post Card Design: Okay, so now that our files of prepped we're ready to get creative So we're gonna go into our assets folder and start grabbing elements. Or if you want to build your own elements, you may do that first before you start this video. And, uh, either way, whatever assets you're going to use, have them ready. And now that we have our guidelines set up in our view, ports established and we know so how to keep ourselves true. When we're working, I'm gonna show you sort of how all that stuff starts coming together. And so just a reminder that I'm not going to necessarily show you how to copy and paste or place every single element. I'm going to skip through some of that stuff, but you'll be able to follow along with me. It should make a lot of sense, but I'm going to show you the important things that you need to know. And let's just get into it and start building some creative. Okay, so here we are with our poster and let's get down to business. I'm going to quickly now. Just open up the images folder under live promo. I'm going to go to poster collaged up PST. So this is the image asset that we have, and you can see the various layers here. I have, ah, layer for the red. There's a layer for some of the very light background splatters. I also have the darker splatters. I have each one of the band members as a group. Then I've got the white splatters and I've got a little bit of red splatter in the foreground, which is really hard to see, but what it does, it kind of breaks up some of these other patterns. It's just a bit of a trick, but you can find different ways to do that if you like. So if you want to recreate this, you can obviously look at these layers and sort of get an idea of what's happening. But this is where that Photoshopped rush comes in. So if I select my brush tool now, I've added these brushes into my brush presets, and I'm going to click on any one of these there, the bottom kind of roll on behalf here of brushes. So if I click on this other brush, you see that the shape will change. I can put a shape down. If I go to a different brush and I go down here, the shape is slightly different. So this is how I created it with a combination of black, white and red and building the layers up. So if you want to go through the process of re creating this, you can look at these files and go ahead and do that if you wish. So now our guidelines and our bleeder going to start to make some sense. So I'm going to go to place, and the first thing I'm gonna do is gonna place that background image, and I'm just gonna place him on the page there. But now what I want to do is I want to actually align that shape to my bleed so I can do that by eyeballing it like I just did there. But let's do it for real. So we're gonna pick the top left corner in our alignment option in Illustrator, and we're gonna type in minus 0.1 to 5, and we're gonna do the same for the other axis. So minus 50.1 to 5. And now our background is perfectly aligned to our bleed. So if I zoom into the corner, this black line here is the actual outer edge. You can see the lines with zero mark on both rulers. That is where the page gets cut. So this is where the cutter cuts. So if the cutter cuts and slightly off over here, it's slightly off over there. We still get ink, and we don't have a mistake where possibly something is cut in such a way that we have the sliver of white paper left. So that's what bleed is doing for us. So that's pretty important. Now what we're going to do is open up the file inside of images called GM Gracie Mei dash logo dot ai. Now, if you don't have illustrator, that's okay. I'm gonna show you. Ah, just quickly what this actually is. It is our logo. And it's a word Mark logo. If you remember our Google fonts, all you're gonna do is type in Gracie Mei and you are gonna typeset that to to open one, which is the thought that we grabbed from Google fonts. And you're just going to enlarge that and you will see magically that that is the font word mark for Gracie Mei. So if you have the old street or file, though, you save yourself a couple of seconds and just copy it directly out of there. I'm gonna scale that down. I'm gonna move that the top area. So now that it's in the layout, not gonna show my guides because we're gonna come back to the guides that we set up earlier , I'm gonna zoom in going toe, eyeball the distance because really, this distance was a creative choice. It wasn't There wasn't any other guiding principle behind how big, how close and exactly the relationship between these two. Except it was close enough that I could see the relationship between these two e's. I think that this is too much American. I could have been in the creative process tempted to merge them, but I think that just kind of breaks it a bit. I don't like it as much as this. That's my creative decision. You can decide to find two, as you wish. So now I have these two guys together. What I'm gonna do is I'm going to increase their size, and now I can give them a rotation. But I want to make sure that I didn't break any edges, which I think I probably did. Which means that we just have to fine tune this a bit and bring it in to make sure it's inside of that safety guide. And this is obviously not so it's bring that in eye ball that into the middle. So again, not a super precise process, but it gets us pretty close. So now we look back at our photo shop layout, and we have some type along the bottom here which has got some funky angles to it and that kind of fun stuff. So, uh, that's all fine. That's going to be in our Roboto font, and we're just gonna come back to our copy deck here. We're gonna grab all of this copyright here. This other stuff visual of the band logos. We we don't need to copy that Copy where it's gonna grab this copy and just on the side, I'm gonna create a text block into which I'm just going to paste all that copy, and I'm going to scale it down s so I can kind of see what's going on here. Usually, I'll just do this to give myself some copy toe work with without having to jump back and forth through might various windows to get stuff. So anyway, the live we don't need that because we already have it at the top and we don't need small copy to actually be there. We just need to know that that copies less important, we need to make that smaller, so that's fine. So let's have a look at our Leo quickly again. So we know that we have some angles here. The venue, Toronto, August 15th 8 PM are kind of some funky angles here, so let's begin with the venue. So copy that, and we will just grab our text tool and paste that in what we're gonna make that white. We're also going to go and make that all caps, so we're gonna start with that. Then we have Toronto. We could just basically duplicate that, but of course, it won't bring over the We'll bring over all the fun stuff. We're gonna do that ourselves. So let's have a quick look again to remind ourselves where this is going. So Toronto was a little bit larger, and so I'm just going toe eyeball. This this is creative. It's not technical. So I'm just gonna basically take a shot. And I know I confined to later. Now, this is all fine tuning kind of typography that I won't spend a lot of time doing. But I just want to kind of get you, Ah, get this layer where it need to be roughly so nudging and tucking, nudging in tucking Get used to those things in your career as a graphic designer. Na jin talk. That's what you get paid for. Now that looks right. I'm gonna go ahead and save that, and that is our poster design. And now we're just gonna cruise right through this promotional card, going to grab our card collage. We're going to click that rate. Where are bleed? Marker is drop that rate in minus 1.25 please. And minus 0.1 to 5. Get it lined up with our bleed correctly now because we've already gone ahead and done this nice finessing work. Let's grab this whole block of copy from the poster. We're going to paste it into place. That said, of course, the angle is now wrong. If we look at our Photoshopped card, we can see that we actually did was just conform everything to a too much more horizontal type arrangement so that it all fit within the space that the card permits. So that's a relatively easy set of changes to make. Grab our headline stuff. We're gonna drop that in real scale that down. Of course. Once again, we're going to use our quarter inch guides to keep us out of trouble. So I'm gonna match up those guys. You can see that I had already prepared the image so that it fit because I went through this process in the beginning, of course, and did all the really slow, curmudgeonly kind of work by making all this stuff, uh, in some where it needed to be, so that that is kind of how I did that. So what I'm gonna do is I'm gonna bring up the venue, and I'm going to rotate that I'm going to match the angle to my header. Gonna bring that back down. What I'm gonna do now is I'm just going to get rid of Toronto. I'm gonna add that to this line because I look back at my design I see the venue. Toronto, August 18 August 15th Rather 8 p.m. Those were all on their own lines together now, so there's a lot less of this fancy sort of stuff going on, so we don't need the eight PM anymore. We don't need the August 15th. We're gonna recreate those, and we are going to also recreate that stuff. Prices, please. There we go. Let's verify in Photoshopped exactly how big that stuff was. So it was probably overall much bigger than we have it. But we can easily enough just grab that whole thing and scale it up. But again, gonna watch my guides make sure that I don't go over them. Bring him down. So that this Ticketmaster guy out here, actually, we can probably go a little further to the right, straight to the edge. In fact, So you see that there's enough noise here that we don't interfere with the Ticketmaster, but we still kind of, you know, complement the images and we tuck into the bottom margin now. So this is a solid layout. Now, Another thing that we're gonna do this is 236%. View if you look down here in the bottom left corner at 236%. We're not getting a true sense of this postcard it size. So if we type command one, we get the actual size. This is kind of what that postcard would look like. In reality. I happen to know this about illustrator and screen resolution. If I type in 125% that actually is a lot closer to what I would be holding in my hand if I were to have my hand against my screen like I was holding this card, that would be more accurate. I can verify that The type is readable. Everything is clear, is not so small that you can't read it. And that's all good. I'm gonna hit. Save. Okay, so now we've built our print material and it looks pretty good. We have a nice poster 11 by 17 and we have a great looking car that find by seven these air pieces that are now designed well enough that if you're looking at that poster a few feet away, the type isn't too small. But it's also not too big because we made sure that We looked at things that the right percentages on our screen and all that good stuff. So now we could move on to the Web creative, which is kind of the same, but it's got some different twists to it. We're going to get into that once we get rolling, so I will see you in the next video, and we will get started on the Web design process for desktop first. 6. Video 06 Website Desktop: Okay, now that we've got some great print material designed and I think it looks really good now we're gonna move into the web space. So we're gonna use those Vieux Port guides that we set up to remind us how this stuff is going to look on the screen were also we've also given ourselves that math for the browser window at the top, and we have subtracted that from our view ports in the middle. So just don't forget that when you're designing for the Web, sometimes you have to design things flat to imagine the page moving underneath it. So I'm going to show you sort of how we set that up and kind of why we sort of put a menu in the middle of the page, even though that's not where the menu would actually be. It's simply visual reminders, and that's what all this stuff is about. They remind us of the math of what we're designing, and it reminds us of the context under which we see things, and that's really important because then you don't make the mistakes that air so basic that you know, once you do it once and you go. I I didn't even check. I don't know how I miss that. Well, I'm going to get your past all that stuff, so we're gonna dig deep into that, and once again, I'm going to skip over certain parts of the lay out process. But you'll be able to follow along with me and create some good files. So let's get down to it. Okay, So here's our website design. And once again, this is the full home page kind of top to bottom view, but we don't really consume websites that way. So as a reminder, I'm going to zoom in a little bit. But I'm only going to zoom into 66.67% of my photo shop just to give you the idea really quickly and I'll show you what this means. So if I were to hide the bottom portion all the way down to their roughly, this is our objective, basically, is to create a website which will be seen pretty much like this at first glance. And there's gonna be a way that we handle that. So you're not going to see this red part of the bottom that begins before you have to move down. So we're gonna fill the screen a 16 by nine ratio monitor at 1920 pixels wide by 10 80 pixels high is the idea. But we have to account for this browser window in our calculations as well as we talked about before. So we have to make sure that we designed so that all this stuff fits nicely and works the way that we want are designed to work. I'm gonna be the example quickly of what I mean. If I come back, Teoh my chrome page here, I'm going to go, actually a navigate to my website. So my website is Sean Berry creative Sean Berry dash creative dot com, in fact, and this is what I mean by the full screen experience. So when I'm at my desktop computer and I look at this website, my image goes all the way from the left, right across to the right, fills the screen, and if I scroll down to get the rest of the information, it's all there nicely presented. And so this full screen design is sort of what we want to do. Now. In the case of my website, I didn't do a full top to bottom header because this is a blawg side. I want you to be able to see the block material, but we're gonna handle the Gracie Mei website a little bit differently. So let's come back to photo shop just to remind ourselves that what happens here is that we got this nice menu and this is gonna be a slider that you can actually move with these little left and right buttons here, you'll actually be able to scroll between different albums and the header if you like, And you could click on the sample now and you would hear a little excerpt from their latest release, Shipping Harbor, which would be a really cool feature, and you can follow them on social media. So if you click this little Gracie Mei button, this thing, Jake weary, slides down and just basically shores up the screen to this point where the Gracie Mei tour promotion begins. But look, we still have a menu here, and I'm gonna show you how we account for that. Now, this menu would not be literally sitting here in the design, rather that men you would always be present at the top. But the best way we can show that in a flat design is to simply keep repeating that menu to remind us visually that is going to be there as we move through the site. So once again, we are in our illustrator file with our browser top and view ports locked down. And once again, just to recap that browsers up there to remind us that this takes up space, you're actually going to see this browser window. You know, when you're browsing and when you scroll up and down that browser window doesn't go away like it does in our illustrator file. And these view ports, these little green lines indicate each point at which we run out of screen. So if we scroll down a little bit, we see that these two lines are a bit more narrow. But they take into account the mathematics of that browser top so that we know roughly how much designed space we have as we move through the layer. So let's begin by looking at our layout again. So we know we have a navigation menu, that navigation menu, all the copies, of course, in our copy deck for the website. So I was going to come here and I'm gonna grab all of that will pop back to my illustrator file and I'm going to actually create a new layer because I just realized now that this menu's gonna move around a bit, so maybe I actually want a separate menu dash navigation layer. So we're gonna use that because we're going to be duplicating some things and moving them around. So let's actually work on that layer. So I'm gonna create a quick text block. I'm just going to pace that copy in. I'm gonna select all and we're using Roboto font. So when you visit Google fonts, you'll want to get Roboto to begin with, and you also need to open one. In fact, I believe it's called, So you'll need those two farms from Google fonts, But we're gonna begin with Roboto and let's make it Ah, regular for now. We might change that, depending on what are design looked like. So I know that I don't need Facebook and Twitter and brackets because those are just to remind me about the social sharing, But I'm going to delete that and of course, going to get my type into shape here. I'm gonna put four spaces 1234 between each one because I've just discovered that four spaces is about good to represent that you want some separation between your menu items and it's usually a good measurement. Okay, so now we're gonna go to Font Awesome. And you're going to see why it's so awesome. Font awesome. Right here. We're going to go down and grab the Facebook first pasted in and select it and change the font to font. Awesome! And there is my Facebook icon just that simple. I'm going to get Twitter and I'm gonna add instagram A czar layout indicates Although I did not put that in the copy deck, that's quite OK, so I'm gonna grab Twitter first. It's right here. A copy paced gonna come back and get instagram. So now we got share on Facebook, Twitter and Instagram and we're going to now grab a square box and we're just gonna make a shape. But before we do that, let's actually have a look at our grid again and let's get in here and do some actual math . Get rid spotlight So it looks like we've actually got We're very close to four panels, so let's just make it four panels, four panels of the grid. As you can see, make sure we're on the edge, which we are. We need to fix that up and we're going to send that to the back. We're gonna make it 50%. Opacity will also said it to multiply. Now, we're gonna center a par menu here a little bit, and we are going to make it white. However, we should change our palate now. Gonna change our Palito rgb because we're working in an RGB file because this is web, So we wanted to be RGB. Now, we also need the Gracie Mei logo again. If you don't have this logo, you can, of course, recreate this by just using the tope in font that will give you the gray seem a logo word. Mark. Scale that down and get it up into the menu. We're gonna basically use three menu blocks cross, and I think we were almost the height almost the height of that menu block. Let's just verify and photo shop. Yep, That's kind of how we did it. And, uh our menu looks pretty good, but let's make sure that we've got the same amount of space three blocks on the right side , which now we do. And, uh, I think we could probably just make that one touch bigger was back. And that looks pretty good. So that is our menu, layer. We're gonna come back to our layers and we're just going to lock that layer off for a moment and come back to images. And now we're gonna place our theme image, which is inside our project folder Inside Images inside Theme image select in place. We're gonna place it underneath that logo as well. Now, the resolution of this image isn't actually technically large enough, but that's OK. We're just going to go ahead and scale it up and then we're gonna do is move it just a bit . So it's where we like it. And then I'm going to use the masking technique and illustrator where I draw box over top of the image. And I wanted to be that high. So I'm going to draw this box empty. It's Phil. So it's a clean box without any stroke or Phil, Select the image Command seven on the back, and it is now masked into place. You see that? We're actually using this view port to remind us that this is where the screen bottom is. So if long as we're designing everything within this window, we're gonna have a nice full screen design, you notice that the screen size at 75.99%. So we're not 100%. But if we scaled up to 100% now, we can see the actual dimensions, even though we would have to scroll around to get past all of illustrator's tools. But if we didn't have those tools, we would see this full screen with the exception of the browser window at the top, so we can look at our type, relatively speaking and see the size is pretty good and the size of the logo is good. The images nice and bold in the foreground. So we're doing pretty well there. So let's get the rest of the elements into the header. And, uh, I will see you in a moment. So here's the header completed. I just want to skip ahead. So you didn't watch me have to do all that stuff. But I just want to show you that I went up to font awesome. And you'll see these various little arrows, single and double arrows up and down, left and right. You can actually choose any of those you want. If you want to defer up the design a little bit or choose the same one that I did is perfectly fine. And you'll use those to create these little guys here by using that same fought awesome font that you find an illustrator now. And this is of course, this text is Roboto, our Web font. And we just used a radius corner box to create the sample. Now button and another font awesome icon and this little black radius corner box to create our down navigation again. We're not focusing on creative and designed specifically as much as we're focusing on layout technique, so you may have to play around a little bit with your illustrator or whatever application you're in to create these little radius corner boxes. There's plenty of online tutorials what, how to do those things. And I want you really focus on this view port strategy to make sure that you've designed nicely within the space so that you know, this is a full screen website right down to that green box, and I want you to zoom into your design at 100% and just verify all your elements are kind of singing the way you want them to, and everything looks like it's a good font size. It's not too big, not too small. It's easy to read. The navigation is easy to find, etcetera, etcetera. So that's really the point here. So we're gonna back up again to 66.67% which is just kind of illustrators. Next level down and let's begin to work on our promotional section. So we're gonna come back to our layers again, images layer, and we're going to begin by placing our image for the music promotion. So we've got our images, live promo and Web collages. The file that you're looking for This is not going to be exactly the size because we just created these assets from the card and poster. But we can place that in place. We're going to move it up slightly because I know that I'm gonna want, uh, it to come up underneath that menu a little bit. Once again, I'm going to take my square tool, my rectangle tool. Rather, I'm going to draw it out the size of my view port with zero Phil so that I can use it as a mask. And I'm going to hit command seven to mask it and I may have to committed check my mask and make sure that everything is fine. I'm gonna fix up my edges here, and I'm gonna fix up my masking. I'm gonna continue placing the elements going to come into the copy deck and come down to content Section one, which is the upcoming shows. Gracie may live and put all the details in. They're going to copy and paste this and start building our elements according to our Photoshopped file like this. And I will see you in just a moment. Okay, so I've placed all of my elements in the page. According to the photo shop design, I made sure that I lined things up. So assuming that you've also caught up with me here and pasted all this copy in typeset it as roboto. All that good stuff. Copy and paste the menu. Bring it down. I'll show you why we do that. Essentially, as you move through this website, there is some javascript that we're going to propose that the developer help us with, so that no matter where we are here, this menu will be fixed to the top of the page. So when I scroll and you see that menu fixed there, what would actually happen is that that menu would stay where it is and the site would scroll underneath it. Which is why I keep copying and pasting it into my view port for each design section to remind me to leave enough space for that menu because it's always going to be there. So I don't want to put anything too close to the top because on the menu is going to interfere with that and our get tickets. Button is just a nice radius corner white box, and that is our concert promotion section of the website. So I want to review quickly. The whole point of this is lay out basic. So let's do a quick little review, turn on my grids, and what I want you to notice is that the three blocks on the left side, and the three blocks of our grid on the right side are actually consistent all the way down . Our Twitter logo ends where those three blocks and so it lines up now are images, float underneath things and go full screen. But that's a wonderful design choice that we can make. But the content itself, that which is above the images, is all conforming to this grid so that we have equal space on either side. It helps the design to look good, and it helps to keep us on track with our full screen experience, because we know that if we zoom all the way into 100% like this are type is our type is a nice readable size. And if we scroll over to the left so that we can see the right edge, we know that our logos and our general website spacing is going to be nice and comfortable is gonna have plenty of space. So we're not getting, you know, something like this where it's getting cut off in the edge and it looks uncomfortable is going to be, ah, a nice design element. And that is why we are using all these view ports and grids to help us keep track of that stuff. So now the next part of our website, let's zoom in a little bit. The next part of our desktop website is now the media and discography sections. So we are done with the promo. We're done with the header and style of the site. Now we're getting into some real content which is dynamically served by the server, and we're going to work with our developer to make that happen. So let's go and build this section using the same approach we've been using, which again, I'm not gonna be labour design. I'm not going. Teoh teach you, illustrator, I'm gonna skip through this stuff, but I want you to build it along with me so that we can work this out together. Okay, so I've completed my media and discography section my vlog section, As I imagine you are, I've corrected. My typo is now says vlog, not media copied and pasted my menu. I've created my thumbnails and masked them out so that they are the same dimensions in the same position as my other three videos, which makes a lot of design sense. So we want to do that. We've copied and pasted our titles from our copy deck and off we go, but also has been built in context. So we have reminded ourselves, and I'll just keep beating this into you for the entire course. If nothing else, we have designed with context. So we have been watching. Our view ratio were at 66.66 percent, 66.67%. If I zoom in one more time, I met now 100% view. I can look at my type and verify that it's the right size and this image is a good dynamic size full screen and my browser and my menu accounted for. So we've built a solid design that is develop a ble and execute a bull very easily in the way that we want it to be done. Okay, perfect. Now we have a great full screen desktop layout and it looks really awesome. I think anyone who saw this online would just be like, Wow, this site is great because it's really functional, but it's also really smart. It gives them a taste of the music. It gives them some great photography upfront. And as I moved down the site, the experience keeps going and they always get lots of media rich feedback from the site, and I think that's really important. So now we get into the mobile space so much like we use the view ports here to keep us honest in terms of the desktop. Now we have to think about what happens when you're looking at on this little thing here and those little smartphones we set up in our file way back. They're gonna help us a lot by keeping us honest. And we're gonna create a really nice, rich, mobile experience that anyone with a smartphone who goes to this website isn't going to be like. I can't really read this. They're gonna get an awesome, awesome smartphone experience. So let's get down to that in the next video and I will see you then. 7. Video 07 Website Smart Phone: Okay, so now it's time to begin this smartphone responsive Web site design. Now, as I had said before, there's several stages of responsive design that you might go through. You might have a size for tablet or for a small desktop screen, then tablet, then tablet, vertical and then smartphone. Horizontal smartphone, vertical. Sometimes you may have to account for that many levels, but we're just going to account for the smartphone vertical kind of the smallest version under which we would see this website because we weaken. Contrast that with the largest version, which gives us design solutions for all the steps in between. So when you do it project on your own, you may want to actually go and find those dimensions online. You can find out how wide a tablet is and what it you know, what it's screen dimensions are. And maybe you can take this project and do another version. If you want to get some or design out of your system, you don't feel like this was enough. So anyway, we're gonna get into the smartphone now, and we're gonna figure all that stuff out. So let's get down to it. So let's just quickly remind ourselves about our full desktop version website. If I zoom in, we have a dynamic slider on the front page, which shows all of their albums one after the other and we can click a little sample. Some JavaScript there will help us out. We could slide down to the next panel. This way we can see their live show coming up in. Of course, we remind ourselves of the menu, which is always there, and we have our media discography. And of course, this was still are Photoshopped, Typo, That should save log and we got our footer. So what happens when you get down really small? So if we go back to my website in my browser here, you can see that my website is full screen. But what happens when? Ah, this happens. So you're on a phone and zips all the way down to the bottom. You can see the menu here collapses into a menu which will slide down, which is fine. We still have our log in. We still have our image, although I happen to know that this image is oriented to the left, so I made sure that I designed my image accordingly. And, ah, now all of our blawg articles, which used to be in rows of three or now stacked and you go all the way down and everything is kind of on top of each other, which you could imagine would be the way you would need to do that on a smartphone. So we are going to come back out to full screen on that and zip back up to the top. But you'll notice it's the exact same design, just the C. S s changes. And this is a developer trick called responsive or fluid design. And so we're going to duplicate that process in layout. But of course, we're not developing. We're only doing flat files, but we still need to know that we are going to create a responsive, fluid design. And we need to know how to do that and to prepare ourselves correctly to use all of our good layout basics to make sure that we designed something that works well on mobile. So this is our desktop version, and then let's have a look at our mobile version. Everything is still there, but is there in a much more compact form and we are going to convert our three horizontal video thumbnails into one video thumbnail. We're gonna have some little extra navigation that kicks in. And let's a scroll left and right through our discography through our media through our vlog and our footer is just going to be one panel on and so on, all the way at the bottom. So when we land on the home page of, I just zoom in one level, it's gonna be bad resolution, but that's OK. Uh, this is a little bit bigger than the phone you would hold in your hand. You could actually hold your own phone up to the screen. And if you have a smartphone and you literally place it next to this, you'll see that this is likely about 25 to 30% bigger than what it actually is. But if I zoom back one more level, it's much smaller. So we're somewhere in between this view. But that's OK, because if you remember our illustrator file, we've given ourselves a proper math to solve that problem. So once again, these are our smartphones all lined up, and we happen to know from our 4.7 inch test that we did when we set up this fire. We know that these are pretty accurate. They may not be 150% which actually is exactly how much I'm zoomed into. They are pretty accurate, and they give us a good representation. I'm gonna tell you how I approach this. I'm going to select my bottom view here, and I'm gonna type in 125%. So at 125% view, I also happen to have an apple smartphone. And when I hold my smartphone up to the screen at this resolution, it is exactly the size of my own phone. So when we create this four by seven diameter with that trick that we use to center file up when you put your phone next to the screen, it should be pretty much the same size. And that will help you to just remember that you're not looking at something that's going to be twice this bigger twice this small. This is the actual sides. So for the purpose of that, I'm gonna leave my view at 125% view that way, I can always be reminded of exactly how big my elements should be. So let's come back and have a look. I'm gonna zoom in just a bit for the purpose of looking at the detail here in my photo shop Mock up and we have our menu. We have Gracie Mei, but our menu has collapsed, so that's gonna be pretty easy to create. Gracie Mei is still there, but is black. We're gonna use just some black, because why not? We used to have a full image, but are full image would fit in a weird way. So we're going to use Ah, little different treatment. There are sample now our latest release. It's all still there because this is the home page. I thought it might be nice to have five little dots down here that represent you could click on 23 and it would slide. But if you prefer to keep everything consistent, you can use the same navigation that's up to you. You can make your own design choice there, and ah, use our little double down arrow that we know If we click that we will slide up and down to our next section. So let's focus on the home page and let's get started. So in my layers I'm gonna select image because that's going to be the first thing that I put down is an image. I'm going to go and place my theme image from the theme image folder in your assets. I'm going to just loosely create, uh, that at size and then I'll have to, of course, snugged that up and kind of find where it wants to be. And that looks actually just about right. I think it was a good guess. So I'm gonna pop back over to my logo file. Now, once again, I'm gonna grab the white Gracie May. I'm going to return to my mobile page. I'm going to click on my type player and paste that in. But now, of course, it's coming in quite large, and I'm gonna scale that. And so I'm just going to quickly create my menu. Gonna grab one of those double down Chevron's like this. That's just what I'm deciding. I think looks good. So going to come back to my illustrator page and you may use any one of these that you think is cool. I encourage you to kind of change things up a little bit and try your own thing. Pace that in, select it and go to my font. Awesome. And I get a double down arrow. Now I'm going to use Illustrator's tools here, and I'm going to select the logo, the image and the menu. And I'm going to use my alignment tool and center them all and then bring them back into this into the middle. Sometimes you have to wrestle with illustrator a little bit. It will want to snap the things and kind of annoy you. But you will get over that pretty quick. So there's our menu. Now we're gonna put a black box behind that whenever it appears on something that isn't black. But we'll get to that in a few moments. So I'm gonna cut and paste and create the rest of the elements for my home page, and I will see you back in a moment. Okay, so we've created our home page view, and I put a little bit of a dropbox behind that type and over the image. If you notice that just to kind of help the readability of the type, and these are all things that can be developed. You'll want to talk to your developer along the way and make sure that all of your stuff is easily done and semantic and all that good stuff. So that's how development works. I've also included the Gracie Mei Responsive Design Little title here with Smartphone, with 4.7 inch screen at actual size as a reminder in case we show the store client and they say, Hey, is this actual size or weight? Yes, it is. I thank you. You've used the correct dimensions. It just kind of helps Teoh be a reminder. So once again, we're making sure that we can read everything and that we're viewing this at exactly the size. Our phone would be at this very distance from our eyes, and that's a really useful way toe work. So let's move on to our next section, which we happen to know is our, uh, show promotion. That's what's Ah, that's what's up. Next, we're gonna build that the same way we're going to select our images layer. We're now going to go in, grab our image unless you want to create your own as we talked about. You may feel free to do that and change up the design and make something cooler than I did , and that would be great. So, uh, live promo. We're gonna look for our concert smartphone, PSD and hit place. I shouldn't say I phone on the Internet or somebody will come to get me, but and now I'm gonna bring over my menu. So I just use my illustrator tools to indicate that when my developer partners sees this, he or she will know exactly what it is that we're trying to go for. So once again, we're going to do some copying and pasting from our copy deck back here to our website. Go down to content section one, grab all of our details and copy, and we're gonna continue building our concert promo page and I will see you back in a moment. What? So we finished the rest of our designs and our view ports all look really good. We've got these nicely designed gray background but dynamic content panels within our mobile viewers. We slide down through the view port. We see all these really nicely consumable bits of information, even our footer looks interesting, which is sort of a nice accomplishment. And so it's dynamic and it is also designed in context. And that is a huge leg up when you can design this way because you avoid all those pitfalls when you don't have context. And so these look really good. We got some simple navigation that's easy to understand in a really interesting website that we could be proud to show our client you're done. You totally just finished a smartphone desktop Responsive design for a really cool music website. How awesome is that? And now we've got some print material to support their show, and they have some cards they can hand out to their friends and their fans. And all of this stuff is all working together. We created some awesome design, but we didn't focus on design. We skipped over all that stuff. That's a whole other course in itself. But we made sure that everything we designed fits into the view port. And that view port means a poster to I'm using that term mawr broadly than it was intended to. But it's fine because when you see something on the wall, it's gonna be the right size. When you hand out that card to your fans, it's going to be perfect for holding in your hand and seeing all the details for the show. It's gonna be awesome. And then the website is going to give them a great experience, whether they are full screen desktop or whether they are on the smartphone like we just did . It looks beautiful. It works well, while we hope it works. While the developer may give us some feedback on that, things may change slightly, you know, as it does often in the process. But that's totally cool. This work looks really good, and you could be really proud of it and feel free to put this in your portfolio if you want to and show people Hey, look at this stuff I built. I'm literally on video giving you permission to use this and call it some spec Creative. Absolutely. Do it. And, uh, I hope you're proud of it. I'm proud of what we designed together. And so I'm going to see you in the next video for a quick little recap and we're gonna talk about what we just learned. So I will see you shortly 8. Video 08 Recap and Conclusion: Hey, listen, that was a lot of work, but it was totally worth it. I hope you had as much fun as I did. I love the design work that we created. A probably even try to sell it to my nephew and his band, for that matter. But I hope you're proud of the work that you were able to create. And if you did this work, if you followed my design or if you did your own design, I would love to see it. So if you're able to leave it in the comments for this course, please do so. If not, you can come to my website, which is here. Sean Berry dash creative dot com. Go to the contact form and you can attach your files. You can email me directly and I'll be active in replying to emails. Eso please. I would love to see what you've done and hear your feedback about this course. You can also catch me a YouTube youtube dot com slash ultraman. Toronto. I know it's a terrible name. Can't get rid of it now, but anyway, come to YouTube and I've got tons of smaller videos, not quays in depth is this course, but they will give you all kinds of nuggets of different design principles, theories and quick tips on how to do things to improve your work and your workflow. So I really hope now that your workflow is going to become a nice, solid pro workflow. It doesn't matter if you're doing this for yourself. Are you doing it for clients? It's all the same. You lock down this process and your work will improve. It doesn't seem like it will, but it honestly will. I promise you. So I hope you had a much fun as I did. So join me in the next video to conclude this course where I'm just going to give you some final closing thoughts and what's next for you as a graphic designer. 9. Video 09 Whats Next: You know, one of my favorite things about graphic design is how immediate it is and how response of a medium it is to when we have those creative urges. Suddenly I'm an artist and I'm a musician. I've been both of those all my life. So music and art become really great outlets for me to sort of, you know, quench that creative thirst when something comes over me. But there are times when you to sit down and play music or to paint a picture are are very sort of time consuming efforts, their dedications to the art. But graphic design gives me a fast medium where I could do something like a cool band poster where I could do a book cover. Or I could make a fake ad or a fake website or just redesigned my own website, thinking, What would I do with it if I just didn't care anymore? And you know, it's a really great way to just get all that energy out into something that looks cool that you could be proud of and show your friends and they dig it. And then who knows? You may get client work out of this stuff that you do just on your own. I've done that many times. I've gotten client work from spec designed that I've done just for fun. So please keep designing. Always designed, always create, never stop because it's so much fun and it doesn't matter who likes it or doesn't like it. I get criticized on my design all the time, and, uh, and I'm a pro and I know what I'm doing. So don't worry about those guys, but have fun creating stuff for yourself for your family. Your friends create a local church brochure if that's what you're into, but just have fun doing it. So what's next? I really, really love for you to take these principles and do other stuff. Do the band poster and the website like we talked about with your own favorite band. I'd love to see that, but I'd love to see you try something entirely different. Take this idea and maybe make the same material for an event that you either a really one or one. You make up and fool around with stuff that you don't have a deadline. You know, have a client, you could do it for yourself and have fun. I think that would be awesome and I would love to see it and to hear from you. So I hope you enjoy this course and I'm here to help you anytime. I'll be actively involved in reading comments and send me an email at my website anytime you want to talk. And thanks for joining me on this course and I'll be back with more. So until then, you stay classy and I'll catch the next time Goodbye.