Web Hosting Forum | Lunarpages
News: April 3, 2008 - New Contest! - Win 5 Years of Hosting and $1,000!
May 5, 2008 - May 08 Web Site of the Month? - Submit your LINKS!!!
 
*
Welcome, Guest. Please login or register.
Did you miss your activation email?
May 16, 2008, 02:13:14 PM


Login with username, password and session length


Pages: [1]   Go Down
  Print  
Author Topic: Designing website as a graphic - any hints?  (Read 978 times)
Arman
Newbie
*
Offline Offline

Posts: 3


« on: September 24, 2007, 04:14:19 AM »

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.   Alien Abduction
Logged

Drilldown
Galactic Royalty
*****
Offline Offline

Posts: 302


« Reply #1 on: September 24, 2007, 06:46:35 AM »

I wouldn't expect this to be a standard comprehensive approach, because search engine robots read text, not images. When you do this, make sure that all important info is also available in text and not hidden in an image. To see how a search engine views your page, bring it up in a search results page, then look underneath and click "Cached." Then click "cached text."

It might be a useful investment of your time to read this blog page:
http://www.mattcutts.com/blog/seo-advice-use-text/
Logged
fretnmore
Grandma Looney
Über Jedi
*****
Offline Offline

Posts: 2864



WWW
« Reply #2 on: September 24, 2007, 07:10:20 AM »

I would think that method would be useful for designing the look of your page, but not very efficient when it comes to actually coding your page. Parts of the page can be done that way, but anywhere you want text, or navigation, I don't think you want to be working with images.
Logged

Life is not measured by the number of breaths we take, but by the moments that take our breath away.
----------------------------------------------------------
Tri-Wolf Studios
Lunarpages Web Hosting
Lunarpages Forums
Lunarpages Affiliate Program
MrPhil
Über Jedi
*****
Offline Offline

Posts: 2825


« Reply #3 on: September 24, 2007, 07:47:03 AM »

It is possible to lay out a page as one big graphic, and then slice it up into functional pieces (graphics for button and link labels). It seems like a lot of extra work to me, but if that's the look you want (as one big seamless graphic) you can do it. Some things to keep in mind:

1) Don't do "Mystery Meat Navigation", where vague, abstract symbols are used to indicate function. Always include some text labels so visitors can see what's there without having to roll the mouse over everything. Text is a good idea even if you have "obvious" symbols for functions -- is that magnifying glass a "search" or a "zoom" function?

2) Be careful about where one "button" or "link" graphic ends and the next begins. You may want to have some "dead space" between them (unclickable) to minimize accidentally clicking on the wrong one.

3) Not everyone displays graphics (search engine robots, blind users, people looking for speed). Make sure you have alt="descriptive text" attributes for nontrivial <img> tags, and if you use alt=, you must also give title= (even if empty: title="") because of the IE bug. Give search engines something to index, screen readers something to read out loud, and graphics-less viewers something to read.

4) Make sure you give the height= and width= attributes for each <img>, so the screen doesn't constantly reflow and jump around as images are rendered.

5) Some people are still on dial-up and don't appreciate having to wait for a screen full of images to load before they can do anything on the page. At least, they can read text while waiting for the pictures (see #4 above so text doesn't constantly reflow in response to images being displayed -- that's very annoying).

6) A page consisting of nothing but images will not resize (is not "fluid") in response to different browser window sizes.

7) If you want to make even a small change to the page, you may have to redo the whole thing.

8) Consider making a solid background color, and button and link graphics that "flow" into this background color. This could make it look like one big graphic, while still having normal text, etc. One way to make graphics "flow" or "bleed" into the background is to use transparency in the graphics (around the edges). This lets you use different background colors without having to redo each graphic. GIF images support this, but are limited to all-or-nothing transparency. PNG images have variable transparency, but are not well supported by all browsers.

Good luck and have fun!
Logged

Mitch
Lunarpages Traffic Cop
Senior Moderator
Berserker Poster
*****
Offline Offline

Posts: 6174



WWW
« Reply #4 on: September 24, 2007, 07:48:26 AM »

Quote
Mystery Meat Navigation

That's got to be the best phrase of the day..  Thumbs Up  Haha
Logged

MrPhil
Über Jedi
*****
Offline Offline

Posts: 2825


« Reply #5 on: September 24, 2007, 08:15:59 AM »

Quote
Mystery Meat Navigation

That's got to be the best phrase of the day..  Thumbs Up  Haha

Thanks, I wish I could take credit for it, but alas, it's not my coinage. I can't remember exactly where I got it (which is a shame, as it's so appropriate for some pages). It was probably either Eric S. Raymond's The HTML Hell Page or Jakob Nielsen's Alertbox: Current Issues in Web Usability. Both are great reading.
Logged

Drilldown
Galactic Royalty
*****
Offline Offline

Posts: 302


« Reply #6 on: September 24, 2007, 08:49:33 AM »

I think the mystery meat credit goes to Vincent Flanders' funny website:
http://www.webpagesthatsuck.com/mysterymeatnavigation.html
Logged
sharpandpointless
Jabba the Hutt
*****
Offline Offline

Posts: 648


WWW
« Reply #7 on: October 07, 2007, 12:45:31 PM »

It's where you expect everyone to have the patience of someone whose main purpose in life is to visit nice-looking websites and spend 2 hours finding every button on the site because they all look like any other part of the background of the site.
In dreamweaver and photoshop it's extremely easy to do. All you do is make your photoshop image of your website. Make it something nice... ok this is where you can do one of two things (I'll define this the lazy way)
1. Slice the image in photoshop and export as jpgs, gifs, whatever you want, mostly depends on the site's look. Then you will import all of that to the dreamweaver-made site you're making and then associate the proper links, give them text alternatives, etc. as everyone has said.
OR 2. Have a big image, or maybe a few images, import them to dreamweaver, and... (Ok as an example for your mind to grasp onto, why not have the entire navigation be one image...) I'm not on a computer that is my main workstation so I can't exactly open up dreamweaver right now but in any version of it you'll eventually be able to find a tool that defines rectangular areas that you can make into links... make these link-boxes over the associated buttons on your navigation picture, give them link-tos, and viola, you have a website made from an image.
Yeah I'm going to be on my other computer in a few days so if I was really vague about all of this just reply.
Logged

Have a wonderful day!
www.gpathmedia.com
Pages: [1]   Go Up
  Print  
 
Jump to:  

Powered by MySQL Powered by PHP Powered by SMF 1.1.3 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS! Dilber MC Theme by HarzeM