• t
  • g
  • B
  • Z
  • @
  • e

portfolio & blog of senior web developer, Fahd Murtaza



  • About
  • Portfolio
  • WordPress
  • CV
  • Blog
  • Contact


  • About
  • Portfolio
  • WordPress
  • CV
  • Blog
  • Contact

How to convert your photoshop document to a CSS in less than 30 seconds, a precise tutorial with illustrations

June 25th, 2007 by Fahd

As a webdesigner you’re working a lot with photoshop and now you would like to convert your psd (or jpg, png, whatever photoshop can read) files to a valid CSS and (X)HTML document.

Do you know that you can do it using photoshop and image ready and that it will take about 30 seconds ? If you want to know how do it everything is explained step by step with proper screen captures just in case ;)

(There’s plenty of books about CSS but few are really good, i would recommend you this one :

The Zen of CSS Design : Visual Enlightenment for the Web (Voices That Matter)

Yep you’re not dreaming this is possible, read on ! :)

1-open your file with photoshop
ouvrir le

2-Edit the document with Image ready
editer dans image ready

3-Slice your document using the “Slice” tool, this will allow you to define all the different parts of your web page (for example, the header, the menu etc.)

outil de slice

4-Now your document should contain blue numeroted squares and lines
résultat de l'image slicées

5-Now you need to specify in image ready the ouput parameters.
output settings

6-Now you choose the CSS export (inside the File->Outputsettings menu)

choisir le css

7-Now you have defined your output options you just have to click on OK. (this will validate your settings but won’t create the file yet).
8-This is the last step, you need to save the result, using “Save optimized” (inside the File menu).

sauver le résultat

And now the work is finished,imageready has just created an “images” folder containing all the sliced images and an html file which is containing in the source code the css code.

If you wanna see/copy/edit the css source code you just need to open the file in your favorite web browser and display the source code.

afficher le code source

-Extract of the css code generated by photoshop/imageready:

code source

Everything is ok now you have your css and XHTML file. Of course you might need to edit it by hand to modify and or tweak some part of it.

I hope that thanks to this tutorial you’ll spend less time doing css and that you’ll have more time to focus on the the creative aspects of your work.

As you can read further down inside the comments section this method has some limitations. In order to become an expert in CSS coding i would recommend you these great books:

Posted in CSS, Photoshop, Web Design

Post a Comment

Click here to cancel reply.

Your email is never published nor shared. 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=""> <strike> <strong>

  • Categories


Want to Hire Me?


Fahd Murtaza is the guy behind fahdmurtaza.com: your source for getting your web development projects done. Fahd sepcialises in Open Source Web Development and his favorite is WordPress. This site is a platform to his web development portfolio and blog all on a newly designed responsive website—try viewing it on your mobile.

If after viewing Fahd's portfolio, you think he might be just the guy to hire for your web / application development; check out the web development pricing page, then find out how to hire Fahd with a web development project idea and a brief of requirements.

 


Fahd Murtaza has put together a number of Web Development Articles that will help you see what he does, how he does it. You will also be able to see the level of work, and passion, that Fahad puts into each and every job. Understanding a little about the process can make the idea of investing good money much more palatable. People have always appreciated my Agile techniques. Its time you

Fahd Murtaza, Web Developer, Programmer, Wordpress Expert
U
This is portfolio & blog of senior web developer Fahd Murtaza, who has 9 years experience in: website development, WordPress, drupal, CMS and CRM application development with passion of making web better; one site at a time.


@
Mobile +968 93 678 199
email info@fahdmurtaza.com
Google Talk: fahdim@gmail.com
Skype fahd.murtaza
Location Muscat, Oman.


_
Developed using my beloved, love of my life, WordPress, built on the responsive, grid based, mobile optimised, Foundation Framework, and a modified Foundation theme. More Info →


Follow Fahd: Twitter / Google+ / Instagram / Facebook / Dribbble / Tumblr / Posterous /
Copyright © 2006-2012 Fahd Murtaza

    • WordPress.org
    • Documentation
    • Support Forums
    • Feedback