Elementen av Retro Web Design

Vintage- och retrostilen blir alltmer populär i dagens digitala konstverk.

Användningen av retro och vintage teman i design är förmodligen en av de mest genomgripande trenderna eftersom branschen gick nästan helt digital.

I dagens inlägg tittar vi på exempel på arbete som kommer från det underbara Dribbble , vilket hjälper oss att fokusera på utdrag av en bit snarare än hela designen eller illustrationen.

Häri är det möjligt att identifiera vilka tekniker som har använts och för att beskriva hur de påverkar den övergripande designen. Du kommer att bli bekant med dessa designtrender och kunna replikera dem.

För att hjälpa dig sprids korta handledning i hela artikeln. Vi kommer också att peka på flera andra användbara handledning och resurser för att komma igång med ditt eget vintage- och retroarbete!

1. Cirklar och andra enkla former

Enkla former används ofta i vintage design. Cirklar är de vanligaste, särskilt i branding. Exemplen nedan har valts noga för att visa dig hur kraftfulla enkla former kan vara.

Denna underbara illustration använder sig av elliptiska former för att producera en sol och avslutas snyggt med en typografisk effekt.

Cirkelbox Creative's varumärke är baserad på en cirkel och inspirerad av vintagebläckstämplar och märken. Designen är is med blommönster och enkel typografisk styling.

Denna design är lite annorlunda eftersom den bygger tungt på enkla former för att göra det pop. Den blå streckhuvudet använder en lång rad små cirklar för att skapa en intressant underkant.

Denna vintage design, som Circlebox Creative's branding, är inspirerad av vintagebläckstämplar och märken. Identiteten ser ut som om den faktiskt har stämplat på ett papper, till skillnad från Circleboxs smidiga och rena linjer.

Här är en annan branding baserat på en cirkel. Strukturen och den blå bland alla gråa ger verkligen denna design till liv.

En otroligt enkel bit av arbete som består av två cirklar, en textur, några blandningsstilar och ren typografi. Denna bit visar verkligen kraften i enkla former.

Mini-Tutorials

Så här applicerar du ett damaskblommönster till en cirkel med Adobe Illustrator

Att applicera ett mönster till en cirkel i Illustrator är något du förmodligen kommer att göra mycket om du utforskar retroutvecklingen. Tekniken liknar vad Glace Cakes gör för deras branding (visas ovan).

Öppna Illustrator, och rita en cirkel. Håll Shift-tangenten medan du drar ur cirkeln för att hålla den om. Sätt in ditt damastblommönster genom att gå till Arkiv → Plats.

Ta bort vilken bakgrund som helst och ändra färgen på ditt nyplacerade mönster. Du kan välja enskilda objekt med hjälp av Direct Selection-verktyget.

Välj ditt mönster med markeringsverktyget och gå till Window → Pathfinder för att öppna Pathfinder-fönstret om du inte redan har det. Håll Shift-tangenten och välj din cirkel för att välja båda dina objekt samtidigt. Klicka på knappen "Minus Front" i ditt Pathfinder-fönster för att ta bort det blommönster som ligger utanför din cirkel. Spela med ditt färgval, och du är klar!

Skapa en bubblad linje med Adobe Photoshop

Låt oss skapa en bubbelliknande linje som den i exemplet ovan.

Använd det rektangulära markeringsverktyget genom att dra ett val och fyll det med svart på ett nytt lager. Välj det elliptiska markeringsverktyget, och håll ner Skift-tangenten genom att dra ut ett mycket litet urval och fyll det med svart, igen på ett nytt lager.

Placera den svarta cirkeln på botten av din svarta rektangel. Duplicera skiktet och placera den nya cirkeln bredvid ditt original.

Upprepa detta steg tills du har något som ser ut som följande bild. Du har många lager. Markera dem alla samtidigt som du håller ned Skift-tangenten och gå till Lag → Sammanlagda lager för att göra dem till en.

Nu ska vi lägga till några enkla lagerformat eller blandningsalternativ för att få vår form till liv! Högerklicka på ditt lager och välj "Blandningsalternativ". Fönstret Layer Style ska öppnas. Använd följande effekter för att lägga till en gradient, inre skugga och drop-skugga:

Och vi är klara!

2. Tvåtonade och begränsade färgscheman

Tvåtonade färgscheman är en stor sak i vintage design, eftersom det inte var så lätt tillbaka i dag som det är nu att producera fullfärgsprodukter. Nedan följer några senaste exempel på tvåtonade och begränsade färgscheman.

