Nowadays , a very simple rule exists
that if you have a business, you must make sure that your business
has an online presence via a unique website that represents your
services on the web. In order to create a simple website, you must
have a design and addition to that, an HTML converted from your
design, which will be used as a static or dynamic website by nature.
So, one of the most important aspects of getting a website built is
to convert your design to a very basic web structure that a browser
can understands – and that aspect happens to be HTML.
With this post, I intend to share
essential steps you can't afford to miss when you are converting your
PSD to HTML. I also assume that you are aware of HTML structure and
code implementation which is required to understand this post:
1) Gather the basic working idea of
your website
Understand what structure you want to
have for your website, for instance, what buttons should be used,
what kind of boxes should be implemented, which part of CSS is
required to implement, and so on? This can help you in planning your
HTML skeleton as well as the resources you will need to obtain after
image slicing step.
2) Analyzing your PSD file or your
design
PSD files represent the photoshop
design documents. It's a universal format of developing designs by
professionals around the world using a powerful tool called
Photoshop. Analyzing your design means that you need to understand
and objectify what elements are included in the PSD, what specific
actions need to be associated with those elements, for example,
whether yu want extra gradient with texts or how you want the design
to be coupled with each other in form of layers or what background
image (or images) do you wish to use so that you can further identify
the exact element or pattern to be used in next step.
3) Slicing up the images
Till this point, you have a pretty good
idea about what all elements can be managed directly by HTML like
colors, borders or even gradient and what all elements you need use
from your design files that is PSD. Start reviewing design files in
terms of reusable material in accordance with to convert PSD to responsive HTML e.g. a small 1px
image which should be implemented with repeat function of HTML, check
for color codes using PSD which you will be using with HTML codes
like RGB or alphanumeric color codes. Once the you are done with
identifying those elements which you can not use directly in HTML and
those elements which are essentially required as images. Now start
extracting elements accordingly from your design files and save them
with specific name structure you wish to have with your HTML.
4) Generate CSS and HTML structure
Once the images are sliced up and ready
to be used, decide what HTML structure you should use like flexible
width or fixed width, responsive or adaptive once you have decided
your next step will be to create a basic skeleton using default tags
of HTML like <header>, <footer>, <body> etc. Once
the skeleton is in place, insert elements within that skeleton with
the help of tags like <section>, <div>, <ul>, <li>.
Now once the elements are listed in there you now need to style them
with your CSS codes. This step involves minutely reviewing each of
the inserted element and writing defined code for that element. Once
you have assigned the style to each of the element your HTML of that
page is almost ready to be used.
5) Finalize with test
This step will probably be the most
important step after you completed your style. You need to check your
created HTML with all of the browsers you have written style and HTML
for. You will see different design breaks or missing elements with
your HTML on different browsers. Create a list of all such issues and
once you have checked your HTML on all browsers, it time to fix the
issues from list. Keep repeating the process till you have your spot
on HTML ready.
These are basic but necessary steps of
creating a full HTML. In case you find it difficult enough to handle
by your own, I would suggest you to discuss things with any
professional or take his/her services to convert your designs to
HTML. A browser compatible and hand coded HTML is what is considered
as best quality HTML and industry standard so you need to make sure
when you are checking HTML, it should reflect these qualities always.
