How to Make a HTML CSS Theme From a PSD File Easily
You don't need to be an expert in HTML or CSS to create your own Web page. If you've designed a layout in Adobe Photoshop, but don't know what steps to take to convert the PSD file to HTML, you can export your image to HTML from within Photoshop itself. Before you export the layout, however, you should first use the slice tool to cut the image into different sections in order to make the layout easier to edit once it's converted into HTML. After saving the file as a Web document in Photoshop, you can swap out some of the HTML with CSS to clean up the code.
Other People Are Reading
Instructions
-
-
1
Launch Adobe Photoshop, then click "Open." Navigate to the folder where the PSD file is stored. Double-click the file to open the layout. Click "Slice Tool" or press "C."
-
2
Select an area outside the image. Drag the mouse over the desired section, then release the mouse button to create a boundary box. The image will be split into two separate sections.
-
-
3
Repeat step two to continue slicing the layout into different sections as needed. Hover the mouse over the edge of a boundary box to resize the box, if necessary.
-
4
Click "File" once you've finished splitting the layout into separate sections. Click "Save for Web & Devices" to open a new window.
-
5
Click "Save," then select "HTML and Images" from the "Format" drop-down menu. Name the file, then click "Save" again to make an HTML theme from the PSD file.
-
6
Open the HTML document in a text editor like Notepad, vim or Notepad++. Add the "<style>" and "</style>" tags in between the "<head>" and "</head>" tags at the top of the page.
-
7
Insert the following in between the "<style>" and "</style> tags:
body {
}table {
} -
8
Add the following attributes to the "body" element in the CSS, so that the code looks like the following:
body {
background-color: #X ;
margin: 0;
}Replace "X" with the desired background color for the page; use Adobe Photoshop to find the hexadecimal code for the desired color.
-
9
Add the following attributes to the "table" element in the CSS:
table {
width: W px;
height: H px;
padding: 0;
border: 0px;
}Replace "W" and "H" with the associated values for "width" and "height," as displayed in the "<table>" tag. Use the "Find" tool -- accessed by pressing "Ctrl" and "F" -- to locate the "width" and "height" attributes, if necessary.
-
10
Remove "bgcolor," "leftmargin," "topmargin," "marginwidth" and "marginheight" from the "<body>" tag. Remove "id," "width," "height," "border," "cellspacing" and "cellpadding" from the "<table>" tag.
-
11
Press "Ctrl" and "S" to finish creating an HTML/CSS theme from a PSD file.
-
1
Tips & Warnings
To find the hexadecimal code for the desired color in Adobe Photoshop, click the color swatch from the toolbar, then highlight the field next to "#."
Although Adobe Photoshop offers a quick and easy method for converting PSD files to HTML, you may find it easier to use a WYSIWYG -- like Adobe Dreamweaver, Microsoft Expression or Amaya -- to make an HTML/CSS theme.