Denna minimalistiska design får sin visuella överklagande från de svarta och vita formerna och linjerna, särskilt den horisontella streckade linjen och utskurna former från botten av cirkeln.

Denna branding upprepar några få markerade färger överallt. Färgerna fungerar otroligt bra tillsammans. Den gul-orange är den brännvåg som fångar din uppmärksamhet.

Denna underbara del av retro design är enbart beroende av färg och typografi. De subtila enpixel-breda linjerna avslutar den.

En annan svartvitt design med två toner. Denna identitet baseras på ett märke och får ett något tredimensionellt utseende från enkel typografi och effekter.

Detta exempel visar verkligen hur effektiv färg kan vara. Den använder tre färger: orange, brun och vit. Kontrasten mellan de tre prickarna fungerar mycket bra för designen.

Denna design (själva identiteten, inte bakgrunden) är enbart beroende av färg och typografi.

Denna design kombinerar orange och en fin blågrön med vit. Färgkombinationen matchar de snygga gränserna och enkla typografiska effekter.

En annan typografisk logotyp för vintage som bygger på två färger: vit typ på röd. Lägg märke till hur identiteten baseras på en cirkel.

Den här identiteten använder bara tre färger, en elegant typ och en fin blandningsläge för att lägga på tärningen på tårtan.

Färgresurser

En massa bra applikationer finns där för att hjälpa dig att skapa egna färgscheman. Detta lilla urval delar flera av de bästa:

Colour (webbapp)
En härlig webbplats dedikerad till färgscheman. Bläddra bland befintliga teman skapade av samhället, eller skapa din egen från början genom att ladda upp bilder.
Aviary Toucan (webbapp)
En annan webbapplikation, men utan en community-stöd som ColourLovers. Med den här applikationen kan du skapa färgscheman från början eller från importerade bilder.
Adobe Kuler (webbapp)
Ännu en annan webbläsare för färghantering, den här gången kom till oss av den någonsin älskade Adobe. Gränssnittet är fantastiskt och lätt att använda. Kuler är värd för en gemenskap, och du kan bläddra bland de högst rankade färgscheman.
Färgström (iPhone app)
Med denna iPhone-applikation kan du skapa och lagra färgpaletter från början eller från ett importerat foto. Du kan också automatiskt generera system från foton med hjälp av den inbyggda färgdämparen.
paletter (iPhone app)
Paletter liknar Color Stream, så att du kan skapa och lagra färgscheman på språng från början eller från en bild. Du kan också fånga färger från din favoritwebbplats.

Om du är nybörjare, här är några artiklar värda att kolla in: " Välja färgkombinationer "Och" Färgteori för designers, del 3: Skapa dina egna färgpalettar .”

3. Typografiska element och trender

Typografi är en av de viktigaste elementen i retro digital design. Det finns oändliga möjligheter med typdesign, några av dem finns i exemplen nedan.

Denna typ av design är fylld med text-effekt godhet. Texten är klar med en drop-skugga och ett enkelt men riktigt fantastiskt ett-pixel diagonalt linjemönster.

Här är min personliga favorit typografiska del i den här presentationen. Det förenar några utmärkta vintagestilar med moderna tekniker. Typen kommer till liv genom att man lägger till subtila detaljer, till exempel en-pixel vit stroke på linjen "Du är hjärtligt inbjuden" och de allt viktigaste drop-skuggorna på datumtypen.

Denna retro typografi visar överraskande enkla tekniker. "Design is" -typen dupliceras tre gånger och omplaceras. Den nedersta dubbletten är sedan texturerad för att skapa en härlig retrostil om några minuter.

Ännu mer typografi som använder en enkel drop-skugga för att lägga djup till den eleganta, dekorativa typsnittet.

Enkel typografi kombinerad med halvtransparenta former och en subtil struktur. Designen samlas snyggt.

Du kan inte bli mycket enklare än detta: ett kraftfullt val av typsnitt.

Denna tredimensionella typografi var troligtvis klar i Illustrator, med användning av 3-D-verktygen där. Subtilt brus har lagts till i designen, vilket fungerar bra med det begränsade färgschemat.

Denna snygga snapshot av digitalt producerad retro design kombinerar textur, ljud, enkla former, olika blandningsstilar och ett bra färgschema. Typografi, speciellt den större typen, bringas till liv av de skarpa droppskuggorna.

Denna imponerande del av vintageinspirerade brevpapper använder sig av handdragen element för sitt utseende. Designen har också ett begränsat färgschema.

Den vita typografien i denna design har slås samman med bilden som om den var där när fotografiet togs. Det fungerar bra med sepia-fotot.

