Hur man designar isometrisk typografi

Sep 11, 2025

Hur

Perspektiv är allt i design. Om något du har ritat har ett perfekt perspektiv, hjälper det ditt arbete att se mer realistiskt ut. Alternativt gjorde Pablo Picasso historia genom att dra med en mycket skevad känsla av verkligheten runt honom.

Isometrisk ritning Är lika mycket av en vetenskap som någonting. Den har en mycket strikt uppsättning regler när det gäller vad som går var. Det är ganska svårt att sitta och dra dig själv, men när det gäller Photoshop kan du skapa en guide för någonting.

Få Adobe Creative Cloud

I denna Photoshop Tutorial , vi ska ställa ut ett perfekt isometriskt rutnät innan vi bygger en värld på sexkantiga vända linjer. I den här London-inspirerade bilden kommer vi att spåra Themsen isometriskt, och även skapa isometriska versioner av landmärken. Du hittar att allting kan skapas på detta rutnät, eftersom det helt enkelt håller kubiska former tillsammans. Kurvor kan helt enkelt dras från hörn till hörn.

Allt i bilden kommer också att följa denna struktur. Du kan använda bilder som ska kopieras, du kan följa våra steg religiöst eller du kan designa dina egna ikoner efter isometriska mönster. Det är helt upp till dig - inom ramen för isometri, förstås.

Ladda ner de handledningsfilerna

01. Starta rutnätet

Hit the icon to open the full-sized image. — Hit ikonen för att öppna den fullstora bilden.

Börja med att skapa ett nytt dokument på 20 x 20 pixlar. Skapa en svart remsa ner höger och botten av dokumentet med det rektangulära markeringsverktyget. Använd rutnätet om du behöver, genom att slå CMD / Ctrl + '.

02. Definiera ditt mönster

Gå till Redigera och GT; definiera mönster. Namn det och klicka sedan på OK. Skapa ett nytt 1920 x 1080 dokument genom att gå till fil och gt; ny, och sedan gå till färgbucket (g). Använd mönsterfyllning och på ett nytt lager, fyll med det mönster du har skapat.

03. Förvandla mönstret

Nu ska vi göra mönstret isometriskt! Gör bredden och höjden mycket större, vinkeln 35 grader och placera i mitten av dokumentet. Gridet ska vara tillverkat av diamantformer.

04. Välj din palett

