grafikk

KURS I HJEMMESIDESNEKRING

Velkommen til et kurs i å lage internettsider med eller uten rammer.

HVA ER GRAFIKK?

Meget enkelt sagt er grafikk bilder. Alt det vi legger ut på sidene våre som bilder, er grafikk. Hovedtyngden av bildene er fotografier, og dersom det dreier seg om fargebilder, bruker vi vanligvis å legge opp bildene i formatet jpg. Det formatet egner seg godt for å gjengi farger i mange nyanser. Er det sort/hvitt-bilder eller strektegninger det dreier seg om, bør vi velge formatet gif, fordi kravene til nyanser er mye mindre i slike bilder. Et annet sted på disse sidene har jeg snakket om levende gif'er, som er små tegninger som er satt sammen til en liten film. Det kan dreie seg om alt fra en stjerne som står og blinker til en mann og en dame som danser, for å nevne ett par eksempler. Selv om slike gif'er kan være fargelagte og fargesprakende, blir de lagret som gif'er fordi fargene er langt fra så sammensatte som på et fargefoto.
Gif er også det formatet du bruker når du vil at bildet skal ha en gjennomsiktig bakgrunn. Si at du har en tegning av en mann på blå bakgrunn. Da bruker du et bildebehandlingsprogram til å gjøre denne blåfargen transparent (gjennomsiktig) og lagrer tegningen som en gif. Da vil mannen stå fram på siden din uten den blå firkanten som han opprinnelig var tegnet på. Akkurat denne teknikken får du finne ut av selv ved å gjøre deg godt kjent med mulighetene som er innebygget i ditt bildebehandlingsprogram.
Overskrifter som du har på siden din, lager du enklest slik som jeg har gjort over teksten her, ved å bare bruke vanlig skrift som du forstørrer i forhold til den vanlige teksten. Men vi kan også lage overskriftene våre som grafikk og da står vi fritt til å bruke hvilken som helst skrifttype, fordi overskriften blir gjengitt som et bilde. Hovedoverskriften på denne siden står i det røde feltet og er en animert gif laget med programmet "Xara 3D 6". Mer om dette og andre nyttige programmer lenger nede på denne siden.
Du kan også lage overskrifter med flotte skrifttyper ved hjelp av det vanlige bildebehandlingsprogrammet ditt. Jeg bruker Paint Shop Pro eller Corel Paint Shop Pro som det nå heter. Der lager jeg et ark som kan ha plass til overskriften min (for eksempel 400 px X 75 px) og velger samme bakgrunnsfarge for dette lille "arket" som den bakgrunnsfargen jeg har på siden min. Så setter jeg inn den teksten jeg ønsker (E-post, f.eks.) og sier at bakgrunnsfargen på arket skal være transparent. Dermed kan jeg få en overskrift som ser slik ut:

Eksempel 1

Dersom du ikke lar tegnearket få samme bakgrunn som siden din, blir ikke alltid overskriften like pen selv om bakgrunnen blir transparent. Bare se her, hvor arket hadde hvit bakgrunn:

Eksempel 2

Det å lage transparente overskrifter på denne måten, må du nesten forsøke å lære deg selv ut fra det programmet du bruker, da det vil bli alt for omfattende å gi opplæring i bruk av bildebehandlingsprogrammer. Og som du ser av de to eksemplene ovenfor, har du mye igjen for å lære å gjøre dette riktig.
De to programmene som omtales lenger nede på denne siden gir deg imidlertid mange flotte løsninger.

SETTE INN BILDER PÅ SIDEN

Som jeg sa i avsnittet ovenfor, er det mer enn det vi vanligvis forbinder med bilder, fotografier og tegninger, som inngår i begrepet grafikk, og som dermed må behandles som om det er bilder. Jeg nevnte overskrifter laget i et bildebehandlingsprogram som et eksempel på slik grafikk. Ett ord for bilde på engelsk er "image" og når vi ønsker å sette inn et bilde på siden vår, klikker vi der hvor vi ønsker at bildet skal stå, og så klikker vi menyen "Image". Bildet til høyre for denne teksten viser hvordan jeg først blar meg fram til bildet jeg vil bruke (image.gif) ved å klikke på "Choose File" og bla meg fram til bildet i mappen med hjemmesidefilene mine. Jeg skriver en forklarende tekst til hva bildet er ("Alternate text") fordi det hender at bildet ikke åpner seg hos den som leser siden din, og da vil det i stedet stå "Appearance"-fliken i menyen Image

"Bruk av menyen "Image"" når vi fører musepilen over stedet der hvor bildet ikke kommer frem.
Som du ser ovenfor ville jeg at bildet skulle stå inne i teksten, men på høyre side av tekstområdet. Det ordner jeg ved hjelp av å klikke fliken "Appearance" øverst i Image-menyen. (Vist i bildet til venstre her)
Når denne fanen åpner seg, får du flere nye valg. Jeg markerer at jeg vil ha 5 pixels med luft på venstre og høyre side av bildet. Over og under bildet regner jeg med at det går greit uten ekstra luft. Og jeg vil ha en ramme (gul - skriftfargen kommer automatisk når du velger ramme, men du kan høyreklikke på bildet ditt når det er på plass og så velge en hvilken som helst annen farge fra tekstfargemenyen oppe til venstre.) Fra menyalternativet "Align Text to Image" oppe til høyre i boksen, velger du "Wrap to the left" (la teksten ligge til venstre - eller "wrap to the right" om du vil at teksten skal legge seg på høyre side av bildet ditt). De to bildene i dette avsnittet er lagt inn med henholdsvis "Wrap to the left" og "Wrap to the right" og gir et godt inntrykk av hva som skjer når du velger disse menypunktene.

