Join Chris Converse for an in-depth discussion in this video Getting CSS properties from text layers, part of Design the Web: Getting CSS from Photoshop.
- View Offline
…Now to start working with CSS that we get from Photoshop.…Lets start in the Exercise Files.…Inside of folder one lets open up Web_Design.psp.…Now if you don't have access to folder one you can use any layered Photoshop file.…Now inside of this Photoshop file here, I have a couple text layers.…I'm going to hold the Cmd key with the Move tool selected.…Click on Welcome.…That's going to select the Welcome layer here.…And one thing you'll want to do when we…start looking at pulling out CSS for text inside…of Photoshop, is to make sure that we separate our text.…I'm going to switch to the Text tool, come down here and you'll see here…inside of promo 2, we have all of the text style in one text layer.…
Now this is really efficient when we're doing our composition, but Photoshop's not…going to know what we want to pull out when we start copying our CSS.…So lets go back to the Welcome layer.…Again if I move this around this is just one single text layer.…With this selected we…can right-click, come down and choose Copy CSS.…
Note: If you don't have any HTML files of your own, Chris has provided free files to all members of the library, so you can get hands-on experience integrating the CSS.
The Design the Web series was created and produced by Chris Converse. We are honored to host this content in our library.