GRAFISK WORKFLOW - Espen Fabricius Swane

Grafisk workflow | GRAFISK
WORKFLOW
1
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: www.espenswane.dk/wiab
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
Grafisk workflow | Opgavebeskrivelse
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
main
.slider
.spot_left
.spot
.spot_header
.left_colum
.right_colum
footer
nav
.main_nav
.cta
25px
main
.slider
25px
.spot_header
.spot_header
.spot_header
.spot_header
.spot_left
.spot
.spot
.spot
25px
.left_colum
.right_colum
4
25px
footer
Grafisk workflow | •
•
•
•
•
•
•
•
•
•
•
•
•
header
.logo
Udarbejdelsen af skabelon i photoshop
Udarbejdelsen af skabelonen i Photoshop.
Hvert element fra siden laves i samme
størrelse for at sikre, at materialet passer
til siden.
5
Brugen af smart objekts gør det nemt at
ændre indholdet af et eller flere lag på en
gang.
Grafisk workflow | 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.
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.
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
Grafisk workflow | Farvesortering
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.
Grafisk workflow | 7