Designing website as a graphic - any hints? (Full Version)

All Forums >> [Web Design] >> Web Graphics



Message

_gail -> Designing website as a graphic - any hints? (11/15/2002 17:20:44)

A couple of months ago I learned that many web designers lay out an entire web page in an image editing program first , then slice it up, insert in tables, etc.

My understanding of how to do this is quite limited but I am getting a few website jobs and think I really need to learn and get an handle on this. Can any one offer a few tips, hints or references?

Some of my initial questions would be:

- is there a standard size to make the overall graphic (pixel width and heigth)?

- do you insert individual slices as a foreground or background objects, or a combination of both?

- do you make rollovers right in the graphics program using layers?

- how do you add text? Do you allow for the text area (using white space) in the image, then slice it, delete it and add text in Normal view of FrontPage?

If there are other basic questions I should have asked but failed to do so, please address them if possible. thanks in advance for any tips,

gail

btw, I use Photoshop.



Ariel -> RE: Designing website as a graphic - any hints? (11/15/2002 23:01:49)

Yeah, there is a program that' s technically stand-alone, but comes with Photoshop. It' s called ImageReady and if you want to know more, I can ask my teacher and get back to you on the specifics. She' s the one that told us.[:)]
--Ariel



_gail -> RE: Designing website as a graphic - any hints? (11/16/2002 10:22:06)


quote:

ORIGINAL: Ariel

Yeah, there is a program that' s technically stand-alone, but comes with Photoshop. It' s called ImageReady and if you want to know more, I can ask my teacher and get back to you on the specifics.


Ariel,

I' ll take any and all hints regarding ImageReady, particularly with regard to my questions above.

thanks, gail



PBailey -> RE: Designing website as a graphic - any hints? (11/16/2002 10:56:09)

Gail,
This topic was discussed and explains a long time ago here but as usual with really old topics, I can' t find it with the search.....the only reason I remember the topic is that I tried it at the time. I do remember that the main graphic was laid out at the px size of the page 800x600 etc.

There was the discussion on Imageready back in October.

http://www.frontpagewebmaster.com/tm.asp?m=98174&appid=&p=&mpage=1&key=slice%2Cimage&language=&tmode=&s=#98613



abbeyvet -> RE: Designing website as a graphic - any hints? (11/16/2002 11:12:51)

Disclaimer: What I have to say about this is my own way of approaching it, it may not work for anyone else and is not necessarily the ' right' way [:D]

That said.

quote:

is there a standard size to make the overall graphic (pixel width and heigth)?



What size you make the image depends on a lot of things.

For example if you are going to use part of it as a background image, so that the background must be a certain width, then the width matters a lot, if there will not be a background image it probably matters less. For example if I am using a fixed width table to hold the main part of the page, I will sometimes use a background image to make visible fine lines around at the right and left sides of the table, in that case, since I will cut this image from my graphic, so the width of the graphic matters a lot.

I generally make the graphic about 760 pixels wide - it ensures that anything you throw at it will not be two wide for a resolution of 800x600. The depth does not really matter in most cases.

quote:

- do you insert individual slices as a foreground or background objects, or a combination of both?


A combination usually, though sometimes no background is required.

While I know most people use ImageReady or an image slicer of some kind, I don' t usually.

What I do is this (this is hard to write about, I wish I could just demonstrate! [:@])

I look at the graphic and if there is something that could be efficiently used as a background (such as in the example above) I cut that out of the image and if necessary put it on another background - ofr example in the case of the fine lines mentioned above I cut a thin sliver of the graphic out, containing the lines, and then place it carefully on a much wider (perhaps 1600+ pixel) image of the same height so that it will not repeat at higher resolutions.

Then I look at the rest. If there are images that will effectively be against a plain colored background, then I cut them out and save them for placing in a cell with that color bg.

The big thing is creating a structure at this point on the page that will hold everything correctly. You can mentally slice up your graphic into what will go in the header table, what in the main table and what in the footer table. Soetimes you need to divide the main part into two or three- eg images that will go on the left (such as navigation) and a bit you willl do nothing with on the right as you will have an empty space there for text on the actual page. I would usually cut my graphic initially into these bits.

Then I make the tables I need, slice up the images for each and put them in. It is a bit tricky to get the hang of I suppose but once you do it a few times it becomes pretty easy.

ImageReady will make the tables for you, but I really prefer doing it myself, though that is PURELY preference and no reflection on the other approach.

quote:

how do you add text? Do you allow for the text area (using white space) in the image, then slice it, delete it and add text in Normal view of FrontPage?


