Share
Laten we ons eigen deel van de typografie halen met deze donkere en grungy poster. Nee, dit is niet jouw typische ontwerp, want we zullen 'het raster verlaten' in de hoop een dynamische en opwindende lay-out te creëren. Grijp dus de gebruikelijke tools van de handel, Photoshop en Illustrator en volg deze stappen om uw eigen oplossing te maken.
Voordat we aan de slag gaan, laten we eens kijken naar de afbeelding die we gaan maken.
Onze video-editor Gavin Steele heeft een video-zelfstudie gemaakt om deze tutorial voor tekst en beeld te complimenteren.
Uiteindelijk is ontwerp een middel om een boodschap uit te drukken, een idee. Om te ontwerpen, moet men het feit erkennen dat design in geen geval decoratie is. Door je punt visueel over te brengen, streef je naar de juiste balans tussen wat mooi, esthetisch en functioneel en nuttig is. Ik wilde een visuele interpretatie verkennen van wat er is geschreven, niet alleen door het type, maar ook door het concept te promoten door visuele illustratie, vandaar het brekende glas.
Dus wat breekt het rooster eigenlijk? Ik ben geenszins een expert in het vakgebied, maar de planning van het raster, hoe basaal ook, heeft me geholpen. Soms kunnen al die symmetrische grijze vakken echter saai worden en het is aan designheldici om de dag te redden: het raster doorbreken.
Een belangrijk ding om in gedachten te houden, is het feit dat een gebroken raster diversifieert en voorspelbaarheid voorkomt, maar toch bijdraagt aan een uniform ontwerp. De opzettelijke onbalans wordt beheerst en beheerd door de rest van de elementen. Ook al heb je asymmetrische proporties, je vindt nog steeds het evenwicht op het einde. Dat is waar we naar streven - we zullen een typisch vierkant raster doorbreken door een ongebruikelijke typografische lay-out en het uiteindelijk in balans houden door zorgvuldig geplande stukjes en stukjes glas.
Een praktisch voorbeeld van het net breken is te zien op deze eigenlijke website. Merk op dat zowel het Psdtuts + logo als de lepel lager komen te liggen dan de duidelijk zichtbare horizontale lijn. Dit alles om eentonigheid te voorkomen, door subtiele details. Als dit een klassiek raster was geweest, zouden het logo en de lepel niet iets lager komen te liggen dan de scheidingslijn.
Start een nieuw Photoshop-document met een A3-papierformaat van 300 dpi. Als u de instelling A3 wilt selecteren, kiest u Internationaal papier in het vervolgkeuzemenu. Zodra je het Verloopgereedschap (G) begint te pakken en een lineair verloop van boven naar beneden maakt met een medium grijs (# 837e7e) en een donker grijs (# 3f3f3f).
Laten we nu beginnen met het plannen van de lay-out van het ontwerp. Om een basisraster te maken waar we mee beginnen, gaat u naar Bewerken> Voorkeuren> Gidsen, Raster, Segmenten en Tellen. Zoek het rastergedeelte op en zorg ervoor dat je raster gedeeld wordt door 2,5 cm met een enkele onderverdeling. Mogelijk moet je het ook zichtbaar maken door naar Beeld> Tonen> Raster te gaan.
Het is tijd om het knooppunt te plannen. Ik plaatste de mijne een vierkant uit het midden, zodat het stuk een stabiele basis heeft. Houd in gedachten dat elke compositie een evenwicht nodig heeft, vooral een waarin je experimenteert met asymmetrie. Het hangt allemaal af van het gevoel dat je hebt gepland: als de doos hoger is dan het midden, voelt het alsof het zweeft, terwijl onder staan suggereert een statische omgeving.
Het brandpunt en het ankerelement van dit stuk is type. Immers, dit is een typografische poster, nietwaar? Het lettertype moet ook het concept weerspiegelen. Aangezien dit allemaal draait om rasters, moet het lettertype zelf minimaal en intens geometrisch zijn. Bifurk past in de functiebeschrijving en we zullen het hier gebruiken. Als dat geen goed argument is, is het ook gratis, dus het is een goede keuze voor een zelfstudie!
Gebruik het raster om uw lay-out te plannen en typ uw letters individueel in door voor elke letter een nieuwe laag te maken. Op die manier wordt het eenvoudiger om de afstand tussen de letters aan te passen. Ik heb een vierkante vorm gebruikt om de afstand te plannen. Maak een vierkante aangepaste vorm met het gereedschap Rechthoek (U), houd Shift ingedrukt en schuif het tussen de letters. Op deze manier zorgt u voor een goede optische uitlijning.
Op dit punt veranderen we de kleuren van de tekst. Maak subtiele variaties van dit aangespoelde rood: d05252. Opmerking: ik heb ook gidsen geactiveerd en gemaakt om de lay-out duidelijker te maken.
We gaan de letters nu een textuur geven. De textuur wordt gemaakt door een woordwolk met Lorem Ipsum-tekst, die nauw samenhangt met grafisch ontwerp. U kunt uw eigen cloud maken of deze handige online tool genaamd Wordle gebruiken. Het is een word cloud-generator en dat is wat ik hier gebruikte. Ga naar hun site en klik op de knop Maken. Plak in een dummy-tekst en genereer een cloud. Blijf randomiseren totdat je de beste vorm hebt gevonden en selecteer Telefoto als lettertype en Heat als de kleurselectie. U kunt deze instellingen wijzigen met de knoppen die u boven de cloud vindt.
Nu gaan we live Traceer dit in een behandeling met een schetsmatig stijltype. Dus maak een screenshot van de cloud en plak deze (Command + V) in een nieuw Illustrator-bestand. Nogmaals, je hebt Illustrator nodig om een object te traceren. Ga naar Object> Live Trace> Tracing Options. Gebruik kleur en 256 kleuren. Als u op zoek bent naar een meer nauwkeurige uitvoering, past u de instellingen in het menu aan.
Als u de overtollige elementen wilt afsnijden, zoals de webinterface en de witte achtergrond, moet u het nieuw live getraceerd object uitvouwen. Druk op de knop Uitbreiden; je ziet het zodra je het object hebt geselecteerd.
Gebruik het gereedschap Direct selecteren (A) en sleep en verwijder alle overtollige elementen. Een eenvoudige manier om van het wit dat zich in de letters bevindt, te verwijderen, is door een witte vorm te selecteren en vervolgens naar Selecteren> Zelfde> Opvulkleur te gaan. Druk op delete en dat is het einde van je gedoe.
Kopieer het vervolgens (Command + C) en plak het (Command + V) in uw Photoshop-project. Plak het in als een slim object, zodat u het vrij kunt uitbreiden en inkrimpen zonder de kwaliteit te verliezen. Maak er een uitknipmasker door Alt ingedrukt te houden en te klikken tussen de laag van het slimme object en de laag van de letter.
Ik gebruikte de wolk ook in andere delen van het ontwerp als een textuur. De enige wijziging die u moet aanbrengen, is om de dekking van de laag in te stellen op ongeveer 15%.
Het is nu tijd voor het meer bewerkelijke gedeelte: het maken van het gebroken glas. Ga terug naar Illustrator en teken gebroken stukjes glas met behulp van het gereedschap Pen. Houd een rechthoekige vorm als referentie. Vul ze met deze kleur: 757575. Maak subtiele deuken die de basisvorm volgen en onthoud dat glasscheuren niet perfect recht zijn.
Maak een nieuwe laag en gebruik een van de driehoeken als referentie, maak een meer gefragmenteerde versie. Zorg ervoor dat je deze vervangt door de oude als je klaar bent.
Selecteer een van de stukjes en ga naar Effect> 3D> Extrude & Bevel. Volg de onderstaande instellingen.
Zodra u er een 3D-object van maakt, kopieert u het object en plakt u het in de exacte positie (Command + F). Zoek uw Uiterlijkpaneel onder Venster> Uiterlijk en dubbelklik op het effect 3D-uitdoven en afschuinen dat hier wordt vermeld. Dat zal het huidige 3D-effect openen dat je hebt over het stuk glas. Hiermee verander je alleen de Turn Cap On om de Cap in te zetten. Dit simuleert een transparantie-effect door ook de binnenrand te onthullen.
Herhaal het proces voor de resterende bits. Begin ook te spelen met de lay-out. Maak sommige stukken klein, alsof ze in de gegeven ruimte reizen, en draai ze afzonderlijk.
Maak sommige stukken kleiner, andere groter. Kopieer kleine fragmenten en maak ze in kleine, afgebroken stukjes. Vergeet niet om hun 3D-instellingen te wijzigen, zodat ze niet lijken op een vorig stuk.
Plak deze net zoals eerder in Photoshop. Als u merkt dat er verbeteringen kunnen worden aangebracht in de positionering, dubbelklikt u eenvoudig op het pictogram Slim object. Dat brengt u terug naar Illustrator, waar u aanpassingen kunt aanbrengen. Als u klaar bent, slaat u gewoon op (Command + S) en keert u terug naar Photoshop. Na een snel laadscherm zijn uw wijzigingen geïmplementeerd. Zet de overvloeimodus van de laag op Hard licht.
Maak nu een nieuwe lege laag (Command + Shift + N) over het slimme object en maak er een knipmasker van. Gebruik een zachte, ronde borstel en verf met wit in gebieden die u wilt benadrukken. Verlaag de dekking van de laag afhankelijk van hoe sterk je wilt dat het licht is.
Dupliceer het slimme object en verplaats het boven alle andere lagen. Zet de overvloeimodus van de laag op Scherm.
Het is tijd om de schade en vervorming te beginnen. Maak een nieuwe laag boven alle andere en vul deze met wit. Ga naar Filter> Vervormen> Lenscorrectie. Wijzig de Vignette-instellingen en sleep deze naar ongeveer -50 of -60. Stel de overvloeimodus van de laag in op Vermenigvuldigen.
Download deze textuur en voeg deze over het hele canvas in een nieuwe laag toe. Desatureer het (Command + Shift + U), zet de overvloeimodus van de laag op Color Burn en de dekking op 70%.
Download een andere textuur en plak deze in een nieuwe laag. Zet de overvloeimodus van de laag op Kleur en Dekking op 30%. Ga naar Afbeelding> Aanpassingen> Tint en verzadiging. Verander de tint in 158.
Ga naar Laag> Nieuwe aanpassingslaag> Curven. Gebruik de hieronder getoonde instellingen.
Ja, nog een textuur ... Zet deze over alles, maak het desatureer (Command + Shift + U), zet de overvloeimodus van de laag op Lineair branden en de dekking op 20%. Het bijzondere aan deze is echter de opname van horizontale lijnen, die een raster suggereren.
En nu een subtiele verandering van kleur. We zullen het rood slechts een tandje opvouwen, via een kanaalmixer (laag> nieuwe aanpassingslaag> kanaalmixer). Gebruik de instellingen in de volgende afbeelding.
Als laatste opwaardering heb ik achter de tekst nog een paar stukjes glas toegevoegd en achter alles een lichtgrijs, zacht en rond verloop.
Snelle tip: verscherp uw afbeeldingen bij het verkleinen naar kleinere resoluties. Je kunt je voorstellen dat er nogal wat informatie verloren gaat wanneer je een afbeelding verkleint van 5000 px naar 600 px. Je kunt het een geheel nieuw gevoel geven door te verscherpen met Filter> Verscherpen> Onscherp masker.
Wanneer u grunge verscherpt, kunt u ook enkele spectaculaire resultaten behalen, omdat Photoshop in feite subtiele afschuiningen maakt. Kijk naar de onderstaande letters: ziet u hoe de gescherpte rode letters een afschuining van één pixel lijken te hebben? Nou, het is van het aanscherpen.
Overdrijf het gewoon niet! Houd al scherpe randen in de gaten, deze kunnen bij het slijpen worden geruïneerd.
We zijn nu klaar! Ik kijk er naar uit om je deze technieken goed te laten gebruiken.
Accentsconagua