E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 6 (In chronological order)

From: JMoyn2339
Date: Wed, Jan 03 2007 9:40PM
Subject: Creating compliant websites using Photoshop Sliced files...
No previous message | Next message →

Hi everyone,
Has anyone created sites utilizing Photoshop? I was wondering whats the best
method when slicing up files. I have been working on a site for a friend but
I'm having difficulty getting the file to validate.

Does anyone have any tips or advice on creating websites in this manner?

Thanks,
John

From: Christian Heilmann
Date: Thu, Jan 04 2007 1:30AM
Subject: Re: Creating compliant websites using Photoshop Slicedfiles...
← Previous message | Next message →

> Hi everyone,
> Has anyone created sites utilizing Photoshop? I was wondering whats the best
> method when slicing up files. I have been working on a site for a friend but
> I'm having difficulty getting the file to validate.
>
> Does anyone have any tips or advice on creating websites in this manner?

I think it is fair to assume that Photoshop is the standard web design
tool for the people who also create the HTML part of web development
(illustrator seems to be more for the pure graphic designers) so yes,
I assume we all have here.

However, creating a final layout and then slicing it up into different
parts to put it together as a web page in HTML again is probably the
worst approach to creating an accessible web site (compliance with 508
is not the same as being accessible).

Accessibility means first and foremost that your design is capable of
resizing and re-arranging to your visitor's needs (i.e. not fall apart
when she resizes her font or expect a massive fixed screen space).

If you want to create accessible web sites, you'll need to know your
HTML as much as your design, if you want HTML that validates but is
possibly inaccessible then there are ways to convert PSDs to sliced
HTML with Image Ready (as absolutely positioned layers).

--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/

From: Joshue O Connor
Date: Thu, Jan 04 2007 4:40AM
Subject: Re: Creating compliant websites using PhotoshopSliced files...
← Previous message | Next message →

Christian Heilmann wrote:

> creating a final layout and then slicing it up into different
> parts to put it together as a web page in HTML again is probably the
> worst approach to creating an accessible web site

Christian is right, as this approach to graphic design for the web
really does not translate well in accessibility terms. In short, don't
export your designs as sliced images. There are several reasons for
this. When you are slicing a large image (say a page layout with
rollover effects on buttons etc) it is very easy to get carried away and
rather that using broad strokes to divide the image you can create some
very small slices. For each of these slices the application (Image Ready
or Fireworks etc) will generate HTML that tells the browser where to
reposition the slice, its size and other properties etc. The code that
these applications produce is bloated and AFAIK has no semantic aspect
(well it was the last time I exported sliced images) and I would feel
that it probably has not improved. If it has improved and If anyone on
the list can add to this thread, please do.

You could also take the view that you wish to slice your images and then
edit the exported HTML by hand - to clean it up and add alternate text
etc. However, even this method goes against the grain of Web
Standard/Accessible design at the very least because the HTML that the
editor exports is embedded with the HTML page so even for relatively
small images with only a few slices, this can generate a lot of bloated
code that will increase your page size, So this method is the antithesis
of separating content from presentational elements.

A better approach is to get to grips with CSS and improve your basic
HTML knowledge - This is a more powerful and cleaner way to create more
beautiful and accessible websites.

Josh

********************************************************************

NOTICE: The information contained in this email and any attachments
is confidential and may be privileged. If you are not the intended
recipient you should not use, disclose, distribute or copy any of
the content of it or of any attachment; you are requested to notify
the sender immediately of your receipt of the email and then to
delete it and any attachments from your system.

NCBI endeavours to ensure that emails and any attachments generated
by its staff are free from viruses or other contaminants. However,
it cannot accept any responsibility for any such which are
transmitted. We therefore recommend you scan all attachments.

Please note that the statements and views expressed in this email
and any attachments are those of the author and do not necessarily
represent the views of NCBI


********************************************************************

From: Tim Beadle
Date: Thu, Jan 04 2007 5:20AM
Subject: Re: Creating compliant websites using Photoshop Slicedfiles...
← Previous message | Next message →

On 04/01/07, Joshue O Connor < = EMAIL ADDRESS REMOVED = > wrote:
> A better approach is to get to grips with CSS and improve your basic
> HTML knowledge - This is a more powerful and cleaner way to create more
> beautiful and accessible websites.

Just saw this on Digg.com:
"The RIGHT way to convert your Photoshop design to XHTML and CSS
Layout" - http://joplan.com/digg/div_site/

Hope this helps!

Tim

From: Christian Heilmann
Date: Thu, Jan 04 2007 5:50AM
Subject: Re: Creating compliant websites using Photoshop Slicedfiles...
← Previous message | Next message →

On 1/4/07, Tim Beadle < = EMAIL ADDRESS REMOVED = > wrote:
> On 04/01/07, Joshue O Connor < = EMAIL ADDRESS REMOVED = > wrote:
> > A better approach is to get to grips with CSS and improve your basic
> > HTML knowledge - This is a more powerful and cleaner way to create more
> > beautiful and accessible websites.
>
> Just saw this on Digg.com:
> "The RIGHT way to convert your Photoshop design to XHTML and CSS
> Layout" - http://joplan.com/digg/div_site/
>
> Hope this helps!

It it s a start, however when you resize the font twice his menu leaks
out without the grey stuff growing with it. It is not that tricky,
really.
http://icant.co.uk/articles/flexible-css-menu/


--
Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/

From: Tim Beadle
Date: Thu, Jan 04 2007 6:00AM
Subject: Re: Creating compliant websites using Photoshop Slicedfiles...
← Previous message | No next message

On 04/01/07, Christian Heilmann < = EMAIL ADDRESS REMOVED = > wrote:
> It it s a start, however when you resize the font twice his menu leaks
> out without the grey stuff growing with it. It is not that tricky,
> really.
> http://icant.co.uk/articles/flexible-css-menu/

Indeed, it's not perfect by any means. It might (from the Digg
comments I was reading, though [1]) give a slice-'n'-dicer the push
they need to make the first move towards CSS.

Tim

[1] http://snipurl.com/16izr