Yep. However by taking it in sections as above you will find this much easier. If you try to slice up the whle thing you will end up with lots of seperate cells where the text should be and trying to merge them etc will cause all sorts of headaches.


This is all over the place - I find it particularly difficult to describe!





_gail -> RE: Designing website as a graphic - any hints? (11/16/2002 11:21:56)

quote:

ORIGINAL: pbailey

main graphic was laid out at the px size of the page 800x600 etc.

There was the discussion on Imageready back in October.



Yes, I recall the discussion. I started it. [:D] But as Katherine pointed out at the time " this is HORRIBLY difficult to explain."

I' m asking for more specifics here (at least I hope I am), such as the recommended size of the overall image. In the other thread I asked how to insert slices, in this one I' m asking about removing them so text presumably can be inserted. I suppose some of the questions overlap.

It' s an excellent thread though, and I' m glad you reminded me of it. I will go back and reread it.

I did attempt making my first slices last week, with the Photoshop manual open and at my side. You will not believe me if I tell you how long it took. Suffice it to say I have lots to learn.

I' ve tried unsuccessfully to find a tutor where I live. [:(] I' ll keep asking for hints until I get this.

gail



_gail -> RE: Designing website as a graphic - any hints? (11/16/2002 11:50:00)


quote:

ORIGINAL: abbeyvet

This is all over the place - I find it particularly difficult to describe!




No, it' s not all over the place. But I personally find this difficult to grasp on my own and that' s why I' ve tried so hard to find some one to teach me.

I' ve taken four Photoshop courses and the instructors looked at me like I was from another planet when I asked them to show me how to slice an image for web work. I attended Fotofusion (if I recall the name correctly) last year where internationally recognized photographers gather and teach Photoshop and related courses. Not one covered slicing. [:' (]

