Lessons

Lesson Info

Fun Stuff: Desktop Backgrounds

I'm excited, in this segment, to really start applying some of the patterns that we have made to real life situations that I like to use all the time on my blog, or for personal reasons. So we're gonna make a desktop, a iPhone background. This is a really fun way to use your patterns and if you happen to have a blog, it's great to be able to offer these to your readers as a little free download or something like that. We're also gonna make a greeting card and maybe some gift tags and a couple of other neat things. We're gonna jump right into Illustrator and pick up where we left off in segment two. I have four of my six patterns finished, or at least partly finished. So this is where I'm at right now. I'm not entirely happy with the color story as it is, I may come back in and work with adding some more contrast and working on the scale. But I want to use what we've created for this segment and show you the application of how you'll be able to add your own patterns to what we're doing ...

as well. So, one thing I love to do is make desktop and iPhone or smartphone backgrounds. I send a set out to the roost drive every month. I do a new calendar for Going Home to Roost readers every month. So, something that I do at least twice a month and they are really fun to make and pretty easy. So, I'm gonna walk you through that process. The first thing I'm gonna do is open a new document in Adobe Illustrator. To do that I hit command + N. And I'm gonna name this, Desktop Background. And so, the size of the artboard that I need to use for a desktop background. This information is pretty readily available if you just search for it online. But the dimension that I like to use that tends to work for most computers is 2400 pixels by 1500 pixels. So I'm gonna do the width at 2400 and the height at 1500. Since this is probably gonna be on the web, I'm gonna change to RGB and select OK. So this is a pretty huge document and what I want to also add is an artboard for a smartphone background. So the document size I like to use for that is 640 by 1135. I'll grab the rectangle tool and just drop one point to bring up the rectangle dialogue box. So I'm gonna make the width 640 and the height 1135. And select OK. So, that looks about right. I will add, this is just a rectangle right now but what I need to do is convert that to an artboard. So, if you ever draw a square or rectangle that you need to create an artboard from. All you have to do, is select the rectangle. Come up to Object, select Artboards and Convert to Artboards. Okay, so now I have two artboards exactly the right size that I need them to be. Next thing I need to do is just get a rectangle on top of them that is the same size as them. So with smart guides I could probably just draw a rectangle, but just to be exact, I'm gonna draw up a point in the upper left hand corner. And since this has remembered the last dimensions that I put in, I'm gonna use that to my advantage and just do the iPhone first. So I'll drop the point here and that's already set to go, 640 by 1135, and hit OK. This is a white background. I'm just gonna give it a black background and no stroke. So next I'll do that with the desktop background. So M is the keyboard shortcut for the rectangle tool, and I'll drop a point. This was 2400 by 1500. So I'm getting there. What I want to do now is go grab one of the patterns that we've been working on. So I am working on a nourish pattern. We'll come back to that though. I want to grab a pattern from here. And I think I'm gonna use kind of our big floral tea inspired print for this background. I've just selected that square, I'm gonna copy it by hitting Command + C. Run over here to my desktop background and paste it, Command + V. So all I want to do is get that pattern on both of these rectangles. So I'll select both of them and use the eyedropper tool. That keyboard shortcut is I, and just lay that pattern right on our desktop. I'm done with that square now, so I can delete it. This is really, really small. So I want to play with increasing the scale of this pattern. And we're just gonna see what happens here but one thing I really like to do is blow up this pattern significantly. So let's blow it up by 1000. I think maybe even bigger, like 1500%. Maybe 2500. Something really big that gives you a hint of what is there but it's not so obvious that it's a repeating pattern, it just looks really artful, like you have draped flowers onto the edges. And when you set it as a desktop background, it's just gonna fill your screen with something floral. I think I'm good with that percentage, but I want to work on moving these patterns around. So, I'm gonna move them independently of each other since this one is pretty close to what might be nice and this one I'm gonna work on a little bit. I'll just select the rectangle, right click, transform and move. This kind of sporadically, I don't know where it got these values from, but I kind of like what it's doing. So I'm gonna just scroll with my mouse on this horizontal one, just to see if I scroll this over a little bit, what might look best. And I'll do the same with the vertical. Maybe bring this down. So I'm gonna add a quote to this, just like I've been doing for some of the other slides that I've used during this course. So I want to add a quote to it. So I want some negative space that will leave me somewhere to write. And I also want to be sure to put my information down here at the bottom somewhere. So I just want to keep that in mind as I'm placing the pattern that there's someplace to put my information, so that people know who created this desktop background. So I think I'm good with it about right there. I just want to move this one just a little bit cause I kind of like what that's doing. I also like to transform and move. So it jumped it, to get it back to just what I was seeing before, I'll just take these values both back to zero. And I want to just move that down a little bit to where I lost that brown edge, right there. And I'll select OK. I could reduce the scale of that one just slightly to maybe 90%. And then I need to move it just a little bit more one more time. So I'll move it down. So you can see a little bit more of the floral aspect by reducing the scale. I'll click OK. And so the next thing I want to do is just come in here and just add something. I like to add either a calendar right here and to do that I just use the text tool and start typing in numbers for the month, or an inspirational quote. One of the things that has been an overriding theme in this course is that there is room for you, so I'm gonna type, there's room for you. It's really small but I will select that type. To get to the type tool, you just hit T on your keyboard. Select that type and scale it up using the scale tool and I'm gonna work with the color and the font on this. But a little bit behind this thought, if you missed session one, is that somebody told me early on, that there was room for me. And it really meant a lot for me, and I want to tell you the same thing. It can be really overwhelming to look around on the web, and how many things other people are doing. But I want you to know there's room for you and there's room for your artwork and we want it in the market, so bring it on. So, I kind of blew through that a little bit but I just separated those on two lines, so that I could control exactly where that fell. To change the color of this, I want to make it match the desktop background, and so I need to get these colors over into my swatches panel. Right now I have those colors that Illustrator automatically puts in the document. So, let me zoom out here and deselect everything. If you just select the first color you want to ... Make sure that I deselect everything. So select the first color and then hold down the shift key to select the last color and just drag and drop those to the trash can. That will get rid of those colors. And then when you want all the colors that you've used in a piece of artwork in your swatches panel, all you do is select the artwork and come down and hit New Color Group, select OK and there they are. So I will change this to orange maybe. And I also want to change the font, so I'm gonna hit Command + H to hide my edges, so we can really see what that fonts gonna look like. And you should have the character dialogue box right up in your upper toolbar. So you can click Character and this is where you find all of the font options that are available to you. We're using a standard font here. And I think I'll just use Quicksand, one of my favorite fonts. It's really nice and simple, but I usually like it in all-caps, so I'll cap that. Take the font size down a little bit. I might take this up to bold so we can be sure to see it a little better. And I think that's good. What I want to do here is for the last word, 'for you', I'm gonna just change the font of just the 'you'. So I've hidden my edges so we can see what we're doing and I'm gonna change that to a font called, I believe it's Baskerville, italic. And I want that to be in lowercase. So I'll increase the font size by quite a bit. Maybe, up to something like that. Okay. And click off of that to deselect it because then you have your keyboard shortcut keys will start typing for you. (chuckling) I do that all the time, I find little v's in all my text. So, the other thing I want to do is add my logo down here, and my website. So if I put this on Going Home to Roost, people share it or put it on their website, they're reminded whose artwork this is and it's a nice way to just bring that reminder in to people so. I have my logo in an Illustrator file right here called Bonnie Christine. I'll just open that up. If you don't have a logo in vector format you can absolutely use the text and type function in Illustrator to add your own name, or your website, add the copyright symbol, something like that. Since I have this, I'm gonna use it. It's not a font, it is a logo that I had someone hand-calligraphy for me and turn into vectors. And she doesn't have a website, but if you want her information, just let me know and I'll give it to you. So I'm just gonna snug my name down here. Somewhere to where it's not incredibly intrusive. I'm gonna change the color to something that's also really light and you know it's there but it's not really loud. And the other thing I like to do is go ahead and put my web address. You don't have to do it, but I like to do it. I'll just grab the text tool by hitting T and start typing. I'll either do goinghometoroost.com or going home to roost blog, so they know I have a blog and that's where they can find more stuff like this. So I have this selected. Quick and easy way to get it matching everything else is to use the eyedropper tool. So I'll hit I on my keyboard, and come up to either one of these fonts and just select that. And I think I'll use the Quicksand. And the easiest way to just scale that down, you can absolutely change the font size, but if you just hit S for the scale tool, you can just start dragging that down to reduce its size. So, I'm just gonna put this right here at the bottom. Maybe change it's color to brown so that everybody can see that clearly. And if I zoom out, I think this is coming together. I think there's a little too big, my name and the website because I don't want it to just be completely about that. I'm just trying to give some information in case somebody is frustrated or wants to find it or something, so. Put it right there. Then I should change this color to something that has more contrast. The brown will work fine. Okay, I want to do the same thing over here on the smartphone background. So I'll just grab this text, drag and drop it over here. And to make a copy of it I just hold the option key down. I'll have to work a little bit with the placement for this. But I'll reduce it's size and maybe bring it right up here. There's room for you. I can also grab my logo and website and bring it right over here. This is gonna be smaller. It's not as big of a illustration, so I can reduce the size of the font and it's gonna be fine. Okay. So how do we now get this on our desktop or our iPhone? I'm gonna show you how to save it. I have this big artboard selected and I use this keyboard shortcut all the time. It is Command + shift + Option S. That is save for the web. If you don't want to use command + shift + option S you can come up to File and select Save for Web. I design all my blog posts in Illustrator. I save most of my photos in Illustrator so I tend to memorize that one even though it's pretty lengthy. So that brings up the safer web dialogue box. This is really, this is at 100% so it's pretty zoomed in but if you want to see it, you can just drag and drop your mouse around to see what we're working with here. Or in the bottom left hand corner you can change the percentage, say 25%, to see the full illustration. So a couple of options available to us on the right hand side. I always use either jpeg or png. For this it really doesn't matter, for what I'm doing. So I'm just gonna keep it on png. We don't need transparency. Though I will show you what that does shortly. Everything else is fine, your image size is already set to what our artboard is, so that's perfect. You can either choose to optimize this for Type or Art. I like to, this is really art heavy, so I'm gonna just leave it on Art. If you choose Type, it's gonna make the type a little bolder. But sometimes, when you're using a repeating pattern and you use Type, you'll see a Illustrator seam come through. Not that the seam that's really there, if you were to print this, it's not there, but it's there on the computer because of the way it renders the pattern. So if you're using repeating pattern, I would suggest probably going with Art Optimize. So I'll just hit save. And I'll save this to my desktop. We'll do Desktop Background and hit save. Here it is right there on my desktop. So this is the, we're back in the safer web dialogue box. This is the iPhone background, or smartphone background it works for both. And everything is already set to what I used last time so I'm good to go. Click save. So I'll name this iPhone Background. And it is now saved on my web too. So if I selected both of those and opened them, probably in preview, they're gonna come up here. They look really nice. I'm not going to go into detail about how to upload these to a blog. I'm not sure if everybody is a blogger or whatever but you can save this to your desktop now. To get the iPhone background on your phone, all you have to do is get it on your phone however you want to, via Dropbox, you can email it to yourself, you can email it to your friends. All you do is save the image and then in your settings save it as your background. If you are a blogger and you want to offer these you just upload these just like you would any other kind of image. When you're blogging and people can click on it, it will give them the big version and they can right click and save it to their desk top or their iPhone. So we are done with both of those. I'll save my Illustrator file, by hitting Command + S. There we go. Desktop background, that's great, I'll save that. I'm good with all these settings. CS6, yup, I'm happy with all that so I'll click OK.