Web­site gestal­ten las­sen: Vom Pho­to­shop-Ent­wurf zur fer­ti­gen Website

Datum: 11. Oktober 2012

Pho­to­shop gilt seit Jah­ren als das Bild­be­ar­bei­tungs-Pro­gramm par Excel­lence, mit dem Bil­der, Gra­fi­ken und Zeich­nun­gen anspre­chend und pro­fes­sio­nell bear­bei­tet wer­den kön­nen. Zusätz­lich ist Pho­to­shop aber auch das Tool der Wahl, wenn es um die Auf­be­rei­tung von Bil­dern für das Inter­net und den pro­fes­sio­nel­len Work­flow zwi­schen Design und Web-Pro­gram­mie­rung beim Web­site gestal­ten geht. Eine Viel­zahl von Ein­stel­lungs­mög­lich­kei­ten gestat­tet es, äußerst kom­for­ta­bel (selbst aus dürf­ti­gen Vor­la­gen), das Maxi­mum her­aus­zu­ho­len. Pho­to­shop zeich­net sich in sei­nen aktu­el­len Pro­gramm­ver­sio­nen außer­dem dadurch aus, dass es pixel­ge­naue Ein­grif­fe erlaubt und web­op­ti­mier­te Grö­ßen sowie jedes nur erdenk­li­che Web-Bild­for­mat unter­stützt. Es eig­net sich daher nicht nur für anfäng­li­che Gestal­tungs­ent­wür­fe, son­dern glei­cher­ma­ßen für das pro­fes­sio­nel­le Finis­hing der ent­spre­chen­den Bilder.

Von Anfang an: Bild­be­ar­bei­tung mit Photoshop
Die Gestal­tung einer Web­site geht nicht sel­ten mit einer Viel­zahl von Ent­wür­fen ein­her, die lan­ge bevor sie in Con­tent Manage­ment Sys­te­me – dazu wei­ter unten mehr – ein­ge­pflegt wer­den, dem spä­te­ren Erschei­nungs­bild des Web­auf­tritts mög­lichst nahe kom­men sol­len. Zum Ein­satz kom­men dafür nicht nur Text- und Bild­ele­men­te, son­dern dar­über hin­aus mög­li­cher­wei­se Farb- und Gestal­tungs­flä­chen. Wei­te­re Infor­ma­tio­nen hier­zu auch im Arti­kel: Was zeich­net ein gutes Web­de­sign aus. Pho­to­shop eig­net sich dank aus­ge­feil­ter Text- und Bild­be­ar­bei­tungs­tools sowohl für das Lay­out ein­zel­ner Sei­ten, als auch für die Erstel­lung ein­zel­ner Bil­der oder Bild­be­rei­che. Pho­to­shop-Anwen­dern soll­te aller­dings klar sein: Pho­to­shop ist als Bild­be­ar­bei­tungs- und nicht als Web­site­ge­stal­tungs­pro­gramm zu ver­ste­hen. Vor Beginn eines Web­site­pro­jek­tes gilt es übri­gens, sich die Abmes­sun­gen der fer­ti­gen Web­site oder der ent­spre­chen­den Abbil­dun­gen vor Augen zu füh­ren. Da die all­ge­mei­nen Emp­feh­lun­gen für die idea­le Anla­ge von Bil­dern zum Teil erheb­lich von­ein­an­der abwei­chen und stark CMS-abhän­gig sind, soll an die­ser Stel­le nicht auf die genau­en Wer­te ein­ge­gan­gen wer­den. Die Fest­le­gung der rich­ti­gen Bild­grö­ße ist aller­dings von nicht gerin­ger Bedeu­tung – eine Abstim­mung mit dem Con­tent Mana­ger soll­te nöti­gen­falls schon im Vor­feld in Erwä­gung gezo­gen wer­den, da spä­te­re Ände­run­gen erheb­li­chen Auf­wand ver­ur­sa­chen können.

  • Sie möch­ten eine Web­site in moder­nem Design gestal­ten las­sen? Fra­gen Sie uns unter 089.68098057 oder schrei­ben Sie uns.

Web­op­ti­mie­rung bei der Bild­be­ar­bei­tung mit Photoshop 
Sowohl in Hin­blick auf den Farb­raum und die Auf­lö­sung als auch in punc­to Web­aus­ga­be­mög­lich­kei­ten ver­fügt Pho­to­shop über alle Ein­stel­lungs­mög­lich­kei­ten, die beim Web­site gestal­ten erfor­der­lich sind. Ein wei­te­rer wich­ti­ger Aspekt bei der Aus­ga­be von Bild­da­ten ist das Datei­for­mat sowie die Kom­pri­mie­rungs- und Ein­stel­lungs­mög­lich­kei­ten. JPG, PNG oder GIF? Pho­to­shop bedient sämt­li­che Datei­for­ma­te, die im Web wie­der­ge­ge­ben wer­den und von (fast) allen Con­tent Manage­ment Sys­te­men inter­pre­tiert wer­den kön­nen. Wich­tig: Das Expor­tie­ren von web­op­ti­mier­ten Bil­dern erfolgt nicht unter „Sichern unter“, son­dern über ein geson­der­tes Menü.

