Photoshop rolle i en Web Design arbeidsflyt
Nettet har gjennomgått noen alvorlige endringer de siste årene og hvordan nettet er designet er i endring sammen med det. Photoshop kan fortsatt være "gå til" verktøy for mange webdesignere, men for noen er Photoshop ikke lenger konge. I denne artikkelen, Ian Yates, vil Redaktør Webdesigntuts + forklare hvordan Photoshop ble brukt i det siste, hvordan den kan brukes i fremtiden, og hvorfor.
Hva er det godt for?
Teknisk sett er Photoshop et program for å manipulere bilder (tilgi meg for å si det åpenbare der), men det er også pakket med verktøy for å bygge grafikk fra scratch. Shape, vektor, type, fyller og effekter, alle disse (og mer) egner seg svært godt til å lage grafiske oppsett.
For ikke lenge siden, nettlesere var ute av stand til direkte å generere slike effekter selv, men de kunne vise punktgrafikkbilder helt bra. For å utforske grafisk design i en nettleser var det bare logisk å nå for Photoshop, lage dine bilder, lagre dem som bilder og bruke dem på en webside
graderinger, skygger, mønstre, vinkler.; alle lett å lage med Photoshops verktøy -. ikke så lett å lage med noe annet
Building for web var også relativt kompleks (langt mindre strømlinjeformet enn i dag) så tentamen opp en layout i Photoshop var alltid kommer til å være enklere og raskere enn å kjempe med Dreamweaver. Hvorfor ville du ikke design i et grafikkprogram, få godkjenning fra klienten, da Tilbake når nettet var en voksende medium var det ingen "web-byråer", så oppgaven med laging den havnet skrive designere. Disse gutta gjorde det som var logisk; de tok sine digital print design erfaring, verdier, teknikker, prosesser og verktøy, deretter brukt dem til denne vidunderlige nye verden. De effektivt portet print design til skjermen, slik at arbeidsflyten allerede eksisterte: Alt som trengs for endring var det endelige resultatet. Som sådan, Photoshop vitne endringene og gikk med på turen, videre rooting seg som grafisk designer beste venn. Times de er a-changin '(som Bob Dylan sa). Internett er et annet sted i disse dager og Photoshop rolle i prosessen med å designe for at web er også i endring. Hvorfor? En stor del av problemet ligger i teknologiske fremskritt som har drevet stor endring i webdesign de siste årene. Vi har sett på internett vokse fra et bibliotek av statiske dokumenter til en interaktiv pool av tjenester og applikasjoner. Nettverksleverandører har spredd sine fingre inn i nesten hvert hjørne av kloden, båndbredde og hastighet har økt til science fiction-lignende nivåer. Internett-aktiverte enheter som smarttelefoner, nettbrett og med klokker, produseres rimelig og raskt. Alt dette har revolusjonert måten vi bruker nettet - og det er drastisk endret vår oppfatning av hvordan vi skal designe for det Utskrifts designere begynne med begrensninger (. de faste dimensjoner på en side) deretter utforme i dem. Når først designe for web dette var også et logisk utgangspunkt; etablere en fast lerret og jobbe innover. For å finne ut hva disse faste dimensjoner skal være, designere måtte gjøre antagelser om sluttbrukerskjermstørrelser. Veldig tidlig 800x600px var mest vanlig. Senere 1024x800px var normen. Arbeid til et rutenett av 960 x fornuftig fordi det passer de fleste skjermer (større skjermer var sjeldne, eiere av mindre skjermer ville bare nødt til å oppgradere til slutt), og var delelig med et utvalg av kolonnebredder. Disse forutsetningene var galt da (tvinge en bruker til å justere deres Tilbake mai 2010 en fyr som heter Ethan Marcotte skrev om en strålende idé han hadde tenkt. Tar eksisterende teknologier og metoder foreslo han en tilnærming "Responsive Web Design" som benyttes flytende oppsett (ikke fast), fleksible bilder (som vokser og krymper med oppsettet) og CSS Media spørringer (som tillater oppsett for å endre avhengig av skjermstørrelsen og andre faktorer). Med disse ideene nettet endret, irreversibelt. Takk til Ethan konsepter, har webdesignere kommet til å innse at de bør tenke fra innholdet utover, ikke side grenser innover (selv om det bør bemerkes at denne tilnærmingen er ikke obligatorisk). Vi vet ikke hvor stor en nettside er, så vi trenger å utforme innholdet vårt for å passe inn uansett grenser det overfor. Tenk på webinnhold som å være som væske; stand til å bli strømmet inn alle slags fartøy. Heri ligger et problem for Photoshop. Photoshop fungerer iboende til faste grenser. Former, type og objekter innenfor sine oppsett er faste, mens websider stadig ikke. Produserer en komp å presentere til en klient som brukes til å bli raskt oppnådd i Photoshop, men hvordan kan du effektivt presentere en dynamisk utforming som et statisk bilde? Typografi er et annet godt eksempel på utskrifts designere prøver å tvinge begrensninger på sluttbrukerne. Hver brukerens nettleser gir dem makt til å sette standardtypen størrelse; tross alt, noen mennesker foretrekker mindre skrift, mens andre kanskje foretrekker en enklere leseopplevelse med større type. Som standard nettlesere vanligvis satt type 16px, så med mindre en designer sier noe annet, eller en bruker endrer standard, det er hvor stor kroppen kopi vil være. Print designere, men har reelle problemer i tilbakelevering denne kontrollen . "Hvordan kan du la brukeren definere størrelsen på den type ?! Har du noen anelse om hva det vil gjøre med resten av oppsettet ?!" Låse ned font-size innen webdesign (gjennom CSS) vil gå langt i å forebygge noe uforutsigbare skjer, men det er neppe brukervennlig. I disse dager er det ansett som beste praksis i størrelse sideelementer og typografi med EM i stedet for piksler; relative måleenheter som er basert på den font-size standard. Derfor, hvis en nettleser tilfeldigvis har en annen standard skriftstørrelse hele konstruksjonen kan bøye som svar på det. Denne fleksibiliteten, igjen, understreker begrensningene i utformingen statiske comps i Photoshop. nett~~POS=TRUNC er utviklingen svært raskt i disse dager og bilder er ikke lenger nødvendig for mange effekter på nettet. CSS er i stand til å produsere nøyaktige graderinger, kurver, skjev objekter, skygger, alfa gjennomsiktighet (listen fortsetter), og dette er like godt gitt tidenes morgen Retina-skjermer. Retina-skjermer (eller mer presist: tetthet skjermer høye pixel) har virkelig kastet en skiftenøkkel i verk for web-designere. Retina-skjermer har dobbelt så mange piksler som vanlige skjermer, slik at de råd til å gjengi alt super-skarp. Noe pixel-basert, men er rett og slett blåst opp dobbelt så bred, dobbelt så høy, noe som resulterer i relativt lavere kvalitet. For at nettsteder, holder seg skarpe, designere er å måtte stole så mye som mulig om hva leseren kan gjengi selv. Faktisk, den siste trenden mot "Flat Design" er (delvis) en reaksjon på dette rent CSS-basert web design. Alt dette tar en enorm mengde av hva Photoshop gjør (produsere punktgrafikk) ut av ligningen. Som vi har nevnt, har nettet gått virkelig globale takket være spredning av mobile enheter. Det har tvunget oss til å innse at vi ikke kan vite under hvilke omstendigheter innholdet vårt er i bruk. Vi vet ikke om våre sluttbruker sitter på sofaen med en Kindle, paragliding med en iPhone eller kjører gjennom Gobi-ørkenen med en MacBook Pro. Vi vet ikke hvor stor skjermen deres er, hva deres prosessor er som og, like, kan vi ikke anta å vite hvor fort deres tilknytning er. Vi begynner å innse at ytelsen er en fundamental del av å designe for web. Igjen, bilder spille en rolle i dette. Hver enkelt eiendel (det være seg et bilde, et manus, et dokument, uansett) som er trukket fra en webserver er kostbart. I stedet for å holde filer som bilder og skrifter i en mappe som heter "eiendeler", jeg 'm kommer til å endre navn på mappen "gjeld" &ndash.; Jeremy Keith (adactio) 18 februar 2013 Ikke bare skal de være optimalisert for å være så liten som mulig, men de bør også være som noen Det kan bli hjulpet, ved å kombinere bildefiler til enkelt sprites, men (igjen) retina skjermer tvinge en slags backup plan. I stedet blir effekten bedre oppnås med CSS, kan ikonene bygges gjennom web fonter, logoer kan gjennomføres som skalerbar vektorgrafikk, som alle staver slutten for stykket verktøyet. Tilbake når webdesign arbeidsflyt var effektivt det samme som print med internett tacked på slutten, designe layouter i Photoshop ble en integrert del av prosessen: i disse dager, med mindre av det endelige resultatet avhengig av eiendeler bygget i et grafikkprogram, designe en hel layout i Photoshop betyr effektivt doble din innsats. Bygg den en gang for å få en idé om hva det vil se ut, og deretter bygge det på ordentlig. Deretter kaster PSD bort fordi det er ikke bruk for noen. Adobe var enten å motstå endring, eller bare prøver å være imøtekommende, da de innførte noen web design funksjoner i CS6. Den CSSHat lignende CSS utgang Panelet kan du hente koden fra dine visuelt opprettet sideelementer. De har også gjort det mulig å lime inn en hex farge (kopiert fra nettleseren) inkludert hashtag (# ffffff for eksempel) i Photoshop fargevelgeren uten å kaste en feil. Avsnittsstiler (litt som i InDesign) ble innført for å gi mer global kontroll over typografi. Lorem Ipsum funnet sin vei inn som en standardfunksjon, og nå kan du selv velge vanlige enhets dimensjoner som dokumentforhåndsinnstillinger Men vi er i fornektelse her - det er en stor blå elefant stående i hjørnet av rommet. Det vi faktisk ser på her, er ikke et program som ikke klarer å passe web design, men en arbeidsflyt som er ingen lenger er hensiktsmessig. Faktisk, selv før nettet gikk all væske og spretne det var grunnleggende feil i Photoshop webdesign prosess som vi har beskrevet det. Det var en tendens til å skape pixel perfekte gjengivelser av nettsider før bygging kan selv begynne. Og så, på grunn av den besettelse med å få alt 100% perfekt i Photoshop, det ville være en lignende fanatisme for å oppnå identiske resultater i alle nettlesere. Det har tatt oss lang tid å innse at nettsider ikke trenger å vises identisk i alle nettlesere! En alvorlig sak med sikte på perfeksjon i Photoshop oppstår når kunden blir involvert. Denne arbeidsflyten gjør det altfor lett å bli sittende fast i en uendelig løkke av kunder gjør pixel-skyve forslag, uunngåelig miste synet av det store bildet. Hva kreves er en mer modulær tilnærming til webdesign og Photoshop kan absolutt spille en rolle i det. Tenk første planleggingsstadiet; innhenting av informasjon og innhold, skisser relasjoner mellom områder av nettstedet som helhet - en viktig del av denne modulære prosess, men best gjennomføres fra Photoshop. Wireframing tar prosessen videre; legge ut rudimentære grensesnittelementer, etablere visuelle relasjoner, hierarki og grunnleggende samspill. Igjen, dette er ikke en oppgave Photoshop utfører svært godt, i stedet gjør vei for applikasjoner som OmniGraffle og Balsamiq, selv Illustrator (og det er mange flere). Photoshop gir seg langt bedre til estetikk. Det kan ikke beskrive oppsett flyter bedre, men det kan utforske farger, teksturer, individuelle element stiler, typografi, atmosfære og stemning. Stil Fliser er et konsept foreslått av Samantha Warren. De er i hovedsak Photoshop humør boards, men markere en måte å isolere og presentere det estetiske fasen til klienten Den neste modul i denne arbeidsflyten er prototyping.; bygge grunnleggende, men funksjonelle planløsninger for nettleseren. Og nei, dette er ikke Photoshop kopp te heller. Faktisk er Adobe travelt jobber med en alternativ linje av programmer for å hjelpe ut her. Deres Edge Tools mål å tilby et kjent lerret grensesnitt, som sender ut flyter bedre for leseren; ideell for rask prototyping, men fortsatt veldig mye et arbeid som pågår. Hver av disse modulære stadiene tar en del av designprosessen, isolerer det og tungt involverer kunden, gi dem rikelig anledning til å melde seg ut på hvert trinn uten å påvirke de andre. Gjør oppmerksom på at dette er et forslag til arbeidsflyt, ingenting er skrevet i stein hvor design er bekymret, og det er ofte mer involvert enn disse generelle stadier. Som fører meg til min avsluttende punkt. Alle designprosessen er svært personlig og hva som fungerer for noen andre vil ikke nødvendigvis fungere for deg. Det er nok av folk ringer for en slutt på web design i Photoshop, valgkamp for et internettbasert arbeidsflyt i stedet. Faktum er, hvis Photoshop fungerer for deg, bruk den! På slutten av dagen, vi er designere - hvis vi ønsker å bruke hundrevis av arbeidstimer presser piksler og polering vår Dribbble portefølje, la oss tillate oss å glede seg over at i å lære mer om Photoshop og dens forhold til webdesign Interessert? Ta en titt på artiklene nedenfor.
faktisk bygge for web? Dagens designere har vokst opp med å bruke Photoshop fordi det tilbys den raskeste måten å visualisere en hi-fi-designkonsept
kuhboom.com:.. Tett strukturerte web design vil ha deg nå for stykket verktøy
The Legacy av Print design
Hva er dens begrensninger?
En Fluid Web
surfing til din
utforming ?!), og er enda mer så i disse dager. Hvor stor er en web-side i dag?
Fra Brad Frost Dette er Web
The Next Web som presenteres av mediaqueri.es
Problemet med Pixels - i
The problem med Pixels - II
Designmodo Flat UI kit
Ytelse basert design
som mulig . Nettlesere er begrenset i mengden av eiendeler de kan samtidig
nedlasting, ofte bare to til enhver tid. Hvis websiden din inneholder hundrevis av enkeltbilder de vil danne en flaskehals, til slutt levere en negativ opplevelse for sluttbrukeren.
Dobling av Arbeidet
Familiar verktøy ment relativt raske oppsett.
presentere statiske comps til klienten var mye det samme som å presentere utskriftsoppsett.
Pixel presisjon mente at målinger kan bli brukt direkte til leseren tilsvarende.
faktiske eiendeler var skiver fra layout comps for bruk i web siden.
Legge til Toolkit
Det er tid for en modulær, fleksibel arbeidsflyt
Uansett virker!
Videre Reading
Ta del i denne undersøkelsen forme fremtiden for web design, på nettet
< li> Designing i nettleseren er ikke svaret av Andy Budd
Responsive Leveransen av Dave Rupert
Element collager av Dan Mall
er Photoshop død? Javier Ghaemi