Media College Aalborg

Transkript

1 Media College Aalborg Forfattere: Alexandra Kønig, Shwan Kwestani, Carita R. Senft Media College Aalborg Klasse: h1we

2 Sammendrag... 2 Introduktion:... 3 Gruppe...3 Baggrund:...3 Objectives... 4 Mission...4 Vision...4 Målgruppe...4 Produkt... 5 Vektor vs Raster...5 Hvorfor bruge Illustrator:...5 Hvad er Illustrator:...6 Hvad bruges Adobe Illustrator til?...6 Plusser og minusser:...7 Brug Adobe Illustrator til at skabe et rent Website layout...8 Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Trin Endeligt billede Konklusion: Bilag Ganttplan Samarbejds kontrakt Evaluering Side 1 af 19

3 Sammendrag Hvordan kan Illustrator bruges til at forbedre grafik til brug på internettet, og hvordan kan vektorgrafik bruges til at forbedre kvaliteten af webgrafik? Hvordan kan avanceret grafiske værktøjer være nyttige for web design? Hvorfor bruge vektorgrafik til webdesign? Hvilke andre måder kan vektorgrafik bruges til webdesign? Der er en efterspørgsel på markedet for bedre design eller grafisk kvalitet på websider. Vi mener, at dette kan opnås ved hjælp af vektor redskaber til at udvikle grafik til websider, som en mellemproces. Det er vigtigt, at kvaliteten forbliver den samme gennem udviklingsprocessen og slutprocessen. Illustrator er god som mellem proces i gennem ideen og frem til det færdige resultat. For folk der allerede arbejder med grafik og webdesign. Derfor vil vi foreslå, at bruge Adobe Illustrator til at arbejde med vektorgrafik. Der er de fordele, når vi allerede bruger Photoshop, at kontrollerne er meget ene imellem disse 2 programmer. Vi har baseret vores rapport på viden fra dokumentationen om Illustrator fremlagt af Adobe på Internettet. 1 1 Kilde: Side 2 af 19

4 Introduktion: Gruppe Alexandra Shwan Kwestani Carita R. Baggrund: Da antallet af websider vokser og virksomheder ikke bare bruge en hjemmeside som et visitkort, men snarere som en forfremmelse af sig selv og deres produkter, er efterspørgslen på kvaliteten af de hjemmesider vokse, og en del af det, selvfølgelig, er det web sider grafik. Virksomhederne ønsker deres sider ser godt ud, og fungerer godt. Lav kvalitet og opløsning af billeder og grafik ikke længere en mulighed, da det ikke kan nå dette mål. En webdesignere se på mulighederne for at forbedre deres produkter. Side 3 af 19

5 Objectives Mission Raster grafik altid domineret internettet, og det er en oplagt løsning, da der ikke er nogen webteknologier gør det muligt at vise alternative grafik, men vi kan bruge vektor grafik i midten proces at forbedre det endelige resultat af rasterbilleder. Mulighederne med at bruge vektorgrafik i programmer såsom Adobe Illustrator er uendelige. Den alsidighed af grafikken gør dem universelle til brug i de fleste programmer, og en nem måde at oprette og redigere grafik uden at ændre den måde, at det viser sig på nettet eller på tryk. Hvis du er på udkig efter gratis vektorer, kan du finde dem online og sætte dem til at bruge i dit næste design projekt. Vision Adobe Illustrator er en vektor grafik editor udviklet og markedsført af Adobe Systems. Illustrator er ens i omfang, der er bestemt marked, og funktionalitet til sine konkurrenter, CorelDRAW, Xara Designer Pro og Macromedia FreeHand. Den seneste version, Illustrator CS6, er den sekstende generation i produktet linje. 2 Målgruppe Det er fagfolk / virksomheder som benytter Illustrator. Fordi det er et dyrt program at anskaffe. Adobe Illustrator programmet er almindeligt anvendt af grafikere og digitale kunstnere over hele verden. Det er mennesker som arbejder med web design og de har erfaring med andre grafiske programmer. De vil gerne forbedre det endelige resultat af deres rastergrafik 2 Kilde: Side 4 af 19

