Ik vermoed dat een meer geschikte titel kan zijn 'is Photoshop nog steeds een geschikt hulpmiddel voor het ontwerpen van typografie op het web?' Maar dat mist de dramatische aantrekkingskracht van het bovenstaande.

Zoals velen van jullie, heb ik altijd Photoshop gebruikt om mock-up composities van mijn ontwerpen te maken. Zolang ik me kan herinneren is dit de industriestandaard en de software van keuze voor de meeste ontwerpers waarmee ik heb gewerkt. Ik heb weken besteed aan het ontwerpen van pixel-perfecte lay-outs, het groeperen van elementen in hiërarchische mappen en het labelen van al mijn lagen om de overgang van prachtige mock-up naar code zo soepel mogelijk te maken.

Ik zou vol enthousiasme, energie en opwinding zijn, mijn ontwerpen uitleggen aan een ontwikkelaar, laagjes aan en uit zetten om te proberen mijn visie te illustreren door middel van Photoshop, maar zou altijd enigszins teleurgesteld zijn omdat mijn glanzende, gepolijste ontwerp werd getransformeerd in wat ik zou zien in de browser. Natuurlijk zou het eruit zien als mijn ontwerp ... En ik herkende de lettertypen enigszins, maar het ontbrak die scherpte die ik me herinnerde uit mijn composities. Het was niet zo dat de ontwikkelaars het niet goed hadden gecodeerd, meer dat de typografie die ik in Photoshop had gemaakt, niet in code had vertaald.

Wat je ziet, is niet altijd wat je krijgt

Bij het kiezen fonts er zijn een paar dingen belangrijker dan of een lettertype gemakkelijk leesbaar is of niet. In Photoshop is dat niet zozeer een probleem, omdat alles er geweldig uitziet. Het maakt niet uit welk lettertype u gebruikt, op welke afmeting of welk gewicht (binnen redelijke grenzen) omdat het perfect op het scherm wordt weergegeven.

Helaas geldt dit niet voor de browser. Vaak waren de relaties tussen elementen en type bij het bekijken van mijn ontwerp in de browser allemaal verkeerd. De tekengroottes en lijnhoogten die ik aan de stijlen in mijn photoshop-compositie had toegeschreven, zouden er niet hetzelfde uitzien als in de browser. Als ik een marge van 20 pixels boven de titel in mijn ontwerpen had aangegeven, kan die afstand zijn gewijzigd omdat de regelhoogte van de kop een effect zou hebben op de grootte van de marge, iets wat niet zou gebeuren in Photoshop. Ik zou dan het lange en moeizame proces van de gevreesde 'design tweaks' moeten starten.

Iedereen heeft een hekel aan design tweaks

Vertrouw me, het is niet alleen de ontwikkelaar die schrikt van het idee van een ontwerper die naast hen zit en hen vraagt ​​om 'de body copy line height met twee pixels te vergroten', waarna de ontwikkelaar de CSS verandert en commit .... Enter. 'Eigenlijk 1 pixel kleiner' ... Ga binnen. 'Misschien was het beter hoe het was'. Dit soort tweaken van de CSS beetje bij beetje om de resultaten in real time via de browser te bekijken, is tijdrovend en niet bevorderlijk voor creativiteit. De ontwikkelaars raken er snel genoeg van om de hele dag te besteden aan het veranderen van wat zij zien als de kleinste details die geen verschil maken, en ontwerpers kunnen niet experimenteren door snel en gemakkelijk lettertypen en stijlen te wijzigen voor de lettertypen die beter worden weergegeven in de browser.

Dus wat nu?

Voor ontwerpers die CSS kennen, kunt u tools gebruiken zoals Firebug om effectief uw eigen ontwerp tweaks in de browser te maken, waarbij alle CSS-wijzigingen in één document worden genoteerd die u vervolgens kunt doorgeven aan een ontwikkelaar om te implementeren. Dit is in feite hetzelfde als bij een ontwikkelaar zitten en CSS-wijzigingen aanbrengen, maar veel minder vervelend voor de ontwikkelaar en de ontwerper ook toestaan ​​om verder te experimenteren met maten en stijlen voordat hij een beslissing neemt. Hoewel dit een goede tool is voor het inspecteren en wijzigen van delen van de HTML en CSS, verliest u alle wijzigingen die u aanbrengt zodra de browser is vernieuwd, wat erg vervelend kan zijn als u veel elementen hebt gewijzigd en niet al uw aanpassingen.

U kunt de Firediff plug-in om een ​​record op te slaan van alle wijzigingen die u aanbrengt in Firebug, wat geweldig is omdat het u opslaat om elke wijziging in een aparte spreadsheet voor later te noteren. Het grootste probleem met deze methode is wanneer u begint met het introduceren van weblettertypen in de vergelijking, aangezien alle gekozen lettertypen moeten worden geïnstalleerd in uw typekit of als ze niet in de browser worden weergegeven. Dit maakt het veel moeilijker en minder vrij om gemakkelijk met verschillende lettertypen te experimenteren, omdat je lettertypen niet snel kunt uitproberen.

Ontwerpen in de browser

