How To Design and Slice Email Graphics

1. Welcome & About This Class: Hi. I'm Vanessa Tobias-Jones. I'm a graphic designer and Skillshare teacher, and you are watching How to Design Graphic- based Emails. As a graphic designer, I do a lot of different types of marketing design like fliers and social media graphics, but what I do the most of is a lot of emails. Having a really well-designed email is actually super important because it's one thing to get people to open your email with a great subject line or offer, but to actually get them to read the email and then click through to your websites, take advantage of that offer or to read more about what you have to say is actually a lot harder than it sounds. So in this class, you will see me take a copy written by somebody else. I will take that copy and create a wireframe on camera, so you can see my thinking process when I'm actually getting ready to design an email. Then, we'll take that wireframe and open it in Photoshop, so you can actually follow along with my design process and maybe learn a few tips and tricks in Photoshop along the way. 2. Your Project: Redesign an Email: For your project, I would like to see you redesign an email you received that you feel could use a little bit something extra to make it that much more special. I would like to see the before, so a screenshot of the email that you received, and an after the completed product that you redesigned. If you can include things like wire-frames, or scribbles, or doodles, or anything that helped your thinking process while you're designing, that would make it so much more better. 3. Tools & Resources: To follow along with this class, you will need a pencil and paper for creating your wire frames and a program for creating computer graphics. I'll be using Adobe Photoshop Creative Cloud 2019 version, but you can use any number of design programs available. You'll also see that I use some stock graphics when designing in this course. The graphics I used are found on Envato Elements, but there are a number of other resources you can use to find royalty free or open source graphics and illustrations. I'll provide some useful links in the class project description. 4. Reviewing Brand and Content: For this class, I asked a friend of mine who was a foodie blogger to write a short post we can use to design an email for this class. This way we can go through the project as if we're designing for a client who has just providing us copy and brand guidelines. The blogs brand "Panda Opinions" is bright and often satirical. We have basic branding provided from the client, which we'll use later in this class when designing the email. The first thing that jumps out to me is that the copy well written to be humorous is very text heavy, we'll want to introduce graphics throughout the email to keep the readers interests and guide there. We'll also want to include a headline somewhere in the message and since there isn't really any hierarchy in the text. We could write a headline, we might want to include the topic of what the email is about, such as the joys of cereal for dinner. We'll include this later. We may also want to include another sub-headline and this also seems like a good spot to call out. In the next step, we'll create a wire frame with this copy. 5. Draw Your Wireframe: So now we are going to dive into the actual wireframing of this. I'm using an iPad Pro and iPad pencil or pen, whatever it's called to do this sketching so that I can record my screen. But feel free to use Photoshop for wireframing, or Adobe XD, or just straight up paper. I do tend to wireframe on paper more than I do on the screen, but everybody has their own process. So whatever works for you. I want to just get a little rectangle going, shape of the e-mail. I like to leave this space over here empty in case there's any notes that I want to write to myself. So we do have a logo for P&O opinions, the blog that we're writing this email form. So we'll want to say it's the logo's a little P& O. I just want to say this logo up here, I can't spell, Pandopinions. You get the idea. Logo. So the copy for this email actually lends itself really well to be able to design like fun graphic to go with this. So for this particular email, I'm going to put a graphic at the top of the page. So we'll just put that in there. For this graphic, in the copy here, she talks about eating the finest caviar, and cheeses, and champagne, and truffles. But then there's also the juxtaposition of eating cereal for breakfast, and the choice of just having something unhealthy for dinner for the heck of it. She also talks about eating cereal out of a wine glass. So I am going to just make a note here to myself. Graphic of cereal, maybe in wine glass, maybe have some caviar, cheese, etc. Then we have the inter headline, should be obvious by now. I have a very fancy person. So let's make that a large headline here. So this will be the headline. I'll just make a note on the side. That's the headline. We want that to be nice and big considering the other people who are subscribed to this are also very fancy people and are identify with that. So then we have a paragraph of copy, and a sentence by itself. So I'll just draw these lines here to indicate paragraph. It may end up being three lines and we put it in maybe to be two, plus this sentence by itself. Then we have two paragraphs and then short closing sentence. I feel like we could have another graphic somewhere in the middle of the email, maybe a little spot graphic of a bowl of cereal. Something very bright since we talk about sugar filled technical boxes. Anything to drive home that point, cereal is one of the best foods around. So let's put a graphic here. I'm just going to draw a square with these lines through it, and then I'll just make a note. Cereal bowl. Sorry for my terrible handwriting, it's usually better than this. Then we'll just add these two paragraphs in here, followed by that line. So that we were actually like adding something to the flow of the email. But then at the end we have the real talk section. Real talk for a moment. If you're only eating cereal for dinner because of one of the very not funny burdens of depression, or real loneliness, I encourage you to reach out for help. For that section, we can break that up a little bit. Maybe we'll put that inside of a box. That's like a different color than the rest of the email. Something like that. We can make that a font. Then we have that little disclaimer, and then we can have a button there to learn more since there is a link included here. So I feel like this is a good base to start with. There will also likely be a footer in the email, and that footer might have some social media icons you will all want, if you're going to be can spamm compliant, which I hope you are, you will want to include your unsubscribe link and contact information. So let's say that there's some links there. I don't know what they are yet, we'll see. So say social icons and can spamm. Thing there's two m in can spamm. I should know this. 6. Set Up Your Photoshop File: Hit by a setting up your Photoshop file, you want to go to Create New, and then I already have some of the settings set up here, but the average width for an email is 600 pixels and you'll want the height to be a little bit more than double the width since this will be a longer email and I prefer to work without artboards, but if you're working on creating both the desktop and the mobile version at the same time, you may want to use artboards, but for this project we're just going to create the desktop version. Your resolution should be 72 pixels per inch since we are designing for the screen, and you'll want to make sure that you're working in RGB color mode then hit "Create" and then the next step will be to set up your guides. Since this is a 600 pixel email, you'll usually want about 30 pixels of margin around the sides. We'll go to View and create new guide. We'll set up this first one, vertical guide with a position of 30, and that will add a guide here. Another thing you can do is you can turn on your ruler by clicking on command R or a control R if you're on a PC to turn it on or off, and then click down on a roller and drag to set up a new guide. But it's a little bit more accurate just to set it up by going under view and new guide. I prefer to do it that way. Then we will set up another guide, horizontal 30 pixels, and then for the guides on the right and bottom of the email, for those will take the entire width of the email and subtract 30 for the position. We'll go to new, or view new guide horizontal, the 600-pixels minus 30 pixels will do 570. That's not right. New guide, vertical, 570, and then the height of this email is 1400 pixels, 1400 pixels minus 30 pixels, set up a new guide. This one will be horizontal, and we'll do 1370 and set okay and now, we have the guide set up. Something else I like to do before getting started with designing the actual email is creating the folders ahead of time. I know that we're going to have a header for the email. I'll setup a new group folder within the PSD file called header. The graphic at the top of the email is usually called a hero graphic. We'll set that group and create a new group for the body content, and then another group for the footer. Having your file to be set up to be a little bit neater and cleaner is great if you're going to be working with other designers or developers who may be opening and using this file in the future, and then also if you're going to work on it in the future, that way you have a nice clean file and you're not trying to figure out where all your layers are, what they are, and just making sure that everything is named correctly can help in the long run. The next step we will actually take a look at the mark up and get it designed. 7. Set Up Your Background & Header: Let's start by re-reviewing the mockup that we created earlier. I did add a few more doodles here just to showcase what direction we're trying to go, and I added a few colors. Just a quick scribble to remind myself later of what color scheme I was thinking of. We do have, of course, the brand sheet provided by the client and an example Facebook cover. This is where I got this blue shade or bluish greenish shade from. Except I went with a slightly more muted tone. Let's grab that color, and we are going to create another group here called background, and this is where we're going to put all of our background colors and anything that's going to go behind the main content. Rather than using the fill bucket, what I'm going to do is I'm going to go to the bottom over here in the layers panel. I'm going to click on Solid Color, and it is going to bring up the color picker, and since the color for the foreground has already been chosen, I'm going to go ahead and hit "Okay", and it adds this color fill layer here. If you ever want to change it, you just double-click and you can easily change the color. But I'm going to click "Cancel" since we're going to use this one. Next we're going to add the logo to the header. I have this folder of client assets here, so we have this long logo. This is the long version of it, and we're going to drop that right in, and I'm going to size it down just a little bit, and we are going to align to the center of the Canvas and bring that up just a little bit. I'm going to put it right up against that margin line that we created earlier, and then I'm going to add a white rectangle behind it. We're going to get rid of this purple border that was added. Now we have a header. I think I'm going to make the logo just a little bit smaller. Sometimes clients already have a e-mail template created that standard, but, since we're creating this one from scratch, we're just going to add that in there. What I'm also going to do is lock this group so we don't accidentally move anything around as we're adding more content to the page. 8. Design the Hero Graphic: We're going to start by adding the hero graphics to the Email. So the idea that I had before was to add some cereal, and some caviar wine glass, some of the things that are mentioned in the copy. So I went and I downloaded some of these graphics that might be useful and could not find a bowl of cereal. So we're going to go ahead and use a bowl of candy, which if you like, works well for this two, and let's add a champagne bottle, and this glass. So I'm just dragging things in a smart objects and this confetti, and that's been dragging everything in and making sure they're in the right group. Then we're just going to size this down. So we have some room to work with. Let's make sure this confetti layers behind everything else. You need to delete that empty layer, and I'm going to increase the size of it by dragging down on this point here, until it is wide as the Email, and I'm just going to hide all of the other layers. So this is a little bit easier to work with. So one thing that I like to do, when I'm working on an Email that has a color background in the hero, and in the text area is to make sure that it blends nicely, and it's not like two separate chunks. So we're going to do is we're going to go to the bottom of the layers panel here, and we are going to click on this ''Add Layer Mask''. We are Adding a layer mask does is it makes it so you can mask or temporarily hide different sections of that layer by using a black or white on the layer mask, so if you brush over it with a black brush, then it's going to make it appear that it's being erased, but then using a white brush will actually bring back. So what I'm going to do is I'm going to try to make it so that it starts, the graphic starts at the top, this confetti is 100 percent capacity and that's going to fade out nicely at the bottom. So I'm going to keep clicking ''Shift G'' until I get to the gradient, and I'm going to use a linear gradient. We're going to set that to a black linear gradient, and we're going to use the one that is 100-0 percent opacity. Starting from the bottom, and you want to make sure that over here in the Layer Mask, you actually are clicking on the mask and not on the actual image. That's on the layer, and just from the bottom going to click and drag up. You can see that it's causing the confetti to fade out very nicely. So now let's start training on the other layers one by one, and positioning them to where we want them, I get it with that. Add this back here. Let's add the spoon by the cereal or by the candy. Now I feel like this confetti is a little bit too distracting, but I still want to include it. So we could go over here, to the settings and just play around with it until we see something that we like, this overlay setting because it still adds a little bit of texture to the background, and it's less distracting. So let's put it on overlay, and the title of this Email, we're going to go ahead and type it in here is the joys of cereal for dinner. Let's center that and increase the size, and we are going to change the letting. I'm going to change it to this brand font here, which is luckiest guy. It's the same font that's used in the typeface of the logo. Just keep playing around with that, to get too a size like, and quite keep hitting aligned to center. Let's do out the cereal as well. So it's a wine, and that looks good. Something that I'm noticing here with this champagne bottle graphic, if you zoom in, you can see that the shadow on the bottom of it actually has a hard line. So we're going to do is we're going to try to get rid of that hard line, so it looks more like it's actually in a scene with the other pieces. So let's select the champagne bottle layer, and at the bottom of the layers panel you're going to hit on Add Layer Mask, and select your Brush tool and just resize it to the size that you need, and then we are using a black foreground color. We're just going to brush slightly at the bottom, where that hard line is, and the brush that I'm using is a just a regular soft round brush, so it has a little bit of a softer edge to it, we're not using the hard brush. Now we have masked out that hard edge at the bottom of that graphic. Now we are going to add the text in the body of the Email. 9. Adding Body Copy: Let's start adding in the text to this email, the body copy. One thing to keep in mind when you are designing emails is you have two options. You have the option of making your email 100 percent in image, which is pretty common these days. Then when it's developed and put together to actually send out, just making sure that all of the texts is available inside of the alt text tag in the HTML of the email. Something else that you might want to consider is that the email graphics are images, and the text is actual text that could be picked up by a screen reader, and that way it's more accessible for people who may not be able to see their screens or may not be able to read it and only see it or only hear it through a screen reader. The way that we're designing this email today is we're designing it with accessibility in mind. The text maybe very plain, it's not going to be super, graphic with effects or anything. But that is intentional. I am going to put a few links about accessibility in email in the description of this class. So you'll be able to find those links below. Let's dive in. I have the text here on my other screen, so I'm going to be copying and pasting that over. So let's set this to Open Sans. We don't want the entire body of the email to be in Luckiest Guy that would actually be a little bit hard to read. We're using Open Sans because it is listed here in the brand sheet as a typeface that pairs well with Luckiest Guy. Let's just create a text box here. In this text box, we're going to bump this size down a little bit and left align, and we're just going to grab this headline here and drop it in that text box. This font size is just slightly bigger than what we're actually going to use. Let's round that up to 16 for the entire text box, we get a nice round number. What I'm going to do is I'm going to option, click and drag down. What that does is it duplicates the layer that was selected with the Move tool, and I'm just dragging it below, and we're going to select this. In the character settings, we're just going to turn off this all caps button, and this Fo bold that was turned on. This is actually pretty useful here if you want to quickly make something bold or make it all caps or maybe use small caps. But we're going to turn all of those off for the actual body copy. I'm going to copy about half of the text, and I'm going to drop that in here and expand the height of the text box. So the letting of this is actually still saved from this text at the top in the hero graphics. So we're going to select that. The text size is about 16 points. Let's make this about 20 points, enter, and there we go. Now, since we want this sentence to standout, let's just italicize that. We are going to still save some space for a little spot graphic here, whether we actually use a cereal bowl or something else, that will be determined, but let's create another text box. I'm just going to option, drag down, click and drag, and I'm going to bring it out just a little bit here, so it's longer, and let's take this text and paste it in. I'm actually going to put this in a separate text box, so it actually, let me put that back, let me explain something here real quick. This column here is really text heavy, so let's add a line break somewhere right here seems suitable. Then we are going to take this text and just doing a cut to cut it out of there. Let's option, click drag, create a new text box, and then paste that text in there, and drag it to full width, and just bring that down, and bring this up. Then you want to get a look at this and make sure that the amount of space between all of the paragraphs is about the same. So we'll just bring this up a little bit. That looks about right. 10. Adding an Aside - Real Talk: We are going to add the real talk section of the e-mail that's in this yellow box here and then we're going to, after that, add a footer to this e-mail. Looking back at this, my estimation of 1,400 pixels seemed a little bit short. We're going to need a little bit more space at the bottom of this e-mail to add that real talk section and the footer. So what we are going to do is, under Image, we're going to go to Canvas size and we are going to take this height and we're going to make it 1,600 pixels. But we are going to expand it at the bottom only and to do that, we're going to take this anchor here, and we're going to click the top so it's expanding only downward and to the left and right. This is really helpful if you want to make some exact canvas size changes, so we're going to select the top middle anchor point and hit "Okay" What it did is, it added an additional 200 pixels at the bottom and then we're just going to take this and drag it down to, let's see, 1,600 pixels minus 30 pixels for the margin will be 1,570. As you can see, it's a little bit hard to get it exactly, but 1570.6 seems good to me. Now we're going to add the real talk section. Let's go back to the e-mail mock up and make sure we have that yellow selected using the eyedropper tool. Actually, let's create a new layer group in the Layers tab. So I'm just clicking on group here, so it's adding a group, that little folder icon. Let's call this real talk to contain that and keep it separated from the other body content and I'm just dragging that into the body folder, at the body group there. Let's take this rectangle tool, which you can also get to by using U as the shortcut and we're going to change the fill color to that yellow, which is under recently used colors. We're going to get rid of that stroke that's currently on it. Let's just click and drag from guide to guide and we'll probably use, about, this much space. Be my guess, we may end up needing to add a little bit more height to this e-mail. Let's go back to layers and using the move tool. I also have auto select on, sometimes it's helpful, sometimes it's not, depending on how many layers you have going on. But that's how I'm able to just click on a paragraph. If you don't have auto select turned on, you would actually have to go here and click on your layer. But anyway, I digress. Let's just click on one of these layers, Option click, drag down, drag it over that yellow box, and let's just drag that copied layer into that real talk group folder. We're going to take the text from this section and let's take this link and put it at the end of the paragraph, since that's actually for the developer to add in after. We're going to select this, copy it and paste. I think we can add a line break in here somewhere, break up the text a little bit. We also need to add in the header for this, I think we can use the luckiest guy typeface that's used in the hero. So I clicked on T to switch to the text tool and we are adding in real talk as the text. I'm doing Command A to highlight all of it, clicking up here, changing the typeface to luckiest guy and then we are increasing the font size. I like how it's hanging off of the box and you could put it inside, but I feel like having it slightly off the box adds a little bit more depth to the e-mail, a little bit more movement to it, I guess you could say. Then I'm just pushing that text box up a little bit, because it was a little bit far away where it was, there was a little bit too much padding between the two elements. Then we're dragging that up and let's make sure we have this layer inside of that group. Let's add a button since the copy does include a call to action, which is this link here. We'll want people to be able to click on that link. I think the color for the button should actually be this green that is used up here in the logo. Because green is actually a really great color for buttons. You can always do A/B testing on your end to see what works for your user list or your recipients but greens or blues typically invite people to click. We can grab this color from the brand sheet or the logo, so I'm switching to the eyedropper tool, selecting that green, going back to the email project and we are going to add a rectangle here and then we're just going to drag that up here. If you're tired of dragging, you could actually do Command, and then there's the close bracket and open bracket. The open bracket pushes it further down on the layers list and the close bracket pushes it further up, so we're going to push it above the yellow box there. Then let's take some text and then let's not use Luckiest guy, switch that back to Open Sans. Let's actually use Open Sans Bold. Switch that font to white and let's put that back down to 16 pixels and let's change that text to, not lorem ipsum, but we could say talk to someone. Then what I do is I just resize that text box and select the rectangle. This is what I'm going to do now, I'm going to take the green rectangle, and the talk to someone text, I'm going to click Command G to create a separate group. I'm going to re change that group name to CTA, which is call to action, it's a call to action button. Then this text here, I'm going to align to selection and we are going to center, T for our type tool, and we're going to center align that or center justify rather. I'm just zooming in so I can see what I'm clicking on here and just be a little bit more nit picky, I'm just closing that up a little bit and selecting both the rectangle and the text. I'm going to vertically align that and just nudge it down a little bit more. If you want to reuse buttons, you could actually, select this group and then, I don't have my library panel open. But under Window, go to Libraries, and you actually have the option to create a reusable asset in your library by clicking on this little plus button here, and clicking on graphic. So if you want to use this at a later time, it actually adds it in here as a reusable piece. Which can actually be really helpful when you're designing multiple e-mails for the same company or client that way you're saving time by just clicking on this library tool and just dragging it in there, you don't have to go through all the steps that you just saw. Now we are going to move on to the footer. 11. Adding the Footer: As it happened again, I ran out of space at the bottom of the email. Before we went to Image and Canvas Size and adjusted the size manually there, but what we're going to do now is we're just going to, this is a little trick that I picked up along the way, but you click on C for crop, so that brings up the crop tool. Then you just click this middle handle here. Click and drag it downwards until you see about how much space you need, and then hit Enter. That is actually going to add a little extra space at the end. That's another reason that using color fill is actually very useful as opposed to using the bucket tool to fill in the background because when you are expanding the canvas size, your color fail is filling up the entire canvas of your project. As opposed to using the bucket tool, you would actually have to refill that manually. Then let's just drag this margin down to 1770 right about here. Cool, so let's add the footer. Footers are usually a very unassuming color. They're not the main focus of the email. They're just there to provide context to where the person signed up for your email, and to provide them contact information, how to unsubscribe from your email. Then also, sometimes some navigational links to your website or to your social media. Let's actually use a soft gray. Something like this. E6, E6, E6. We're going to grab this rectangle tool. Let's just drag a rectangle here, and go back to layers. We're going to drag that rectangle into the footer layer. It looks like I actually overestimated the amount of space that I needed for the footer, but we'll worry about that after. Let's just start adding content to this. Inside this folder here, I have some social icons that I pre-selected based off of the social media that is available for this client. We're just selecting all of that and dragging and hitting Enter to add them to the canvas, and making sure those are in the footer. Let's add them to the center. Sometimes you want to save space, so you might have social media icons on the side, links on left or right, but let's make it like the mockup that we did earlier, and just have them centered. I'm going to select one of the layers and I'm going to shift and click and drag and now we're just going to drag it out in a nice straight line. I see what's happening. I had two selected. Now we have all three of these, and what we're going to do is up in the transform controls up here or the settings for the move tool. We are going to be sure we are set to Align To Selection. We are going to align vertical centers. This makes sure they are all on the same line. Then to make sure that we have the same amount of space between all of them, we're going to use this here to distribute horizontally. That just nudges this over so that there's the same amount of space between all three items. I'm actually going to select these three layers and click on Command G to put them into their own group. I'm just going to rename that Social Icons just to keep things nice and tidy. Now what I want to do is, I want to make sure the group itself is centered on the Canvas. Going back to the line settings, Align To Canvas. By having this group selected, you can move the entire group where you want it. I'm aligning to the horizontal center. Now that group is centered on the page. We could also add below this the unsubscribe links and the contact links. Let's just create a text box here, why is my text not showing? The text is not showing because it's the same color as the background, silly me. Let's change that. Unsubscribe. Then I to separate the texts with a little pipe there, say Contact Me. Then we are going to take this and center it. That text seems a little bit large for a footer. The body copy text is 16 pixels. Let's take this and let's bump this down to about 12, let's bump it down to 12. Cool. Let's actually take this rectangle, make it just a little bit smaller. I don't like how there's more space at the bottom here that the top, so we can just take the social icons and nudge them down a little bit closer to the links. Something else, actually, something else we might want to add here. Let's duplicate this text. We're going to update this to let them know where they subscribe to the emails from. You might want to say something like, "You are receiving this email because you signed up on our website." I know that's off screen, let me just drag this down. I don't like how this text is breaking here, so let's just go in after "because" and "you" and add a line break there. I'm going to Select All and then we are going to adjust the character settings and let's change the leading to 14 and let's get rid of this bold and change this to irregular. Cool. Another thing too is, this will actually be texts that would be added in as actual text, but the email developer would be looking at your PSD for guidance on what colors, what font styles and type face choices to make. We would want to make sure that these links look like links. We could highlight this text here, and let's change it to green. We can say that links will be green. We're selecting just the links and using the color picker to grab that green color. Links typically have an underline to it. We are going to go ahead and add that Underline to again, just the links, we're not adding it to this separator in the middle here. Now you have some links. Now we are going to just shorten this email again, and we're just going to crop that up, and there we go. Let's zoom out and take another look at this. We're going to add this spot graphic in, in a second. But let's take this entire "Real Talk" section and bring it down just a little bit. We're going to select that group. What I do is I select the group and I click on Shift and the down arrow, and that just brings it down completely, rather than nudging it one pixel at a time. You're nudging it down in bigger chunks. Always remember to hit Save. Now let's move on to adding a spot graphic. 12. Adding the Spot Graphic: Now we're going to add a spot graphic to this email. A spot graphic or spot illustration is usually used to accompany texts, but it's not quite as large as the feature or the hero graphic of the email. You usually see spot illustrations in things like magazine articles or newspapers or even on some blogs. We're going to add a graphic into this area here just to break up the body copy a little bit. In the body group, we're going to create another subgroup. We're going to call this spot, just to keep things nice and organized. In the email mock-up, I had originally said we're going to add a cereal bowl. Let's see what we can do here, with some of the additional graphics that I picked out for this email design. We are going to add maybe this cereal box. It's upright since it will fit better in this space, since this cereal box is a little bit more wide than it is tall, I think this one will work better. We'll also want to add this empty cereal bowl. We want to make sure those are inside of the spot group. Let's just size these down a little bit. We'll want the cereal bowl to be smaller than the box. It's a little bit more true to life how cereal bowls are not bigger than cereal boxes. Okay, so that looks about right. Something else we could do, this cereal box is a little bit plain. It doesn't really have a design to it. We could take the time to actually add a wrap of some sort to this, but something we could do quickly to add a little bit of color to this, is, we could go into the Layers panel and add a solid color. Let's add a green that is similar to the green logo. You want to place the mouse cursor somewhere between the color fill and the cereal box layer. When you hit the option key, you can see that it changes to a layer mask. Then you just want to click on that and it just masks the color fill around the cereal box. That's only covering the cereal box. Then, we'll just want to play around the opacity. So you have a little bit of color to the cereal box and we can see it right behind that previously completely solid color fill layer. Think we could add something a little bit more to this area so it doesn't look like we just drop some graphics on here, which is really what we just said. We also have a cool sunburst that I thought we could probably add behind. We just drop that on to the canvas and let's place that behind the cereal box. Because I placed it behind the cereal box and the mask for the colorful layer turned off, but let's re-mask that. Then let's just size this layer down a little bit and place it behind the cereal box. We can just play around with these settings a little bit. That overlay, so it's not too distracting, but adds a little bit of something going on behind it. Another thing you might see included in spot graphics is sometimes a quote or a block quote. I think we could add a little bit something more to this section here. Maybe we'll just add the word, cereal and let's make that text the same brand font. Bump the size up on that a little bit. Let's add a text wrap to this or warp text. Just to give it a little bit more dimension to it. It's too much. There we go. We have a spot illustration. 13. Delivering Graphics: Slicing the Email: Now we are going to slice this e-mail. One of the reasons you would want to slice an e-mail is, if you're creating an e-mail or the e-mail is being developed in HTML after for accessibility, then you'll want these graphics to be cut out into separate chunks so that they can be placed into that e-mail. One way to do it is you could just crop and save, and then go back in your history and undo, and then crop, and re-save repeatedly. But we're going to use what is called the Slice tool instead. So we are going to go to View, and we're going to clear those guides that we added earlier. What we're going to do is we're going to add new guides in. First we're going to slice out these larger chunks. Let's click on the ruler and drag down and drag it right about where here and the header meet. These will be saved as two separate images, so now you have two slices, and then we're going to click and drag down another guide. You want to make sure that you are placing the guide into a solid color area. You don't want to place the guide somewhere like right here because there's the shadow from under the cereal bowl that would look very choppy when its sliced and developed. But you'll want to place it somewhere like this solid area here. This will be, one image, two images, three images when its saved. Then we're going to go down, and we're going to slice right around here because we're going to slice out this Real Talk section or just this subheadline here. The reason we're slicing that out, instead of letting the E-mail Developer develop it on their own, is it's a defacer type face. We don't want to add more blow to the copy by adding in additional CSS that might actually get stripped out in certain e-mail clients and we want to actually keep that brand look and feel, and also make sure it looks the same across all platforms. Let's just box off the Real Talk section, and we are going to save. No. We're not going to Save for Web. We're going to actually slice this. We put the guides in, but we haven't sliced it yet. We're going to hit ''C'' or you may have to hit ''Shift C'' because C is also used to bring up the Crop tool, and it's also used for the Perspective tool. But we're going to switch it to the Slice tool, which brings up this little exact, I don't know a [inaudible] thing for slicing, and we're going to do Slices From Guides, which is this button right up here. Click that, and it creates these separate spaces. So you can see it's going to create five separate images that are going to be used. Now we're going to Save for Web. Save for Web is one of those weird Photoshop shortcuts, that you have to press a lot of keys for it. But it is Shift Command Option S, and it pulls up the Save for Web dialogue. You can see here, it is actually going to save everything as the five separate images. But there's a little trick that I would like to show you right now. If you are going to have an e-mail that has a GIF in it, for example, and you don't want your entire e-mail to be 10 megabytes or something, you could actually just add guides around the area that's going to be animated. Slice around that animation, and save just that slice as a GIF, and not have to worry about saving the rest of it as a GIF. The rest of it could be a solid static image. You will do that by selecting the slice that you want to change the settings on and in this little drop-down here, you would click on GIF, and it would save just that section as a GIF. All the other sections remain whatever setting it was that you put it on. But since we are not saving this as a GIF, let's just put it back to what it was at, and let's hit ''Save''. In this project files folder here, we're going to hit ''Save''. It's going to take a second, and we go back to the folder, for the project files. You can see there's a new folder here called images. It took the sliced up images and saved them as separate slices. This looks great, this looks great. We could deliver that to the developer. This section is great, but we do want to slice this one up a little bit further. You could always just crop this or we could go back in and add an additional slice. We're just going to click and drag, and let's actually zoom in a little bit here, so we can see where we're slicing. We're going to slice right about here, so this is going to be two separate columns, and then we're going to slice right about here. So that this would be one column up here that's going to be coded in, and then these are going to be two columns here, and we're going to cut right below where it changes back from a two column layout to a one column layout. We're just slicing right there, we want to make sure we're not cutting off the text anyway. But now when we're looking at this, this starburst in the background is actually a little bit too big. It's going past where we need it. So we're going to just size that down a little bit, and hit ''Okay'', or hit the Enter button or Return key, and now we're good to go. We're going to hit ''C'' again to bring up that Slice tool. Click on "Slices From Guides", and now it re-slice the e-mail, and we are going to hit ''Save for Web'' again, and we are going to hit ''Save'', and I'm just going to do this again, and we have additional images. 14. Delivering Graphics: Review the Slices: So now we can see how when we saved the slices, it added a bunch of extra images that we didn't need because we added all of these extra slices and that's one of the reasons that I like to save these in two steps, where you're saving the larger images like this, and then slicing further smaller images that won't take up the full width of the e-mail. So we can just go through and delete all of the things that we don't need. We don't need this piece. We do need this piece, so that's what we're slicing for, so these are the images that would be delivered to the email developer. Oops, not that one, and everything else would be hard-coded in. You'll also deliver these images that are in the footer, those icons, so let's change the images folder to deliverables. Deliverables, and we'll take from assets, social icons we're just going to copy those over into the deliverables since they're going to need those two. 15. Some Closing Notes: Congratulations, you made it all the way to the end of the class. If you have any interest in learning the development side of e-mail ishamelessplug have a class right here on skill sharing called introduction to HTML, email development, where you can learn all of the fun coding things that go on behind the scenes of e-mails that you received. Like this, the mean, magic [inaudible] you have any resources or tips that you like to share, feel free to leave, doesn't have discussion area as well and I will add to the list of resources for this class for future events. Thank you for taking this class and I look forward to seeing you around Skillshare.