webfomate

was sehen Sie denn?

• für unterschiedliche screen-größen entwerfen!
• elegantes wachsen/schrumpfen miteinplanen!

formensprache – gibt es eine typische?

• creativ meta | moormannn |  heine-lenz-ziska |  schott |  fork |  hicks |  moore
• seriös allianz | postbank | deutsche bank
• weblogs simple bits | 456 berea street | prägnanz
• portale t-online | yahoo | bbc | amazon
• suchmaschinen google | ebay
• wikis wikipedia | pmwiki | pmwiki (local)

entwurf – direkt in photoshop/gimp

• in original-größe arbeiten
• original-auflösung verwenden 72dpi | rgb-modus | pixel as maßeinheit
• vektor-programme erzeugen oft artefakte

photoshop-settings für screendesign

browser-fenster simulieren

webformate (pixelbasiert)

• gif verlustreiche kompression | interlaced (stufenweiser bildaufbau beim laden) | max. 256 farben | transparenz (ein/aus) | animationen möglich | kann von allen browsern dargestellt werden
• jpg verlustreiche kompression | interlaced (stufenweiser bildaufbau beim laden) | millionen von farben | keine transparenz! | keine animationen | kann von allen browsern dargestellt werden
• png kompression muß nicht verlustreich sein | interlaced (stufenweiser bildaufbau beim laden) | 256/millionen von farben | transparenz stufenlos einstellbar von 0% bis 100% | keine animationen | explorer stellt transparenz schlecht dar | mehr infos internet

gif – typische anwendungen

• kleine grafiken (z.b. icons)
• bilder mit homogenen, einfarbigen flächen

jpg – typische anwendungen

• fotos
• bilder mit mustern

jpg-qualität ist zu niedrig – artefakte!

png – typische anwendungen

• teilweise transparente bilder
• vorsicht: explorer kann es nur mittels eines hacks!

webexport (photoshop)

namensgebung

• auf Groß/Kleinschreibung achten! dateiName.gif ≠ dateiname.gif
• nur die Zeichen a-z, A-Z & 1-0 verwenden keine äöü ÄÖÜ ß
• keine Leerzeichen stattdessen Unterstrich nutzen: langer_Dateiname_aktuell.png
• ziffern am anfang der dateinamen problematisch...

werkzeuge (freeware)

• firefox der beste browser (mac/pc)
• web-developer erweiterung für firefox (mac/pc)
• viewRenderedSourceChart erweiterung für firefox (mac/pc)
• small screen simuliert kleinen bildschirm (mac)
• freeruler lineal (mac)