3.2 Creating Style Tiles in Adobe Photoshop

Hey, welcome back to Responsive Web Design Revisited. In this lesson you will learn how to create style tiles that can be converted into CSS and then applied to your responsive web design. Now, in this tutorial, we'll be using Photoshop, but you can really use any design software that you like. As long as it gives you some kinda ability to extract CSS from the design that you create. In Photoshop, there are two really solid options for extracting CSS. One, and this is the option that I use myself, is a plug-in called CSS Hat. And the second option is Photoshop's own in-built ability to extract CSS. Now, I'll show you both of these just quickly. Now the trick to working in Photoshop for web design is to make sure that you only use layer styles that can be converted effectively into CSS. And the CSS Hat website gives you a list of these properties. So these are all of the properties that you can use in your design and be comfortable knowing that you're going to be able to create CSS that will accurately refec, reflect what you've created. Now whether you're using CSS Hat or Photoshop's own CSS extraction process this is still the list of properties that you're gonna want to refer to. Now let's have a look at an example of how this works. So earlier I just created this simple button type of a shape, so we've used several of the properties that were in the list you just looked at. Now, with this layer selected, I can use either CSS Hat or Photoshop's Copy CSS function to turn this into code. With CSS Hat all I have to do is open up the little panel, and that immediately gives me all the CSS that I need to recreate this shape. I can have a look at a preview for that, and you can see that there that's very, very accurate. That's very, it does a very good job of reflecting what you've designed. And you can even open that up in a browser to make sure that it's to your satisfaction. Now from there, you can go ahead and you can copy each of these lines of code. So as soon as you click it, you'll see a little message down at the bottom that says copied, one line. And you can also hold down Shift and select multiple lines to copy them. If you don't have CSS Hat, then the other way you can do things is, you can right-click on the layer, and you can just go, Copy CSS. So that will put the CSS for this shape into your cache, and you can then paste it into a file. You can also use this same process to carry over text styles. So, this is some text with Open Sans font. It's set to extra bold white, 24 pixels. And if we, with this layer selected, open up CSS Hat, it will give us all of those properties in ready to copy CSS format. And again, we can do the same thing, just with the copy CSS function, and we can drop that straight into our CSS. All right, so, on to producing our style tiles. Generally speaking, I find the best place to begin with almost any slide design is by choosing the font family that you're going to be working with and getting down some basic typography. And for font selection, I pretty much always go to Google fonts, and the reason for that is, they're free. There are no usage restrictions, so you don't have to pay for a certain amount of, use of that font. And you're also more more likely than with any type of web font to find that your visitors already have cached versions of Google fonts. So you can provide a faster loading experience for them. Now there are a couple of considerations when you are choosing web fonts, when you're choosing Google fonts. The first is that you really need to preview that font in the browser. Because the way that the font will be rendered will be different in the browser to how it's going to look in Photoshop. And the second is, if you're working with web fonts all the time, it's really good to have an easy way to pull them into Photoshop. And we're going to cover those things now. First up, let's head over to Google fonts. Now, I typically find that the best way to find interesting new fonts is just to choose Trending. Now this is the part of the work flow where you'll be happy if you've asked the client, or if you've asked yourself what the feel of the site is, you want, you are trying to achieve. If you're going for professional, fun loving, that's gonna help you to choose a font. And the font is really going to largely set the scene for the whole design. So, let's have a look through here. Okay, Voces. This looks like a pretty nice font. Let's have a look at that one. After you've picked out a font you like the look of you're probably going to want to test it out in a few more different ways than you can just through the Google Fonts website itself. So a great tool to help with that is Type Wonder, so that's TypeWonder.com. Now there are some paid tools that do much the same as this, but I've found Type Wonder to be fantastic. And there's no charge to use it. So there's a couple of things you can do with Type Wonder. One, you can hit TypeTester. Then you can find the font that you're interested in and choose it and it will apply to this window here. So we are testing Voces. And then you have this really nice little interface where you can mess around with a few of the different properties. That you wouldn't otherwise get to play with if you were just taking a look at the Google Fonts site only. So that's pretty cool. But one of the even more helpful tools that Type Wonder offers is a browser extension. And you can see that I have this little icon up here on my toolbar. Now this will let me apply the font of my choice to any content that I want, any website that I want. So here we are back at notlauramipsim. And what I can do is apply the font that I'm evaluating to some of the place holder content that I've already working with for the project. So hit the little icon. And that will load up our site in this interface. And now again, I can bring up Voces. Choose that. Go Use. And now I get the opportunity to see how this font will look when it's applied to the actual content that I'm going to be using in the site. Okay so next up. Let's say I've decided that Voces is the font family that I wanna use for the project. Now I need a way to get it into Photoshop. And you could go through the process of manually downloading all the font files. And manually installing them every time that you find a font that you like. But that can be pretty laborious. So another tool that you'll find really handy is Sky Fonts. Now, this is also a free tool. And I'll include the link so you can go to the page that you see on your screen here. Now, Sky Fonts is a little program that will run on your computer. You can see I have the icon running on my machine right now. And what it allows me to do is just come to this site and browse for whatever fonts it is that I want to have accessible via Photoshop. So we are looking at Voces. Now I can click this button. Check the box to add the entire family and then hit Add. And that's it. Now when I hit Photoshop, voces will be available as a font for me to choose. And there it is. So just like that, that font is now available in my list of options. Now after you have selected a font family, the next thing you are probably gonna want to do is pick out a color scheme. And this is why you want to always make sure that you get that logo from clients before you begin. Because you want the ability to sample colors from the lay, from the logo. And this will help you to create your color scheme. So you go through, you'll create some colors. And once you've done that, then you're ready to move on to actually designing each of the content elements that you planned for earlier on. So let's have a look at what we have. So we know that we want to place the logo image next to the business name. And we know we want to create a right aligned nav menu, with both an expanded and a compacted version. We know what we want to do with our hero units, our major selling points, so we have all of this stuff already mapped out. Now rather than going through and showing you the whole process I'll just skip through and I will show you where we ended up with, with the style tiles for the website. Now you already know what the website ended up looking like but before it got to that point this was the process that we ran through. So just like you just saw, start it by placing the logo and then selecting a font. Now I actually used a font called Lato in this case. We looked at Voces just to show you how you can easily choose fonts and bring them into Photoshop. And after doing that, I went ahead and created a color scheme. So these first two colors are sampled from the logo, and I then chose some highlighting colors that would work well with these. And that's after a few experiments, so that's another part of where Style Tile is really useful. So I played around with some orange colors, but they didn't look, they didn't work quite as well as these aqua green colors. And some of these colors will also come together as you are creating the style tiles and you're seeing what works well together. So then it's just a matter of going through and creating a style tile for each one of those components that we mapped out. So here is our expanded menu and we've got every state that can be involved in that expanded menu is covered. So we've got our default menu links. We've got how they look when they're active, how they look when they're hovered over, and how they look when they have a child item beneath them. And we've also got our drop-down menu designed. And you remember from a previous video, we talked about making everything big. So you can see that these menu items are quite large. There's plenty of room for touch interaction. And then, we also have our collapse navigation menu. So this is just the same thing again. Remembering that we're using these properties that we know can translate into CSS and we are working with our content plan. This is our Hero Unit. So again, just creating some coloring. We've set the right, our font sizes to working well together, font weights that work in well with the type of content that we know will appear in the hero unit. We also know from our content plan that we wanna have two buttons. So we have two buttons here, one is highlighted more than the other. Because this would be the purchase button so we wanna draw a little bit more attention to that. And this would be the learn more button. Moving on, also have our major selling points. Now I have gone through and placed the icons that will be used against each one of the selling points. And I've just done a little example of how one of these selling points will look. This is our expanded information A section. And again, this is reflective of what we have mapped out in our content plan, with the background color determined and the border, top and bottom, also set up. This is our expanded info B section. So we've created a style that will wrap each one over individual testimonials, and the style for the source, as well as for the heading for that section,. And then finally, we've designed this style of our footer. So we have the background color, we've got the text sizing and coloring, and we've got the sizing and coloring for the social icons. Now, you'll see in all of this, there's nothing in place that determines what the layout of this site will be. These are just individual components so that you can get the overall styling happening. Now, these can then be pieced together and they can be coded up so that they're responsive from the absolute word go. And I also mentioned earlier that you may or may not want to bring your clients in at this stage. I would suggest perhaps not. Because it can be confusing for a client. They may not really know what you're talking about when you say no this isn't actually your website this is just the style tiles. They, they might say I don't know wha, what you're talking about. Just show me your website when you have one. So it might be actually best if you go through the process of converting this into CSS. And then show the client something that they can understand easily. And with the way that we'll be deploying these styles into your sight. You'll probably find that it's actually easier to perform revisions to your coded up work than it is to perform revisions to a fully layout designed PSD. Okay, so with these style tiles now together, you have enough information to go on and begin coding up the foundational code of your site. You have your approximate dimensions for your different components. You know how your typography is gonna come together. So, you're ready to move into coding. In the next lesson, you'll learn how to build your basic code shell. And this will be the basis that you will use for pretty much every project that you ever create. And it'll bring in all of these foundational common elements that you want to have in all of your responsive websites. I'll see you in the next lesson.