Skip to main content

How to design a website - layout using free tools

There are many web development tools available on the market. Some of them ships with basic features and some contains very advanced features. What if you are unable to use any commercial tool available and still you want to design a pretty complex design, slice it, and convert it to html/css.

How do I know this? I know this since once I ran in to this situation by myself.

What I did first was to download Inkscape, which is a free vector graphic program. Creating a design in Inkscape is same as other vector graphic applications. But unfortunately there is no straight forward way of slicing the design and exporting. This is what I did as a workaround.

I simply add a new layer to the project and named it as “slicing”. I made sure to keep the “slicing” layer above from the rest of the layers and locked all the other layers below it.

I drew a rectangle surrounding the area I wanted to export. If the rectangle has stroke or fill it was critical to disable them since I wanted to export only the background. I have done this to each and every slice I wanted to export.

Since the slicing layers have no stroke or fill, it seems very difficult to select them if I accidentally deselected them. But “xml tree” is a handy solution to this. The “xml tree” can be located from the top tool bar of the Inkscape UI.

The exported slices are in png format. You can't export to jpeg or gif files directly from Inkscape. But you can use some other programs like Gimp to convert png files to jpeg or gif files.



Comments

Popular posts from this blog

Overriding default look and feel of GREG - 5.3.0

Following list explains what are the best approach for different use cases. 1 ) - You created a new asset type, and you need to change the look and feel of the details page in the listing page just for that new asset type. To create a new asset type you need to login to the carbon console (username:admin, password:admin) https:// :9443/carbon/ Navigate to Extensions > Configure > Artifacts Click "Add new Artifact" link at the bottom of the page. By default in the "Generic Artifact" area "application" asset type is loaded. Note the shortName="applications" in the root node. "applications" is the name of the asset type. Browse in to /repository/deployment/server/jaggeryapps/store/extensions/assets Create a folder with name "applications"    Now we can override the files in /repository/deployment/server/jaggeryapps/store/extensions/app/greg-store-defaults   Since we are overriding the details page we need to...

Projecting HTML Elements on a circle using Javascript

Recently I wonted to create a tree control with a different approach. The requirement was to represent a node tree with main node on the circle center and it's child nodes projected on a circle around it. This is what i wanted. My solution has 5 files prototype.js This is a handy javascript framework. You can download the latest version from there website ( www.prototypejs.org/download ). I am using this to simply handle the onload event in the page. circle.html script.js node-main-left.gif node-sub-left.gif The circle.html, prototype.js and the script.js files are in the root folder and the two images are inside a folder named “images”. This is how the html file looks(circle.html). <html> <head> <script src="prototype.js" type="text/javascript"></script> <script src="script.js" type="text/javascript"></script> <script language="javascript" xml:space...

Simple client side validation library

  Client side validation has never been easy.. Include jQuery and the validator.js < script src = " http://code.jquery.com/jquery-1.11.3.min.js " ></ script > < script src = " ../validate.js " ></ script > Simple validation < form id = " myForm " > < label >User Name < span class = " red-star " >*</ span > </ label > < input type = " text " name = " userName " class = " validate-required " /> < br /> < label >Password < span class = " red-star " >*</ span ></ label > < input type = " password " name = " password " class = " validate-required " /> < br /> < input type = " submit " value = " Login " /> </ form > ...