Convert a PSD to PHP with HTML and CSS integration – in only a few clicks. Export Kit makes your PSD to PHP and HTML conversion painless, with support for custom PHP ini settings, dynamic PSD projects and more. PSD to PHP, HTML and CSS has never been easier.

Our PSD to PHP Output has the simplicity of HTML and CSS, packed with options similar to WordPress.

IMPORTANT: All HTML/CSS features work equally with PHP, you can also check out our PSD to HTML Cheat Sheet for some of our unique support!

PSD to PHP is a new concept for most, but offers greater flexibility for HTML and CSS when converting your PSD – moving to PHP with built-in HTML and CSS support is faster and easier than you think!

You Need A Host

PHP is a server-side language and will require a host (local or web) to run. You cannot open a PHP file in your browser locally, you must navigate via a HTTP/S protocol – eg. //www.mywebsite.com or //localhost/mywebsite.

Download Apache to Use PHP Locally

Windows: WAMP | Linux: LAMP | MAC: MAMP

Before You Begin

This tutorial will assume you have a multi-page PSD website design ready-to-go.

Read how to Convert a PSD to HTML and Multiple Pages to get a head start with PSD to PHP Outputs. PHP has all the features and options of our PSD to HTML and CSS export including Responsive designs.

The PHP Concept

PHP allows for a modular approach to your designs. Along with the normal [header], [content], and [footer] design – PHP will further extend your Photoshop creative process allowing your to create a single project from multiple PSD files.

The Multi-PSD Approach

Not all Photoshop documents related to a single PHP project require [header] and [footer] elements. These are considered global pages and are only required once each time a page is rendered. This allows you to create one or several PSD documents, relating to a single PHP project.

Step 1: Header and Footer Pages

The first step is to convert your [header] and [footer] folders in your PSD to HTML design into pages. PHP uses a modular approach and will load the header and footer information dynamically. This allows you to separate your [project] and [content] PSD designs as required.

Read how to create Multiple Pages in your PSD design.

The “Only One” Rule

Only add ONE [header] and [footer] page per project.

In modular PSD to PHP projects where a designer is using multiple PSD files, you only need to create a [header] and [footer] once! PHP will dynamically load the [header] and [footer] on each page request – allowing for full separation of PSD designs.

Step 2: Custom Initializer Options

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

// ek128_602_webpage_services_php settings
// 
// @package         ek128_602_webpage_services_php
// @date             2015:05:29 11:34:53
// @generator         ExportKit
// 
 
desc        = "Lorem ipsum dolor sit amet, eu nam nominavi invenire, eum ferri."
title        = "We provide better service<br/>for your digital needs"
s1            = "step_3_button_icon.png"
w1            = "web_icon.png"
p1            = "print_icon.png"
copy        = "Export Kit Suite 1.2.5 Sample  2014. All Rights Reserved"
fb            = "facebook_icon.png"
fb_link        = "www.facebook.com"
tw            = "tweeter_icon.png"
tw_link        = "www.twitter.com"

The nature of PHP allows for dynamic information processing. With Export Kit you can set initializer options for any Photoshop layer and have the end-user/developer customize the options as required. This will give additional flexibility when designing modular designs where clients can customize content without prior knowledge of code.

${ini|[OPTION ID]:[OPTION NAME]} - Layers Only

usage: ${ini|home_logo:Logo}

You must use a unique [OPTION ID] when creating PHP options, otherwise PHP will assume you want the same property for different layers!

Step 3: ${code} Tag is Your Friend

PHP is a very dynamic system allowing you to add content in various ways. Use ${code} tag to add custom JavaScript, HTML, CSS or PHP to your Photoshop text layers.

There is no limitation on the content of code layers, so you can integrate any custom Framework (JS/PHP/CSS), and load dynamic content such as a form handler direclty inside Photoshop.

Step 4: Responsive PHP

Responsive PHP websites are simple to create with Export Kit. PHP works hand-in-hand with HTML5 and CSS3, so all supported layer tags, features and options are available for PHP also.

Step 5: Export Normally

That’s it… convert your existing PSD design to a Responsive PHP website now using this guide – quick and painless!