Hoe isometrische typografie ontwerpen

Sep 11, 2025

Procedures

Perspectief is alles in ontwerp. Als iets dat je hebt getekend een perfect perspectief heeft, zal het je werk helpen realistischer uitzien; Als alternatief heeft Pablo Picasso geschiedenis gemaakt door te tekenen met een zeer scheve zin van de realiteit om hem heen.

Isometrische tekening is evenveel van een wetenschap als iets. Het heeft een zeer strikte reeks regels als het gaat om wat waar gaat. Dat is vrij moeilijk om te gaan zitten en jezelf te tekenen, maar als het gaat om Photoshop, kun je een gids voor alles creëren.

Ontvang Adobe Creative Cloud

In deze Photoshop-tutorial , we gaan een perfecte isometrische raster uiteenzetten voordat we een wereld op zeshoekig gerichte lijnen bouwen. In dit Londen-geïnspireerde afbeelding gaan we de Thames isometrisch traceren en zelfs isometrische versies van bezienswaardigheden creëren. Je zult merken dat alles op dit raster kan worden gemaakt, omdat het simpelweg kubieke vormen bij elkaar houdt. Curves kunnen eenvoudig uit de hoek naar de hoek worden getrokken.

Alles in de afbeelding zal deze structuur ook volgen. U kunt afbeeldingen gebruiken om te kopiëren, u kunt onze stappen religieus volgen of u kunt uw eigen pictogrammen ontwerpen na isometrische patronen. Het is natuurlijk volledig aan jou - binnen de grenzen van isometrie.

Download de tutorial-bestanden

01. Start het raster

Hit the icon to open the full-sized image. — Druk op het pictogram om het full-sized beeld te openen.

Begin met het maken van een nieuw document van 20 x 20 pixels. Maak een zwarte strip naar beneden rechts en onderkant van het document met de rechthoekige marquee-tool. Gebruik het raster als u dat nodig hebt, door CMD / CTRL + 'te raken.

02. Definieer uw patroon

Ga naar Bewerken & GT; Patroon definiëren. Noem het en klik vervolgens op OK. Maak een nieuw document van 1920 x 1080 door naar File & GT; nieuw te gaan en ga dan naar de verfbucket (G). Gebruik patroonvulling en op een nieuwe laag, vul met het patroon dat u hebt gemaakt.

03. Transformeer het patroon

Nu gaan we het patroon isometrisch maken! Maak de breedte en hoogte veel groter, de hoek 35 graden en plaats in het midden van het document. Het raster moet worden gemaakt van diamantvormen.

04. Kies je palet

