Locked lesson.

Upgrade

About this lesson

Let Photoshop do your geek work for you with this simple but powerful method for converting Photoshop designs to flexible web formats.

Exercise files

There are no related exercise files for this lesson, or we cannot provide them due to copyright issues.

Quick reference

Topic Copy CSS

Convert many of the most useful Layer Style to a Web CSS format.

When to use

Let Photoshop do your geek work for you with this simple but powerful method for converting Photoshop designs to flexible web formats.

Instructions

Convert layer properties

  1. In the layers panel select the layer you want, right click and choose’ Copy CSS’.
  2. Paste into text editor to see and edit CSS information (stroke, backgrounds, gradients etc).

Convert type properties

  1. In the layers panel select the type layer you want, right click and choose Copy CSS.
  2. Past into text editor to see and edit CSS information (font information, color, size etc).
Login to download
  • 00:04 Now, in this video, I wanna show you guys a feature called copy CSS,
  • 00:07 which has gotten me really excited.
  • 00:10 If you're like me, someone who mocks up their websites in Photoshop.
  • 00:13 But, the problem is I'm not the best coder.
  • 00:15 I don't know CSS very well.
  • 00:17 I do code my own website, but I have to do a lot of trial and error.
  • 00:20 Well, Photoshop CS6 13.1 makes it that much easier with the new copy CSS feature.
  • 00:26 Let me show you exactly how amazing it is.
  • 00:29 So, here I have an older mockup of iceflowstudios.com,
  • 00:32 which contains a bunch of elements that I might want to implement on my website.
  • 00:36 But, I might not be 100% fluent with CSS.
  • 00:39 So, I might go to Google and find a CSS Generator to help me out a little bit, or
  • 00:43 I might do a lot of trial and error.
  • 00:45 Well, now it's a lot simpler.
  • 00:46 You'll notice over here I have a navigation bar.
  • 00:48 If you take a look at my layers panel over here to the right,
  • 00:51 you'll notice it has a few layers styles.
  • 00:52 It has a stroke.
  • 00:54 It has a gradient overlay and a drop shadow.
  • 00:56 Now, in CSS if you know anything about CSS,
  • 00:58 these are not very simply CSS properties that you can input.
  • 01:02 There are a lot of values and
  • 01:03 for different browsers it gets even more complicated, and like I mentioned,
  • 01:07 to implement these would require either a lot of trial and error or a CSS generator.
  • 01:11 I don't wanna have to deal with either of.
  • 01:13 So now, with these layer styles in place on my Shape layer,
  • 01:16 if I right click on this layer I now have a copy CSS option near the top.
  • 01:20 And, when I do that, let me hop over here to my Text Editor.
  • 01:23 I'm gonna simply paste.
  • 01:25 And, you'll notice it contains all of those properties.
  • 01:28 Up here, the border styles, that's our stroke.
  • 01:30 Over here the background image, that's our gradient.
  • 01:33 And, over here, the box shadow, that's our drop shadow.
  • 01:36 And, of course, it contains a bunch of other things like the position, left, top,
  • 01:39 width, height, those things I probably won't use on my website,
  • 01:42 cuz chances are the elements are in place, but the properties are not.
  • 01:46 So, I'd probably delete those, but
  • 01:47 if you do want a specific width, height, or position.
  • 01:51 Those properties are available with the copy CSS feature as well.
  • 01:55 It's fantastic.
  • 01:56 This is going to save me, and a lot of web designers, a lot of time.
  • 02:00 Now, it doesn't just stop at shape layers.
  • 02:02 Copy CSS also grabs type properties.
  • 02:05 So, let me go back over here.
  • 02:06 I'm gonna grab this navigation type layer right at the top which contains.
  • 02:09 Home tutorials, articles, inspirations, and so on and
  • 02:12 so forth, and it does contain one layer style, it contains a drop shadow which
  • 02:16 copy CSS will grab, but it will also grab your type properties.
  • 02:21 Once again, I'm gonna right-click on this layer, copy CSS and go over here.
  • 02:24 I'm gonna paste it and you'll notice.
  • 02:26 In addition to the drop shadow, it also includes the font size,
  • 02:31 the font family, the color if it is a line to the left center or the right.
  • 02:35 And, just like on the shape layer, it also contains the width, the position and
  • 02:38 all that fun stuff.
  • 02:40 And, if you do have things like underline or strike through.
  • 02:43 That will come over as well.
  • 02:44 And, just to show you guys one more example,
  • 02:46 I'm gonna grab this search bar at the top.
  • 02:48 Again, right-click > Copy CSS.
  • 02:50 And paste.
  • 02:51 And, there you go.
  • 02:52 It even takes the layers name, and it puts it as a class,
  • 02:55 which you can easily change to a div if necessary.
  • 02:58 So, for you designers out there who aren't fluid in CSS, but
  • 03:01 do a lot of mockups in Photoshop.
  • 03:03 This is going to save you a ton of time.
  • 03:06 I am excited for this feature.
  • 03:07 You have no idea.
  • 03:08 And, if you're a Creative Cloud member and
  • 03:10 you have Photoshop CS six, this update is available for you right now

Lesson notes are only available for subscribers.

Gift this course