PHP: Display Adobe PSD files on a web page

by Jean. 36 Comments -

Any webdesigner know the PSD filetype, which is the Adobe Photoshop format. PSDs have a lot of great features, as such as layers, but they can’t being read by a browser. Unless you use this great PHP class!

The classPhpPsdReader.php Class

The classPhpPsdReader.php Class was created by Tim de Koning in 2007. It is based on the GD library, which can do numerous operations on images with PHP, but sadly, can’t open PSD files.

The classPhpPsdReader.php Class can be downloaded for free on PhpClasses.org. It is compatible with both PHP4 and PHP5.

Usage

Nothing hard here. Once you have downloaded the classPhpPsdReader.php class and uploaded it on your server, you’re now ready to display PSD throught a web browser.
To do so, just refer to the following code example:

<?php
// Send header to client browser
header("Content-type: image/jpeg");
// Includes the requested class
include_once('classPhpPsdReader.php');
// Finally display the PSD on the screen
imagejpeg(imagecreatefrompsd('yourPsdFile.psd'));
?>

The result

Reading psd files with php
Great tool for people who are, like me, both webdevelopers and webdesigners!

On another note, I just purchased a new blog to complete my network. The blog is called PsdVibe and you can have a look here. The blog focus on providing Adobe Photoshop tutorials, resources and freebies.

  • Pingback: PHP: Display Adobe PSD files on a web page

  • http://routecafe.com David

    To be honest I didn’t expect this kind of tool to exist, heck I’m going to try it tomorrow to see how it goes.

  • Pingback: PHP: Display Adobe PSD files on a web page - BTRSS

  • Heenok

    Didn’t know php was able to do that! Thanks!

  • Pingback: Links for May 21st through June 2nd | Michael Tyson

  • http://www.hotelabis.pl Kotlina Klodzka

    PSD files are huge. This might be a nice idea for smaller files but I had projects as big as 10-20 mb. I wouldn’t like to display that on a page and make people load for like 10 minutes.

  • http://www.letithelp.org Dane”blog customization”Channel

    I don’t know much about web designs… but anyway I enjoyed reading it.

  • http://www.govolunteerindia.org Biz”volunteer abroad India”Mark

    Thanks for the information…

  • Pingback: Отобразить PSD файл при помощи PHP | Alex Volkov

  • http://www.0window.com/blog/ Catrin W

    Well, i hear for first time for such a code. It is really interesting, and i am surely that it has some use for web designs or some other purposes.
    Anyway, congrats on the psd site purchase. If i am not wrong that is second site about photoshop tutorials that you own ? The first one is psdrecipes..

  • http://www.wprecipes.com Jean-Baptiste Jung

    @Catrin W: Yes, I already have psdrecipes.com, which focus on short/useful Photoshop recipes :)

  • http://wpcult.com The Frosty @ WPCult

    That’s a very awesome tool!!

  • Pingback: B豚の備忘録 - PHPで出力色々

  • http://www.gnethosting.net Deniel | cheap web hosting

    I could never know that it is even possible to embed psd directly in the post. I published a few posts on the topic but I have to use screen capture shots for that. Thanks for sharing an amazing resource.

  • http://benpei.com Ben Pei

    Oh wow amazing.. where did you discover this trick? lol

  • http://freewebmasterseotools.com Free Webmaster SEO Tools

    Thanks, good stuff!

  • http://chaleware.com Free web page design

    If you made an artwork with Adobe Photoshop Elements(3.0),can you open the file and/or edit it with other Adobe Photoshops like CS3 and/or CS3..?If not,what are the exceptions?

  • http://www.gnethosting.net Deniel | cheap web hosting

    @Free web page design, I think everything is being installed with installation of Adobe CS3(I am talking about extensions etc) so you would haven’t any problems in doing that.

  • http://www.pat-pro.co.uk/ PAT Testing

    Superb tutroial, I never thought you could do that with pdf and php together

  • http://www.squidoo.com/HowToMakeMoney101 illmill

    That’s awesome! As someone who designs webpages and custom graphics, this is something I’ve always needed and never knew it.

  • http://www.upwoodpark.co.uk/ Camping yorkshire

    I didnt know you could even access or display psd files without using photoshop yet alone via a php page

  • http://www.gainuk.co.uk/ Umbrella Companies

    Brilliant! thanks for the demo. This will really improve my website

  • http://www.crazyxhtml.com psd to xhtml

    I had not known anything about PSD reader!

    easy example. Does it work for all browsers?

    Thanks a lot. will test it…

  • Pingback: diggita.it

  • Pingback: Links for the day | CssGalleries

  • http://internetudvikler.com/ Ussing

    Thanks ! Nice to know that this tool is around.

  • http://www.graticle.com Shawn Hooghkirk

    Great post. PHP never fails to amaze!

  • http://www.eeefiles.com Zen

    What is the point of doing this? Why would we want to show PSD files directly?

  • http://romarto.com Romarto / web site designer

    Sometimes I send my psd sketches to the clients and they don’t have photoshop installed, nice decision in such cases, thanks Jean !

  • http://www.webhostright.com/ John

    This is not something i would of immediately thought of but i can definately see its uses.

  • Pingback: ITキヲスク | 2009å¹´5/31~6/6の週間ブックマーク

  • Pingback: 10+ extremely useful PHP classes

  • http://mayhemdevelopment.com.au Brad M

    While this is a handy feature and the concept has been around for while… it only does come down to the one simple use… to quickly display PSD files… It is not ideal or recommended to be used in normal web development.

    Having a personal blog, progress reports and so on it can be applied to.. As for the people thinking this will slow the site to load a 20mb file… NO… your not downloading the whole file to the user nor does the user ever get the PSD file… You are simply creating a render from it… imagine like a database that is 100′s of mb in size and your searching and displaying from that file…. The server handles the actual load, the client receives the final output from the server. in this case a flat single layer image.

    While this will be handy for some and not others… weight up the pros and cons… if you do not want a massive server load, then i would suggest simply using pngs/jpgs…

    If you have a small low traffic blog site or host your own images and designs. this will be for you.

    if you have clients who login to an area where they access a progress report of art design, then this is for you.

    *** One suggestion if it does already not have the option… CACHE!… let it create the image once as a jpg/png then if the image is available. load that instead… So simply a web based PSD->Flat Image…

  • http://www.kmwitservicesltd.co.uk/demo/chewy Keith

    I have tried this and it has not worked – had error 500 internal server error!
    I am no coder but the server is mine – including the hardware and it runs 30 websites in all sorts of formats including php/mysql which runs all sorts of php like joomla with no errors and other systems.

    can anyone let me know if there is alternative version of the reader file I downloaded as its not working at all with no errors in the log either

    • http://www.eddieadolf.com Eddie Adolf

      I was able to get it working real quick after some trial and error as I am a coder / designer but not on the backend with php. Just add the classPhpPsdReader.php on your server. Then make a test psd and place it in same folder. Then make a new php file, I just made mine all blank and put this in it:

      Then run this file.

      Fun and all, but it would work best if you put it in an upload process or something of course.

      I plan to use it for a new proofing system i’m developing (the outline atleast) so that I’ll be able to just upload a psd, it will convert it to a jpg, and then resize it for the client to review. It really just saves me a step. But hey anything to save steps!

  • http://www.setsailmedia.com/ Patrick Moore (Set Sail)

    Great find, thank you for sharing this PHP class! Can’t wait to download and try it out. I know this is an old post, but any idea whether the package is up to date for CS5 or CS6 version PSD documents?