Diensten zoals typeren maak het veel gemakkelijker voor ontwerpers om met weblettertypen te werken en ik gebruik vrijwel al mijn typografie voor het web dat er gebruik van maakt. Hiermee kunt u typografische mock-ups maken (net als in Photoshop) met behulp van de visuele interface om lettertypen, stijlen, gewichten, kleuren, lijnhoogte, marge, opvulling en meer toe te wijzen aan uw typografie. Het beste aan het gebruik van Typecast is dat het allemaal in de browser werkt, dus u neemt beslissingen over het type precies zoals het voor de gebruiker wordt weergegeven. Ziet een bepaald lettertype er niet al te heet uit bij 19 pixels? Bots het tot 20 met een klik op een knop, terug naar beneden tot 19 voordat je eindelijk genoegen neemt met 18 pixels, alles in seconden in plaats van uren met een ontwikkelaar.

U kunt alle weblettertypen gebruiken uit hun verzameling van 23.000 lettertypen, waaronder Google-lettertypen, Typekit en meer in uw composities, waardoor u snel en eenvoudig kunt experimenteren (ze zijn onlangs gekocht door Monotype, die Fonts.com en Myfonts bezitten, dus verwacht nog veel meer lettertypen onderweg binnenkort). Typecast introduceert naar mijn mening een idee van speelsheid terug in de typografie, omdat het je aanmoedigt om variaties in lettertypen uit te proberen, die je misschien nog nooit hebt ontdekt als ze niet zo gemakkelijk beschikbaar waren en gemakkelijk uitwisselbaar waren zoals ze zijn.

Een andere zeer nuttige functie van typecast is de mogelijkheid om de CSS van uw type te bekijken en te bewerken. U kunt achtergrondkleuren en -afbeeldingen, zweeftoestanden of zelfs overgangen toevoegen door eenvoudigweg het CSS-paneel te bewerken. Als u eenmaal tevreden bent met uw creatie, kunt u eenvoudig de CSS-code exporteren en opslaan, die vervolgens naar uw site kan worden geüpload of naar een ontwikkelaar kan worden verzonden en omdat alles in de browser is ontworpen, zal het precies zo verschijnen als u wilt.

Je bent me kwijtgeraakt bij CSS

Photoshop is niet de industriestandaard voor niets, en er zullen sommigen van jullie hyperventileren bij de gedachte om het te laten ontwerpen in de browser, we zijn tenslotte creatievers en geen programmeurs. Zet de papieren zak neer, want er is nog steeds een manier om prachtige typografie te maken met weblettertypen in Photoshop. Extensis hebben een invoegtoepassing gemaakt die kan worden geïnstalleerd naar Photoshop-versies CS5 en hoger die u toegang geven tot alle Weblink- en Google-weblettertypen die u gratis kunt gebruiken, direct in Photoshop.

Dit betekent dat u alle weblettertypen van WebINK of Google in uw ontwerpsamenstellingen kunt gebruiken zoals elk lettertype dat op uw systeem is geïnstalleerd en ze ongeveer hetzelfde weergeven als het eruit zou moeten zien in de browser. De plug-in geeft u momenteel alleen toegang tot Weblink- en Google-weblettertypen, maar aan de positieve kant worden er automatisch nieuwe lettertypen bijgewerkt wanneer deze worden toegevoegd aan Weblinks en de lettertypenbibliotheek van Google.

Photoshop opstarten

Een andere waardevolle plug-in die de overgang tussen Photoshop-composities en browser-compatibele CSS helpt te verlichten, is de gratis, op de cloud gebaseerde plug-in css3ps.com . Een van de belangrijkste redenen waarom veel ontwerpers met Photoshop werken, is de controle over lagen en vormelementen. Snel en gemakkelijk kunnen experimenteren met schaduw, gloed, kleur, textuur, afgeronde hoeken en nog veel meer is voor de meesten bijna een tweede natuur en zelfs ervaren ontwerpers worstelen om exact in de browser te repliceren. Voor hen is deze plug-in perfect omdat je hiermee je composities kunt maken op de manier die jij het beste weet, maar dan kun je de stijlen van je shape eenvoudig converteren naar browsercompatibele CSS3. Deze methode is ideaal voor het ontwerpen van knoppen, navigatie of iets anders waarvoor je misschien een vorm hebt gestileerd.

Misschien is er nog steeds een rol weggelegd voor Photoshop als een hulpmiddel voor het ontwerpen van weblay-outs, maar voor zover het ontwerpen van typografie voor het web zijn applicaties zoals Firebug en Typecast voorbijgestreefd. De tijd die het kost om statische composities bij te werken, kan gewoon niet worden vergeleken met de snelheid en het gemak waarmee u wijzigingen in de browser kunt aanbrengen. Voor degenen onder u die het idee om te ontwerpen in de browser niet eens kunnen koesteren, moeten de plug-ins hierboven in ieder geval Photoshop de boost geven die het nodig heeft om relevant te blijven en de overgang te vergemakkelijken.

Gebruik je Photoshop om websites te ontwerpen? Loopt Photoshop op de manier van Flash? Laat het ons weten in de comments.

Uitgelichte afbeelding / miniatuur, gebruik dode afbeelding via Shutterstock.