Yes, I wish I could find someone in my area to demonstrate.[:(]

Thanks for all the good info here which I fully intend to study!

gail



abbeyvet -> RE: Designing website as a graphic - any hints? (11/16/2002 11:59:23)

I did find this:

http://www.adobe.com/web/tips/imgrnavslc/main.html



Nancy -> RE: Designing website as a graphic - any hints? (11/16/2002 12:14:51)

I' m with Katherine on this one - I make my own slices - I actually don' t really know how in Photoshop or Image Ready as they won' t do what I want, so I' ve never messed with it.

I read this post last night, and didn' t answer only because it is so difficult to describe.

I guess for me I like starting in Photoshop because I can see how it is going to look first, without all the slicing. I start with an image 750x500 usually, like Katherine said, so I know nothing will be too large for 800x600.

I really only slice out little bits of the actual Photoshop image. I use the " fixed size" option a lot. I probably put more work into this than necessary, but it works for me. I use the rulers to see where I need to slice, with the image blown up to about 500%.

For example: Let' s say I have a section near the top that will become the images for the header area. The site name, the logo, etc. Then I determine the needed size, such as 250 wide by 99 tall. Then I do a " fixed size" selection with the marquee tool. Then I copy and do File>New> and paste. Then I save that for the web so I can optimize in that step. Then I do the same for other parts for the header area. I don' t worry about it being exact on the width, as there will be a table background color to fill in the gaps. Or I will make just a very small slice for a table background that will tile, so the size is usually 15 wide by the now established 99 height.

I then just continue to choose the areas that will need to be graphics and slice them out manually. A lot of the reason I do this is because I' ll use table or cell background colors instead of graphics for faster loading for many areas of the actual html page.

The advantage to starting all this in Photoshop, is that I can easily change the colors or the font if something isn' t looking quite right, and to get a feel for how the page will look without have to build the page. It might seem like a lot of work, but to me it is less work in the long run. It is also easy to make a screenshot to show a client this way.

Hope some of this helps.

Nancy









_gail -> RE: Designing website as a graphic - any hints? (11/16/2002 15:09:24)

Wow, lots of good stuff here ladies!

quote:

ORIGINAL: Nancy

Then I do a " fixed size" selection with the marquee tool. Then I copy and do File>New> and paste. Then I save that for the web so I can optimize in that step.


Now this is another something I can dig my teeth into. I do this all the time but never thought in terms of slicing. Neither did I understand previously what people meant when they said they do their own slicing.

I am definitely going to try this. I will no doubt be back with another question or two or three or.......... about getting it all to work for more complex graphic headers and backgrounds.

I do have a question right now for Nancy.

Do you used Photoshop or ImageReady to create graphic rollovers; or do you just make the on/off gifs manually too? I tried using ImageReady last week to make rollovers, perfectly layed out as a gif, then sliced away with the little knife. What a fiasco [:j](and I' m not blaming it on the program). But the size of my slices came all whacked out and I had to start from scratch.

thanks Nancy and Katherine for all the time that went into making your replies!

gail





PBailey -> RE: Designing website as a graphic - any hints? (11/16/2002 16:31:56)

Katherine and Nancy,
I also appreciate all of the great explanations you have taken the time to give us. After reading through both I plan to try doing it this way again.

Gail....let me know how it goes.



_gail -> RE: Designing website as a graphic - any hints? (11/16/2002 16:49:06)

quote:

ORIGINAL: PBailey

Gail....let me know how it goes.



Will do, Paula. It will be a little while before I get to play as I' m away on a combo business and family visit trip. Let us know, too, how it goes for you. Bobbie and I plan to follow some ImageReady tutorials together and help each other as we go via email and sharing files. If you want to join us, contact me by email. Not sure we' ll get around to it until after the holidays though.

gail



Nancy -> RE: Designing website as a graphic - any hints? (11/16/2002 20:23:10)

I actually create the navigation images separately. I usually put something into the large Photoshop layout, so I can see how it is going to look. But then I make a separate image for them, using layers to make the different on/off state.

One nice thing about Photoshop, Fireworks, and Paint Shop Pro is that it only exports the layers that are visible at the time. So I start with an image that is the size of the nav image, for example 125x20 or so. I usually use the vector shapes, but you could also just flood fill the layer with a color. Then depending on the program you use, you can make a new layer and flood fill with a different color, or do an effect in Photoshop 6 that is a color overlay.

Next I make a text layer using the text for the longest word/s I' ll have on the navigation bar. I get the font and placement just right, then I duplicate that layer, and change the text for the next button. By duplicating the layer, all the placement stays the same. As I work on the text layers, I hide the previous one just so it isn' t so confusing while I am working.

When I am done, I have several layers to the image. I save it in the native format at this point so I can make changes later if needed. Then it is just a matter of hiding/showing layers and " save for web" For example, for the first button I would show the text " Home" and the color layer I want to show when the page loads, and save for web (or export as some programs call it) Then I hide the first color, and make the other color layer visible. Again I save for web/export. Next I hide the " home" text and show my next one, again showing/hiding the color as needed to make two more buttons. I do the " save for web" and put the gif images right into the folder where I want them. I actually save the psd file someplace else, where it won' t get loaded to the server and take up space.

You get the idea I think.

A little more tedious than quick slicing in Image Ready, but I think it works quite well. As for the javascript, I use Dreamweaver, but once you save the images you could easily go to the Mighty Mouseover online thingy and do the javascript.

For a duplication of what I just typed, here is a tutorial I wrote on the issue.

http://www.thetemplatestore.com/tutorials/navimage.asp

Hope this helps.

Nancy




PBailey -> RE: Designing website as a graphic - any hints? (11/17/2002 0:04:08)

Nancy,
Thanks. I use layers all the time and never thought of using them for this task.....I really appreciate the great step by step. This is going to be a whole lot easier then the way I was doing it! [:)]



_gail -> RE: Designing website as a graphic - any hints? (11/17/2002 8:21:10)

I have a couple of questions about a few things you wrote.


quote:

ORIGINAL: abbeyvet

For example if I am using a fixed width table to hold the main part of the page, I will sometimes use a background image to make visible fine lines around at the right and left sides of the table, in that case, since I will cut this image from my graphic, so the width of the graphic matters a lot.


I cut a thin sliver of the graphic out, containing the lines, and then place it carefully on a much wider (perhaps 1600+ pixel) image of the same height so that it will not repeat at higher resolutions.



Do you have examples you can point us to where you' ve done this? I' m really trying to grasp this but I am such a visual person that words alone aren' t sufficient on this issue. This 1600+ pixel sliver is intriguing.

quote:

The big thing is creating a structure at this point on the page that will hold everything correctly. You can mentally slice up your graphic into what will go in the header table, what in the main table and what in the footer table.


Am I correct in assuming that you use pixels rather than percentage when creating your tables and cells for a sliced graphic? Do you also set individual cell properties, such as left, center, top, etc? Or do you keep the cells at their default and set the images propterties instead?



quote:

quote:

how do you add text? Do you allow for the text area (using white space) in the image, then slice it, delete it and add text in Normal view of FrontPage?


If you try to slice up the whle thing you will end up with lots of seperate cells where the text should be and trying to merge them etc will cause all sorts of headaches.



I may not understand you here so the following may be a dumb question. Except if you decide to change to original design, why would you want to merge cells after you go to all the trouble of creating a precise table and cell structure?

thanks, gail



_gail -> RE: Designing website as a graphic - any hints? (11/17/2002 8:28:55)

Re: background/foreground images.

You would use a background image if you want text or something else over it. Are there any other reasons one would choose to use a background rather than foreground image?

Background images take the same time to load as a foreground image, correct? A 780 wide pixel image has the potentail to be huge. So you really have to optimize the heck out of it, sliced or not. How do you optimize it to maintain visual quality while at the same time reducing load time?

gail



Ariel -> RE: Designing website as a graphic - any hints? (11/17/2002 12:02:19)

Okay, sorry it' s taken me so long to get back to you, but it looks like you' re getting all the help you need![:)]
But my teacher did have some books for suggestions so here' s what she wrote:
For the answer: use ' save for web' and make the graphic as small as possible. The rest of it is volumes to answer and you should be guided to purchase a couple good books, such as any by Jakob Nielsen on web usability (i.e. Designing Web Usability) and maybe the Photoshop Wow! Book for your version of Photoshop (this book covers lots and lots of tips including using ImageReady and slicing web pages).

