Forum Moderators: not2easy

Message Too Old, No Replies

working with graphics

cutting full page graphics for web template

         

WebMan61

7:32 pm on Feb 3, 2003 (gmt 0)

10+ Year Member



I new customer of mine has given me a graphic image of the design he wants on all of his pages. The graphic is full page size 750px by 563px. The graphic is all one piece, it is white in the middle but adding text here with photoshop wouldnt show up when the spiders search. My idea is to cut or slice parts of the image and then crop the slices in photoshop and save each file as a optimized gif. Then I would be able to add text and slices. And put it all together like a jig-saw puzzle. Can anybody tell me if I am doing this the right way?
Thanks

BlobFisk

7:39 pm on Feb 3, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



The approach that you are taking seems fine. Cut out the images that you need and put them into your table/layer page design.

You should also try to use text wherever possible, to aid page download times and search engine optimisation.

korkus2000

7:42 pm on Feb 3, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Also avoid using graphics for large areas that have the same color. Slice those off and use a background color to save bandwidth.

DrDoc

7:51 pm on Feb 3, 2003 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



And, if possible, make the total size smaller. 750px wide is ok .. but 563px high is more than most browser windows. Unless you don't mind the scroll, that is.

Craig_F

7:51 pm on Feb 3, 2003 (gmt 0)

10+ Year Member



also try to have as few slices as possible. many times I've done this with 20-50% fewer slices than I orignally thought I needed, which saves on the load time too.

KevinC

2:53 am on Feb 4, 2003 (gmt 0)

10+ Year Member



Infact this is the method you use to make websites with lots of graphics using Photoshop.

The only difference is you don't want to try and piece them all together - this rarely works well for heavy graphics sites or complex designs.

What you do is cut up all the parts of your image with the slice tool. For parts that you want to be html tables with no graphics just cut a big square for the area, this will create a table cell in that spot.

Once it is all cut up you can export to html with photoshop. It will give you a very nice html page with all the graphics perfectly in place. Now go to the sections that you sliced up for empty table cells and delete the image from the table. You know have an empty table cell to fill with html or text or navigation - what ever you want.

The trick is to cut up the pieces as small as you can so it loads faster - One large image takes longer to load then several smaller pieces

This is how most skilled graphic designers take a website design from the layout stage to a real html document.