GRAFISK WORKFLOW. 1 Grafisk workflow

Transkript

1 GRAFISK WORKFLOW 1

2

3 Opgavebeskrivelse I forbindelse med et nyt online koncept Web in a box skulle jeg lave en Photoshop-skabelon, der kan eksportere materiale til en hjemmeside automatisk. Selve konceptet Web in a box henvender sig til mindre virksomheder, enkelt mands virksomheder og foreninger, der ikke har det store online-budget. Det er enkle hjemmesider, der kan leveres relativt hurtigt og billigt. Siderne har stortset samme opbygning bortset fra enkelte ting, der kan ændres afhængigt af, hvad kunden ønsker. Siderne er bygget op i CMS et Dynamic Web ligesom vores store online-løsninger, hvilket giver kunden gode muligheder for at udvikle sitet senere. Da siderne skal kunne leveres billigt til kunden, er det samtidig også vigtig, at vi kan lave dem færdige hurtigst muligt for at have mindst mulige omkostningerne. Derfor skulle jeg udvikle en photoshop skabelon, der ville gøre det hurtigt at få materialet klar til upload. Obs: Skabelonen til Web in a box -siderne er udviklet og kodet af vores online-afdeling. Jeg har til skolebrug kodet en enkelt side fra bunden for at vise, hvordan det kan gøres. Denne version kan ses her: Web in a box Der kan leveres to forskellige versioner af Web in a box-løsningen. Jeg tager her udgangspunkt i den største af de to. Denne version har en forside, som ombygningsmæssigt altid er ens. Hertil kan siden have op til 4 undersider som standard. Forsiden består af en header med virksomhedens logo, en menu, en slider, 4 spot-bokse, et indholdsområde og til slut en footer. Til undersiderne kan der vælges forskellige skabeloner, som kan indeholde tekst og billeder, et galleri og en kontaktside med et google maps kort. Siden er opbygget responsivt, hvilket gør, at den er klar til googles nye regler fra april, som giver lavere SEO ratings ved ikke-responsive sites. Løsningen er testet og fungerer i alle større browsere. Arbejdet i Photoshop I Photoshop opbyggede jeg sites ud fra de mål, jeg kunne se i websites CSS. Størstedelen af lagene konverterede jeg til Smart Objects for nemt at kunne ændre indholdet i det pågældende lag seperat. De lag, jeg vidste, skulle eksporteres som grafik, navngav jeg med filtypens extension, efterfuldt af præfixed for kvaliteten af filtypen, f.eks logo.png24. Til ændring af teksten lavede jeg paragraph styles, så man hurtigt kunne formatere ny tekst. Da skabelonen hurtigt fik mange lag, brugte jeg Photoshops mulighed for at give de enkelte lag farver, som jeg gav efter typen. På denne måde kan man hurtigt finde frem til dem, man skal bruge. Til sidst brugte jeg Photoshops funktion til at eksportere materialet automatisk, hvorefter det er klar til upload på sites. Kvalitetsvurdering Photoshop-skabelonen fungerer 100% efter hensigten. Den gør arbejdet med at klargøre materialet til et nyt site hurtigt, da man ikke længere manuelt skal beskære materiale i de enkelte pixelmål og efterfølgende gemme til web i det rigtige format. Samtidig kvalitetssikre skabelonen produktionen af sites, da den automatiserer kvalitetet af alle filerne, hvorved man undgår fejl. 3

4 Web in a box opbygning I skelettet her til højre kan opbyggelsen af forsiden ses. Grundelementerne i opbygningen er HTML5. Elementerne, der indgår, er følgende: header.logo nav.main_nav.cta header.logo nav.main_nav.cta main.slider.spot_left.spot.left_colum.right_colum footer.spot_left.spot main.slider.spot.spot.left_colum.right_colum footer 4

5 Udarbejdelsen af skabelon i photoshop Udfra den færdige side, som jeg fik leveret fra vores online afdeling, begyndte jeg, at opbygge siden i Photoshop. For at sikre at de færdige filer skulle passe på siden, var det vigtigt at hvert lag havde præcis den rigtige størrelse. Hvert lag, der til sidst skulle eksporteres, konverterede jeg til et smart object. På denne måde kan man åbne laget og derefter redigere indholdet, hvorefter Photoshop opdaterer indholdet i skabelonen. Det er den nemmeste måde at ændre indholdet at et lag samtidig med, at man sikrer sig, at det hverken flytter sig eller ændre størrelse. Det giver samtidig mulighed for at linke flere objekter sammen, så de alle opdateres, hvis man ændrer forældre -objektet. Brugen af smart objekts gør det nemt at ændre indholdet af et eller flere lag på en gang. Udarbejdelsen af skabelonen i Photoshop. Hvert element fra siden laves i samme størrelse for at sikre, at materialet passer til siden. 5

6 Extensions og Præfikses For at Photoshop ved, at den skal eksportere de enkelte lag som grafik, skal man navngive dem efter, hvilken filtype man ønsker eksporteret. Dette gøres simpelt ved at skrive en fil extension f.eks.jpg efter lagets navn. Men kan derefter tilføje forskellige præfiske, der afgør hvilken type/kvalitet fil, der bliver gemt. Tilføjer man f.eks 6 efter.jpg, altså.jpg6, vil man få en jpg i 60% kvalitet på samme måde, som havde man eksporteret den fra Save for web dialogen. Her er lagene navngivet alt efter, hvilken type fil Photoshop skal eksportere. Her er det henholdsvis en png24 og jpg filer i 60% kvalitet. Farvesortering For at lette arbejdet mest muligt gav jeg hver type lag en farvekode i Photoshop. På denne måde kan man hurtigt sorterer sig frem til de lag, der skal ændres. I min skabelon er blå lag filer, der bliver eksporteret, grønne lag er skriftlag og røde lag er designlag, der kun skal ændres, hvis man ønsker at opbygge hele siden direkte i Photoshop. 6

7 Eksporteringen af filerne Når jeg var sikker på, at hvert enkelt lag var, som det skulle være, slog jeg funktionen Generate Image Assets til under Photoshop file menu. Herefter generer Photoshop en ny mappe, hvori den gemmer alle filerne. De beholder samme størrelse og opløsning, som man specifiserede i Photoshop, og er eksporteret til forskellige filtyper, alt efter hvilke extensions og præfikses man navngav laget med. 7