Hope this helps! Good luck!
--Ariel






abbeyvet -> RE: Designing website as a graphic - any hints? (11/17/2002 12:39:04)

If you fly me to America I will sit down beside you and demonstate - it would be so much easier than trying to describe it!! [:D] [:D]

A couple of examples of ' slivers' used as backgrounds:

1. http://www.beechfieldhouse.com
This page has an image as the background of the main body table.
This is the image: http://www.beechfieldhouse.com/images/layout/bg.gif

When I made a gif of that page before making up the page all I needed was a little chunk with the bg, including texture, lines to the right and left and drop shadow, and I had my bg. The I just made the table that wide.
Because there is a texture there I used a fairly deep image, otherwise the texture would have ended up looking odd.

2. A similar bg setup here:
http://www.ballyglasshouse.com/
Image here:
http://www.ballyglasshouse.com/images/leafbg.gif

3. This page uses a real tiny sliver of a background in the main table - basically grey on the left, a black one pixel line (or dot really) and then white to the end, about 1400 pixels wide, 1 pixel high.

http://www.getpetstop.com/

It makes the line down the left of the page there, it need to be a bg so that I could position the menu and the box below it on top of it. Hard to describe again but have a look and you will see what I mean.

http://www.getpetstop.com/images/pagelay/bg1.gif

If an image is saved optimised and is very wide but shallow, it need not be large in file size.

I do not always use pixels rather than percentages though obviously if a table has a bg image that matters fixed widths are necessary. You can just cut out bits of your image to use in a table set at percentage. I have to say that more and more I tend to stay with pixels, with maybe a bit of the page, the header say, stretching accross the screen.

quote:

why would you want to merge cells after you go to all the trouble of creating a precise table and cell structure


You wouldn' t generally. But say you have a header for your table that is made as a gif. When you slice it up there are lots of it, its a big image. But parts of it are a plain color or something that could be rendered as a background. You might want to remove those images and so reduce load time, or to have those cells available for text. Generally though if you plan your slicing well, it should not be necessary.


This site

www.intentsystems.com

has a header which uses a BG image, with the other images careful cut to sit on it seamlessly, it may illustrate what I mean. These images are manually cut and some saves as gifs and some as jpgs, because they are very different in nature and I wanted the smallest, but still the clearest, images I could get away with. So my main rationale when cutting it was to try to isolate the bits that that needed to be jpgs as much as I could. It would have been hard to do it anyway other than manually I think.

The header file for this, which may help, is here: http://www.intentsystems.com/includes/header2.htm




garyb -> RE: Designing website as a graphic - any hints? (11/18/2002 12:36:59)

Nancy described it but I cannot emphasize enough the beauty of using layers for your nav buttons etc. Once you create the background you start stacking the layers on top of each other. Then, simply click the the symbol to make it visible or invisible. In PS6 and up you can then simply click the save for web button and it will blow into image ready, optimize it and only show the element that was visible. YOu can repeat this for all your roll overs, etc. It' s great, you never have to worry about messing up one of the sizes and you always have only one source file for all your buttons etc.



_gail -> RE: Designing website as a graphic - any hints? (11/18/2002 13:00:10)


quote:

ORIGINAL: garyb

In PS6 and up you can then simply click the save for web button and it will blow into image ready, optimize it and only show the element that was visible. YOu can repeat this for all your roll overs, etc.