Mini-Tutorials

Hur man skapar handdragen typografi med Adobe, Photoshop eller Illustrator

I den här korta handledningen lär du dig hur du snabbt producerar, skannar och vektoriserar din handritade typ med Adobe Photoshop och Illustrator.

Först och främst skissa några bokstäver:

Du måste fylla i din skissade typ på något sätt. Du kan göra detta med färg eller en markör. Jag kommer att använda svart indisk bläck och en fin pensel, som jag starkt rekommenderar, främst för att den är så ren och djärv.

Börja fylla i dina skisserade linjer.

Du borde sluta med något som ser ut så här.

Därefter skanna din bild. Om du inte äger en skanner, kan du bara fotografera arbetet - bara se till att det är högkvalitativ. När bilden är skannad eller fotograferad, öppna en ny Photoshop-fil och gå till Arkiv → Placera; leta reda på bilden och placera den i ditt dokument.

Gå till Bild → Justeringar → Ljusstyrka / Kontrast. Höj kontrastnivån till någonstans runt 50. Detta kommer att mörka det svarta i bilden.

Spara filen som en bild och öppna Adobe Illustrator. Skapa en ny RGB-fil och gå sedan till Arkiv → Placera. Leta reda på din nyligen sparade bild och placera den på din duk. I menyraden längst upp på duken väljer du alternativet "Live Trace". Din text är nu en fungerande vektor och kan skalas upp eller ner som du vill, för att användas i dina Photoshop-dokument.

Så här lägger du till typografi på en stadsfoto med Adobe Photoshop

Vi ska lägga till typografi på ett fotografi med en teknik som liknar den som användes för Amsterdam fotografiet ovan. I den här handledningen används vi detta fotografi av Barcelona .

Kopiera fotografiet och skapa ett nytt Photoshop-dokument. Klistra in fotografiet i dokumentet. Välj textverktyget och skriv "Barcelona" i den typ du väljer. Gå till Redigera → Transformera → Rotera och rotera typografi i en vinkel så att den ungefär motsvarar byggnadens vinkel.

Du märker att några av bokstäverna inte överlappar byggnaderna. För att åtgärda detta, välj pennverktyget och utvidga manuellt längst ned på bokstäverna genom att dra nya former över dem. När du har gjort det, högerklicka och välj "Fyll sökväg". Fyll markeringen med svart.

Därefter raderar du de överlappande områdena av din typ. Återigen använder du pennverktyget för att skapa ett urval. Zooma in i ditt fotografi och spåra runt byggnaden och trädet. När du har gjort det, högerklicka och gå till "Gör markering." Du borde nu ha en rörlig streckad linje som den nedan:

Högerklicka på ditt typografi lager och välj "Rasterize Type." Detta kommer att göra det från ett typlager till ett standardlager. Slå samman ditt typlager med de anpassade formerna som vi gjorde tidigare genom att välja dem alla medan du håller Skift-tangenten och gå till Lag → Sammanlagda lager. Valet vi gjorde i sista steget med penverktyget ska fortfarande vara aktivt. Med det enda typlagret som nu valts, tryck på Delete-tangenten. Detta bör ta bort all överlappande text.

Nu är det dags för en mycket enkel fotoredigering att kombinera din typ lite bättre. Välj bakgrundsskiktet (vilket ska vara ditt fotografi) och gå till Bild → Justeringar → Desaturate för att göra ditt fotografi till gråskala / svartvitt. Gå nu till Bild → Justeringar → Fotofilter. Välj alternativet sepia från rullgardinsmenyn och spela med nivåreglaget för att ställa in effektens intensitet. Jag valde runt 60%.

Högerklicka på ditt typlager och välj "Blandningsalternativ" från menyn. Applicera ett färgöverlägg till din typ; Jag använde en ljusbrun. Här är mitt resultat:

Så här applicerar du en Drop Shadow och Pattern Overlay till typografi med Adobe Photoshop

I den här korta handledningen kommer vi att jazz upp en enkel typografi med inbyggda Photoshop-effekter. Vi skapar också vårt eget mönster.

Låt oss först skapa vårt enkla mönster. Öppna ett nytt Photoshop-dokument som är 3-3 pixlar. Välj nu pennaverktyget. Zooma in i din duk och använd svart # 000000 med tre punkter diagonalt över din duk, enligt nedan:

Gå till Redigera → Definiera mönster för att få fram följande fältlåda. Ring ditt mönster något lämpligt (jag ringde min "Diag Line 1"). Tryck på "OK" -knappen. Ditt mönster är klart!