6 Produkt Vektor vs Raster Vektorgrafik er grafik der defineres ud fra linjer og polygoner, som kan udtrykkes matematisk, ved hjælp af vektorer og punkter. En illustration af forskellene på vektorgrafik og bitmap grafik ved forstørrelse. 3 Raster grafik billede eller bitmap, en punktmatrix datastruktur repræsenterer et generelt rektangulært gitter af pixels eller punkter af farve, der kan vises via en skærm, papir eller andet display medium. 4 Fordele ved Vektor billeder Uendeligt Skalerbar: Gennem matematik kan vektor-filer skaleres op eller ned så meget som man ønsker uden at miste nogen billedkvalitet. Hvorimod et rasterbillede skal gætte farverne på manglende pixels ved dimensionering op, en vektor billede bruger blot den oprindelige matematiske ligning til at skabe en konsekvent facon hver gang. Mindre filstørrelse: En vektor fil behøver kun fire datapunkter at genskabe en firkant versus 300 individuelle pixels til et rasterbillede. For simple grafik, ligesom geometriske figurer eller typografi betyder det en meget mindre filstørrelse og hurtigere behandlings hastighed. Spiselighed: I modsætning til populære raster-baserede formater, såsom en jpg eller png, vektor filer er ikke ". Fladtrykt" Når man åbner dem op igen i et program som Adobe Illustrator, vil alle de oprindelige figurer findes særskilt på forskellige lag; dette betyder at man kan ændre enkelte elementer uden at påvirke andre objekter i billedet. 5 Hvorfor bruge Illustrator: Mulighederne med at bruge vektorgrafik i programmer såsom Adobe Illustrator er uendelige. Den alsidighed af grafikken gør dem universelle til brug i de fleste programmer, og en nem måde at oprette og redigere grafik uden at ændre den måde, at det viser sig på nettet eller på tryk. Hvis du er på udkig efter gratis vektorer, kan du finde dem online og sætte dem til at bruge i dit næste design projekt. Gratis vektorer er tilgængelige for download på nettet, som du kan bruge sammen med programmet. De vektorbilleder er meget nyttige for designere og kunstnere, der skaber og arbejder med stort format slags job som ved hjælp af baggrundsbilleder og tegnefilm. 3 Kilde: 4 Kilde oversat: 5 Kilde: Side 5 af 19

7 Hvad er Illustrator: Adobe Illustrator er et software program, der skaber og bruger vektorgrafik i et tegneprogram. Programmet er almindeligt anvendt af grafikere og digitale kunstnere over hele verden. Adobe Illustrator CS6 er et komplet vektorgrafik miljø, der anvendes sammen med andre Adobe Creative programmer. Man kan konstatere muligheden for at redigere optrædener, arbejde effektivt med de nye guider og paneler og også levere til printere, udviklere og andre applikationer. Hvad bruges Adobe Illustrator til? Webdesignere og kunstnere anvender disse kraftfulde værktøjer i programmet til at skabe og tegne figurer, linjer, tekst og import grafik og billeder. Det er et program som kan skabe forskellige elementer på websider og i print. Det gør er nem for kunstnere og designere, at arbejde med dette program og lave fantastiske nye grafik og design. Vektorbilleder er nemme at arbejde med fordi de ikke er afhængig af en vis opløsning. Det giver en mulighed for at være i stand til at designe et job med vektorbilleder og øge størrelsen af billedet så meget som du kan, uden at forvrænge billedet eller ændre kvaliteten. 6 6 Kilde: %B3%D8%AA%D8%B1%D9%8A%D8%AA%D9%88%D8%B1 Side 6 af 19