Vi ska använda fem olika färger för detta, men olika nyanser av var och en. Färgerna är kungblå (# 021574), dämpad röd (# f22f50), spearmint (# 6ec5cf), pepparmynta (# 6ecfb0), solbränna (# ff935e) och vit (#ffffff).

05. Lägg ut din text

Använd typverktyget och skapa texten som du vill använda över dokumentet. Vi går med "London, England". Detta är viktigt, eftersom det kommer att diktera storleken, avståndet och hela utseendet på din isometriska affisch.

06. Skapa några bokstäver

Skapa isometriska bokstäver med pennverktyget, efter den guide du skapade. Detta är en prov-och-fel del av processen, och kommer att ta det längsta av allt. Experimentera med former och fyll med # 808080 för nu.

07. Arbeta med bokstäverna

De isometriska bokstäverna måste ha den ena sidan som övervägande står inför framåt. Träna där kurvorna är på var och en av bokstäverna genom att minska opaciteterna. Det här kan ta lite tid att räkna ut, och du kan behöva återställa några bokstäver.

08. Skugga bokstäverna

Grupp varje uppsättning lager för varje bokstav. Skapa klippmaskor för var och en, och lägg till antingen ljus eller skugga till bokstäverna så att de visas 3D. Träna där ljuset är i bilden och domaren i enlighet därmed.

09. Färg och bygga broar

Skapa nya överlagringsskikt ovanför var och en av bokstäverna och fyll i med en av dina färger. Lägg till färglager, klipp och borsta i en annan färg för att krossa ut det. Därefter skapa broar mellan några av bokstäverna. Färga detta med en annan färg.

10. Skapa en högtalare

Nu ska vi lägga till föremål på scenen. Skapa en låda med den isometriska guiden, lättare och mörkare vardera sidan av lådan för att skapa perspektiv. Skapa två cirklar och omvandla dessa för att passa in i lådan längs guiden; Lägg till en stroke på cirklarna med hjälp av lagerstilar.

11. Lägg till en flagga

Därefter ska vi skapa en flagga. Använd igen pennverktyget för att rita längs guiden och fyll sedan med vit. Klippskikt till detta, och berör mjuka svarta penselsträngar över ena sidan av flaggan för att lägga till skugga.

12. Växla några träd

Träd är lätta att skapa med pennan; Skapa en triangel med de två nedre sidorna som ligger längs den isometriska guiden och sedan mörknar den ena sidan. Upprepa det två gånger och lägg sedan till en stubbe. Färg med ett överlagsskikt.

13. Rulltrappor och kartplanering

Vi har skapat rulltrappor med samma metoder som vi använde för att skapa de andra objekten, med hjälp av den isometriska guiden för att dra över. Därefter har vi använt en riktig karta över London för att grovt spåra Themsen och dra en vit skiss för lite vatten att fylla.

14. Kurva kanterna

Använd pennverktyget för att kurva kanterna på den vita strukturen som du just skapat och fyll i # 808080. Använd en mjuk, svart borste för att skapa illusionen av ett böjt utrymme för att vattnet ska sitta i.

15. Fyll med vatten

Använd pennverktyget för att välja det gröna utrymmet i var och en av de vita strukturerna och faller från de övre strukturerna och fyller med blått på ett nytt lager. Ställ in detta lager till hårt ljus för att få det att se ut som det är verkligt vätska. Klipp ett vitt lager och ta bort ett jagged mönster i mitten för ökad effekt.

16. Starta ljuskronan

Skapa ett nytt lager och lägg till prickar i korsningarna av de linjer som du kan se i skärmdumpen. Välj de bakre raderna av dessa prickar och minska ljusheten till -10 med hjälp av nyans / mättnad (cmd / ctrl + u). Duplicera detta nedåt för att skapa fler prickar.

17. Avsluta ljuskronan

Skapa samma effekt tre gånger med flera rader av prickar och ändra sedan de två senare. Stack dessa för att skapa en ljuskronaffekt. På nya 20% lager skapar du vita prickar för att föreslå ljus som härrör utåt.

18. Skapa Big Ben

Använd ett lagerfoto av Big Ben att dra klockan med pennverktyget; Du behöver dock inte vara så detaljerad, förstås. Rita det i nyanser av grått; Rita spire till ena sidan av byggnaden snarare än rakt uppåt.

19. Placera landmärket

Färg Big Ben med några överlagringsskikt, duplicera skiktet och vrid sedan den här den här horisontellt. Ändra storlek på båda skikten och skev med gratis transformation för att passa längs den guide som du har skapat.

20. Avslutande beröring

Göra några slutliga blomningar som du vill lägga till mer till bilden; Detta kan inkludera stjärnor i bakgrunden med små prickar, en val i Themsen eller ändra färgen med en kurvorjustering.

21. Lägg till buller

Slutligen väljer du svartvitt i dina patcher (D). Skapa ett nytt lager, fyll med svart (Alt / Opt + DELETE) och gå till Filter & GT; Buller. Välj 400%, kontrollera monokromatisk och klicka på OK. Ställ in detta lager till mjukt ljus, 10% opak.

Denna artikel publicerades ursprungligen i utgåva 271 av kreativ webbdesignmagasin webbdesigner. Köp nummer 271 eller Prenumerera på webbdesignern .

Relaterade artiklar:

Skapa isometrisk gridbaserad 3D-bokstäver i Illustrator
Isometrisk vektorkonst gjort lätt
Skapa en 3D-isometrisk effekt

Hur man designar isometrisk typografi

01. Starta rutnätet

02. Definiera ditt mönster

03. Förvandla mönstret

04. Välj din palett

05. Lägg ut din text

06. Skapa några bokstäver

07. Arbeta med bokstäverna

08. Skugga bokstäverna

09. Färg och bygga broar

10. Skapa en högtalare

11. Lägg till en flagga

12. Växla några träd

13. Rulltrappor och kartplanering

14. Kurva kanterna

15. Fyll med vatten

16. Starta ljuskronan

17. Avsluta ljuskronan

18. Skapa Big Ben

19. Placera landmärket

20. Avslutande beröring

21. Lägg till buller

Hur - Mest populära artiklar

Hur sträcker du en duk och inrättas för oljemålningar

Hur man ändrar teckensnittet i din Twitter Bio

Hur man målar en färgstark zombie

3 Tips för att skapa fantastiskt tryckreklammaterial

Master vetenskapen om konverteringsfrekvensoptimering

Kom igång med WebGL med tre.js

Hur man skapar en lava-lampa med tangenthot

Skapa en anpassad klisterborste i artrage

Kategorier