Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
Hello and welcome back to another instalment of Creative Quick tips. My name is Justin Seeley, and in this weeks episode we're going to be taking a look at how to get CSS information from our files inside of Photoshop and Illustrator. With Adobe's new Photoshop CC and Illustrator CC products, there are actually some really interesting HTML and CSS features being built into both of these applications. We're going to specifically focus on CSS this time around, but if you want more information on this type of stuff, I highly suggest.
That you take a look at my Photoshop and Illustrator for Web Design courses inside of the lynda.com online training library, where I talk a lot about web design, work flow and all that kind of stuff. So, as you create things inside of Photoshop, and in here I've just got a rectangle shape out on the canvas here, and what I want to do is I want to see what the CSS properties of this would be. Now, unfortunately there's no CSS panel, as of yet, inside of Photoshop, so what you have to do is select the layer you want, and by the way you want to name the layer, in this case, the same thing you would want to name the div container that you would want to create here.
So in this case, maybe I want to call this something like box_large. And then I would come over here and I would choose Copy CSS from the layer panel menu. Then if I go over, and let's just open up something like a text document, get text edit really quick, there we go. I could paste in all of this information and I'll blow this up so you can see it. So here's all the information I copied over from Photoshop. But it's telling me, okay the div's name is box_large just like I have there. Background color.
That's one of the best features right there. I can grab the RGB values from that, and easily put that right into a code editor to style up some CSS. The rest of this stuff is sort of frivolous information like the position and all that kind of stuff. You may want the width and height if you've been very specific about how big you want this thing to be. And by the way, this will also pick up things like gradients and drop shadows as well and allow you to translate those into CSS really easily as well. So, you might want to check that out. As far as Illustrator is concerned, let's check this out. I have another box drawn over here inside of illustrator and I also have the CSS Properties panel, which you can get to by going to Windows > CSS Properties.
And I've also named this item here, box, in the Layers panel. Now I can double-click that, and rename that something like box_large like we had before. And then when I do that, you'll see that the declaration here in the Properties panel changes to box_large. I can take all this information. Just click and drag across, and copy it. And then I can go into text edit and I can just paste it in, there it is, it's that same type of information that I had before. Scroll over, so you can actually see that information, minimize that down, there we go.
So there you have the box_large, background color, you've got a hex color and an rgba value, which might be a little bit more handy. RGBA, by the way, stands for red, green, blue, and alpha, so you can actually control opacity of the colors as well. I'm going to close that up and I'm not going to save it. Now I'm going to add some stuff to this. So let's say for instance, I wanted to change the color of this to a gradient. Notice that when I click on the gradient here, that it actually adds in all of that information which you can then easily copy and paste into a code editing application. Dreamweaver for instance. And then you can also add things like a drop shadow.
So Effects > Stylize > Drop Shadow. And let's just hit a Preview here, there we go. And when I do that, you can see it adds the box shadow property to that. I can then take all of this, past it into my code editor as a CSS declaration and I would be able to then, call out that CSS declaration in an HTML file and showcase that very easily. If you're not a web person but you're doing some web design work, you could easily just take this information that you've created here and pass that along to your web developer. Making it easier for them to translate what you've created in Illustrator or Photoshop into actual workable HTML and CSS.
It's going to make the process a lot easier, it's going to bridge that gap between designer and developer, and make things run a whole lot more smoothly.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.