Skip to main content

CSS Support

Lesson 14 from: Adobe Photoshop Deep Dive: Creative Cloud

Lesa Snider

buy this class


Sale Ends Soon!

starting under


Unlock this classplus 2200+ more >

Lesson Info

14. CSS Support

Next Lesson: Conditional Actions

Lesson Info

CSS Support

So now we're going to come over into folder number eight and this was another tiny little tiny little thing so go I didn't had an open this silly little fake document that I made when you have created a shape layer or a text layer, you can snatch cascading style she properties from both of those layer types that only works on text layers and shape players, so when I mean is let's say that we've created this shape with a rounded right tangle tool and we've got a nice little a color fill a nice little stroke let's say we've created this in aa and finish up to mock up a web page or web graphic that we're gonna build for a client well, instead of having to recreate all of that in your favor html editor, you can grab it css properties including absolute positioning and all of the color information positioning on the page you know with absolute positioning into copy and paste paste double css four man right here from fellow shot so this is brand new and cc the way you do it is you after they...

any text or shape layer and you control or right, click it to bring up its shortcut ninni and you choose copy c s s and now let's bring up a text editor, see what we got pretty amazing her positioning on the document as well as border with border color border style with the background color is everything yeah. Okay let's, zoom back out and let's come back over here to photo shop. Same thing on text. Now there is one caveat with tex and you'll you'll pick it up pretty quickly, so we're going to control or right click copy. Css, come over here to our text editor. We'll go down at a few returns and that we're going paste nothing happens in photoshopped to let you know that anything has taken place, okay? But it is copy to your clipboard now if I zoom in well, we do indeed have font size font, family color line, high text alignment, absolute positioning, all of that right there. But there's only one problem. There were two fonts in that text layer that's I would consider it a bug, but I'm really not sure how they'll fix it. I don't think he can, so I don't think the programmers can actually, so if you're using this and you do need to create, you do need to use different fonts. You cannot change those fonts on the same type player you have to eat for this, store it properly, you need to just have one fun in that type player because it can't pick up multiple finance within a single type player that make sense it only sees the first one it doesn't see the second it doesn't see the font change so that's the the downside to that one, but as long as you're aware of it, you can plan for it like I could put that this one right here this word on another type player and then grabbed the css properties from that layer pace it into my css file along those same lines is the ability to load color data from an eight email spg or c s s file straight into your swatches panel, which is pretty amazing so here we are in our swatches pain I'm gonna go ahead and reset my swatches to the factory fresh defaults by clicking the flyout menu in choosing resets watches and then I'll say ok, so now you can see my swatches panel here it stops at these two little brown's watches that's all that's on the last room and actually I'll make my swatches a little bigger bye don't we have a panel options there were you we'll say large thumbnails and we'll liberate this panel from its stocks. You can really appreciate what we're about to do here, okay? So here's our defaults watches let's say you're going to mock up a website for somebody, but they haven't existing website you just want to steal that color information well let's, go grab a css and spg or in html file you will never know that this feature is in the program because nothing tells you it's there you're going to click the little fly out menu at the top right of the swatches panel this will guy right here and you're going to choose one of two things either loads watches to upend the new ones were about to bring into what you already have or we're going to replace everything that's there with the new ones were bringing in whichever one you need to do when you do that actually listens to replace click replaced watches you get an open dialog box and this is where you can simply navigate to that css spg or html file but see how there's nothing really telling you that you can do that so you may not know that you can't camp so seriously quick open photo shop tucked inside that file and dug out all of the hex values for all of the colors that have found in there some nail I have a perfect color palette tio design ads for that company or holy website or what have you without having to go in there and used the color picker copy and paste the hex number bringing anti and create the swatches manually? What a pain so this is a big big time saver for web designers really, really gonna love this so again, all we did was we went to the swatches panel, the flyout menu, either load or replace which everyone, depending upon what you want to do and then simply navigate to one of those file types that we mentioned and photo shop will bring those colors right in pretty amazing stuff. Lots of little helpers, you know, in cc, aside from the shake reduction filter in the new image size dialog box, you know, it wasn't like there was a ton of of magic new features, right? But it's a lot of little things that are really cleaning up the program and especially in this far is efficiency. Speaking of efficiency, I've got a couple of images here also in the realm of efficiency you can save frequently used text formatting as character in paragraph styles. We've had that ability since c s five I think, but new mencius earning and cc I'll take me a long time to memorize noon cc is the ability to save those styles as default, so let's say, for example, you find yourself always using the same fun, right? So if you do that once you get the font form out of the way you want, you can highlight that area actually just click within that line, go to your window menu and pull up character styles. And I've already got these styles in there, some in tow. Leedham yes, there we go, so we're starting from square one, so here we go. We have some text formatted like I'd like I'm going to go ahead and click the little new style icon, and then I'm going to double click it and given a name actually have to have it highlighted for it to work someone delete that yes to feed it. There we go, so we're going to highlight our ticks. There we go now we're gonna put the new style button double click it to give it a name header! Great! So now let's double click tow activate a word in the second line because that's a different style so I can click new style and don't click it and name it subhead. So now, any time I create new text, I can simply click those styles info shop will apply that recipe, all of that text formatting too panel texts, which is really handy that's not new and see see what is new and sisi is your ability to save styles as a default. And so that any document, any new document you create from this point on, or any document that you opened that didn't previously have styles in it these style they're going automatically be imported into those documents so the way you do that is by clicking the little fly out menu at the top right of the character styles or paris styles panel they work the same way and you just want to choose save default type styles and that's the new feature in cc right there so we can save those and now if I create a new document well, sam a photographer designer I do a lot of those postcards in that way this might really be helpful for you so now create a new blank document well, if I open my character styles panel other by clicking in a dock or by choosing window character or paris styles, those styles that I added in that other document are automatically right there so I can tie my text and single click those styles to apply them so that's a nice thing you're next question, of course, will be what's the difference between character styles and paragraph styles with paragraph styles. You can also add in indentation in spacing so like space before space after the things that you find in the paragraph panel this guy right here so alignment indentations space before in space after those were the things that are saved with paragraph styles with character stiles is just text formatting fund family style you know bold id metallic in size basically so that's new default character styles in paragraph styles

Class Materials

bonus material with purchase

Creative Cloud 1
Creative Cloud 2
Creative Cloud 3

Ratings and Reviews

Michelle B

I have purchased all of Lesas Deep dive classes and have learned so much. She makes it easy to understand and she gives you examples and goes through them more than once so you understand. This is the class that not only shows you how to but what you can do. She gives you ideas and she is a joy to watch and listen to. I can say enough good things about Lesas classes and I am so glad to have them in my tool box to refer back to anytime I am stumped on how to fix problem in Photoshop. Thank you Lesa!!

Student Work