8 Plusser og minusser: Den mest negative ved Illustrator er, at det har en indlæringskurve, der ligner den side af en treetagers bygning - real høj, og lige op. Det giver også et billede med en sprød, ren "vektor" look til det - nogle mennesker kan ikke lide denne. I LIKE sprødheden, så jeg holde sig til det. Det ser flot ud på den side af en persons bil. Der er to store positive for det. Den ene er "skalerbarhed" of the art. Jeg gjorde en bevægelse van for et ejendomsselskab - det havde firmaets logo og "køb eller salg fra os og bruge denne Van Free!" på et felt af dyb blå. Logoet var fem meter høj på siderne af kassen, en fod højt på dørene og to meter høj på roll-up dør, og alle af dem udskrevet lige så rent. Den anden er, at det relativt små filer. Bemærk jeg sagde "relative" - Jeg kan gå ind i mit arkiv og træk 500MB-plus Illustrator-filer hele dagen lang. Længden af??en Illustrator-fil ikke nødvendigvis svarer til størrelsen af billedet - hvis du går til (det er fuld af EPS logoer - alle bogmærke, nu) du kan hente filer, er 300MB længe,??og at print omkring fire inches i diameter. Et job jeg gjorde skulle vise sig lærerige: Vi indpakket en racerbil. Vi startede ud med Photoshop-filer. De var 800MB og trykt forfærdeligt. Vi spores dem i Illustrator og trykt 15MB filer, der var usædvanligt skarp. 7 7 Kilde: Side 7 af 19

9 Brug Adobe Illustrator til at skabe et rent Website layout Trin 1 Start med et nyt dokument og vælg den størrelse som du ønsker din hjemmeside skal have, og indstil din farvetilstand til RGB. Trin 2 Den sorte kant viser dokumentet størrelse (det hedder tegnebræt). Placere et blankt skærmbillede af et browservindue på sit eget lag, mens du designer, så får du en god idé om, hvordan hjemmesiden vil se ud, når den er færdig. Trin 3 Dette næste trin er meget vigtigt. Sørg for, at du er klar over, hvad zoom, du ser dokumentet på. Når alt er sagt og gjort, vil din hjemmeside blive set på 100 %. Du er velkommen til at zoome ind og ud, mens du arbejder på dit layout, men være sikker på at al din tekst og designelementer er læsbare, når de ses på 100 %. Sidenote: Sommetider kan Adobe Illustrator finde på ikke at viser dine % værdier, som du skriver ind i zoom-området. For eksempel, hvis du skriver 58 % og numret ikke ændrer sig, skal du blot trykke Return efter du har indtastet dine % værdier, og dit dokument vil blive ændret til det nummer, du har indtastet. Side 8 af 19

10 Trin 4 Tegnebrættet kan skiftes mellem synlig og usynlig ved at gå til Vis> Skjul tegnebræt. Det nemmeste når du arbejder er at vælge hjælpelinjer og skjule tegnebræt. (Command + semikolon-tasten) Imens du arbejder med hjemmesiden er det nemmest at trykke på en hurtig tast kommando snarere end at gå til toppen af skærmen og vælge fra en liste hver gang. Trin5 Du kan finde det nemt at etablere balance og et godt hierarki ved første tegning simpel grå bokse på din side. De tynde rektangler repræsenterer, hvor jeg planlægger at bruge tekst, mens de store grå bokse vil være billeder. Side 9 af 19

11 Trin 6 Når du har en generel idé om, hvad layoutet vil se ud som du kan tilføje hjælpelinjer og fjerne de grå kasser. Trin 7 Brug kun de guider som en reference, tilføje andre elementer som navigation, tekst og stramme op, hvor logoet, billeder og ikoner vil gå. Det er nyttigt at slå jeres guider til og fra (Kommando + semikolon-tasten), mens du manøvrering layoutet. Hvis de guider dig drog ikke virker så godt som du troede, helt sikkert justere dem som du ønsker det. Sidenote: når du skifte vejledninger om og fra de låses automatisk blive. Du kan ikke flytte låste guider. Hvis du vil låse hjælpelinjer hurtigt trykke Command + Option + semikolon. Trin 8 Fortsæt at afslutte din header med billeder, ikoner og grafik. Side 10 af 19

