Den andra dagen sa en kompis till mig något som fick min uppmärksamhet:? Jag försöker lära mig hur man skar en PSD.? Det är ett tillräckligt enkelt uttalande. Så snart han sa det visste jag exakt vad han pratade om, och ändå var det något där inne som inte stämde rätt.
När jag såg min tvekan svarade min vän med en fråga,? Skarar vi fortfarande PSD? Stor fråga! För nybörjare är jargong inte bara jargong, det innebär en process och föreslår en metod för handling. Av denna anledning är det ofta användbart för mer avancerade utvecklare att definiera sina villkor på ett sätt som är meningsfullt för andra. Idag dyker vi in i teorin bakom processen att konvertera en PSD till en webbsida och sluta med en diskussion om upp- och nedgångar i utformningen i webbläsaren.
Vår provfil
Vi kommer inte att faktiskt konvertera en PSD till HTML / CSS idag, vi diskuterar bara hur och varför så att du helt kan förstå det typiska tillvägagångssättet som dagens webbdesigners tar.
Jag behövde en PSD som referens i hela artikeln så att jag tog tag i den fantastiska gratis Creative Studio Minimal PSD från GraphicsFuel.com.
Vad är skivning?
Det första vi ska prata om är vad det betyder att? Skiva? en PSD. Löst sagt betyder termen helt enkelt att hugga upp ditt Photoshop-dokument i bitar, vilket sedan får serveras upp till webbservern, läggs i ordning med HTML och stylas / positioneras av CSS.
På en mer specifik nivå kan skivning referera till en specifik uppsättning verktyg inuti Photoshop. Med hjälp av skivverktyget kan vi partitionera vårt dokument upp i små bitar. I grund och botten ritar vi bara en rektangel kring varje objekt som vi vill separera i en enskild bild.
Varför skiva?
Skärverktygen i Photoshop är bara där för enkelhets skyld. Det finns massor av bra webbdesigners idag som aldrig rör dem och det är inget fel med det.
Poängen bakom skärverktygen är att göra processen att spara en massa bilder lättare, både på kort sikt för den ursprungliga byggnaden och i längden för att göra ändringar. I grund och botten, vad det gör är att spara dig besväret med att beskära varje del manuellt och spara det.
Trots att processen är typ av smärta måste jag erkänna att en snyggt skivad PSD är en skönhet. Här är ett tydligt exempel där jag har flera element som behöver sparas som bilder. Utan skivning skulle varje av dessa representera en gröda och spara process som jag måste gå igenom.
När de är skivade kan en enda Save For Web-åtgärd konvertera alla dessa skivor till fristående bildfiler. Detta minskar verkligen din tid på den repeterande uppgiften att beskära och spara om du arbetar med en enda Photoshop-fil som din källa.
Gör skivor suger mindre
Om du fortfarande är osäker på Photoshop-skivverktygen eller tror att det är allt ett stort slöseri med tid, bör du kolla in vårt stycke med titeln "Hur man gör skivning suger mindre: Tips och tricks för skivning av en PSD.
I den artikeln förklarar jag grundligt processen med skivning och hur alla Photoshops skivverktyg fungerar. Viktigast, du får en titt på några bra tips om hur man gör skivningsprocessen mycket bättre. Saker som lagerbaserade skivor och gömmer Auto Skivor går verkligen långt för att göra det till en bearable process.
Varför skivning är gammal skola
Så det skivar. Nu när du vet vad det handlar om, är det dags att utforska hur denna process har förändrats genom åren till en punkt där skivning är en fundamentalt annorlunda aktivitet än vad den tidigare var.
En gång i tiden använde ingen CSS (jag vet, skräcken!). Även när CSS kom med, var verktygen som den tillhandahöll webbdesigners ganska begränsade jämfört med vad vi vet idag.
Följaktligen brukade webbplatser som försökte driva gränserna genom att inte se ut som skit brukade använda massor av bilder. Varje gång en design innehöll en anpassad typsnitt, enkel gradient, droppe skugga eller rundat hörn, måste en bild användas för att dra effekten av i webbläsaren.
Därför var skivning en stor sak. När du skapade en Photoshop-mockup på en webbplats, om du bestämde dig för att implementera någon form av estetisk isbildning, som var enorm före den minsta sparken vi är på nu, var du tvungen att skära varje liten del av din design upp i små bitar som du brukade sedan använda HTML-tabeller för att rekonstruera. Brutal rätt? Särskilt när du anser att vi var alla på otroligt långsamma webanslutningar då så tog alla dessa bilder åldrar att ladda.
CSS dödar bilden
När CSS utvecklades och växte, kom en ny trend upp i webbdesign: imageless design. Om du tittat på designbloggar för några år sedan så skulle du se massor av artiklar med titeln något liknande,? Skapa en Fancy Button utan bilder !? Till denna dag ser du fortfarande titlar som denna pop oss som människor utför otroliga prestationer med CSS.
Denna trend skulle inte vara möjlig utan de fantastiska CSS-funktionerna som vi nu tycker om. Plötsligt kan du runda hörn, lägga till skuggor, implementera flera bakgrunder, bygga gradienter, använda egna teckensnitt och mycket mer med ren kod. Det allmänna målet för många webbdesigners är att utnyttja CSS och använda så få bilder som möjligt i vår uppställning. ? Bildlösa? är inte nödvändigtvis något att uppnå (du behöver nästan alltid några bilder) men snarare strävat efter, vilket betyder dig rent generellt vill komma så nära det som mänskligt möjligt samtidigt som stöd hålls högt.
Fördelar och nackdel med obekväm design
Denna trend kommer med upp och ner. Uppsidan är att CSS, trots vad icke-kodare kan tro, är ett vackert enkelt sätt att underhålla och anpassa en design på lång sikt. Om du vill ändra något litet som ett teckensnitt eller en bakgrundsfärg hittar du bara / ersätter några rader kod och du är bra att gå.Det finns också den fördel att även tusentals linjer av CSS kan minimeras till den punkt som dess effekt på lastningstider är nästan försumbar.
Den enorma, inte att vara underskattad nackdel är kompatibilitet. Med bilder var PNG ganska mycket det enda vi var tvungna att oroa oss för (förutom laddningstider förstås). Nu med CSS har vi supportproblem över hela linjen. Webbläsare som stöder en ny funktion gör det bara med ett unikt prefix, vilket gör löjligt repeterande kodning, många funktioner är endast tillgängliga på en enda webbläsarmotor, andra stöds överallt men IE (vissa saker ändras aldrig); det kan vara en riktig röra.
Det ultimata målet är att hålla vad som är bäst för användaren i åtanke. Om du använder en bild för någonting, resulterar du i den största mängden bra för de flesta. Gå till det.
Mindre bilder, mindre skivning
På grundval av denna grund för information kan vi äntligen ta upp frågan huruvida webbdesigners fortfarande delar PSD-filer eller inte.
För det mesta, när vi tittar på ett Photoshop-dokument som är tänkt att konverteras till en webbplats, försöker vi att se kod där det är möjligt. Det är just nu i matrisen där Neo tittar på vad han en gång såg som den vanliga världen och plötsligt ser koden bakom den. Webdesigners ser inte lager och lagereffekter, vi ser divs och CSS-egenskaper.
Med tanke på att så är fallet är majoriteten av arbetet med att ta en statisk design levande mer inom ramen för ombyggnad än skivning. Istället för att skära den glänsande knappen och betjäna den som en bild, använder jag CSS för att bygga om den från början. Denna process upprepas över hela webbplatsen, ofta med bilder som används främst för faktiskt innehåll snarare än design (även om det fortfarande finns gott om du kan / ska inte göra med ren CSS).
Designa i webbläsaren
Frågan som utan tvekan kommer att komma i åtanke för många webbdesign nybörjare som de läser om denna process är självklart,? Är inte detta allt lite repetitivt ?? Först designar och bygger du en webbplats i Photoshop, Illustrator, Fireworks (ja, jag kommer ihåg att Fireworks är bra för webbinnehåll så skrika inte på mig i kommentarerna) eller något annat layoutverktyg du väljer, då börjar du i princip webbläsaren och bygga om det du just skapat med hjälp av kod istället för bilder där det är möjligt.
Svaret är en rungande? Ja.? Resultatet är en rörelse för människor som uppmuntrar till att flytta designprocessen direkt till webbläsaren. Börja med kod, avsluta i kod, använd endast Photoshop när du behöver skapa en bild och nästan eliminera all denna repetitiva nonsens.
Jag är allt för den här processen. Det är supermager och effektiviserar verkligen ditt arbetsflöde. Tyvärr är det inte alltid lätt att få den kreativa sidan av din hjärna att producera ditt bästa arbete med denna metod. Sarah Parmenter tog nyligen upp det här problemet i sitt inlägg,? Jag kan inte designa i webbläsaren? där hon avslöjar den? skyldiga hemligheten? att även om Photoshop inte är ett bra sätt att visa den typ av dynamiskt och lyhörd webbinnehåll som kunder behöver idag bidrar det till mer kreativitet än att gå direkt till HTML och CSS.
Hur designar du webbplatser?
Detta inlägg representerar ett långt svar på vad som verkade vara en enkel fråga. Men under den frågan är något som vi alla kämpar med på senare tid, från nybörjare till proffs: Vad är den bästa processen för att designa en webbplats? Ska den kreativa designprocessen skilja sig från kodningsprocessen eller ska de vara samma och samma? Ska vi bygga mockups i en layoutapplikation och sedan skära upp dem för webbläsaren eller finns det ett bättre sätt? Är Fireworks verkligen svaret eller är det fortfarande en saknad lösning?
Jag vill höra dina tankar om detta. Hur ser ditt nuvarande arbetsflöde ut, från början till slut? Var börjar du designprocessen och hur går det till en levande webbplats? Vilka verktyg hittar du ovärderliga på vägen? Vad skulle ditt perfekta webbdesignverktyg vara?