Critique 2 Working Progress 1

6 Apr

Honestly, I don’t know how to convert psd files to html, I only heard people always said slice tool without actually tried it before.

So have to research on how to cut, and more important, how to cut nicely.

In some research, realize that slicing can be done in either Adobe Photoshop or Adobe Fireworks. I don’t know what’s the different, but I decide to try fireworks for my slicing work. To slice jpg files, and save as png, then convert all to html.

Slicing starts:

After finish slicing, tried many times on different slicing to suit different layout arrangement for soon production process – Adobe Dreamweaver part.

Tried and upload to my website www.greenunitymap.com using Filezilla and consult my friends to get some opinion on it:

After some opinions, change the same colour background from image file to background colour, in order to decrease the whole page size for faster loading.

At the end, after many elimination, come out the clean slicing, and convert it to html to edit in Adobe Dreamweaver later.

Use this as the base for my website design.

Some references I read and research on includes:

http://dzineblog.com/2009/04/tutorials-psd-to-html.html

http://net.tutsplus.com/tutorials/site-builds/from-psd-to-html-building-a-set-of-website-designs-step-by-step/

http://www.bolducpress.com/tutorials/from-psd-to-html/

Fortunate slicing is easy. Haha

Current major concern and things need to learn are:

Google maps API

Building a search box for website

Building search box for the map

Form for website to fill in data

Submit button, to integrate the data with my maps

and more.

*Self learn and research is much difficult and takes time, but at least I learn a lot in the process, and the final outcome would be something I could proud of.

Update on 13th April:

This is the final fireworks cut and after finalize edit. To achieve lowest file size for loading speed, and to put in maps in the middle.

White area on top will put background colour of green for faster loading instead of an image of background.

Middle is for inserting Google Maps API later on.

firework final cut

firework final cut

About these ads

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: