Lessons

Lesson Info

Adobe Kuler & Benefits of Creative Cloud

you saw me choosing a lot of colors, and I I was picking up colors from Frank's logo that he gave to me, so I kind of had a color palette to start out with. But let's say you don't have a logo yet or you're gonna create a typographic logo. And but you have your most favorite picture that you have ever taken, or your most favorite illustration that you've drawn or piece of fine art that you've made the easy way to snatch a color palette from that photo, which would be a great place to start right, is to use another creative cloud benefit called cooler. K U L E r. So we're gonna pop on over to cooler right now, close up some of these other windows. So now we're going to go to the cooler app online, and the URL is just cooler dot adobe dot com and you'll get there on the at the top of the right hand side. You're going to see a little disembodied head, and that's where you can log in with your adobe I d coolers really free. But if you log in with your adobe, I d. You get some extra super p...

owers, which is what this course is all about, so I've already done that. So since I am logged in, I can upload an image and save that color palette. So let's go ahead and click the little camera icon. And now let's navigate to where the photo lives that I might want to snatch a color palette from. And let's say it's this abstract shot right there. Bam! Immediately. I've got a color palette, and the super cool thing is that if you use Adobe Illustrator, which we're going to dive into here in just a minute, the second you say this color palette by clicking save it appears in Illustrator In This Watches Battle, it just shows up. It's like absolute magic. I love it, but so this might be a way for you to get an idea of a color palette to use in customizing the background of your parasite the color of text in all that. So let's go ahead and click save appear. But first, let me show you all the different options you got by default. Cooler gives you a uh it picks out the brightest colors in the photo to make the the color palette here. But if you point your mouse appear to this color mood, you can see that as I click the different presets than my color palette changes. The only thing you really do want to keep in mind is that if you're posting photography, I like the week. You'll probably like the way it looks better. If it's on a dark background, they will make the colors pop, so I would tend to go with darker backgrounds rather than lighter color backgrounds. The opposite is true if you design logos. Logo's tend to look better on a lighter color backgrounds. They tend to, you know, have a few more pieces and parts going on. So just keep that in mind. So if we were gonna build ah pro side off of this, I might be tempted to go with this color over here for my background. If I If I really loved this color palette, is there a way to get the IPhone color app toe correspond with your online adobe creative cloud site? I use it all the time on the IPhone would be nice to have them import automatically. Yeah, fantastic question I believe there is. I haven't done that. So there is a cooler app for your IPhone. Unfortunately, it's not supported on the IPad just yet. But if you the thing is, if you take a picture, um, on your phone, the cooler app will create a color palette from it right there. So I'm certain there's there's a log in or something like that that you can tie your adobe I d. So if you save a color palette there, then you automatically see it here is automatically an illustrator. So that's a really great thing. So that is cooler. So we're gonna click, save. And if I come appear to my things, you can see that that I've got a whole bunch of them going on A. So far as I know, there is no limit to the number of photos that you can upload and snatch color palette from you. Can I use this for stock? Sometimes, If I've got a stock image that I'm using in a design, then all upload the stock image in orderto Teoh. Just snatch a color palette from its very efficient very fast. So let's go back to this one right here as we as we mouse over any of these themes we see, we can copy a link. You know, we might want to send a link to the client. Hey, what do you think about this color palette? You know, I'm thinking in the work. What do you think? You can edit it and you can download it. If you click download, you're going to get a file that you can import into Photoshopped. It's odd that the color palette automatically gets sucked in the illustrator, but not Photoshopped. So let's go ahead and find one of these that I have not done. We can do this one right here. It's not bright and happy, so let's go ahead and click Download. So you're gonna get this dialogue saying, Hey, you're about to download a file so I can say save file and let's go to your downloads folder. So now if I wanted to upload another image, you just go back and click create and you get that little camera icon where you can continue to upload pictures and you know, if you upload a picture and you don't like the color palette or you want to continue to fine tune that you can do that too. You know, you can drag these guys around. You can customize it in in any way that you want, so we'll go ahead and click. Uh, we'll call that one palms and click say so. That's a really handy thing. Now, the next thing I want to show, you were gonna jump into talking about what you get with the full creative cloud. So what we've been looking at so far over the course of this workshop is what you get with e footage Shot photography program, which was light room bridge Photoshopped be hands the creative cloud at the ability to share files which we've looked at the ability to sink your presets with the full enchilada full creative cloud we get, Ah, whole bunch more. We get a lot of programs that you may not have used before. So over here on the left hand side, you can see what you get if you have. If you currently have any version of the creative suite, which is what it used to be called for, it went to create a cloud. Then there is a special deal going on on adobes webpage for $30 a month for the first year, you just signed a one year commitment. After that first year, the price is going to go up to the full $50 a month. But so you can just think about it. It's gonna set you back 50 bucks a month for all of it. That's just the reality. If you don't want to sign a contract you want to go month to month, it'll cost you $75 a month. But think about that. If you've got a project and you only need in design an illustrator for two months, you know that's a lot less money than you would have to spend when we used to be able to buy it outright $2500 you'd have to spend to get these programs that you were only going to use for a short amount of time. But now we can just, you know, lease them or rent them for the time in which we need them without having to spend a whole lot of money on something that we're not going to use. So the programs that you get there are slew of them We're going to cover what they're good for here in the second, and you also get like I said, the file storage, you know, the file sharing ability. 20 gigs hosting for five Web sites that you build in either Dreamweaver or amusing the last segment of the day. We're gonna build a website in Muse, so you do get hosting. So that's think about all of the benefits before you let yourself get negative on. Oh my gosh, I have to spend $50 now. But honestly, it's better for cash flows in the $50 a month, at least in my humble opinion that it is working out $2500 then you know, $800 or more every 18 months to upgrade the software. So, in my humble opinion, I think it's a bit of a softer, uh, solution that makes better sense for both adobe and for us as consumers of this software. So if you happen to be in a education, if you're a student or a teacher, there are some special deals. Didn't have room to list out all of them, but I do have a small girl down here at the bottom, lisa dot I n slash 2000 and cc prices. And that's just the girl that I contract so I can see how many people went to that. And if nobody goes to it, then I know that I won't do that in the future, right? So I love those bit lately because you contract them, so that gives you the full low down on teacher discount student discounts. You do have toe prove that you are in education, but you also get some special deals if you have a team environment. So if you've got multiple people that need access to the software. Ah, then you can do that for the full creative cloud at $70 a month per user with a one year contract. Or you can subscribe to a single app for $30 a month. So if that is of interest to you, definitely check out all the information on the right hand side of this slide. The benefits that gets is it's a little bit easier to deal with all the licenses for the different machines that you're going to install the software on. You get a couple of adobe expert sessions that are included in that price. And you can also control which person in your team can use photo shop in which person can only use Illustrator in which one can only use in design. And you can see how much they're using each of those programs, if that's of interest. So it's pretty high level control there, and you get an additional 80 gigabytes for file sharing file storage on there. So what are all these programs for anyway? Well, we've talked a lot about light rain photo shopping bridge, but what the heck is illustrator in design in Copy Acrobat? So these are all the programs that you get with the full enchilada. So starting at the bottom left illustrator, we create vector based art. With that, we're gonna use that here in just a little bit to build some logos. You could also build a business card in that you can place photographs an illustrator, but predominantly it's used for creating vector based artwork and vector based artwork is artwork that is not made of pixels. It's made appoints and paths that that you draw and then you can add a stroke to them. You could add paint to the center of them. You can add Grady INTs, and people can make photo realistic art with this stuff. It's really beautiful. So that's illustrator. It's all vector base. An illustrator and Photoshopped play nicely together. The olives that we brought into Frank's Header were an illustration, and so you can use them in Photoshopped as well. In designs, superpower is text lots and lots and lots of text. It's a page layout tool. Photoshopped. The missing manual was created and in design, so it's a great way to handle a lot of text in a lot of images. Together, you can easily set up textract where your text flows around your images in like said, you can handle complex projects really long projects so great for page layout. You can also use in design to create IPad. APS. That's a rabbit hole. Let me tell you, that would be a weeklong class or a month long class so you can create IPad apse with within design. It is not an easy task. It is not for the for the fearful at all. What we're gonna use in design for later on today's to create business card You could also easily create ads in there you could create full on magazines. You create magazine ads. So if you need to style a lot of text and you know, throw in some images to than in design would be the tool that you would reach for. But if you're doing single page designs thes days because in design is happy to bring in a PSD file the native Photoshopped file. There's really not a whole lot of difference building it in photo shop, and there isn't building it in design. Except that like we talked about on Monday, you don't get these things called crop marks, which is, ah, where you can see visually where that piece is going to be. Trend. So that might be a reason to design the card in photo shop and pop it in the design just to see the crop marks. So we'll do that in copy is works within design. It's for editorial work flows. It lets a lot of people work on the same document at the same time, so big magazines use it. Newspapers use it. That's what in copy is for. Acrobat is all about pdf's, and we're gonna look at that this afternoon to you can manage pdf. She can lock them down with the password. You can combine several PDS into a single PdF, like Remember on Monday when we generated the PdF from Light Rooms book module and it made two pts from one book. It made one for the cover and one for the rest of the book. You could combine them in Acrobat and, like said, you can add passwords. You can also extract images from an acrobat document, and you can turn on Act a pdf into edit herbal text. Because really, pdf is a picture of whatever the thing waas. So people don't have to have the program used to create it, to open it and interact with that document. You can also pass around pdf's for proofing when I write books for O'Reilly. Once there, they make me write him in word, which is just a lot of fun. Lots of fun. When the word document is finished and my images were all prepared in the production artist lays it out in in design. They create the pdf and they send the pdf to me and using the commenting tools in Acrobat. I can make a limited changes. I can type notes to them, you know? No move. This sidebar the cyber needs to be at the end of the page of this tip should be higher, that kind of thing. So pdf's air great for passing back and forth and commenting on and you could even pass them back and forth to several people. And you can keep track of who commented on what you know who said do this If you're If you've got a lot of people that need input on that particular project you also get, you see the eyes getting larger here. You also get all of these Web tools. Now I've got these listed in an interesting way. The oldest ones were at the top, excluding the hands, and the newest ones were at the bottom. So we've already looked at the hands, the collaborative community, The next Web tool that you get is muse, and we're gonna be looking at that to build a website later today. It's all visual. You're gonna drag and drop in, muses gonna handle writing all of the code. You don't have to do that. So muses for mortals, people who are not programmers. That's what you're going to use to build a website. If you don't know code and you don't want to just stay with the hands you're gonna use. Muse Dreamweaver is a bit older. It wouldn't surprise me a bit if Dreamweaver went away within the next couple of years. It was a Macromedia product. It is for building websites for programmers. If you know how to code, you might enjoy Dreamweaver Fireworks is for creating art for websites as well as mobile ABS. It's an older program. It's not gonna be around very much longer. Flash is for building flash babes, flash based Web sites, which I absolutely loathe because they're very unfriendly. You can't It's very difficult to add any kind of search engine optimization because really, when they go up on the Web, it's a picture. It's not actual text, so they can't be indexed properly. Uh, they were all the rage there for a while in the early two thousands, but we're going to see that phase out as well. And for animations. Now, flash is great for animations. Always say, if you are trying to teach me how to put together a desk that I bought it, I Kia. I would love to see an animation for that, but otherwise I don't need to be distracted by whirly gigs everywhere. So just doing animation for the sake of animation kind of doesn't make any sense. But then Flash Builder is used for games, training games and interactive applications. Then the bottom row of tools are what Adobe calls its edge tools. So these air the new and improved Web tools, and we will get to a point where, uh, those tools are all we have. I think Dreamweaver will go away. Flash will go away, fireworks will go away, and we will be left with these newer and better, more improved tools. So Edge animates the 1st 1 at the bottom left there that lets she build HTML based animations, which are very, uh, freely in so far as usability and accessibility on the Web. You'd be able to see them on an IPAD, whereas you can't see flash animations on that pad. So if you want to animate based on HTML, then you're gonna use edge enemy. The next program over is called edge re Flow. If you are a programmer and you understand CSS, which stands for cascading style sheets, which is a way that with text, you can control things like positioning and fonts and font sizes and styling and all of that. If you build a CSS site in edge re flow, the site will reorder itself and rearrange itself to suit the device in which is being viewed on on the fly. So if you're building websites that for big companies that have to be accessible on IPads or IPhones or Androids or blackberries, etcetera, etcetera, then you would reach for re flow, that's what you build that side in. Edge Code is a code editor for programmers. It has all these nice little, uh, color highlights where you can see, you know, tags for this and that. So if you're a coder programmer than edge code, uh, might be really useful for you. Edge Inspect is used to preview the websites that you build on multiple devices. It's got just about every device you can imagine built in easy for you to see what it's gonna look like across multiple devices. So you're beginning to see how these edge tools kind of work together edge Web fonts was adobes answer to Google Web fonts when they came along before they bought type kit. So edge Pontes lets you put fonts on the server that are called or served up. When the visitor hits that website, they don't have that fun on their website. It sits on the server where the website lives, and when they hit the site, that fun travels to their machine temporarily while there at your side. Okay, so that's edge Web funds. But a few years ago, Adobe bought Type kit. I think it was back in 2000 and and with type kit, you can download both desktop fonts and Web funds, and that's what we're gonna look at next. Amazing fonts. And guess what funds up there Mary Pro Last one in the Web family is the phone gap build, and that's another mobile app creator uh, for creating APS that work across multiple devices. So I thought I'd be nice for you to know what all those little because Adobe makes a big deal. Oh, you get all this and this blast, these icons at you and they have these tiny little descriptions that sort of tell you what they do, but not really. But that's what they do. And then you get a whole suite of video and audio programs, and again, I get no money from Adobe. If you suddenly decide to describe to the cloud, it does not impact me, and I'm not trying to con you into it. I'm just letting you know what you get. So for the video and audio, you get Premiere Pro, which is a cinematic level film editor. We're going to dive into it just a little bit. We're gonna stick our toe into it rather to stabilize and video. That's got a lot of motion that you could then use in your portfolio. And Photoshopped Audition is an audio editor, so you can edit audio files on course for DVD. Authoring media encoder lets you optimize and change the format of video. I had to use that to get the animated GIF to playing keynote because the new version Aquino doesn't understand animated GIFs but understands in P fours. So I used media encoder to swap the format of that after effects is for creating motion graphics. You can think Pixar and pretty much understand that prelude. Let's she organized log and mark video footage. So directors and producer assistance would use that Teoh create notes for the editor that they would pass the footage off to speed grade is for matching color and lighting across several pieces of footage. Isn't it nice to you know what all that stuff does now? Any questions on the full creative cloud gives name. Will they be making, um, the edge websites? Will they be hosting that as part of the creative cloud as Dreamweaver drops out, do you think? Because now it seems like the creative cloud includes hosting for up to five Muser Dreamweaver sites, but it doesn't. It doesn't include hosting for EJ Oh, yes. Oh, the five hosting sites that you get with the creative cloud. I don't know, You know, we'll just have to see how, how all that plays out right now. I mean, it seems logical that they would, you know, when Dreamweaver goes away, give you another tool that you could build those sites with. So it seems likely. Yeah, question, um, in focus is not familiar with D. C. But can they use it across the Mac or the PC. That's a fantastic question. That's a really good one. Yep. Cross platform. Every single app is cross platform. And these days I look pretty much identical, which is nice. Okay, so in my humble opinion, one of the coolest things you get with the whole creative cloud is access to this adobe type kit. So what the heck is adobe type kit? Well, it is. It was founded in 2000 and eight. Adobe bought it in 2000 and 11 and it consists of a community of Oh, about 60 companies that develop fonts. Adobe will tell you that you get thousands of fonts with this and they are correct in a way. But really, they're counting every style of the font as another font when they give you that number, which you know, that's totally fine. Anyway, we get access to some amazing fonds here and it is different if any of you have the adobe type folio are the adobe font folio. Rather, this is not that so. Adobes, Font Falu is every font that they've ever made. It is incredibly expensive. Can you imagine having every fun adobes ever made? I mean, that would be a lot of fun, but that is not this. Okay, there are few folio fonts in here, but not all of them. So you're going to get about. I'd say 500 funds with this, which is still fantastic. So they live on your computer just like any other font. When you download them, it's very easy to download. And we're gonna do that together. The desktop fonts will work in any application. Doesn't have to be adobe the work inward. They're working anything. That working keynote on my Mac and pages, you know, excel anything you want, they will work in there. But if you stop paying your monthly fee, you get, like, a 30 day grace period. Then they remind you again because your computer dials it phones home to make sure your account is current somewhere around once every 30 to 90 days. When it ceases to be able, Teoh either get in an Internet connection or C that your account is up to date. Your font stop working, but you get a notice. So all in all, it would probably be about 90 days from the point that your computer couldn't connect for 90 days, so Now we're at, like, 180 days before. Stuff would actually stop working, but it will stop working. Your programs won't open in. Your fonts will deactivate themselves on your machine. But they do live on your machine that you cannot get to them. So you also can't share them with anybody because that illegal to sharing phones is illegal. So those were just a few things to keep in mind. But if you build a piece and you save it as a PdF, and you give that PdF to somebody, that's totally fine. You know, give it to a printer to print. They don't need the fonts. Print the pdf. So just be aware that the Web fonts again. They live on the server there, served up to the visitor of your site whenever they hit the site so we can choose from desktop fonts and Web bonds on type kit, and you talk about a lot of fun. You guys would want to spend a weekend playing with funds. If there's any font geeks out there, this, you're really sink your teeth into this bit. So the other important thing to notice is that while we download these fonts, we can hook him up to RB Hands Pro Site. We can use them in our Muse website. You can use them in Dreamweaver websites. It's more difficult because you've got a copy paste a block of code into your pages toe. Um, Dreamweaver isn't as up to date on integration with type Kit is muses, But if you use one of these Web bonds and your Web page gets more than 500,000 views, you're going to get a bill in the mail. It's not going to be very much, but you're going to get a usage fee so they're free to use for 500,000 views, basically. But if you want to up that you can. It's like $50 a year for a 1,000,000 page views, so it's not that bad. So if The New York Times wants to use a type kit font, they're not going to go broke paying for the usage fee, you know what I mean. So that's one thing to keep in mind. And how does it know how many times that you view the funds or the fonts are being views? There's JavaScript and CSS going on in your machine that you also can't get at. So that's the deal with that. Let's talk just a moment about a couple of font terms that are gonna be helpful for you because type kid is an amazing place to find fonts that you want to work with. It has ah, filtering system that's very similar to light room in the library module, how we could specify and attributes. And then our results would be filtered down according to what we specify. What you can do that on type kit to. But some of the criteria might be in familiar to you. So one of them the criteria is Is it a serif? Do you want to? Sarah Font, Do you want to San Serif font slabs there of decorative displaced scripts? So that's why I made this graphic for you to kind of visualize what those different attributes mean. So the Serra Font has little feet like the top example here that says Sarah, it has like a little base that it sits on, so those were great for print. If you're going to read a whole lot of text, Sarah fonts are really great for that newspapers and magazines tend to use those lot books. We'll use those two, but that's kind of changing a little bit. People are now starting to use and Sarah fonts as well. O'Reilly did a sand Sarah font for that entire book over There, which is a little surprising, but it seems to work. So San Serif is a little bit cleaner. Doesn't have those little bases or those little feet. Slab Serif has the little basis or the feet is a little bit thicker. Decorative is impossible to read for large bodies of Texas create for headlines only. Same thing with display fonts are gonna be a little bit larger scripts. That's pretty obvious what that is. You know, it's something that looks like cursive up there at the top. Just a few typographic terms for you to be aware of. Point size. Everybody pretty much knows what point sizes, but that does include the Ascender in the D Center, So a sender's would be like the top of the for the dot of the eye, and dissenters would be like the tail of a J or the tail of a Q or the tail of a G. So just keep that in mind. The X height, which we can spec over and type kit, is the point size without the ascender of the D sender. So that's what X height is in. Baseline is just you know what the base of the letters sit on and the D sender would drop down beneath that, so it's helpful just to have a few typographic terms in your in your bag of tricks. So here's what the type kit logo looks like. So if you encounter any websites that has this logo tucked down at the bottom right corner, then in you happen to like the fonts that that website has set in, you know it's type kit font, and that means you can go hunt it down and find it and install it and use it. So let's take a look at that. We'll come over here to our creative cloud app, and we're going to click funds, and we've got a couple of options here, browse fonts on type kit or manage the ones that you've already downloaded and installed. There really isn't anything to install. It just happens as soon as you download them, which is fantastic they automatically show up in the font menus of any of the adobe APs. But if you want to use them in a non adobe at, let's Say like word, you'd have to quit word and restart it. And then the final show right up, which is wonderful. Sponsor expensive. So this type kit thing is a big deal. It's a riel riel value, you know, in my humble opinion, when you take be hands plus type kit, plus the file sharing, you know, I'd pay $100 just for those things right there. You know, it's worth at least to me. So here you can see I've got a couple of funds installed, but to browse them, let's go ahead and click. Browse fonts on type kit. So here's what type kit looks like on the Web. I can feel the font geeks on the Internet gasping because it's so beautiful. I mean, if you left finds you're going to gasp the minute you see this, cause, just like ah oh my gosh, what can I do? So before we break for lunch, let's been just a couple of minutes looking at what we can do here over here on the right hand side. This is our filtering criteria. So if you know that you're looking for ah font, that's good for paragraphs or body text, you can click paragraphs and type Kit narrows down your choices over here on the left hand side, according to the buttons that you click over here on the right. Now, if I don't want to narrow it down, according to fonts, that would be great for body text. All I have to do is click that same button again to turn it off so quick and wants to turn him on, clicking twice, term off or click it again to turn them off. If I'm looking for a font that's good for headings, then I could just click headings. Am I looking for a font that I can use on my desktop, which means, you know, for print projects or anything? Then you click desktop. Are you looking for something strictly for a website, a Web thought that will be delivered server side. Then you click Web bonds, and there's a little badge on each font toe, let you know if they're not all available in both. So the one with the little HTML brackets. That's the Web font icon and the one with the computer screen. That's the desktop font icon. So you can see here, Look at these classifications. So if I'm searching for a headline fun and I know I don't want it to have those little feet, then I would click Sans Serif that way eliminates all the syrups. I'm not even seeing those. If I want just a decorative font, I can click decorative. And if you find that you're not getting very many results than you would want to start turning off some of the criteria. So what you see over here is limited according to the buttons that you've turned on over here in the buttons that are green are turned on. So just keep that in mind so we'll turn off decorative and we'll go back to you. Uh, San Serif. We can even set properties. What's the weight of the fund? You want something thick and bold, or do you want something nice and thin and wispy? What kind of with do you want for the characters? You know the the E in the center is is pretty standard, but you do want it to be extended or do you want it condensed? What's the X height that you want? How tall do you want? This fun typically fonts with the larger X Haider easier to read, especially on the Web. So I would tend to go for a larger X height for Web fonts for body copy. If it were me, what kind of contrast do you want between strokes? So here we've got all seem a little bit here. We've got an oh, that's got quite a bit of contrast between the stroke. So on the right and the left, there's a thicker stroke in the top. In the bottom, it's thin. The example in the middle doesn't have quite as much contrast. An example on the left has no contrast. So those were just a few of the things that you can use to narrow down the amount of funds that your trolling through