Adobe Photoshop and Illustrator for Web Design

How to write CSS code in Photoshop and Illustrator

In this article, you are going to learn a very simply process that will allow you to easily retrieve CSS data from your files in Photoshop and Adobe Illustrator.  CSS (Cascading Style Sheets) as well as other HTML features are becoming more and more developed in both Photoshop and Illustrator as new features and products continue to be developed and released.  This article is going to focus primarily on CSS.

Process #1:  Photoshop

  1. Select your desired layer in Photoshop (this is the first step until a CSS panel is developed)
  1. Make sure to name both the layer and the “div” item you are attempting to create.
  1. Select “Copy CSS” on the layer menu and open a separate text editor. The text editor will be used in order to edit text as quickly as possible.
  1. Next, go to the Background Color section and select the RGB (Red, Green, Blue) values from the panel. Paste these values directly into your code editor so you can create some CSS. Here you can also see and edit the width or height if you need your project to be an exact size.  The program will automatically pick up on other elements of your project such as gradients or drop shadows to make it very easy to translate said elements into CSS.

illustrator-css1

Process #2:  Illustrator

  1. Open the CSS Properties window by navigating to Windows > CSS Properties. Make sure to also name your items here with the Layers window.

illustrator-css2

  1. Using the Properties window, simply click, hold, and drag to copy the “declaration” information and paste it into your text editor. You may need to resize or minimize the text in order to be able to see it all at one time.
  1. Here, you will notice you can see all information including background color, hex color, as well as the RGBA value (Red, Green, Blue, Alpha). This feature allows you to control the color opacity easily. With copy and paste, you can use these panels to quickly adjust different elements of your project such as the gradient color and the addition of a drop shadow.
  1. For example, if you were to adjust the gradient color, simply click the option on the panel, and the information will be copied to your clipboard so that you can easily edit it in your own coding application such as Dreamweaver.

illustrator-css3

  1. To edit the Drop Shadow, navigate to Effects > Stylize > Drop Shadow. You can also preview your work at this stage by selecting “Preview.”  Finally, you have the option to take all the CSS declaration code you have created and save it in HTML format in order to translate it to workable HTML and CSS for a web design project later.  This code can also be sent to any web developer to be translated just as easily.

These processes should help make it much easier for you as a designer to learn how to begin to also complete some of the Web Development work that you may not have been able to do before.

photoshop-css

Bio:

Emin Sinanyan is the lead designer at Los Angeles-based Amberd Web Design Studio. He specializes in graphic/web design and traditional art. He enjoys writing tutorials on this free time! You can follow him on LinkedIn.

Show your love!

Allen Ray

is a graphic designer. The Design Mag was founded in 2008, and since then she is constantly looking for new ways to serve the Design community both online and offline. It is her ultimate goal to make The Design Mag the best source for Design related Tutorial and Resources. Follow on Twitter@thedesignmag

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>