Web Design: PSD to CSS/XHTML exporting
by Joey at 11:38 pmThis will be the first of a series involving the building of a web site in Photoshop and exporting it to XHTML/CSS. This is very basic, and as I’m blogging about this, I’m learning more about it too.
As a designer, this method of building the framework of the web site allows for each fixes and good looking, well-designed pages. There are many ways to build a web site, and this is just one of them. And there are a few tutorials on the web that discuss building web sites this way, such as Elegant Templates.
First, we will be working in Photoshop CS3. Now, develop a concept or a few sketches of how you would like the site to look. Click File – New. In the preset, I have selected Web at a size of 1024 pixels by 768 pixels. Once the document is created, select a background color and start developing your web site.
In this case, we downloaded a photo from iStock Photo of a speaker grill considering it’s a web site for “Rock Radio Records,” to develop a topper and logo for the web site. I also chose a mixture of Gotham Light and Gotham Bold for the name.
Now, stylize how you would like a topper to look.
With your topper develop your background.
I chose a gradient available from Deziner Folio. After developing the background and setting up the look of the website, I choose to make a small added touch to the top left corner of the site.
With the site still in the development stages, I want a “Coming Soon” banner. After using the pen tool to draw a 45-degree banner, I filled it with a red-maroon-red gradient to give it some flair.
OK. Now that the site is finished being designed, we are ready to slice and dice this up for exporting. Select the slice tool in your toolbar, and begin slicing apart your PSD.
Once you have decided where to slice your document, click File – Save for Web & Devices.
In the dialog box, click the arrow box to the far right and select Edit Output Settings. In the drop menu box, select Slices and make sure Generate CSS is selected.
Now, click the OK button and Save once you return to the Save for Web & Devices dialog box. This will prompt you to start a folder. Within that folder, you will have an images folder, which all of your slices will be split into .gif files along with a HTML file, which is your web site like this one.
n the next installment of Web Design: PSD to CSS/XHTML exporting, we will discuss and go over the actual CSS and HTML coding of the Web site, from start to finish.
Thank you for your tutorial, now I can find a way to convert PSD to CSS with easy … thanks a lot
July 26th, 2009 at 4:22 pm