12 Trin 9 Nedenfor kan du beslutte at tilføje en lys blå farve for at forbedre overskriften. Trin 10 Tilføj styning til din tekst, og sørg for at beslutte, hvilke links og overskrifter. Du kan finde det meget lettere og hurtigere at udføre så mange designelementer i Illustrator, så jeg kan koncentrere mig om programmering og kodning af hjemmesiden, når den tid kommer. Trin 11 Der er et par forskellige måder at forberede et design til brug inde i en WYSIWYG (Hvad du ser, er hvad du får) editor, som Adobe Dreamweaver. Den første fremgangsmåde anvender skiver. Skiver kan fremstilles ved anvendelse guider eller en markering. Hvis du vil bruge guider til at lave skiver skal du først trække guider på din side omkring hvert objekt, som vil kræve sit eget link. For eksempel, et ikon, som når der klikkes, går til en bestemt side. Nedenfor har jeg fire ikoner, vil hver ikon føre den besøgende til en anden webside eller del af hjemmesiden. Der er tegnet blade mellem hver ikon og lige uden for det blå område. Det er normalt renere, hvis du tegner dine guider omkring 1 eller 2 pixels uden for det område, du er udskæring. Dette sikrer ingen af illustrationen, vil blive afskåret. Sidenote: Du må ikke trække guider over hele din layout på én gang. I stedet gør sektioner en ad gangen. For eksempel gøre først hovedfeltet. Slet alle dine guider ved at gå til Vis> Guider> Slet hjælpelinjer. Gem dine skiver til internettet (diskuteres i Side 11 af 19

13 et senere trin), og gentage denne proces for andre områder af layoutet. Trin 12 Når du har dine guider trukket det næste skridt er at gøre skiver ud af dem. For at gøre skiver fra dine guider går til Objekt> Udsnit> Opret fra hjælpelinjer. Til tider kan Illustrator ikke gøre skiver første gang du forsøger at. Jeg har fundet, at jeg nogle gange nødt til at gentage dette trin tre eller fire gange, før Illustrator rent faktisk vil gøre skiver. Nedenfor, de sorte nummererede felter viser, at skiverne er foretaget. Trin 13 Hvis du vil gemme dine skiver til brug på en hjemmeside gå til File> Gem til web og enheder... Brug Slice Select Tool (K) fremhæves i øverste venstre hjørne for at vælge de specifikke udsnit, du vil gemme. Vælg flere udsnit på én gang ved at holde shift. Juster indstillingerne til højre passer til dine behov. JPEG-billeder fungerer bedst for elementer, der har flere farver, mens GIF filformat fungerer godt for elementer, der har store områder af farve og ikke mange farver i almindelighed, PNG filformat fungerer godt for gennemsigtige grafik (selvom kan kræve en del arbejde at justere for ældre IE browsere). Du ønsker måske at teste kvaliteten kontra filtype og justere kvaliteten for at spare båndbredde. Når din klar, klik på Gem. Trin14 Beslut, hvor du vil gemme billederne på. Jeg har valgt skrivebordet. Under format Vælg kun billeder, og klik derefter på Gem. Side 12 af 19

14 Trin 15 På dit skrivebord, vil du nu have en mappe kaldet billeder. Inde i denne folder vil være de specifikke skiver (billeder) du har valgt. Disse billeder er ideelle i opløsning og filstørrelse til brug på internettet. Trin 16 Som nævnt i trin 11, skal du fjerne dine guider ved at gå til Vis> Guider> Slet hjælpelinjer. Nu tegne nye vejledninger om næste område, som du vil skive. The hover tilstand (når musen er over navigation) vil være rød, mens den slukket tilstand vil være grå. Du bliver nødt til at gøre begge versioner af navigation. Til effektivt opnå dette, skal du først gøre alle dine navigation rød derefter gå til Fil> Gem til web og enheder... Trin 17 Vælg de specifikke udsnit, du vil gemme. Siden min navigation ikke består af billeder eller en overflod af farver jeg har besluttet det bedste filetype for navigationen vil være GIF, og klik derefter på Gem. Bemærk også, at hvis din bruger en web understøttet skrifttype, så du kan beslutte at anvende html tekst i stedet for billeder. Trin 18 Du kan give dine billeder et nyt navn på dette tidspunkt. Men de er automatisk opkaldt efter dig, så dette ikke er obligatorisk. Side 13 af 19

