Share
Webben har genomgått några allvarliga förändringar under de senaste åren och hur webben utformas förändras tillsammans med den. Photoshop kan fortfarande vara "go-to" -verktyget för många webbdesigners, men för vissa är Photoshop inte längre kung. I den här artikeln kommer Ian Yates, redaktör för Webdesigntuts + att förklara hur Photoshop användes tidigare, hur det kan användas i framtiden och varför.
Tekniskt sett är Photoshop en applikation för att manipulera bilder (förlåt mig för att säga det uppenbara där), men det är också fullt med verktyg för att bygga grafik från början. Form, vektor, typ, fyllningar och effekter, alla dessa (och flera) lånar sig mycket bra för att konstruera grafiska layouter.
Inte för länge sedan kunde webbläsare inte direkt generera dessa typer av effekter själva, men de kunde visa bitmappsbilder perfekt. För att utforska grafisk design i en webbläsare var det bara logiskt att nå Photoshop, skapa dina bilder, spara dem som bilder och använda dem på en webbsida.
Gradienter, skuggor, mönster, vinklar; allt lätt att skapa med Photoshops verktyg - inte för lätt att skapa med något annat.
Att bygga på nätet var också relativt komplicerat (långt mindre strömlinjeformat än idag) så det är alltid lättare och snabbare än att kämpa med Dreamweaver. Varför skulle du inte designa i en grafikapplikation, få godkännande från klienten, sedan faktiskt bygga för webben? Dagens designers har vuxit upp med Photoshop eftersom det erbjöd det snabbaste sättet att visualisera ett högkvalitativt designkoncept.
kuhboom.com: Densely texturerad webbdesign kommer att nå dig för skivverktyget. Tillbaka när webben var ett framväxande medium fanns inga "webbbyråer", så uppgiften att skapa det föll för att skriva ut designers. Dessa killar gjorde vad som var logiskt; De tog sin digitala tryckdesigns erfarenhet, värderingar, tekniker, processer och verktyg och tillämpade dem på den här modiga nya världen. De skickade effektivt utskriftsdesign till skärmen, så arbetsflödet existerade redan:
Allt som behövde förändras var slutprodukten. Som sådan bevittnade Photoshop förändringarna och gick tillsammans för att rida sig vidare som den grafiska formgivarens bästa vän.
Tider de är a-changin "(som Bob Dylan sa). Webben är en annorlunda plats idag och Photoshops roll i processen att designa för den webben ändras också. Varför?
En stor del av frågan ligger i tekniska framsteg som har drivit stor förändring i webbdesign de senaste åren. Vi har sett internet växa från ett bibliotek med statiska dokument till en interaktiv tjänstepolicy. Nätverksleverantörer har spritt sina fingrar i nästan alla hörn av världen, bandbredd och hastighet har ökat till science fiction-liknande nivåer. Internetaktiverade enheter som smartphones, tabletter, jämn klockor, tillverkas billigt och snabbt. Allt detta har revolutionerat hur vi använder webben - och det har drastiskt förändrat vår uppfattning om hur vi ska utforma för det.
Utskriftsdesigners börjar med begränsningar (de fasta dimensionerna på en sida) och sedan utformas inom dem. När du först designade för webben var det också en logisk utgångspunkt. skapa en fast duk och arbeta inåt. För att ta reda på vad de fasta dimensionerna borde vara, skulle designers göra antaganden om slutanvändarens skärmstorlekar. Mycket tidigt på 800x600px var vanligast. Senare var 1024x800px normen. Att arbeta till ett nät på 960px var förnuftigt eftersom det passade de flesta skärmar (större skärmar var sällsynta, ägare av mindre skärmar skulle bara behöva uppgradera så småningom) och delades med en rad kolumnbredder.
Dessa antaganden var fel då (tvinga en användare att justera deras surfar till din design ?!) och är ännu mer så idag. Hur stor är en webbsida idag?
Från Brad Frost's Detta är webben Tillbaka i maj 2010 skrev en kille som heter Ethan Marcotte om en strålande idé som han hade tänkt. Med hjälp av befintlig teknik och metoder föreslog han ett tillvägagångssätt "Responsive Web Design" som utnyttjade vätskeformat (ej fixad), flexibla bilder (som växer och krymper med layouten) och CSS Media Queries (vilket gör att layouter kan ändras beroende på skärmstorlek och andra faktorer).
Med dessa idéer förändras webben, irreversibelt.
Tack vare Ethans koncept har webbdesigners kommit att inse att de borde tänka från innehåll utåt, inte den sidgränser inåt (även om det bör noteras att detta tillvägagångssätt inte är obligatoriskt). Vi vet inte hur stor en webbsida är, så vi behöver designa vårt innehåll för att passa in i vilka gränser det står inför. Tänk på webbinnehåll som att vara som flytande; kunna hällas på alla sätt av kärl.
Här ligger ett problem för Photoshop. Photoshop arbetar i sig med fasta gränser. Former, typer och objekt inom dess layouter är fasta, medan webbsidor allt oftare inte är. Att producera en kompis som presenteras för en klient brukade snabbt uppnås i Photoshop, men hur kan du effektivt presentera en fluid layout som en statisk ögonblicksbild?
Nästa webb som presenteras av mediaqueri.es Typografi är ett annat bra exempel på tryckdesigners som försöker tvinga begränsningar till slutanvändare. Varje användares webbläsare ger dem möjlighet att ställa in sin standardtypstorlek; Trots allt föredrar vissa människor mindre bokstäver, medan andra kanske föredrar en lättare läsupplevelse med större typ. Som vanligt ställs webbläsare typ på 16px, så om inte en formgivare säger något annat, eller en användare ändrar standardvärdet, så blir det så stor kroppskopia.
Utskriftsdesigners har emellertid verkliga svårigheter att avstå från kontrollen. "Hur kan du låta användaren definiera storleken på typen ?! Har du någon aning om vad som kommer att göra med resten av layouten ?!"
Att låsa upp teckensnittet i en webbdesign (via CSS) kommer att gå långt för att förhindra att något oförutsägbart händer, men det är knappast användarvänligt. Dessa dagar anses det vara bästa praxis att dimensionera sidelement och typografi med ems istället för pixlar; relativa måttenheter som är baserade på standard typsnittstorlek. Därför om en webbläsare råkar ha en annan standardstorlek, kan hela designen flexera som svar på det.
Denna flexibilitet belyser återigen begränsningarna för att utforma statiska comps i Photoshop.
Webbläsare utvecklas väldigt snabbt idag och bilder behövs inte längre för många effekter på webben. CSS kan producera korrekta gradienter, kurvor, snedställda föremål, skuggor, alfabetisk genomskinlighet (listan fortsätter) och det är lika bra med början på Retina-skärmarna. Näthinnan (eller mer noggrant: skärmar med hög pixeldensitet) har verkligen kastat en nyckel i verk för webbdesigners. Näthinnesskärmar har dubbelt så många pixlar som normala skärmar, vilket gör att de är lyxiga för att göra allt superskarpt. Något pixelbaserat blåses dock helt enkelt dubbelt så stort, dubbelt så högt, vilket resulterar i relativt lägre kvalitet.
För att webbplatser ska behålla sin skärpa måste designersna lita så mycket som möjligt på vad webbläsaren kan göra sig själv. Faktum är att den senaste tiden mot "Flat Design" (delvis) är en reaktion på den här rent CSS-baserade webbdesignen.
Allt detta tar en enorm del av vad Photoshop gör (producerar bitmaps) ur ekvationen.
Designmodos Flat UI-kit Som vi har nämnt har webben blivit riktigt global tack vare spridningen av mobila enheter. Det har tvingat oss att inse att vi inte kan känna till omständigheterna under vilka vårt innehåll är tillgängligt. Vi vet inte om vår slutanvändare sitter på soffan med en Kindle, paragliding med en iPhone eller går igenom Gobi-öknen med en MacBook Pro. Vi vet inte hur stor skärmen är, hur processorn är, och vi kan inte heller anta hur snabbt deras anslutning är.
Vi börjar att inse att prestanda är en grundläggande del av designen för webben. Igen spelar bilder en roll i detta. Varje enskild tillgång (det är en bild, ett manus, ett dokument, vad som helst) som dras från en webbserver är dyrt.
I stället för att hålla filer som bilder och teckensnitt i en mapp som heter "tillgångar", kommer jag att byta namn på mappen "skulder".
- Jeremy Keith (@adactio) 18 februari 2013
Inte bara bör de optimeras för att vara så små som möjligt, men de borde också vara som få som möjligt. Webbläsare är begränsade i det antal tillgångar de kan samtidigt ladda ner, ofta till bara två vid en viss tidpunkt. Om din webbsida innehåller hundratals enskilda bilder bildar de en flaskhals som slutligen ger en slutanvändare en negativ upplevelse.
Detta kan hjälpas genom att kombinera bildfiler till enkla sprites, men (igen) retina skärmar tvinga någon form av backup plan.
Istället är effekter bättre uppnådda med CSS, ikoner kan inbäddas via webbfonter, logotyper kan implementeras som skalbar vektorgrafik, som alla stavar slutet för skivverktyget.
Tillbaka när webbdesignerns arbetsflöde var effektivt detsamma som att skriva ut med internet kladdade på slutet var utformningen av layouter i Photoshop en integrerad del av processen:
Dessa dagar, med mindre av det slutliga resultatet som bygger på tillgångar som är inbyggda i en grafikapplikation, innebär utformning av en hel layout i Photoshop effektivt att fördubbla dina ansträngningar. Bygg det en gång för att få en uppfattning om hur det kommer att se ut, bygg sedan det för riktigt. Släng sedan PSD-enheten bort eftersom det inte är till nytta för någon.
Adobe motsatte sig antingen förändringar eller försökte vara tillmötesgående när de introducerade några webdesignfunktioner i CS6. Den CSSHat-liknande CSS-utgångspanelen gör att du kan ta tag i koden från dina visuellt skapade sidelement. De gjorde också det möjligt att klistra in en hex färg (kopierad från webbläsaren) inklusive hashtag (#ffffff till exempel) till Photoshops färgplockare utan att kasta ett fel.
Styckestilar (lite som i InDesign) introducerades för att ge mer global kontroll över typografi. Lorem Ipsum hittade sig som en standardfunktion och nu kan du även välja vanliga enhetsdimensioner som dokumentinställningar!
Men vi är förnekade här - det finns en stor blå elefant som står i hörnet av rummet.
Vad vi faktiskt tittar på här är inte en applikation som inte passar webbdesign, men ett arbetsflöde som inte längre är lämpligt. Faktum är att faktiskt, även innan webben var allt vätske och trasa, fanns det grundläggande brister i Photoshop webbdesignprocessen som vi har beskrivit det. Det fanns en tendens att skapa pixel perfekt återgivning av webbsidor innan byggnaden skulle kunna börja. Och då, på grund av tvånget att få allt 100% perfekt i Photoshop, skulle det finnas en liknande fanatik för att få identiska resultat i alla webbläsare. Det har tagit oss lång tid att inse att webbsidor inte behöver vara identiska i alla webbläsare!
En allvarlig fråga med sikte på perfektion i Photoshop uppstår när kunden blir involverad. Detta arbetsflöde gör det alltför lätt att fastna i en oändlig slinga av kunder som gör pixel-pushing förslag, oundvikligen förlorar syn på den stora bilden.
Vad som behövs är ett mer modulärt tillvägagångssätt för webbdesign och Photoshop kan absolut spela en roll i det. Tänk först på planeringsstadiet; samla information och innehåll, skissera relationer mellan områden på webbplatsen som helhet - en viktig del av denna modulära process, men bäst utförd borta från Photoshop.
Wireframing tar processen vidare; lägga ut rudimentära gränssnittselement, skapa visuella relationer, hierarki och grundläggande interaktion. Återigen är det här inte en uppgift som Photoshop utför mycket bra, istället ger plats för applikationer som Omnigraffle och Balsamiq, även Illustrator (och det finns många fler).
Photoshop ger sig mycket bättre till estetiken. Det kan inte beskriva layouter flytande, men det kan utforska färger, texturer, individuella elementstilar, typografi, atmosfär och humör. Style Tiles är ett koncept som föreslås av Samantha Warren. De är i grunden Photoshop humörbrädor, men lyfter fram ett sätt att isolera och presentera den estetiska fasen för klienten.
Nästa modul i detta arbetsflöde är prototyping; bygga grundläggande men funktionella layouter för webbläsaren. Och nej, det här är inte heller Photoshops kopp te. Faktum är att Adobe arbetar med en alternativ applikationslinje för att hjälpa till här. Deras Edge Tools syftar till att erbjuda ett välbekant dukgränssnitt, som utmatas fluidivt för webbläsaren; perfekt för snabb prototypning, men fortfarande mycket arbete pågår.
Vart och ett av dessa modulära steg tar en aspekt av designprocessen, isolerar den och involverar starkt klienten, vilket ger dem gott om möjligheter att skriva ut på varje steg utan att påverka de andra.
Observera att det här är ett förslag till arbetsflöde, ingenting är skrivet i sten där design berörs och det är ofta mer involverat än dessa allmänna steg. Vilket leder mig till min slutpunkt.
Varje designprocess är extremt personlig och vad som fungerar för någon annan kommer inte nödvändigtvis att fungera för dig. Det finns gott om människor som kräver ett slut på webbdesign i Photoshop, istället för kampanj för ett webbläsarbaserat arbetsflöde. Faktum är att, om Photoshop fungerar för dig, använd det! I slutet av dagen är vi designers - om vi vill spendera hundratals arbetstimmar som trycker på pixlar och polerar vår Dribbble-portfölj, låt oss tillåta oss att lyssna på det!
Intresserad av att lära sig mer om Photoshop och dess relation till webbdesign? Ta en titt på artiklarna nedan.
Accentsconagua