Jag antar att en mer lämplig titel kan vara "är Photoshop fortfarande ett lämpligt verktyg för att utforma typografi på webben?" Men det saknar den dramatiska överklagandet av ovanstående.
Precis som många av er har jag alltid använt Photoshop för att skapa mock-up kompositioner av mina mönster. Så länge jag kan komma ihåg har det varit industristandarden och programvaran som valts för de flesta designers jag har arbetat med. Jag har tillbringat veckor som utformar pixel perfekta layouter, grupperar element i hierarkiska mappar och märker alla mina lager för att göra övergången från vacker mock up till kod så smidig som möjligt.
Jag skulle vara full av entusiasm, energi och spänning som förklarar mina mönster till en utvecklare, växelskikt till och från för att försöka illustrera min vision genom Photoshop, men skulle alltid bli lite besviken, eftersom min glänsande, polerade design förvandlades till vad jag skulle se i webbläsaren. Visst, det skulle se ut som min design ... Och jag kände igen kännetecknen men det saknade den skärpa som jag minns från mina kompositioner. Det var inte så att utvecklarna inte hade kodat det bra, mer att den typografi jag skapat i Photoshop inte hade översatt till kod.
När du väljer typsnitt det finns få saker viktigare än om en typsnitt är lätt läsbar eller inte. I Photoshop är det inte så mycket av ett problem eftersom allt ser bra ut. Det spelar ingen roll vilken typ av teckensnitt du använder, i vilken storlek eller vikt (inom förnuft) som det kommer att göra perfekt på skärmen.
Tyvärr sträcker det sig inte till webbläsaren. Ofta när jag tittar på min design i webbläsaren var relationerna mellan element och typ felaktiga. Skriftstorlekarna och raderna som jag hade tillskrivit stilar i min Photoshop-komposition skulle inte se ut som de skulle i webbläsaren. Om jag hade angett en 20 pixelmarginal ovanför titeln i mina mönster, kan det avståndet ha ändrats eftersom linjens höjd i rubriken skulle ha en effekt på marginalens storlek, något som inte skulle hända i Photoshop. Jag skulle då behöva starta den långa och tråkiga processen med de fruktade "design tweaks".
Lita på mig, det är inte bara utvecklaren som shirks vid tanken på en formgivare som sitter bredvid dem och ber dem att "öka kroppens kopieringslinjehöjd med två pixlar" och sedan ha utvecklaren CSS-förändringen och begå .... Stiga på. "Egentligen, 1 pixel mindre" ... Ange. "Kanske var det bättre hur det var". Denna typ av tweaking av CSS bit för bit för att se resultaten i realtid via webbläsaren är tidskrävande och inte bidrar till kreativitet. Utvecklarna blir snabbt trött på att spendera dagen och ändrar det som de ser som de minsta detaljerna som inte kommer att göra någon skillnad, och designers kan inte experimentera genom att snabbt och enkelt byta typsnitt och stilar för dem som kommer att göra bättre i webbläsaren.
För designers som har en förståelse för CSS kan du använda verktyg som Pyroman för att effektivt skapa egna design tweaks i webbläsaren och notera alla CSS-ändringar i ett dokument som du sedan kan vidarebefordra till en utvecklare att implementera. Det här är faktiskt detsamma som att sitta med en utvecklare och göra CSS förändringar men betydligt mindre tråkiga för utvecklaren och kommer också att tillåta designern att experimentera vidare med storlekar och stilar innan man fattar ett beslut. Även om det här är ett bra verktyg för att inspektera och ändra delar av HTML och CSS, kommer du att förlora alla ändringar du gör när webbläsaren uppdateras. Det kan vara väldigt irriterande om du har ändrat många element och inte noterat alla dina justeringar.
Du kan använda Firediff plug-in för att spara en rekord över alla förändringar som du gör inom Firebug, vilket är bra eftersom det sparar dig att behöva notera alla ändringar i ett separat kalkylblad för senare. Den största problemet med den här metoden är när du börjar presentera webbfonter i ekvationen eftersom valfria teckensnitt måste installeras i ditt typsats eller de kommer inte att visas i webbläsaren. Detta gör sakerna svårare och mindre gratis att experimentera enkelt med olika teckensnitt, eftersom du inte bara kan snabbt prova teckensnitt.
Tjänster som FASTNA I SITT ROLLFACK göra det mycket enklare för designers att arbeta med webbfonter och jag gör ganska mycket min typografi för webben med den. Det gör att du kan skapa typografiska mock ups (precis som du skulle i Photoshop) med hjälp av dess visuella gränssnitt för att tilldela typsnitt, stilar, vikter, färger, linjens höjd, marginal, vaddering och mer till din typografi. Det bästa med att använda Typecast är att det hela fungerar inom webbläsaren så att du fattar beslut på typ exakt som det kommer att göras för användaren. Ser ett visst teckensnitt inte för varmt på 19 pixlar? Bump det upp till 20 med ett klick av en knapp, tillbaka till 19 innan du äntligen bestämmer dig om 18 pixlar i storlek, allt gjort i sekunder i stället för timmar som sitter med en utvecklare.
Du kan använda alla webbfonter från sina samlingar med 23 000 teckensnitt, inklusive Google-teckensnitt, Typekit och mer i dina kompositioner, vilket gör experimenten snabbt och enkelt (de har nyligen köpts av Monotype som äger Fonts.com och Myfonts, så förvänta sig många fler teckensnitt på vägen snart). Typecast enligt min mening introducerar en uppfattning om lekfullhet tillbaka till typografi eftersom det uppmuntrar dig att försöka få typsnittvariationer, som du aldrig har upptäckt om de inte var så lättillgängliga och lätt utbytbara som de är.
En annan mycket användbar funktion för typecast är möjligheten att visa och redigera CSS av din typ. Du kan lägga till bakgrundsfärger och bilder, sväva tillstånd eller till och med övergångar genom att helt enkelt redigera CSS-panelen. När du är nöjd med din skapelse kan du enkelt exportera och spara CSS-koden, som sedan kan laddas upp till din webbplats eller skickas till en utvecklare och eftersom allt har utformats i webbläsaren visas det exakt som du tänker på det.
Photoshop är inte industristandarden för ingenting, och det kommer att finnas några av dig där ute hyperventilering vid tanken på att släppa den för att designa i webbläsaren, trots allt är vi kreativa inte kodare. Tja ner papperspåsen eftersom det fortfarande finns ett sätt att skapa vacker typografi med hjälp av webbfonter i Photoshop. Extensis har skapat ett plug-in som kan installeras i Photoshop-versionerna CS5 och högre som ger dig tillgång till alla WebINK- och Google-webbfonter för att användas gratis, direkt i Photoshop.
Det innebär att du kan använda någon av WebINK eller Googles webbfonter i dina designkompositioner som du skulle ha några teckensnitt som är installerade på ditt system och de kommer att visas ungefär samma som det borde se i webbläsaren. Plugin-programmet ger dig bara tillgång till WebINK- och Google-webbsidor, men på plussidan uppdaterar den automatiskt nya teckensnitt som de läggs till i WebINK och Googles bibliotek av teckensnitt.
En annan värdefull plug-in som hjälper till att underlätta övergången mellan Photoshop-kompositioner och CSS-kompatibel med webbläsare är det gratis, molnbaserade plugin-programmet från css3ps.com . En av de främsta orsakerna till att många designers arbetar med Photoshop är den kontroll du har över lager och formelement. Att enkelt och snabbt experimentera med skugga, glöd, färg, textur, rundade hörn och mer är nästan andra naturen till de flesta och något som till och med upplevde designers kämpar för att replikera exakt i webbläsaren. För dem är denna plug-in perfekt eftersom den låter dig skapa dina kompositioner på det sätt som du vet bäst, men låt oss enkelt konvertera din forms format till webbläsarkompatibel CSS3. Denna metod är idealisk för att utforma knappar, navigering eller något annat som du kanske har utformat en form för.
Kanske finns det fortfarande en roll för Photoshop som ett verktyg för att utforma webblayouter, men vad gäller utformning av typografi för webben har applikationer som Firebug och Typecast övertaget det. Den tid det tar att uppdatera statiska kompositioner kan bara inte jämföras med hur snabbt och enkelt du kan göra ändringar i webbläsaren. För de av er som bara inte ens kan nämna idén att designa i webbläsaren, bör plug-ins ovan åtminstone ge Photoshop den boost som den behöver för att vara relevant och hjälpa till att underlätta övergången.
Användar du Photoshop för att designa webbplatser? Är Photoshop vägen för Flash? Låt oss veta i kommentarerna.
Utvalda bild / miniatyrbild, användningar död bild via Shutterstock.