Share
Internett har gjennomgått noen alvorlige endringer de siste årene, og måten weben er utformet endrer seg med. Photoshop kan fortsatt være "go-to" -verktøyet for mange webdesignere, men for noen er Photoshop ikke lenger konge. I denne artikkelen vil Ian Yates, redaktør for Webdesigntuts + forklare hvordan Photoshop ble brukt tidligere, hvordan det kan brukes i fremtiden, og hvorfor.
Teknisk sett er Photoshop et program for å manipulere bilder (tilgi meg for å si det åpenbare der), men det er også fullpakket med verktøy for å bygge grafikk fra bunnen av. Form, vektor, type, fyll og effekter, alle disse (og flere) gir seg veldig godt til å lage grafiske layouter.
Ikke for lenge siden var nettlesere ikke i stand til direkte å generere slike effekter selv, men de kunne vise bitmapbilder perfekt godt. For å utforske grafisk design i en nettleser var det bare logisk å nå for Photoshop, lage bildene dine, lagre dem som bilder og bruke dem på en nettside.
Gradienter, skygger, mønstre, vinkler; alt er lett å lage med Photoshops verktøy - ikke så lett å lage med noe annet.
Byggingen for nettet var også relativt komplisert (langt mindre strømlinjeformet enn i dag), så det var alltid enklere og raskere å slå på en layout i Photoshop enn å kjempe med Dreamweaver. Hvorfor skulle du ikke designe i et grafikkprogram, få godkjenning fra klienten, deretter faktisk bygge for nettet? Dagens designere har vokst opp med Photoshop fordi det ga den raskeste måten å visualisere et høykvalitets designkonsept.
kuhboom.com: Densely teksturerte webdesign vil få deg til å skille verktøyet. Tilbake da nettet var et fremvoksende medium var det ingen "web byråer", så oppgaven med å lage den falt for å skrive ut designere. Disse karene gjorde det som var logisk; de tok sin digitale oppskrift erfaring, verdier, teknikker, prosesser og verktøy, og brukte dem til denne modige nye verden. De portretterte effektivt utskriftstrykk på skjermen, slik at arbeidsflyten allerede eksisterte:
Alt som trengte å endre var den endelige utgangen. Som sådan var Photoshop vitne til endringene og fulgte for turen, og rooter seg selv som grafisk designerens beste venn.
Tider de er a-changin '(som Bob Dylan sa). Internett er et annet sted i disse dager, og Photoshops rolle i prosessen med å designe for den nettsiden endres også. Hvorfor?
En stor del av problemet ligger i teknologiske fremskritt som har drevet stor endring i webdesign de siste årene. Vi har sett internett vokse fra et bibliotek med statiske dokumenter til et interaktivt tjenesteprogram og applikasjoner. Nettverksleverandører har spredt fingrene i nesten hvert hjørne av kloden, båndbredde og hastighet har økt til science fiction-lignende nivåer. Internett-aktiverte enheter som smarttelefoner, tabletter, jevn klokker, produseres rimelig og raskt. Alt dette har revolusjonert måten vi bruker på nettet - og det har drastisk endret vår oppfatning av hvordan vi skal utforme for det.
Utskriftsdesignere begynner med begrensninger (de faste dimensjonene på en side) og deretter utformes innenfor dem. Når du først designer for nettet var dette også et logisk utgangspunkt; opprett et fast lerret og arbeid innover. For å finne ut hva de faste dimensjonene skulle være, måtte designere gjøre forutsetninger om sluttbrukerens skjermstørrelser. Svært tidlig på 800x600px var mest vanlig. Senere var 1024x800px normen. Å jobbe til et rutenett på 960px var fornuftig fordi det passet de fleste skjermer (større skjermer var sjeldne, eiere av mindre skjermer ville bare måtte oppgradere til slutt) og var delelig med en rekke kolonnebredder.
Disse forutsetningene var feil da (tvinge en bruker til å justere deres surfer til din design ?!) og er enda mer så i disse dager. Hvor stor er en nettside i dag?
Fra Brad Frost er Dette er nettet Tilbake i mai 2010 skrev en kone som heter Ethan Marcotte om en strålende ide han hadde unnfanget. Ved å bruke eksisterende teknologier og metoder foreslo han en tilnærming "Responsive Web Design" som benyttet væskeoppsett (ikke fast), fleksible bilder (som vokser og krympes med layoutet) og CSS Media Queries (som tillater oppsett å endres avhengig av skjermstørrelsen og andre faktorer).
Med disse ideene endret nettverket, irreversibelt.
Takket være Ethans konsepter har webdesignere kommet inn for at de burde tenke fra innhold utover, ikke side grenser innover (selv om det bør bemerkes at denne tilnærmingen ikke er obligatorisk). Vi vet ikke hvor stor en nettside er, så vi må designe vårt innhold for å passe inn i hvilke grenser det står overfor. Tenk på webinnhold som å være lik væske; i stand til å helles i alle slags fartøy.
Her ligger et problem for Photoshop. Photoshop jobber i utgangspunktet til faste grenser. Former, typer og objekter i oppsettene er løst, mens nettsider i økende grad ikke er. Å produsere en kompis som er presentert til en klient pleide å bli raskt oppnådd i Photoshop, men hvordan kan du effektivt presentere en væskelayout som en statisk stillbilde?
The Next Web som presentert av mediaqueri.es Typografi er et annet godt eksempel på printdesignere som prøver å tvinge begrensninger til sluttbrukere. Hver brukers nettleser gir dem muligheten til å angi standard type størrelse; Tross alt, foretrekker noen mennesker mindre lettering, mens andre kanskje foretrekker en lettere leseropplevelse med større type. Som standard settes nettlesere vanligvis på 16px, så med mindre en designer sier noe annet, eller en bruker endrer standardinnstillingen, er det så stor kroppskopi som vil bli.
Utskriftsdesignere har imidlertid reelle vanskeligheter med å overgi denne kontrollen. "Hvordan kan du la brukeren definere størrelsen på typen ?! Har du noen ide om hva som vil gjøre for resten av oppsettet ?!"
Låse fontstørrelsen i et webdesign (via CSS) vil gå langt for å forhindre at noe uforutsigbart skjer, men det er neppe brukervennlig. I disse dager anses det som best praksis å måle sideelementer og typografi ved bruk av eMS i stedet for piksler; relative måleenheter som er basert på standard skriftstørrelse. Derfor, hvis en nettleser har en annen standard skriftstørrelse, kan hele designen bøyes som svar på det.
Denne fleksibiliteten fremhever igjen begrensningene for å designe statiske comps i Photoshop.
Nettlesere utvikler seg veldig raskt i disse dager, og bilder er ikke lenger nødvendige for mange effekter på nettet. CSS er i stand til å produsere nøyaktige gradienter, kurver, skjev objekter, skygger, alfa gjennomsiktighet (listen fortsetter) og dette er like bra gitt gryten av Retina skjermene. Retina skjermer (eller mer nøyaktig: skjermbilder med høy pixel tetthet) har virkelig kastet en nøkkel i verkene for webdesignere. Retina skjermene har dobbelt så mange piksler som vanlige skjermer, slik at de er luksus i å gjøre alt superskarpt. Alt pikselbasert er imidlertid ganske enkelt blåst opp dobbelt så bredt, dobbelt så høyt, noe som resulterer i forholdsvis lavere kvalitet.
For at nettsidene beholder sin skarphet, må designere være så mye som mulig på hva nettleseren kan gjengi seg selv. Faktisk er den siste trenden mot "Flat Design" (delvis) en reaksjon på dette rent CSS-baserte webdesignet.
Alt dette tar en enorm del av hva Photoshop gjør (produserer bitmaps) ut av ligningen.
Designmodos Flat UI-sett Som vi har nevnt, har Internett blitt helt global takket være spredning av mobile enheter. Det har tvunget oss til å innse at vi ikke kan vite omstendighetene der innholdet vårt blir gjort tilgjengelig. Vi vet ikke om sluttbrukeren sitter på sofaen med en tenne, paragliding med en iPhone eller går gjennom Gobi-ørkenen med en MacBook Pro. Vi vet ikke hvor stor skjermen deres er, hvordan prosessoren er, og likevel, vi kan ikke anta å vite hvor fort forbindelsen deres er.
Vi begynner å innse at ytelse er en grunnleggende del av utformingen for nettet. Igjen, bilder spiller en rolle i dette. Hver enkelt ressurs (det være seg et bilde, et skript, et dokument, hva som helst) som er trukket fra en webserver, er kostbart.
I stedet for å holde filer som bilder og skrifter i en mappe som heter "eiendeler", skal jeg gi omnavnet mappen "gjeld".
- Jeremy Keith (@adactio) 18. februar 2013
Ikke bare bør de optimaliseres for å være så liten som mulig, men de bør også være som få som mulig. Nettlesere er begrenset i mengden av eiendeler de kan samtidig Last ned, ofte til bare to til enhver tid. Hvis nettsiden din inneholder hundrevis av individuelle bilder, danner de en flaskehals, noe som til slutt gir en negativ opplevelse til sluttbrukeren.
Dette kan bli hjulpet, ved å kombinere bildefiler til single sprites, men (igjen) retina skjermbilder tvinger en slags backup plan.
I stedet er effekter bedre oppnådd med CSS, ikoner kan legges inn via webfonter, logoer kan implementeres som skalerbar vektorgrafikk, som alle speller slutten for skiveverktøyet.
Tilbake da nettdesignerens arbeidsflyt var effektivt det samme som utskrift med internett på taket på slutten, var utformingen av layouter i Photoshop en integrert del av prosessen:
I disse dager, med mindre av det endelige resultatet avhengig av eiendeler bygget i et grafikkprogram, betyr utforming av en hel layout i Photoshop effektivt å fordoble innsatsen. Bygg det en gang for å få en ide om hvordan det vil se ut, og bygg det for ekte. Kast deretter PSD-maskinen fordi det ikke er noe for noen.
Adobe var enten motstand for endring, eller bare forsøkte å være behjelpelig, da de introduserte noen webdesignfunksjoner i CS6. CSSHat-lignende CSS-utgangspanelet gjør det mulig å ta tak i koden fra dine visuelt opprettede sideelementer. De gjorde det også mulig å lime inn en heksefarge (kopiert fra nettleseren), inkludert hashtag (#ffffff for eksempel) i Photoshop fargeplukker uten å kaste en feil.
Stykkestiler (litt som i InDesign) ble introdusert for å gi mer global kontroll over typografi. Lorem Ipsum fant veien inn som en standardfunksjon, og nå kan du til og med velge vanlige enhetsdimensjoner som dokumentforhåndsinnstillinger!
Men vi er i fornektelse her - det er en stor blå elefant som står i hjørnet av rommet.
Det vi faktisk ser på her, er ikke et program som ikke passer til webdesign, men en arbeidsflyt som ikke lenger er riktig. Faktisk, selv før nettet ble alt flytende og knust, var det grunnleggende feil i Photoshop webdesign prosessen som vi har beskrevet det. Det var en tendens til å skape pixel perfekte gjengivelser av nettsider før bygningen kunne til og med begynne. Og da, på grunn av besettelsen med å få alt 100% perfekt i Photoshop, ville det være en lignende fanatisme for å oppnå identiske resultater i alle nettlesere. Det har tatt oss lang tid å innse at nettsider ikke må vises identiske i alle nettlesere!
Et alvorlig problem med sikte på perfeksjon i Photoshop oppstår når klienten blir involvert. Denne arbeidsflyten gjør det altfor lett å bli sittende fast i en uendelig krets av klienter som gjør pixel-pushing forslag, uunngåelig å miste synet av det store bildet.
Det som trengs er en mer modulær tilnærming til webdesign, og Photoshop kan absolutt spille en rolle i det. Vurder først planleggingsfasen; samling av informasjon og innhold, skisse forhold mellom områdene av nettstedet som helhet - en avgjørende del av denne modulære prosessen, men best utført bort fra Photoshop.
Wireframing tar prosessen videre; legge ut rudimentære grensesnittelementer, etablere visuelle forhold, hierarki og grunnleggende interaksjon. Igjen, dette er ikke en oppgave Photoshop utfører seg veldig bra, men gjør plass for programmer som Omnigraffle og Balsamiq, selv Illustrator (og det er mange flere).
Photoshop gir seg langt bedre til estetikk. Det kan ikke beskrive layouter flytende, men det kan utforske farger, teksturer, individuelle elementstiler, typografi, atmosfære og humør. Style Tiles er et konsept foreslått av Samantha Warren. De er i hovedsak Photoshop humørbrett, men fremhever en måte å isolere og presentere den estetiske fasen på klienten.
Den neste modulen i denne arbeidsflyten er prototyping; bygge grunnleggende, men funksjonelle oppsett for nettleseren. Og nei, dette er heller ikke Photoshops kopp te. Faktisk jobber Adobe aktivt med en alternativ applikasjonslinje for å hjelpe deg her. Deres Edge Tools tar sikte på å tilby et kjent lerretgrensesnitt, som utgir flytende for nettleseren. Ideell for rask prototyping, men fortsatt mye arbeid pågår.
Hvert av disse modulære stadiene tar et aspekt av designprosessen, isolerer det og involverer klienten tungt, og gir dem god mulighet til å signere på hvert trinn uten å påvirke de andre.
Vær oppmerksom på at dette er en foreslått arbeidsflyt, ingenting er skrevet i stein der design er bekymret, og det er ofte mer involvert enn disse generelle stadiene. Som fører meg til sluttpunktet mitt.
Enhver prosessprosess er ekstremt personlig og det som fungerer for noen andre, vil ikke nødvendigvis fungere for deg. Det er mange mennesker som ber om en slutt på webdesign i Photoshop, i stedet for en nettleserbasert arbeidsflyt. Faktum er at hvis Photoshop fungerer for deg, bruk det! På slutten av dagen er vi designere - hvis vi ønsker å tilbringe hundrevis av manns timer på å skyve piksler og polere vår Dribbble-portefølje, la oss tillate oss å luxurere i det!
Interessert i å lære mer om Photoshop og dets forhold til webdesign? Ta en titt på artiklene nedenfor.
Accentsconagua