15 Trin 19 Hvis du har gemt dine billeder til samme sted som før, vil du bemærke mappen Billeder på din Desktop nu omfatter de yderligere billeder, du lige har gemt. Gentag trin for at gøre slukket tilstand for dine knapper. Trin 20 Husk dette er kun én mulig arbejdsgang. Alternativt kan du placere på og offtilstande eller andet sted i dit dokument, skal du oprette alle dine skiver, og eksportere dem sammen. Den anden metode til at skabe skiver er ved at vælge et objekt derefter vil Objekt> Udsnit> Opret ud fra markering. Oprettelse af udsnit med guider eller fra en markering er fint så godt. Brug en arbejdsproces, som du finder behageligt og bedst for det pågældende projekt, du arbejder på. Trin 21 Den lejlighed vil du ikke behøver at medtage den tekst, der falder inden for en skive. For eksempel vil sidefoden have tekst, der er skrevet inde i WYSIWYG editor. Hvis dette er tilfældet skal du blot slette den tekst før eller efter du har foretaget de skiver, men forud for at gemme skiver til internettet. Trin 22 Nedenfor kan du se, at jeg har slettet teksten efter skiverne blev foretaget. Side 14 af 19

16 Endeligt billede Overhold den endelige hjemmeside. Som du kan se, om en hjemmeside i Adobe Illustrator er enkel og effektiv. Du kan hurtigt eksperimentere med design og give denne fase af webdesign processen den opmærksomhed og troede, at det har brug for. 8 8 Kilde: Side 15 af 19

17 Konklusion: Der er et problem: Det er efterspørgsel på kvalitet. Der er en grund til dette problem: Raster grafik sænker visuel kvalitet. Der er måder at løse grunden til dette problem: Brug vektor grafik i udviklingsprocessen. Der er et værktøj der gør det nemmere, at løse grunden til problemet: Det er Illustrator. Side 16 af 19

18 Bilag Ganttplan Website Raport Research Sammenhæng Udvikling Formatering Logbog Samarbejdspartner Emne Problemformulering Emneindeks Tidsplan og ansvar Baggrundsmaterialer Behov for støtte Daglig opgaver Brugere IT i industriet IT på kontoret IT i landbruget IT hos håndværkeren IT Privat Alexandra Carita Shwan Alexandra+Swhan Alexandra+Carita Shwan+Carita All Side 17 af 19

19 Samarbejds kontrakt Gruppe: Navn Alexandra Kønig Shwan Kwestani Carita R. Senft Kontakt Hvis en ikke kan komme man skal skrive en til de andre Vi sender vores daglig opgaver til hinanden inden kl 5. Shwan skal sender daglig opgaver til lærer Alexandra vil lægge daglig opgaver på webside Kl 13. vi aftaler om hvad skal vi laver næste dag. Side 18 af 19

20 Evaluering Shwan Kwestani: På dette tidspunkt lærte jeg at drage fordel af computeren og hvordan det bruges i forskellige områder. Vigtigst er det, jeg lærte at finde ekstern information. Og detailhandel mellem udviklingen af teknologi i vores land og Danmark, i den forstand, at udviklingen og velopdragen computer i noget land betyder i alle områder af udvikling. Og lærte at skrive dansk rapport det og få flere fordele af praksis og øvelser dagligt. Carita R. Senft: Jeg har synes, at gruppen har fungerede godt. Vi havde forskellige opgaver at udføre. Jeg har koncentreret mig om opgaverne vedr. IT privat og IT hos håndværkeren og rapport skrivning samt udvikling og problemformulering. Jeg havde den forventning, at lære noget om programmet Illustrator. Alexandra Kønig: I dette projekt jeg forventede mest til at forstå opgaven. Jeg ønskede at udføre i de fleste detaljer alt, hvad jeg kunne nå på tidslinjen. Til slut nød jeg min gruppe hjælperes samarbejde og engagement og det havde en positiv oplevelse af at være en vigtig del af projektet maskine, og at man ikke er den eneste der bære vægten. Jeg tror, det lykkedes godt, og hvis vi har forpasset nogle detaljer, var det ikke på grund af vores dovenskab eller mangel på viden, men den kaotiske karakter af opgaven. Side 19 af 19