We gaan hiervoor vijf verschillende kleuren gebruiken, maar verschillende tinten van elk. De kleuren zijn koningsblauw (# 021574), gedempt rood (# F22F50), Spearmint (# 6EC5CF), pepermunt (# 6ECFB0), Tan (# FF935E) en wit (#ffffff).

05. Leg uw tekst uit

Gebruik het type Type en maak de tekst die u in het document wilt gebruiken; We gaan met 'Londen, Engeland'. Dit is belangrijk, omdat het de grootte, afstand en het hele uiterlijk van je isometrische poster dicteert.

06. Maak een paar letters

Maak isometrische letters met de pentool, volgens de gids die u hebt gemaakt. Dit is een proef- en foutgedeelte van het proces en neemt het langst van alles. Experimenteer met vormen en vul voor nu met # 808080.

07. Werk aan de letters

De isometrische letters moeten één kant hebben die voornamelijk naar voren wordt gericht. Werk waar de curves op elk van de letters staan door de opaciteiten te verminderen. Dit kan enige tijd duren om erachter te komen, en misschien moet u een aantal brieven opnieuw doen.

08. Schaduw de letters

Groepeer elke set lagen voor elke letter. Maak voor elk knipmaskers en voeg licht of schaduw toe aan de letters, zodat ze 3D lijken. Werk erop waar het licht in het beeld zit en dienovereenkomstig rechtert.

09. Kleur en bouwen bruggen

Maak nieuwe overlay-lagen boven elk van de letters en vul met een van uw kleuren. Voeg kleurlagen, clip toe en borstel in een andere kleur om het uit te vullen. Maak vervolgens bruggen tussen sommige letters. Kleur dit met een andere kleur.

10. Maak een spreker

Nu gaan we objecten aan de scène toevoegen. Maak een doos met behulp van de isometrische gids, verlichting en donkere zijde van de doos om perspectief te maken. Maak twee cirkels en transformeer deze om langs de gids in de doos te passen; Voeg een beroerte toe aan de cirkels met behulp van lagstijlen.

11. Voeg een vlag toe

Vervolgens zullen we een vlag maken. Nogmaals, gebruik de pentool om langs de gids te trekken en vul dan met wit. Cliplagen hieraan en raak zachte zwarte penseelstreken over één kant van de vlag aan om schaduw toe te voegen.

12. Plant een aantal bomen

Bomen zijn gemakkelijk te maken met de pen; Creëer een driehoek met de twee bodemzielen langs de isometrische gids en vervolgens de ene kant donkerder. Herhaal dit twee keer, voeg dan een stronk toe. Kleur met een overlay-laag.

13. Roltrappen en kaartplanning

We hebben roltrappen gemaakt die dezelfde methoden gebruiken die we gebruikten om de andere objecten te maken, met behulp van de isometrische gids om te tekenen. Daarna hebben we een echte kaart van Londen gebruikt om de Theems grofweg te traceren en een witte omtrek te trekken voor wat water om te vullen.

14. Curve the randen

Gebruik de pentool om de randen van de witte structuur te krommelen die u zojuist hebt gemaakt en vul met # 808080. Gebruik een zachte, zwarte borstel om de illusie van een gebogen ruimte voor het water te creëren om in te zitten.

15. Vul met water

Gebruik de pentool om de grijze ruimte in elk van de witte structuren te selecteren en uit de bovenste structuren te vallen en vul blauw op een nieuwe laag. Stel deze laag in op het harde licht om het eruit te laten zien alsof het daadwerkelijke vloeistof is. Clip een witte laag en verwijder een gekartelde patroon in het midden voor extra effect.

16. Start de kroonluchter

Maak een nieuwe laag en voeg dots toe in de kruispunten van de lijnen zoals u kunt zien in de screenshot. Selecteer de achterruiten van deze stippen en verminder de lichtheid tot -10 door Hue / Saturation (CMD / Ctrl + U) te gebruiken. Dupliceer dit naar beneden om meer stippen te creëren.

17. Maak de kroonluchter af

Creëer drie keer hetzelfde effect met meerdere rijen stippen, het formaat wijzigen van de twee laatste. Stapel deze om een kroonluchtereffect te creëren. Op nieuwe 20% lagen, maak witte stippen om te suggereren dat licht naar buiten afkomt.

18. Maak Big Ben

Gebruik een stockfoto van Big Ben om de klok te tekenen met de pentool; Je hoeft echter niet zo gedetailleerd te zijn, natuurlijk. Teken het in grijstinten; Trek de torenspits naar de ene kant van het gebouw in plaats van, ook recht naar boven.

19. Plaats het monument

Kleur Big Ben met enkele overlaylagen, dupliceer de laag en draai deze nieuwe horizontaal om. Geef de grootte van beide lagen als scheef, met gratis transformatie om te passen langs de gids die u hebt gemaakt.

20. Afwerking aanrakingen

Maak een laatste bloeit dat u meer wilt toevoegen aan de afbeelding; Dit kan sterren op de achtergrond met kleine stippen omvatten, een walvis in de Theems of het veranderen van de kleur met een Curves-aanpassing.

21. Voeg ruis toe

Selecteer ten slotte zwart en wit in uw Swatches (D). Maak een nieuwe laag, vul met zwart (ALT / OPT + DELETE) en ga naar Filter & GT; ruis. Kies 400%, controleer monochromatisch en klik op OK. Stel deze laag in op zacht licht, 10% ondoorzichtig.

Dit artikel is oorspronkelijk gepubliceerd in kwestie 271 van Creative Web Design Magazine Web Designer. Koop Issue 271 of Abonneer u op Web Designer

Gerelateerde artikelen:

Maak isometrische net-gebaseerde 3D-letters in Illustrator
Isometrische vector kunst gemakkelijk gemaakt
Maak een 3D-isometrisch effect

Hoe isometrische typografie ontwerpen

01. Start het raster

02. Definieer uw patroon

03. Transformeer het patroon

04. Kies je palet

05. Leg uw tekst uit

06. Maak een paar letters

07. Werk aan de letters

08. Schaduw de letters

09. Kleur en bouwen bruggen

10. Maak een spreker

11. Voeg een vlag toe

12. Plant een aantal bomen

13. Roltrappen en kaartplanning

14. Curve the randen

15. Vul met water

16. Start de kroonluchter

17. Maak de kroonluchter af

18. Maak Big Ben

19. Plaats het monument

20. Afwerking aanrakingen

21. Voeg ruis toe

Procedures - Meest populaire artikelen

Maak je eigen stylus met slechts 4 huishoudelijke artikelen (serieus)

Hoe een Apple Watch-app te maken

4 stappen voor het gebruik van variabele lettertypen

Een gelaagd parallax-effect op uw site maken

Animate SVG met JavaScript

Leer gebladerte te laten groeien met X-deeltjes

Hoe een mobiele app te prototeren met Adobe XD

Maak een meteoordouche in 3DS Max

Categorieën