«Für Web spei­chern»: opti­ma­le Bil­der für das Internet 
Neben den eigent­li­chen „Sichern unter“ hält Pho­to­shop einen wei­te­ren Menü­punkt bereit, der als „Für Web spei­chern“ bezeich­net wird und unter dem sich eine Viel­zahl von Ein­zel­ein­stel­lun­gen vor­neh­men las­sen. Die Mög­lich­kei­ten sind beacht­lich und rei­chen von diver­sen Dithe­ring- und Farb­ein­stel­lun­gen bis hin zu Trans­pa­renz-Optio­nen oder dem Ein­bet­ten von Copy­right-Infor­ma­tio­nen. Beson­ders inter­es­sant ist die Mög­lich­keit, das Bild erst zu die­sem Zeit­punkt zu ska­lie­ren. Von der „Sichern unter“-Option, die eben­falls JPGs unter­stützt, unter­schei­det sich „Für Web sichern“ durch die beson­ders star­ken und web­kom­pa­ti­blen Kom­pres­sio­nen sowie einem über­sicht­lich unter­teil­ten Ein­stel­lungs­fens­ter . Einer der wich­tigs­ten Vor­tei­le der Funk­ti­on „Für Web spei­chern“ ist die ver­glei­chen­de (A/B)-Darstellung des ori­gi­na­len und der zu spei­chern­den Ver­si­on, wich­tig bei der Aus­wahl von Kom­pres­si­ons­stu­fe zur Qua­li­täts­be­trach­tung etwa bei JPGs

  • Web­de­sign mit einem Con­tent Manage­ment Sys­tem wie Typo3 oder Red­a­xo? Fra­gen Sie uns unter 089.68098057 oder schrei­ben Sie uns.

Die Inte­gra­ti­on der Bil­der im Con­tent Manage­ment System 
Con­tent Manage­ment Sys­te­me (kurz CMS) ver­wal­ten Text- und Bild­in­hal­te auf dyna­mi­sche Art – das heißt daten­bank­ge­stützt. Die­se Fest­stel­lung ist wich­tig, um zu ver­ste­hen, wie CMSs das in Bild­ord­nern abge­leg­te Bild­ma­te­ri­al wie­der­ge­ben und der Krea­ti­vi­tät zu Recht eini­ge durch­aus ver­schmerz­ba­re Gren­zen set­zen. In den Backend-Vor­ein­stel­lun­gen des CMS fest­ge­leg­te Regeln bewir­ken eine stets ein­heit­li­che Dar­stel­lung von Bil­dern, wes­halb es wich­tig ist, die­se Regeln schon beim Bear­bei­ten in Pho­to­shop zu beach­ten. Andern­falls ent­ste­hen uner­wünsch­te Leer­räu­me oder die Bil­der könn­ten ver­zehrt oder gestaucht dar­ge­stellt wer­den und ver­fäl­schen­de gestal­te­ri­sche Effek­te ent­ste­hen. In der Pra­xis bedeu­tet dies, dass ent­we­der das Bild­ver­hält­nis zu beach­ten ist oder dass aber die exak­te Pixel­grö­ße beim Anle­gen der Bil­der bekannt sein soll­te. Doch CMS ver­die­nen auch in ande­rer Hin­sicht Beach­tung: Nicht alle CMS beherr­schen den Umgang mit sämt­li­chen Bild­for­ma­ten, wes­halb auch hier im Vor­feld eine Abstim­mungs­schlei­fe mit dem Admi­nis­tra­tor zuwei­len unum­gäng­lich ist. Stimmt das Bild­for­mat und sind die rich­ti­gen Abmes­sun­gen ein­ge­hal­ten wor­den? Dann soll­te das Bild beim Auf­ruf der Sei­te ent­spre­chend gut aussehen.

Für Auto­di­dak­ten sei­en hier zwei Quel­len genannt, die hel­fen, sich direkt im Inter­net die Pho­to­shop-Kennt­nis­se anzu­eig­nen, die für pro­fes­sio­nel­les Web­de­sign benö­tigt werden:

Tags dieses Beitrags:


    Schreibe einen Kommentar zu "Website gestalten lassen: Vom Photoshop-Entwurf zur fertigen Website"

    Etwas HTML ist ok