SlideShare a Scribd company logo
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 Bhatia
Front-End Developer/Enthusiast, Artist
Github: hash113
Twitter: @the_harshbhatia
THANK YOU !!

More Related Content

Viewers also liked

Sdc verifier main presentation (Structural Code Verifier)
Sdc verifier main presentation (Structural Code Verifier)Sdc verifier main presentation (Structural Code Verifier)
Sdc verifier main presentation (Structural Code Verifier)
SDC Verifier
 
SDC Verifier at Femto CAE day
SDC Verifier at Femto CAE daySDC Verifier at Femto CAE day
SDC Verifier at Femto CAE day
SDC Verifier
 
A short list of material din vs astm
A short list of material din vs astmA short list of material din vs astm
A short list of material din vs astm
Ramesh Nagda
 
Norsokr002
Norsokr002Norsokr002
Norsokr002
JayJay Makinano
 
Overhead Crane Manual
Overhead Crane ManualOverhead Crane Manual
Overhead Crane Manual
scojetinc
 
Crane
CraneCrane
Keselamatan crane
Keselamatan crane Keselamatan crane
Keselamatan crane
Fazal Akbar V
 

Viewers also liked (7)

Sdc verifier main presentation (Structural Code Verifier)
Sdc verifier main presentation (Structural Code Verifier)Sdc verifier main presentation (Structural Code Verifier)
Sdc verifier main presentation (Structural Code Verifier)
 
SDC Verifier at Femto CAE day
SDC Verifier at Femto CAE daySDC Verifier at Femto CAE day
SDC Verifier at Femto CAE day
 
A short list of material din vs astm
A short list of material din vs astmA short list of material din vs astm
A short list of material din vs astm
 
Norsokr002
Norsokr002Norsokr002
Norsokr002
 
Overhead Crane Manual
Overhead Crane ManualOverhead Crane Manual
Overhead Crane Manual
 
Crane
CraneCrane
Crane
 
Keselamatan crane
Keselamatan crane Keselamatan crane
Keselamatan crane
 

Similar to Hoist: Major Project (a Photoshop script to convert PSD to web)

PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
Darryl Sherman
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
SURYANARAYANBISWAL1
 
CONTENT MANAGEMENT SYSTEM
CONTENT MANAGEMENT SYSTEMCONTENT MANAGEMENT SYSTEM
CONTENT MANAGEMENT SYSTEM
ANAND PRAKASH
 
WebMatrix2
WebMatrix2WebMatrix2
WebMatrix2
Subodh Pushpak
 
Php
PhpPhp
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptxppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
ManojKumar297202
 
Psd to html
Psd to htmlPsd to html
Psd to html
Len Biel
 
Joomla tempates talk
Joomla tempates talkJoomla tempates talk
Joomla tempates talk
Chad Windnagle
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
Vineeth N Krishnan
 
The Evolution of Branding in Office 365 - SPSATL 2015 - CDew
The Evolution of Branding in Office 365 - SPSATL 2015 - CDewThe Evolution of Branding in Office 365 - SPSATL 2015 - CDew
The Evolution of Branding in Office 365 - SPSATL 2015 - CDew
Cathy Dew
 
SharePoint development 2017 wrap-up
SharePoint development   2017 wrap-upSharePoint development   2017 wrap-up
SharePoint development 2017 wrap-up
Joel Rodrigues
 
Web Design & Development Courses in Pune| 3DOT Technologies
Web Design & Development Courses  in Pune| 3DOT TechnologiesWeb Design & Development Courses  in Pune| 3DOT Technologies
Web Design & Development Courses in Pune| 3DOT Technologies
abeda786
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
Evan Mullins
 
Web Designing Training In Chandigarh
Web Designing Training In ChandigarhWeb Designing Training In Chandigarh
Web Designing Training In Chandigarh
Excellence Academy
 
Introducing the new features in Expression Web 3
Introducing the new features in Expression Web 3Introducing the new features in Expression Web 3
Introducing the new features in Expression Web 3
Christophe Lauer
 
mini-project.pptx
mini-project.pptxmini-project.pptx
mini-project.pptx
ManojBhatt85
 
Ttl
TtlTtl
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
MassoudmAlShareef
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
Selvaraj V
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
John Hartley
 

Similar to Hoist: Major Project (a Photoshop script to convert PSD to web) (20)

PSD to HTML Conversion
PSD to HTML ConversionPSD to HTML Conversion
PSD to HTML Conversion
 
INTRODUCTIONS OF HTML
INTRODUCTIONS OF HTMLINTRODUCTIONS OF HTML
INTRODUCTIONS OF HTML
 
CONTENT MANAGEMENT SYSTEM
CONTENT MANAGEMENT SYSTEMCONTENT MANAGEMENT SYSTEM
CONTENT MANAGEMENT SYSTEM
 
WebMatrix2
WebMatrix2WebMatrix2
WebMatrix2
 
Php
PhpPhp
Php
 
ppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptxppt of MANOJ KUMAR.pptx
ppt of MANOJ KUMAR.pptx
 
Psd to html
Psd to htmlPsd to html
Psd to html
 
Joomla tempates talk
Joomla tempates talkJoomla tempates talk
Joomla tempates talk
 
HTML5 introduction for beginners
HTML5 introduction for beginnersHTML5 introduction for beginners
HTML5 introduction for beginners
 
