Tekstomloop op het web in Photoshop

Bij het ontwerp van nieuwspagina’s of blogpagina’s op websites zie je vaak een foto links of rechts bovenaan het artikel. De tekst loopt dan mooi rondom de foto. Hieronder een voorbeeldje van wat ik bedoel, zoals te zien op www.typography.com:

Het is een vormgeving die natuurlijk ook heel vaak in offline media te zien is zoals kranten en magazines. In opmaakprogramma’s als InDesign is het daarom makkelijk gemaakt om een tekstomloop rond een afbeelding te creëren. Er is zelfs een volledig paletje aan gewijd met bijkomende tekstomloopopties.

Ook met HTML en CSS is zoiets heel eenvoudig te realiseren. In Photoshop daarentegen is het allemaal wat moeilijker. Logisch: Photoshop is er in de eerste plaats om foto’s te bewerken. En niet om teksten te zetten. Maar omdat zoveel ontwerpers opgegroeid zijn met Photoshop, is het toch voor velen onder ons het favoriete programma om websites in te ontwerpen.

Vandaar deze eenvoudige tip om het effect van een tekstomloop te bekomen in Photoshop:

• Teken met de pen de vorm van een tekstkader rondom je foto. Door te shift-klikken kan je trouwens perfect horizontale of verticale lijnen tekenen.
• Beweeg met het tekstgereedschap binnenin je padvorm. Als alles goed is zie je een bolle cursor.
• Klik in de padvorm om het pad om te zetten naar een tekstkader.
• Typ of plak je tekst in het tekstkader.

Je tekst zal nu mooi rond de foto lopen. Als je het tekstkader wil aanpassen dan kan je daarvoor de padgereedschappen gebruiken. Met de witte pijl kan je bijvoorbeeld de ankerpuntjes nog individueel verplaatsen.

Het is een beetje behelpen, maar het werkt wel.

Categorieën: Ontwerp, Typografie, Photoshop, Webomgeving,