Programmerne fra Adobe til webdesign

Photoshop bruges til at redigere dine billeder inden de anvendes på websiderne. Det kan være billederne skal retoucheres, beskæres, osv. Måske skal lyset og farverne ændres, så de passer med det øvrige indhold på websiderne. Du kan også lave logoer, bannere og knapper med tekst, effekter, filtre, masker, osv.

Nogle designere vælger at sætte hele designet op i Photoshop og så slice (skære) de enkelte billedelementer ud og sætte dem sammen i Dreamweaver. Grunden til at man bare lægger sit færdige design ind på en webside som et stort billedelement er, at det ville fylde alt for meget, og desuden skal der på websiderne være plads til tekst og ikke blot bitmap-grafik. Nogle vælger dog at bruge sit færdige design fra Photoshop som et 'tracing image', som et billede, der ligger i baggrunden i DreamWeaver udelukkende med det formål at man kan designe websiderne efter det.

Nogle foretrækker at lave al webgrafik først, og derefter sætte det op i f.eks. DreamWeaver. Andre foretrækker at skifte mellem programmerne løbende, og jeg hører selv til denne flok. Der er ikke én måde at gøre det på, men det er klart, at hvis man arbejder i et team, så vil man dele arbejdet op, så en udvikler kan bruge de dele, en designer har behandlet i Photoshop.

En vigtig del i Photoshop er altid at optimere sin grafik, så det fylder så lidt som muligt, samtidig med at det stadig ser pænt ud. Man skal tage stilling til billedformat, hvor JPG, GIF og PNG er de mest anvendte. Desuden skal pixelstørrelsen passe. Det kan ikke nytte noget at billedet er for stort, da det så fylder for meget. Det er heller ikke en god ide at det er for lille, da det vil gå ud over kvaliteten, hvis det senere skal skaleres op.

Dreamweaver er et komplet værktøjet til at oprette og vedligeholde websites. Det arbejder med teknologier som XHTML, CSS, JavaScript, osv. Det er brugervenligt og samtidig en meget avanceret editor som kan bruges af webudvikleren. Dem der siger, at DW kun er skabt til design og hellere vil bruge en alternativ teksteditor, kender ikke programmets faciliteter.

Den nye 'Spry'-teknologi, giver dig adgang til interaktive brugerflader, som f.eks. disse fane-paneler, du sidder og læser i nu, uden du behøver at kunne JavaScript. Dreamweaver bruges også til at lave dynamiske websites, dvs. dem som på en eller anden måde er styret af en database. Det kan være firmaets varedatabase, spørgeskemaundersøgelser, osv.., som kan oprettes og opdateres online. Fordelene ved Dreamweaver er:

• Visuel webudvikling: du sparer tid og slipper for at taste forkert. Desuden bliver du mere bevidst om udseendet på dine websider.
• Dynamiske effekter: Rollovers, roll-down-menuer, behaviors og maget andet gøres let, og du behøver ikke lære et programmeringssprog som JavaScript, som du ellers ikke har brug for.
• Code view: du kan lave det hele i kode. Tit er det godt at vide lidt om HTML og CSS, så du kan gå ind og ændre lidt i koden, og Dreamweaver indeholder en fremragende editor at alle kendte filtyper.
• Site management: Det indbyggede FTP-program giver dig mulighed for at uploade og vedligeholde dit websted, og du slipper for at gøre brug af et seperat FTP-program.
• Database-styrede websites: du kan oprette database-styrede websites på en lettere måde end almindelige tekst-editorer.
• Tilpasning: du kan tilpasse menuer og udseende så det passer til din måde at arbejde på.
• En del af Creative Suite-pakken: let at ændre et billede, illustration, animation, osv., da programmerne 'snakker' sammen.

Flash er et 'forfatterværktøj' til at opbygge digitale animationer og interaktive websider. Du har muligheder for at integrere video, billeder, vektorgrafik og lave fantastiske animationer. Du kan tilføre interaktion, dvs. brugeren har mulighed for at påvirke din flashanimation, så der sker noget andet end hvis han ikke havde klikket på den.

Forside-animationen på www.SideOne.dk er et simpelt eksempel: Billede og tekst er bearbejdet i Photoshop og lagt ind i hvert sit lag i Flash. De tilføres hver en motion tween (bevægelsesanimation) samt lidt slør for at give det en fed virkning. Derefter laves der nogle små knapper, som tilføjes en besked om, at hvis man trykker her, så skal animationen starte fra en en bestemt frame. Et simpelt men lækkert eksempel, og hvis du kigger dig om på WWW, så vil du finde reklamer som minder om denne.

