In this tutorial, we’ll talk about the somewhat ill-advised “Copy CSS” feature of Photoshop and how it works. We’ll take code for text and a button that we’ve created and move it over into Dreamweaver and adjust and tweak the CSS code until it creates a graphic similar to what we had in Photoshop. You will see some of the pros and the cons of using this method for creating web design elements or entire web pages.
1. Create a Button in Photoshop
I’m going to create a new Rounded Rectangle and set the fill to a green color and I’m going to give it a drop shadow and set the color of the drop shadow to a very dark green, set the opacity of the drop shadow to 100%, set the size of the drop shadow to 0, and set the angle of the drop shadow to 90 degrees.
2. Add Text
Grab the Text tool (T) and add a small bit of text to the front of our button. I set the color of the text to white and then dragged it to the middle of the button shape.
3. Copying CSS
You can right-click on any layer at any time and choose “Copy CSS”. This will copy the CSS that it takes to style an HTML element. Properties which the CSS will copy out all depend on how designed and stylized your element is in Photoshop. Things like strokes, drop shadow, positioning (not usually a good thing,) color, gradient, font family, and the list goes on and on.
4. Copy CSS of Layer Group
You can also group multiple layers into a group by selecting those layers in your Layers panel and using the hotkey Cmd/Ctrl + G and you can then right click on that group and choose to Copy CSS to get the CSS code of the layers within that group.
5. The Good, The Bad, and The Ugly
The Good: It’s cool that you can quickly grab the CSS code that would style an element exactly (or nearly exactly) like you had designed in it Photoshop.
The Bad: It’s complicated. It’s complicated because most of the good people who would be using this technique are not very familiar with writing and editing raw CSS and HTML. You still need to build the hooks in your HTML and the actual HTML elements, so while it’s nice (in theory) to copy the CSS right out of Photoshop, it isn’t exactly a silver bullet either.
The Ugly: The code that Photoshop outputs is very ugly. It’s bloated, relies on absolute positioning (almost always a bad idea in web design,) adds many extra lines of code that are not necessary, and, because most of the people who could use this feature the most are the ones who are going to have the least knowledge of what code to add or remove as they shape the CSS into something useable.
6. The Verdict
At the end of the day, it’s an interesting feature of Photoshop, but it’s still a little bit away from being a feasible option when building a website. Messy code and the requirement to still know how to write your own code means that it’s still faster to learn the coding languages and write the code the right way from the get-go.
Be sure to watch the video at the top of this article tutorial for even more detail and info on how I used this technique and really finished this effect and got great results!
Sign up for my newsletter and stay up to date with all the tutvid.com happenings! Thanks for checking this tutorial out!
Leave a Reply