Du kan selvsagt også legge bildet ditt inn på en åpen plass i teksten , uten å bruke "Wrap-punktene". Da blir bildet liggende som tegningen over disse linjene. Istedet for "wrap..." valgte jeg nå punktet

"In the center" som da betyr at jeg vil ha bildet midtstilt i mellom to avsnitt i teksten.

ANIMATED GIFS
LEVENDE GIF'ER

Når jeg surfer på Internett treffer jeg stadig på artige bilder, ofte i form levende gif'er. Da har jeg gjort det fr vane å laste dem ned til en mappe på datamaskinen min hvor jeg samler på slike bilder som jeg senere kan få bruk for. Mappen har jeg kalt for "Animasjoner" og inne iden har jeg mange undermapper som inneholder f. eks. "Ansikter", "Barn", "Datastoff", "Eventyrfigurer", "Fisker", osv. i det uendelige. Noen ganger søker jeg etter bestemte typer bilder som "fugle gif'er" eller "bird gifs" eller "nyttårs gif'er" eller "animated new year gifs", og slik får jeg en samling som er god å ty til når jeg trenger noe. De er også kjekke å sette inn i eposter.
Som for alt annet stoff som finnes på Internett, må du sjekke at det er lov å forsyne seg av bildene. Står det at bildene er copyrighted, eller er de er merket med © må du respektere det og lete andre steder.

Når du setter inn en levende gif i Composer, går du fram på samme måten som for vanlige bilder. (Se avsnittet "Sette inn bilder på siden " rett over dette avsnittet.) I dialogboksen som kommer opp vil du se at bildet ditt lever når du har hentet det fram, men på siden i Composer stopper bevegelsene. Alle slags bilder ser da ut som stills. Først når siden blir lagt ut på internett, kommer livet (bevegelsene) tilbake i animerte bilder. Er du litt "hissig" på å sjekke om alt virker som det skal? Da kan du gå inn i mappen med alle filene for nettstedet ditt, og dobbeltklikke på en av html-filene (dette er selve sidene du har laget). Den siden du klikker på, vil åpne seg i Internet Explorer og du kan se hvordan den kommer til å se ut når du har lagt den ut på internett. Dette er også en god måte å sjekke om du må rette på noe før du legger sidene ut.

XARA 3D 6

Xara 3D6 er et program som først og fremst er interessant for deg som kommer til å jobbe mye med nettsider eller grafisk forming for øvrig. Selv har jeg hatt utrolig mye glede av det, både til å lage mine egne nettsteder, men også som et hjelpemiddel på et klubb-nettsted som jeg leier ute på internett (www.myfamily.com) for å ha et sted å møte spillentusiaster fra hele verden. (Spillet kan du lese mer om her hvis du er interessert og behersker engelsk eller tysk sånn noenlunde.)
Men tilbake til Xara 3D6. Programmet koster ca. 250 NOK (februar 2008, dollarkurs 5,35 NOK). For deg som kan engelsk, er det greie filmer å se på Xara's (uttales sara's) nettsted som viser alt du kan gjøre med programmet.
Overskriftene kan gis bevegelser av alle slag, du kan bruke en hvilken som helst skrifttype, fargene kan du variere i det uendelige, og du kan legge struktur på bokstavene om du ønsker det.
Du finner alt om programmet på Xara's hovedside og det er også en valutakalkulator (converter) der som lar deg se prisen på alle programmene i NOK, dersom du skulle ønske det.
Klikk banneret nedenfor dersom du er nysgjerrig på dette programmet og kan tenke deg å prøve det på din maskin.

Her er 4 eksempler på forskjellige overskrifttyper du kan lage med dette prorammet. Det er hundrevis å velge mellom! For at overskriftene skal bli flottest mulig, velger du samme bakgrunn på arbeidsområdet i programmet hvor du lager overskriften, som du har på siden der du skal sette den inn.

Og hver eneste overskrift du lager kan framstå på minst hundre forskjellige måter, når det gjelder farger, animasjon eller med "ekstra utstyr", som på det siste eksemplet ovenfor.

WEBSTYLE 4

Dette er en gullgruve for deg som liker å leke deg med grafikk og utforming av hjemmesider på nettet. Her får du hjelp til alt som er viktig for en webmaster (en som driver sitt eget nettsted). Menyen som du ser på hver side i dette kurset er laget med "Webstyle 4". Dessuten er Webstyle 4 et veldig godt bildebehandlingsprogram. Du laster inn dine digitale fotos og forbedrer utseendet deres med noen tastetrykk, forstørrer eller forminsker dem med en glidebryter, klipper vekk uønskede bildedeler, lager thumbnails (miniatyrbilder) på null komma null og mye mye mer- Videre kan du lage flotte tredimensjonale overskrifter, flotte bannere der både tekst og ofte også bilder, kan endres etter dine ønsker. alle farger er justerbare. programmet tilbyr deg også temaer som kan gå gjennom hele nettstedet ditt, om du måtte ønske det. Kan du litt engelsk, bør du se noen av filmene som viser hva programmet kan brukes til. Prisen på herligheten er kun NOK 425 (med dagens dollarkurs på 5,35, februar 2008). Klikk banneret nedenfor dersom du er nysgjerrig på dette programmet og kan tenke deg å prøve det på din maskin.

Her ser du fire eksempler på overskrifter som jeg laget i en fart med Webstyle 4. Størrelse, farger, tekst og lignende kan duendre akkurat slik du vil.

(Alle skillelinjene på denne siden, som den nedenfor, er hentet fra Webstyle 4. Her finner du også massevis av menyer, knapper, fotoalbumer og mye mer. Foruten det som er fortalt om programmet i teksten ovenfor.)