For at arbejde med avanceret flash interaktion, skal du kunne programmere i ActionScript, som er sproget tilknyttet Flash, og som du kan bruge til at lave spil, videoafspillere, interaktive bannere, menuer, osv. med.

Med flash kan du oprette små dele som menuer, banner osv, men du kan også vælge at oprette hele websisder i Flash. Det ses ofte hos designere, tøjfabrikantere, kunstnere, musikere, osv., da det har et flot design, hvis det er lavet af den rigtige.

En af grundene til, at formatet er så populært er, at meget af grafikken er vektorbaseret: det giver god kvalitet som fylder lidt. Samtidig kan bitmapgrafik, video og lyd optimeres og komprimeres til en rimelig størrelse.

Illustrator et et professionelt vektorbaseret illustrationsprogram, som både anvendes til tryk, multimedia og online grafik. Når illustrationerne skal anvendes på WWW, så skal de konverteres til bitmap-grafik.

Hvor Photoshop anvendes til at bearbejde billeder, så er det tegninger og illustrationer, der er i centrum i Illustrator. Man kan starte fra bunden af i Illustrator med at lave en tegning ved hjælp af den legendariske Pen Tool eller et af de øvrige tegneværktøjer. Mange designer anvender i dag tegneplader for at opnå bedre kontrol end med en mus.

Man kan også vælge at hente et foto ind i Illustrator og så enten rentegne det eller bruge funktionen LiveTrace som automatisk genererer voktorbaseret grafik udfra dit bitmap-billede. Bagefter kan viderebehandle grafikken og lægge farver og gradienter på, osv.

Denne illustration kommer fra et foto, jeg tog fra et fly af Nazcalinierne i Peru. Det er efterfølgende rentegnet i Illustrator, og der er lagt øjne, hår, mund og knapper på, samt farve.

Ligeosm i Photoshop, kan du vælge at designe hele din webside i illustrator for derefter at slice det op og importere det i Dreamweaver. Du kan også vælge at arbejde videre med dine illustrationer i Flash som husker informationer som layers, paths, anchor points, osv.

Hvis du primært har anvendt Photoshop eller andet billedbehandlingsprogram, vil det tage tid før du får erfaring med programmet, men til gengæld giver det stor tilfredsstillelse når du har tegnet og farvelagt din egen illustration: du vil føle dig som en lille kunstner...

Fireworks er billedbehandlingsprogram, men til forskel fra Photoshop er det specielt egnet til at oprette og optimere billeder til brug på internettet. Fireworks er velegnet til at arbejde med både bitmap- og vektorgrafik og er derfor det foretrukne designerværktøj hos mange webdesignere. Det er samtidig ikke helt så komplekst som Photoshop og Illustrator, og der kan sættes tid af til andre dele i workflowet.

Du kan producere hurtige prototyper af websites med flere sider og links mellem hver side. Kunden får på den måde et indblik i navigationen uden du har brugt særlig lang tid på at udarbede funktionaliteten.

Det gøres ved at kopiere sit layout sopm flere sider, og på de enkelte sider slår man de lag fra som ikke skal være synlige. Derefter kan man lægge hotspots på de steder, kunden skal kunne klikke på, og der laves links fra hotspots'ene til de andre sider. Til sidst gemmes det hele som en webpræsentation, der kan vises for kunden. Når han har sagt 'Go' eller kommet med ændringsforslag kan du lave justeringer og arbejde videre med dit site Dreamweaver.

Andre værktøjer kan anvendes i arbejdsprocessen.

Det kan være en god ide at skrive al tekst i f.eks. Microsoft Word, da du ikke behøver at tænke på layout, før du importerer det i Deamweaver. Microsoft Excel kan anvendes til budget og tidsplanlægning, og nogle anvender Microsoft Project, som er et decideret projektstyringsværktøj der kan integreres med medarbejdernes kalendre i Outlook.

Hvis du skal behandle lyd til brug i Dreamweaver eller Flash, kan du bruge et lydbehandlingsprogram, f.eks. Adobe Soundbooth, og hvis du har video som skal integreres på dit website, kan du redigere det i f.eks. Adobe Premiere. Dette er dog et komplekst program, som tager tid at sætte sig ind i.

Måske skal dit website vises på en mobiltelefon eller håndholdt computer. Med Adobe Device Central kan du optimere dit website til at blive vist på en lille skærm.

For at vedligeholde dit website på en hurtig og effektiv måde, kan du bruge Adobe Contribute. Det er et program som fokuserer på indholdet i stedet for layoutet, som du allerede har lavet. Med Contribute er det også en mulighed at lade forskellige medarbejdere, som ikke har forstand på webdesign, stå for opdateringen.