Skapa ett annat nytt Photoshop-dokument. Fyll bakgrunden med en ljus färg efter eget val, och lägg till lite typografi på duken. De typsnitt jag använde är Helvetica Neue Medium och Helvetica Neue Bold.

Återmarkera din text och ändra dess färg. Välj något som kontrasterar bra med bakgrunden. Det är viktigt att ställa in textfärgen istället för att använda ett färgöverlägg eftersom vi använder ett mönsteröverlägg senare och tyvärr kan du inte använda båda.

Högerklicka på ditt typslag och välj "Blandningsalternativ" för att öppna fönstret Lagstil. Välj "Mönsteröverlägg" och välj det mönster som vi gjort tidigare i rutan Mönster. Byt blandningsläge till "Överlagring" och opacitet till 30%. Resultaten varierar beroende på ditt färgval, så var god att experimentera.

Vi ska nu applicera en inre skugga. Använd inställningarna som ses på skärmdumpen nedan:

Applicera nu en mycket svag men viktig drop-skugga. Att uppmärksamma små detaljer är alltid värt det. Använd liknande inställningar som de som ses på skärmdumpen nedan:

För att avsluta typografi dupliceras texten helt. Högerklicka på typslagret och välj "Dubbla lager". Välj Flytta-verktyget, flytta typen på annat håll i ditt dokument och sätt sedan om det under ditt ursprungliga typslag. Sänk opaciteten, och du är klar.

4. Blanda stilar

Blandningsstilar (vanligtvis känd som blandningsläge i Photoshop och Illustrator) är ett bra sätt att lägga till en dimension i ditt arbete utan mycket ansträngning. Det låter dig blanda objekt och färger tillsammans på flera olika sätt. Blandningslägen används ofta med olika opacitetsnivåer; till exempel när du tillämpar en fotografisk textur på en bild, som vi kommer att diskutera senare.

Det verkar som om det finns tre former i varumärket, men det finns faktiskt bara två: en blå och röd. Ett blandningsläge har applicerats på formerna så att den texturerade bakgrunden kan visas genom att blanda färgerna och skapa en levande mörklila.

Denna lilla bit är fylld med olika blandningsmetoder, texturer, fotografier och enkla former, vilket resulterar i ett kraftfullt arbete.

Denna härliga bit av arbete upprepar enkla former och använder olika blandningslägen för att göra varje form unik. Blandningslägen har också applicerats på typografi.

De två cirklarna i denna design har olika blandningsmetoder applicerade på dem, varav den ena projekterar en röd nyans på bilden under, den andra som ändrar bilden under en mörkröd, och vilka båda tillåter texturen att visa sig igenom. Ett levande rött produceras där de två formerna möts.

Denna Open Yoga Gallery-del är en av mina favoriter i showcase. Den kombinerar ett mjukt och begränsat färgschema med ett fotografi och lägger sedan till ljud, ljus textur och stilig typografi.

Fotografiet i det här stycket kan ha producerats genom att överla hela fotot med en fast färg och ändra blandningsläge för det lagret, vilket gör att bilden under den ser ut ur tvätten och sliten.

Denna bit är fylld med textur. Ett blandningsmodus applicerades på varje textur för att låta bilden nedan visas.

På samma sätt som Italien såg vi, det här fotot manipulerades med ett lager fullt av färg med ett blandningsmodus. Stilen har ett lager av olika färger, mest sannolikt med ett överlay-blandningsläge som tillämpas på dem och en sänkt transparens.

Cirkeln i mitten av denna bit har ett blandningsläge applicerat på det, så att bakgrunden kan visas.

Mini-Tutorials

Så här blandar du färger med foton med hjälp av Adobe Photoshop

I den här mini-handledningen appliceras färg på ett svartvitt fotografi med hjälp av borstverktyget och blandningslägena. Jag ska använda detta spindelwebfotografi .

Öppna ett nytt Photoshop-dokument, och placera fotografiet av ditt val på duken. Jag har gett mig en vit gräns.

Välj en mjuk borste och ljusfärg. Jag har valt en gul pastell. Skapa ett nytt lager genom att gå till Lag → Nytt lager. Måla en stor splodge av din färg på det nya skiktet, som här ses:

Upprepa processen med fler färger. Du kan måla dessa färger på samma lager, det är inte nödvändigt att skapa nya lager.

