HOIST

A Photoshop Script to convert PSD file into HTML & CSS.

“ Transforming Designs to Web !! “

INTRODUCTION

“HOIST” is a Photoshop script written in Java Script to convert a Photoshop Document

Into Respective HTML and CSS code.

WHAT IS IT ???

A Photoshop Script is an approach to automate Photoshop using its JavaScript object model.

Photoshop Application Programming Index (API) allows user to use Photoshop object model to

automate filters, functionalities and effects or convert a document into various format.

“HOIST”, once called, extracts all the information from the PSD file and converts the possible effect

into its HTML and CSS code and lately combine it all to complete a static webpage design.

Before HOIST

Before this script Designer/ developers use to convert

their design manually by coding each and every bit of

static website.

Or they have option of getting a copy of the css

conversion of design and add it to the code they

already building.

The earlier support of ps is to convert into image and

add to make a webpage.

Yaaa I know that s**ks.

After HOIST

Name Inspired by the Transformers from the

marvels, hoist is a multiplatform script to

transform a design to webpage

Convert Static web designs to HTML n CSS with

absolutely no effort at all.

Design by the methods of Photoshop etiquettes

and get a error free code.

TECHNOLOGY

JavaScript Programming Language

Currently on MAC OSX Lion 10.8

Supporting Adobe Photoshop CS 5+

Compact and simple with size less than 1 MB

Support max used HTML tags and Static CSS

properties

HOW TO USE

Open PHOTOSHOP CS 5 +

Open Your Photoshop web project

(File > Scripts > Browse)

The Browse item at the end of the Scripts menu

(allows you to execute scripts that are not installed

in the Scripts folder.)

You can also use Browse to select scripts installed

in the Scripts folder after the application was last

launched.

Functionalities

Removes Empty layers.

Create separate HTML and CSS files in separate

folders

Create Image folder and link images to its

destination.

Write all effect for non visible layer also.

Assign style by class, hence leaves id to be handled

by scripting language.

Simple script and doesn't need to be installed.

Etc.

General Instructions

All the queries and support only at Website.

Make your Photoshop document by the rules at

Photoshop etiquettes for better results.

Hoist is completely open source, you can modify

as you want, the source code is at github().

ABOUT DEVELOPER

Harsh BhatiaFront-End Developer/Enthusiast, Artist

Github: hash113

Twitter: @the_harshbhatia

THANK YOU !!