Please give me the correct way to do this part of designing

[amit]

Everyone, i am facing a problem which i want to share it with all of you, so, i can get the correct way to do it. My problem is that i am designing a website in Adobe Photo shop and have designed all the pages accordingly.

The place i am creating a mess is with the layout of the design means layout of the header and the left is same and other parts are designed differently. So, when i am slicing the pages they are giving me so many pictures for each and every page means if one page is getting approx. 10 images and the site is having total 20 pages then 200 images means a lot of overload. Is there any short way to achieve it?? so that all the pages can be managed with lesser images. Means after slicing i am saving the picture as web.

Any guidance will be appreciated.

Thanks

[sandor]

Originally Posted by amit

Everyone, i am facing a problem which i want to share it with all of you, so, i can get the correct way to do it. My problem is that i am designing a website in Adobe Photo shop and have designed all the pages accordingly.

The place i am creating a mess is with the layout of the design means layout of the header and the left is same and other parts are designed differently. So, when i am slicing the pages they are giving me so many pictures for each and every page means if one page is getting approx. 10 images and the site is having total 20 pages then 200 images means a lot of overload. Is there any short way to achieve it?? so that all the pages can be managed with lesser images. Means after slicing i am saving the picture as web.

Any guidance will be appreciated.

Thanks

Hi Amit,

It is difficult to give any advise without to see your project. Could you post somewhere on the net the screenshot of your design? CJB.net can provide your such image hosting without registration, then you can post either the url of the image, or you can embed the image in your post.

Screenshot example: h**p://images.cjb.net/0e371.jpg

[SkinnerW]

First of all Amit I hope you are not just slicing the image in the Photoshop and paste it into the web page... This is how TemplateMonster makes theirs HTML templates and it's not the way to go... Photoshop will create too many unnecessary elements to keep layout intact and use full images when sometime you need only small piece of it...

After you have created PSD image in photoshop - now you need to create separate html layout in Dreamveawer or other editor you use.

Than you will assign styles to the html elements according to the design you created in Photoshop.
To use common elements in the header and left column you will probably want to divide layout in 3 pieces:
- header
- body
- footer

You will include common elements in the header and footer parts. Body will change from page to page.

As Sandor mentioned if you give us an image to look at - I can give you some idea how to code your layout...

As a matter of fact if you send me the image I will write the tutorial how to code it so everyone can have an idea...

[smeagain]

If it's not too late, I would sugest that you design your web pages in HTML using a tool designed for the job.

My experience of sites created in Photoshoop is that they are problematic in many ways. One of the main problems is Search Engine UNfriendliness. Invariably these sites end up being reworked with conventional design tools because they are fraught with problems and just don't perform.

[xhan]

you can select the slice too and like the marquee select all of the header/all of the sidebar etc.

Are you sure its necisary to do it this way though?

[sandor]

Originally Posted by smeagain

If it's not too late, I would sugest that you design your web pages in HTML using a tool designed for the job.

My experience of sites created in Photoshoop is that they are problematic in many ways. One of the main problems is Search Engine UNfriendliness. Invariably these sites end up being reworked with conventional design tools because they are fraught with problems and just don't perform.

I agree with smeagain. As a Marketing Executive I had to fight with company's hired web designers to not use Photoshop themes. Yes, Photoshop allows the creation of really artistic sites, but what you gain in aesthetics, you loose at usability. CSS themes alone allow creating colorful sites, and eventually a logo or a fluid header consisting of three images of which two are overlapping may be sufficient, except if you make a site for promoting artistic graphics.

According to my experience, visitors do seek content, useful information, and pictures are useful if they support the text. Otherwise images just distract visitors away from the main purpose of the site.

But we used to have artistic ambitions, and challenging the hard way is so beautiful...

Look, my ugly site for seocontest2008 made 5 days ago is positioned as number 135 on Google from amongst 250,000 pages listed in the search results for the keyword seocontest2008.

I really didn't afford time for it, it has only two mini pages, just to gain some position, and I will start adding content and beautifying it after 2-3 days only.

But, time being it serves its main purpose regardless to its ugliness.

Okay, make your nice photoshop creation, but make it simple. Where ever it's possible, fill the color with html code, or just place a one pixel width color image that you can stretch as you like. Then convert all images into optimized gif pictures using a custom color palette with a minimum of necessary colours. This may reduce the overload.

[xhan]

didn't I reply to this yesterday? where are all the posts!?

[Tracker]

Wouldnt it be easier to slice the main images in whole parts for example the entire header and side menu (if any) then call them via css for the actual layout?

[amit]

But what should i do if one of the page height is more as compared to the main page then I have to do it all from the beginning??

[Talks_44]

if the image is bigger..try an messure the initial one, and then add it to the modified one