När du är klar med att färga ditt lager går du till Filter → Blur → Gaussian Blur. Blur skiktet för att slå samman dessa färger lite mer. Allt över 100 pixlar borde vara bra, men det beror på storleken på din duk: ju större duk, desto fler pixlar behöver du suddas av.

Vi kan nu ändra lagrets blandningsläge. Från rullgardinsmenyn för blandningsläge i lagpaletten väljer du "Överlagring".

Minska opaciteten hos ditt färgade lager till omkring 50%. Du borde sluta med något så här:

Experimentation är nyckel; varje blandningsläge ändrar slutprodukten, vilket betyder att du aldrig kommer att kunna reproducera ett resultat. I exemplet nedan används skärmbilden för blandningsläge, som tvättar fotografiet och gör att det ser retro ut. Att experimentera med effekter som detta är typiskt hur retro Lomo och Holga kameraflöden reproduceras.

Medel

Nedan finns ett litet urval av vintage poster tutorials som använder sig av blandning stilar:

5. Textur och brus

Textur och ljud ger visuellt intresse för ditt arbete. I vissa fall ser en design helt enkelt inte ut utan dem. I andra fall kan texturen och bruset vara för mycket. Nedan är några exempel på retro design som fungerar bra med textur.

En härdad fotografiserad textur används i detta stycke, vilket ger den övergripande designen ett vackert slitat utseende.

Denna rena textur ger slutligen en ren design. Den retro looken uppnås med en lätt grunge borste för att ta bort några delar av logotypen och typografi.

Pappersstruktur har använts för mycket i detta stycke för att producera en utslitad vintage digital digital del av jobbet.

Liknande det sista exemplet har en pappersstruktur använts för att få konstverket att se ut som en gammal affisch. En mörk konsistens placeras också över toppen av boxarens silhuetter.

En kombination av trä, papper för återvunnet papper och kaffefärg har använts här för att ge en riktigt fantastisk effekt. Ett blandningsläge har applicerats på det lag som karaktären är på, vilket gör att texturen kan visas.

Strukturen i denna webbdesign är minimal och subtil, men ändå bidrar den väsentligt till det visuella intresset av det övergripande arbetet.

Textur används här för att liva upp bakgrunden och typografi. Den enklaste av texturer men fortfarande så effektiv.

Textur har använts minimalt för att liva upp denna illustration, ge det djup och göra det mer tilltalande för ögat.

Här är en bit som inte bara skulle se ut utan textur: bakgrunden, illustrationen och typografi är alla texturerade.

Denna del är ganska annorlunda än de andra i den här utställningen; Texturen är inte ett fotografi utan en vektorbild.

Medel

Listan nedan innehåller länkar till flera bra webbplatser där du kan ladda ner texturer - både premium och gratis att använda i ditt arbete:

TextureVault
En premium marknadsplats speciellt för nedladdning av individuella texturer. Priset varierar beroende på texturens storlek.
Lost & Taken
En bra blogg som lägger in några av de bästa texturerna runt. Några mycket högkvalitativa saker här. Du kan också se texturer i ett galleri .
CG-texturer
Förmodligen en av de största texturgallerierna runt. Tusentals bilder finns gratis.
TextureLovers
TextureLovers är i grunden ett galleri med texturer från hela webben. Det är ett bra ställe att gå om du inte är säker på var du ska se eftersom det visar texturer från en mängd olika webbplatser.

6. Bildskärning och skiktmasker

Bildskärning och lagmasker är effektiva för att lägga till extra element i ett arbete. Varför inkludera ett helt fotografi när du bara kan visa vad du behöver eller stila för att matcha resten av arbetet? Enkelhet är nyckeln till retro design.

Det här stycket har stor nytta av textur och typografiska effekter och använder skiktigt en skiktmaske för att runda av en bild av galaxen. Det ser fantastiskt ut.

Det här retro-stycket använder inte bara retromaskerade fotografier, utan även cirklar, slag, blandningsmetoder och ett begränsat färgschema - nästan alla huvudelement som omfattas av denna artikel.

Denna bit är ultim minimalistisk men ser bra ut. Bilderna är maskerade i cirklar och väldigt högljudda, vilket ger ett utmärkt retro-futuristiskt utseende.

Nedan följer några tutorials om beskärning av foton och användning av Photoshop-lagmasker:

Skriven uteslutande för WDD av Callum Chapman, en designer och illustrationhandel som Cirkelbox Creative . Han kör också The Inspiration Blog och Picmix Store

Dela dina vintage- och retrodesigner och illustrationer med oss, liksom alla artiklar eller handledningar som kan hjälpa dina medläsare.

design webbdesign retro årgång dribbble