Den aktuelle standen av layoutet bør omtrent se slik ut:
Hittil har et logo og den øvre menyen blitt lagt til. Neste steg er en litt større grafikk som skal være rett under navigasjonen.
Prinsippet med å opprette nye lag ble allerede beskrevet i den forrige opplæringen. Derfor vil jeg vise dere noe annet her. Direkte under den øvre menyen skal det vises et større bilde. Resultatet vil se slik ut:
Bildet bør – hvis du legger det til – være i riktige proporsjoner. Rediger det derfor om nødvendig. Deretter åpner du Fil>Åpne og velger bildet. Det valgte bildet vises deretter i et nytt vindu. Trykk på Ctrl+C, for å kopiere bildet til utklippstavlen. Slik at du nå kan sette inn bildet som et lag med riktig størrelse, kan du åpne Rediger>Lim inn som>Nytt lag. Det nye laget vil da automatisk ha dimensjonene til bildet, og du kan enkelt flytte laget til riktig sted. På denne måten kan alle bilder du ønsker å sette inn, tas med i layoutet og plasseres der.
Sett deretter inn tekstene på stedene der de faktisk skal vises senere. I designfasen bruker man vanligvis såkalt blindtekst for dette formålet.
Før du setter deg ned og skriver vilt "test, test, test", anbefaler jeg deg å besøke siden http://www.blindtextgenerator.de/.
Der kan du få generert blindtekster – forresten av forskjellige typer – automatisk. Tekstene kan deretter enkelt kopieres inn i designforslaget ved hjelp av Klipp & Lim. I den forbindelse vil jeg også anbefale deg siden http://dummyimage.com/. På denne siden kan du generere dummy-bilder i hvilken som helst størrelse. Disse dummy-bildene kan du for eksempel bruke som erstatning for ennå ikke opprettede originale grafikker i layoutene dine.
Problemet med gjennomsiktige lag
Når du legger til tekst, vil den bestå av flere elementer som overskrifter, tekstavsnitt osv. Derfor bør du samle sammenhørende tekster i separate lag. På denne måten kan du alltid flytte disse tekstene samlet. Åpne derfor Lag>Nytt lag. Gi deretter laget den ønskede størrelsen og eventuelt bakgrunnsfarge. Vanligvis vil du imidlertid trenge en gjennomsiktig bakgrunn. Problemet oppstår imidlertid når du har vanskeligheter med å flytte de gjennomsiktige lagene. Ofte treffer du nemlig et underordnet lag. Dette problemet kan lett unngås. Avgjørende er innstillingene i verktøykassen. Aktiver Flytteverktøy der. I den nedre delen av verktøykassen aktiverer du deretter alternativet Flytt aktivt lag.
På denne måten kan du også flytte gjennomsiktige lag til hvilken som helst posisjon.
Elementer klippes ut
Når du er fornøyd med layoutet, går du videre til å sette det praktisk ut i handling som en HTML-nettside. På dette stadiet kommer skjæringen, eller slicing, inn i bildet. Dette slicingen er ingenting annet enn å skjære opp layoutet i enkeltdeler som senere settes sammen ved hjelp av HTML og CSS. Du må slice alle elementene som senere skal vises individuelt. Unntatt er selvfølgelig alle bildeelementene som allerede er til stede individuelt. Jeg vil først vise deg hvordan du kan kutte ut elementer. Lag hjelpelinjer rundt det relevante elementet. Hjelpelinjene danner til slutt skjærekantene. Sørg derfor for å plassere dem riktig.
Marker nå det ønskede området og trykk tastekombinasjonen Ctrl+Shift+C. (Dette gjelder for GIMP og Photoshop på samme måte). Opprett deretter en ny fil. I Photoshop vil denne umiddelbart ha riktig størrelse. Med GIMP fungerer ikke dette så enkelt. Her oppretter du bare en fil med tilstrekkelige dimensjoner. Bruk Ctrl+V for å lime inn innholdet fra utklippstavlen.
Nå er det på tide å bruke Skjæreverktøy. Definer området som skal kuttes ut og trykk deretter på Return. Bildet vil bli beskåret til det ønskede området. Du kan lagre bildet via Fil>Lagre som.
Et viktig stilistisk element for mange nettsteder er en Gradient. Også på det eksemplet av et layout som vises her, er det en slik Gradient til stede. For å skjære ut en Gradient, velger du et smalt område av den ønskede Gradienten. Det er faktisk tilstrekkelig å angi et område med en bredde på én piksel. Høyden må imidlertid være lik den faktiske høyden på elementet. Med CSS kan du senere sørge for at dette grafikken horisontalt gjentas til hele elementet er fylt. Selvfølgelig kan du også bruke et bredere bildeutsnitt. Dette vil imidlertid redusere ytelsen til nettstedet. Derfor bør du velge en piksel som bredde for Gradients.
Ved å bruke Ctrl+Shift+C kopierer du den en piksel brede grafikken til utklippstavlen og limer den inn som et nytt bilde. Lagre det nye bildet etter at det har blitt justert til det relevante utsnittet.
Dette bør gi deg et klart bilde av prinsippet med `Slicing`. Du kutter ut alle elementene fra layoutet som senere vil tilhøre nettsiden. Hvis du allerede har enkelte sideelementer tilgjengelig som ikke trenger å kuttes ut, kan du bruke disse direkte, uten å måtte kutte de.