Gary, conceptually, I understand a fair amount of this. Problem is, when I pop them over to ImageReady, I' m at a loss.

Everything goes over in layers, but I am not understanding how to get the on-off rollover images into the rollover panel. I can get either image to show, depending on what layer is active, but not both. I' ve honestly read a tutorial or two on this but am obviously missing something. Any suggestions?

thanks, gail





_gail -> RE: Designing website as a graphic - any hints? (11/18/2002 13:02:57)


quote:

ORIGINAL: Ariel
a couple good books, such as any by Jakob Nielsen on web usability (i.e. Designing Web Usability) and maybe the Photoshop Wow! Book for your version of Photoshop (this book covers lots and lots of tips including using ImageReady and slicing web pages).




Ariel,

I' m going to call some local bookstores and see if they are available. I' d like to take a look at the actual contents before I buy.

Thanks very much for the info!

gail



garyb -> RE: Designing website as a graphic - any hints? (11/19/2002 7:57:38)

A great book for learning to use photoshop/imageready for the web is www.photoshop.imageready by Greg Simsic. It has half the book on imageready and is a tremendous little reference. Once you see how imageready works, you' ll find it a super tool to add to your toolbox. I spend a couple of hours going through the image ready section one day and it paid for the book several times over in the next few months.



LindaK -> RE: Designing website as a graphic - any hints? (11/20/2002 23:48:27)

I can' t imagine website design without Photoshop and ImageReady, I use them for every website I design! I started to play around with ImageReady earlier this year for slicing. The best way to teach this is to show someone, which is hard to do in a forum setting. I' ve even made animated gifs using ImageReady!

Gail, I can send you some samples if they would help you to SEE how it is done. Email me at llong@goldstaris.com.

Also, I generally use 760X550 for page layout. Otherwise you get scroll bars at 800X600.
My images usually go right into a table. Then I delete the Whitespace graphic and merge cells if necessary to get a nice text area.

I am still on Photoshop 6/ImageReady3...soon to upgrade to 7...

Linda



LindaK -> RE: Designing website as a graphic - any hints? (11/20/2002 23:53:26)

Oh yeah, one more thing....I always slice at about 400% magnification....so I don' t end up with stupid little slices. I think it works better if you keep your slices to a minimum. If you are not zoomed in, it is hard to tell where the slices are!

Linda



_gail -> RE: Designing website as a graphic - any hints? (11/21/2002 8:52:17)

quote:

ORIGINAL: LindaK

Gail, I can send you some samples if they would help you to SEE how it is done.


I' ve taken you up on your generous offer. It should be a great help. Thanks so much.

quote:

I always slice at about 400% magnification


Now here' s another technique I use but never thought of it in terms of slicing. My first attempt at slicing a few weeks ago was a disaster. I thought I sliced everything so evenly and perfectly but the results were all different sizes. So I redid everything manually, though not as efficiently as Nancy mentioned above.

I see how the magnification will help. I also have to learn how to use the guides better.

Thanks again, Linda!

gail



garyb -> RE: Designing website as a graphic - any hints? (11/21/2002 15:41:05)

If you show a grid (you can adjust grid size) and then set the setting to snap to the grid, when you draw your slices, it will snap them all the same and you should never have to worry about things not lining up and having different size slices.



garyb -> RE: Designing website as a graphic - any hints? (11/21/2002 15:41:40)

Or, drag some lines over from the ruler and they will snap to that...



Nutz in Midwest -> RE: Designing website as a graphic - any hints? (11/27/2002 0:27:19)


EXCELLENT THREAD !!!!!

<can we archive this for years to come?>

Nutz in Midwest



_gail -> Tom, Katherine... (12/4/2002 19:28:48)


quote:

ORIGINAL: Nutz in Midwest


EXCELLENT THREAD !!!!!

<can we archive this for years to come?>



YES IT IS! If it can' t be archived, P L E A S E make it into an article for the tutorial section!

gail



abbeyvet -> RE: Designing website as a graphic - any hints? (12/4/2002 19:37:05)

I have made it an FAQ for the moment which means it is marked and pinned to the top of the graphics forum.

As an aside to this, it is not domething we have been doing very much - ie making threads FAQs. Perhaps we should do it more? Would it be helpful?

It would be good if people left a PM or dropped an email to Mods if there is a thread that they would like particularly to see pinned to the top like this.



Page: [1] 2   next >   >>

Valid CSS!




Forum Software © ASPPlayground.NET Advanced Edition 2.4.5 ANSI
0.4530029