|
|
 |
|
|
From templates to web pages-Converting a PSD to HTML by Rohan Sharma
|
|
|
From templates to web pages-Converting a PSD to HTML |
|
|
|
|
|
Website Design
|
|
|
For a website with good looks and sound technology to take shape, it requires two kinds of people to team up. The web designers create the look and feel of the website in the form of templates and web developers to codify the design and the working behind of the website. To begin with, templates are created as PSD files. So what exactly is this PSD? It is the file extension for file saved from Adobe Photoshop. The file contains all the design in layers. It shows you exactly how the various controls and content would look on the website. Beyond that, it needs to be converted into HTML format to be made into a website. Now, you may ask why we need to convert. Though several technologies have developed, the web browsers can understand only HTML. So, you would need to change whatever it is that you want on your website to HTML. HTML and CSS would take care of all the display from the template. The HTML defines or specifies where each element should appear. CSS is a formatting specification that lets you say how each element is to be displayed. With this, designers create several templates in Adobe Photoshop as PSD files and sell them to web masters and web developers. These masters and developers convert PSD to HTML and customize the colours and use it for their websites. There are several converters online that claim to convert PSD to HTML web pages. Most of them end up complicating things and inducing errors. This may become painstaking to correct and debug manually. The best way would be to slice the template to suit the web page. You have to go section by section on the work. First target the header section, followed by the banner section. Then move on to the main section and then the footer section. You could also do up the right navigation section if you have one. For each section, you could create div elements and place all the content for each section within the appropriate div element. For background textures, you could remove the layer and save it as a JPEG image file and apply it to the page. You could slice up images meant to act as buttons for navigation and save them aside too. Now, download the appropriate fonts for the content and determine the colour of the font from the colour palette. Once you are done with the prerequisites, you should start with one HTML file and one CSS file. Create the documentation for the HTML page and then include the link to the CSS file. Now code the CSS file for each section and prefix formatting with appropriate section tags. Switch to the HTML file and create the div element skeletons for the sections. Now, start filling in the content with the appropriate tags and the appropriate formatting from the CSS file. Render the web page periodically on a browser to test the outcome. A well experienced web developer could do the conversion in a few hours. As you keep on practicing, you can also easily do the conversions as you will learn the tricks on the go. PSD TO HTML
Related Articles -
PSD TO HTML, PSD TO HTML CONVERSION, CONVERT PSD TO HTML, HOW TO CONVERT PSD TO HTML,
|
Rate This Article  |
|
|
|
|
|
Do you Agree or Disagree? Have a Comment? POST IT!
| Reader Opinions |
|
|
|
|
|
|
|
|
|
| Author Login |
|
|
 |
Advertiser Login
ADVERTISE HERE NOW!
Limited Time $60 Offer!
90 Days-1.5 Million Views
|
|
TIM FAY
After 60-plus years of living, I am just trying to pass down some of the information that I have lea...more
|
|
|
|
|
ADRIAN JOELE
I have been involved in nutrition and weight management for over 12 years and I like to share my kn...more
|
|
|
|
|
GENE MYERS
Author of four books and two screenplays; frequent magazine contributor. I have four other books "in...more
|
|
|
|
|
LAURA JEEVES
At LeadGenerators, we specialise in content-led Online Marketing Strategies for our clients in the t...more
|
|
|
|
|
MICHAEL BRESCIANI
Rev Bresciani is the author of two Christian books. One book is an important and concisely written b...more
|
|
|
|
|
STEPHEN BYE
Steve Bye is currently a fiction writer, who published his first novel, ‘Looking Forward Through the...more
|
|
|
|
|
LEVAL AINAH
I am an internet marketer and also an educator. My goal is to help others who are looking to improve...more
|
|
|
|
|
PAUL PHILIPS
For more articles, blog messages & videos and a free e-book download go to www.NewParadigm.ws your p...more
|
|
|
|
|
ALEX BELSEY
I am the editor of QUAY Magazine, a B2B publication based in the South West of the UK. I am also the...more
|
|
|
|