The Evolution of Branding in Office 365 - SPSATL 2015 - CDew
The Evolution of Branding in Office 365 - SPSATL 2015 - CDewThe Evolution of Branding in Office 365 - SPSATL 2015 - CDew
The Evolution of Branding in Office 365 - SPSATL 2015 - CDew
 
SharePoint development 2017 wrap-up
SharePoint development   2017 wrap-upSharePoint development   2017 wrap-up
SharePoint development 2017 wrap-up
 
Web Design & Development Courses in Pune| 3DOT Technologies
Web Design & Development Courses  in Pune| 3DOT TechnologiesWeb Design & Development Courses  in Pune| 3DOT Technologies
Web Design & Development Courses in Pune| 3DOT Technologies
 
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
WordCamp Asheville 2017 - So You Wanna Dev? Join the Team!
 
Web Designing Training In Chandigarh
Web Designing Training In ChandigarhWeb Designing Training In Chandigarh
Web Designing Training In Chandigarh
 
Introducing the new features in Expression Web 3
Introducing the new features in Expression Web 3Introducing the new features in Expression Web 3
Introducing the new features in Expression Web 3
 
mini-project.pptx
mini-project.pptxmini-project.pptx
mini-project.pptx
 
Ttl
TtlTtl
Ttl
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Wa html5-pdf
Wa html5-pdfWa html5-pdf
Wa html5-pdf
 
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...Familiar Tools, New Possibilities:  Leveraging the Power of the Adobe Web Pub...
Familiar Tools, New Possibilities: Leveraging the Power of the Adobe Web Pub...
 

Recently uploaded

Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
Tosin Akinosho
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
Miro Wengner
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
Neo4j
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
DianaGray10
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
MichaelKnudsen27
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
Fwdays
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
AstuteBusiness
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Pitangent Analytics & Technology Solutions Pvt. Ltd
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
Zilliz
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
Fwdays
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
Edge AI and Vision Alliance
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Neo4j
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
Ajin Abraham
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
Jason Yip
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
Safe Software
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
Alex Pruden
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
Ivanti
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
DanBrown980551
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
Antonios Katsarakis
 

Recently uploaded (20)

Monitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdfMonitoring and Managing Anomaly Detection on OpenShift.pdf
Monitoring and Managing Anomaly Detection on OpenShift.pdf
 
JavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green MasterplanJavaLand 2024: Application Development Green Masterplan
JavaLand 2024: Application Development Green Masterplan
 
Leveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and StandardsLeveraging the Graph for Clinical Trials and Standards
Leveraging the Graph for Clinical Trials and Standards
 
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectorsConnector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
Connector Corner: Seamlessly power UiPath Apps, GenAI with prebuilt connectors
 
Nordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptxNordic Marketo Engage User Group_June 13_ 2024.pptx
Nordic Marketo Engage User Group_June 13_ 2024.pptx
 
"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota"Choosing proper type of scaling", Olena Syrota
"Choosing proper type of scaling", Olena Syrota
 
Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |Astute Business Solutions | Oracle Cloud Partner |
Astute Business Solutions | Oracle Cloud Partner |
 
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
Crafting Excellence: A Comprehensive Guide to iOS Mobile App Development Serv...
 
Generating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and MilvusGenerating privacy-protected synthetic data using Secludy and Milvus
Generating privacy-protected synthetic data using Secludy and Milvus
 
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk"Frontline Battles with DDoS: Best practices and Lessons Learned",  Igor Ivaniuk
"Frontline Battles with DDoS: Best practices and Lessons Learned", Igor Ivaniuk
 
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
“How Axelera AI Uses Digital Compute-in-memory to Deliver Fast and Energy-eff...
 
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid ResearchHarnessing the Power of NLP and Knowledge Graphs for Opioid Research
Harnessing the Power of NLP and Knowledge Graphs for Opioid Research
 
AppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSFAppSec PNW: Android and iOS Application Security with MobSF
AppSec PNW: Android and iOS Application Security with MobSF
 
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
[OReilly Superstream] Occupy the Space: A grassroots guide to engineering (an...
 
Essentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation ParametersEssentials of Automations: Exploring Attributes & Automation Parameters
Essentials of Automations: Exploring Attributes & Automation Parameters
 
Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024Northern Engraving | Nameplate Manufacturing Process - 2024
Northern Engraving | Nameplate Manufacturing Process - 2024
 
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
zkStudyClub - LatticeFold: A Lattice-based Folding Scheme and its Application...
 
June Patch Tuesday
June Patch TuesdayJune Patch Tuesday
June Patch Tuesday
 
5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides5th LF Energy Power Grid Model Meet-up Slides
5th LF Energy Power Grid Model Meet-up Slides
 
Dandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity serverDandelion Hashtable: beyond billion requests per second on a commodity server
Dandelion Hashtable: beyond billion requests per second on a commodity server
 

Hoist: Major Project (a Photoshop script to convert PSD to web)

  • 1. HOIST A Photoshop Script to convert PSD file into HTML & CSS. “ Transforming Designs to Web !! “
  • 2. INTRODUCTION “HOIST” is a Photoshop script written in Java Script to convert a Photoshop Document Into Respective HTML and CSS code.
  • 3. 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.
  • 4. 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.
  • 5. 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.
  • 6. 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
  • 7. 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.
  • 8. 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.
  • 9. 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().
  • 10. ABOUT DEVELOPER Harsh Bhatia Front-End Developer/Enthusiast, Artist Github: hash113 Twitter: @the_harshbhatia