Eleverne af Retro Web Design

Vintage og retro stil bliver mere og mere populær i dagens digitale kunst.

Brugen af retro og vintage temaer i design er nok en af de mest gennemgribende tendenser, siden branchen gik næsten helt digital.

I dagens post ser vi på eksempler på arbejde, der kommer fra det vidunderlige Dribbble , som hjælper os med at fokusere på uddrag af et stykke, snarere end hele designet eller illustrationen.

Herfra er det muligt at identificere hvilke teknikker der er blevet brugt og for at beskrive, hvordan de påvirker det overordnede design. Du vil blive fortrolig med disse designtendenser og kunne replikere dem.

For at hjælpe dig er korte tutorials spredt i hele artiklen. Vi vil også pege på flere andre nyttige tutorials og ressourcer til at komme i gang med dit eget vintage og retro arbejde!

1. Cirkler og andre enkle former

Enkle former bruges almindeligt i vintage design. Cirkler er de mest almindelige, især i branding. Nedenstående eksempler er blevet nøje udvalgt for at vise dig, hvor magtfulde enkle former der kan være.

Denne dejlige illustration gør brug af elliptiske former for at producere en sol og er afsluttet pænt med en typografisk effekt.

Cirkelboks Creative's branding er baseret på en cirkel og inspireret af vintageblækfrimærker og -mærker. Designet er iset med blomstermønstre og simpel typografisk styling.

Dette design er lidt anderledes, fordi det afhænger meget af simple former for at gøre det pop. Den blå bjælkehoved bruger en lang række små cirkler til at skabe en interessant bundkant.

Dette vintage design, som Circlebox Creative's branding, er inspireret af vintageblækfrimærker og -mærker. Identiteten ser ud som om den faktisk er blevet stemplet på et stykke papir, i modsætning til Cirkelboksens glatte og rene linjer.

Her er et andet mærke baseret på en cirkel. Tekstur og blå blandt alle de grå bringer virkelig dette design til livs.

Et utrolig simpelt stykke arbejde bestående af to cirkler, en tekstur, nogle blandestile og ren typografi. Dette stykke viser virkelig kraften i enkle former.

Mini-Vejledninger

Sådan appliceres et Damask Floral Pattern til en cirkel ved hjælp af Adobe Illustrator

Anvendelse af et mønster til en cirkel i Illustrator er noget, du sandsynligvis vil gøre meget, hvis du udforsker den retro trend. Teknikken ligner hvad Glace Cakes gør for deres branding (vist ovenfor).

Åbn Illustrator, og træk en cirkel. Hold Shift-tasten nede, mens du trækker din cirkel ud for at holde den rundt. Indsæt dit damaskblomstermønster ved at gå til Fil → Placering.

Fjern enhver baggrund og ændre farven på dit nyligt placerede mønster. Du kan vælge individuelle elementer ved hjælp af værktøjet Direkte markering.

Vælg dit mønster ved hjælp af markeringsværktøjet, og gå til vinduet → Pathfinder for at åbne Pathfinder-vinduet, hvis du ikke allerede har det. Hold Shift-tasten nede og vælg din cirkel for at vælge begge dine genstande samtidig. Klik på knappen "Minus Forside" i dit Pathfinder-vindue for at fjerne det blomstermønster, der ligger uden for din cirkel. Spil med dit farvevalg, og du er færdig!

Oprettelse af en boblet linje ved hjælp af Adobe Photoshop

Lad os lave en boblelignende linje som den i eksemplet ovenfor.

Brug det rektangulære markeringsværktøj, trække et valg og udfyld det med sort på et nyt lag. Vælg det elliptiske markeringsværktøj, og hold, mens du holder Shift-tasten, en meget lille markering ud og fyll den med sort igen på et nyt lag.

Placer den sorte cirkel på bunden af dit sorte rektangel. Duplikér laget, og placer den nye cirkel ud for din original.

Gentag dette trin, indtil du har noget, der ligner det følgende billede. Du har mange lag. Vælg alle dem, mens du holder Shift-tasten nede, og gå til Lag → Flet lag for at gøre dem til en.

Nu skal vi tilføje nogle enkle lagtyper eller blandingsmuligheder for at gøre vores form til liv! Højreklik på dit lag og vælg "Blandingsindstillinger." Vinduet Style Style skal åbnes. Anvend følgende effekter for at tilføje en gradient, indre skygge og drop-skygge:

Og vi er færdige!

2. To-tonede og begrænsede farveskemaer

To-tonede farveskemaer er en stor ting i vintage design, fordi det var ikke så let tilbage på dagen, som det er nu, at producere fuldfarvede udskrifter. Nedenfor er nogle nyere eksempler på totonede og begrænsede farveskemaer.

Dette minimalistiske design får sin visuelle appel fra de sorte og hvide former og linjer, især den vandrette stiplede linje og udskårne figurer fra bunden af cirklen.

Denne branding gentager et par udvalgte farver hele vejen igennem. Farverne virker utrolig godt sammen. Den gul-orange er den brændende farve, der fanger din opmærksomhed.

Dette dejlige stykke retro design er udelukkende afhængig af farve og typografi. De subtile one-pixel-brede linjer afslutter den.

Et andet to-tone sort og hvidt design. Denne identitet er baseret på et badge og får et lidt tredimensionelt udseende fra simpel typografi og effekter.

Dette eksempel viser virkelig, hvor effektiv farve der kan være. Den bruger tre farver: orange, brun og hvid. Kontrasten mellem de tre farveprøver fungerer meget godt for designet.

Dette design (selve identiteten, ikke baggrunden) er udelukkende afhængig af farve og typografi.

Dette design kombinerer oransje og en flot blågrøn med hvid. Farvekombinationen matcher de fancy grænser og simple typografiske effekter.

Endnu en anden typografisk logo, der bygger på to farver: hvid type på rødt. Bemærk, hvordan identiteten er baseret på en cirkel.

Denne identitet bruger kun tre farver, en elegant skrifttype og en god blandingstilstand for at sætte prikken på kagen.

Farveressourcer

En masse gode applikationer er derude for at hjælpe dig med at oprette dine egne farveskemaer. Dette lille udvalg deler flere af de bedste:

ColourLovers (webapp)
Et dejligt websted dedikeret til farveskemaer. Gennemse eksisterende temaer, der er oprettet af fællesskabet, eller lav din egen fra bunden ved at uploade billeder.
Aviary Toucan (webapp)
En anden webapplikation, men uden et fællesskabsbaggrund som ColourLovers. Denne applikation giver dig mulighed for at oprette farveskemaer fra bunden eller fra importerede billeder.
Adobe Kuler (webapp)
Endnu en anden farve management web applikation, denne gang bragt til os af den nogensinde elskede Adobe. Interfacet er fantastisk og nem at bruge. Kuler er vært for et fællesskab, og du kan gennemse de højest vurderede farveskemaer.
Farve Stream (iPhone app)
Denne iPhone-applikation gør det muligt at oprette og gemme farvepaletter fra bunden eller fra et importeret foto. Du kan også automatisk generere ordninger fra fotos ved hjælp af den indbyggede farveskærm.
paletter (iPhone app)
Paletter svarer til Color Stream, så du kan oprette og gemme farveskemaer på farten fra bunden eller fra et billede. Du kan også få fat i farver fra dit yndlingswebsted.

Hvis du er nybegynder, her er et par artikler værd at tjekke ud: " Valg af farvekombinationer "Og" Color Theory for Designers, Del 3: Lav dine egne farvepaletter .”

3. Typografiske elementer og tendenser

Typografi er et af de vigtigste elementer i retro digital design. Der er uendelige muligheder med typedesign, hvoraf nogle kan findes i eksemplerne nedenfor.

Denne uddrag af type design er pakket fuld af tekst-effekt godhed. Teksten er færdig med en drop-skygge og et simpelt, men virkelig fantastisk one-pixel diagonal-line mønster.

Her er mit personlige favorit typografiske stykke i denne udstillingsvindue. Det fusionerer nogle fremragende vintage stilarter med moderne teknikker. Typen bringes til liv ved tilføjelse af subtile detaljer, såsom den ene pixel hvide strejke på linjen "Du er hjerteligt inviteret" og de stadig vigtige drop-shadows på datatypen.

Denne retro typografi afslører overraskende enkle teknikker. "Design is" -type dupliseres tre gange og genplaceres. Den nederste duplikat er så tekstureret for at skabe en dejlig retro stil i løbet af få minutter.

Endnu mere typografi, der bruger en simpel drop-skygge til at tilføje dybde til det elegante, dekorative skrifttype.

Enkel typografi kombineret med halvgennemsigtige former og en subtil tekstur. Designet kommer sammen pænt.

Du kan ikke få meget enklere end dette: et kraftfuldt valg af skrifttyper.

Denne tredimensionale typografi blev sandsynligvis gennemført i Illustrator, idet der blev anvendt 3-D-værktøjerne. Subtile støj er blevet tilføjet til designet, som fungerer godt med det begrænsede farveskema.

Dette flotte lille øjebliksbillede af digitalt produceret retro design kombinerer tekstur, støj, simple former, forskellige blandestile og et fantastisk farveskema. Typografien, især den større type, bringes til liv ved de skarpe faldskygger.

Dette imponerende stykke vintage-inspireret business papirvarer gør brug af håndtrukne elementer til sit udseende. Designet har også et begrænset farveskema.

Den hvide typografi i dette design er fusioneret med billedet som om det var der, da fotografiet blev taget. Det fungerer godt med sepia-billedet.

Mini-Vejledninger

Sådan opretter du håndtegnet typografi ved hjælp af Adobe, Photoshop eller Illustrator

I denne korte tutorial lærer du, hvordan du hurtigt producerer, scanner og vektoriserer din håndtegnede type ved hjælp af Adobe Photoshop og Illustrator.

Først og fremmest skitser nogle bogstaver:

Du skal udfylde din skitserede type på en eller anden måde. Du kan gøre dette ved hjælp af maling eller en markør. Jeg vil bruge sort indisk blæk og en fin pensel, som jeg stærkt anbefaler, primært fordi den er så ren og fed.

Begynd at udfylde dine skitserede linjer.

Du skal ende med noget, der ligner dette.

Skan derefter dit billede. Hvis du ikke ejer en scanner, kan du bare fotografere arbejdet - bare sørg for, at det er af høj kvalitet. Når billedet er scannet eller fotograferet, skal du åbne en ny Photoshop-fil og gå til File → Place; Find billedet og læg det i dit dokument.

Gå til Billede → Justeringer → Lysstyrke / Kontrast. Hæv kontrastniveauet til et sted omkring 50. Dette vil gøre sorten mørkere i billedet.

Gem din fil som et billede, og åbn Adobe Illustrator. Opret en ny RGB-fil, og gå til File → Place. Find dit nyligt gemte billede og læg det på dit lærred. Vælg menupunktet "Live Trace" i menulinjen øverst på lærredet. Din tekst er nu en fungerende vektor og kan skaleres op eller ned som du vil, for at blive brugt i dine Photoshop-dokumenter.

Sådan tilføjes typografi til et byfoto ved hjælp af Adobe Photoshop

Vi skal tilføje typografi til et fotografi ved hjælp af en teknik, der ligner den, der bruges til Amsterdam fotografiet ovenfor. Med henblik på denne øvelse bruger vi dette fotografi af Barcelona .

Kopier fotografiet, og opret et nyt Photoshop-dokument. Indsæt billedet i dokumentet. Vælg tekstværktøjet og skriv "Barcelona" i det valgte skrifttype. Gå til Edit → Transform → Rotate, og drej typografien i en vinkel, så den omtrent svarer til vinklen af bygningerne.

Du vil bemærke, at nogle af bogstaverne ikke overlapper bygningerne. For at rette op på dette, skal du vælge værktøjet Pen og manuelt udvide bunden af bogstaverne ved at tegne nye figurer over dem. Når du har gjort det, skal du højreklikke og vælge "Fyld kurv". Udfyld markeringen med sort.

Dernæst slet de overlappende områder af din type. Brug igen Pen-værktøjet til at oprette et valg. Zoom lige ind i dit billede og spor rundt om bygningen og træet. Når du har gjort det, skal du højreklikke og gå til "Foretag markering." Du skal nu have en flydende stiplede linje som den nedenfor:

Højreklik på dit typografi lag og vælg "Rasterize Type." Dette vil ændre det fra et type lag til et standard lag. Flet dit type lag med de brugerdefinerede former, vi lavede tidligere, ved at vælge dem alle, mens du holder Skift nøglen og går til Lag → Flet lag. Det valg, vi lavede i sidste trin med Pen-værktøjet, skal stadig være aktivt. Med det nu valgte single-layer-lag, skal du trykke på Delete-tasten. Dette bør fjerne al den overlappende tekst.

Det er nu tid til nogle meget enkle billedredigering at fusionere din type lidt bedre. Vælg baggrundslaget (som skal være dit billede), og gå til Billede → Justeringer → Desaturat for at gøre dit billede til gråtoner / sort / hvid. Gå nu til Image → Adjustments → Photo Filter. Vælg sepia-optionen i rullemenuen, og spil med niveaureglaget for at indstille intensiteten af effekten. Jeg valgte omkring 60%.

Højreklik på dit type lag og vælg "Blandingsindstillinger" i menuen. Anvend et farveoverlay til din type; Jeg brugte en lysebrun. Her er mit resultat:

Sådan appliceres en drop skygge og mønster overlay til typografi ved hjælp af Adobe Photoshop

I denne korte tutorial vil vi jazz op et enkelt stykke typografi ved hjælp af indbyggede Photoshop-effekter. Vi vil også oprette vores eget mønster.

Lad os først lave vores enkle mønster. Åbn et nyt Photoshop-dokument, der er 3'-3 pixels. Vælg nu blyantværktøjet. Zoom lige ind i lærredet, og brug sort # 000000 sted tre punkter diagonalt på tværs af dit lærred, som vist nedenfor:

Gå til Rediger → Definer mønster for at få vist følgende feltfelt. Ring dit mønster noget passende (jeg kaldte min "Diag Line 1"). Tryk på knappen "OK". Dit mønster er gjort!

Opret et nyt nyt Photoshop-dokument. Fyld baggrunden med en lys farve efter eget valg, og tilføj nogle typografi til lærredet. De skrifttyper jeg brugte er Helvetica Neue Medium og Helvetica Neue Bold.

Vælg din tekst og ændre dens farve Vælg noget der kontrasterer godt med baggrunden. Det er vigtigt at indstille tekstfarven i stedet for at bruge et farveoverlay, fordi vi senere bruger et mønsteroverlay, og desværre kan du ikke bruge begge dele.

Højreklik på dit type lag, og vælg "Blandingsindstillinger" for at åbne vinduet Lagstil. Vælg "Mønsteroverlay", og vælg det mønster, vi lavede tidligere, i rullemenuen for mønster. Skift blandingstilstand til "Overlay" og opacitet til 30%. Resultaterne varierer afhængigt af dit farvevalg, så vær så velkommen til at eksperimentere.

Vi skal nu anvende en indre skygge. Brug de indstillinger, der ses i skærmbilledet nedenfor:

Anvend nu en meget svag men vigtig drop-skygge. Vær opmærksom på små detaljer er altid det værd. Brug lignende indstillinger til dem, der ses i skærmbilledet nedenfor:

For at afslutte typografien duplikerer vi teksten helt. Højreklik på type laget og vælg "Duplicate layer." Vælg Move-værktøjet, flyt den type andetsteds i dit dokument, og placér det derefter under dit originaltype lag. Sænk opaciteten, og du er færdig.

4. Blanding stilarter

Blending Styles (typisk kendt som Blending Mode i Photoshop og Illustrator) er en fantastisk måde at tilføje dimension til dit arbejde uden en masse indsats. Det giver dig mulighed for at blande genstande og farver sammen på flere forskellige måder. Blandingsformer anvendes ofte med forskellige opacitetsniveauer; for eksempel ved anvendelse af en fotografisk tekstur på et billede, som vi diskuterer senere.

Det ser ud til, at der er tre former i denne branding, men der er faktisk kun to: en blå og rød. En blandingstilstand er blevet anvendt til figurerne for at gøre det muligt for den teksturerede baggrund at vise sig, blande farverne og skabe en levende mørk lilla.

Dette lille stykke er fyldt med forskellige blandingsformer, teksturer, fotografier og enkle former, hvilket resulterer i et kraftigt arbejde.

Dette dejlige stykke arbejde gentager simple former og bruger forskellige blandingsformer til at gøre hver form unik. Blandingsformer er også blevet anvendt til typografi.

De to cirkler i dette design har forskellige blandingsformer, der anvendes til dem, hvoraf den ene projekter en rødfarve på billedet nedenunder, hvoraf den anden ændrer billedet under en mørk rød, og som begge tillader tekstur at vise igennem. Der produceres en levende rød, hvor de to former møder.

Dette Open Yoga Gallery-stykke er en af mine favoritter i udstillingsvinduet. Det kombinerer et blødt og begrænset farveskema med et fotografi og tilføjer derefter støj, lys tekstur og stilfuld typografi.

Fotografiet i dette stykke kunne være produceret ved at overlejre hele fotografiet med en solid farve og ændre blandingsfunktionen for det pågældende lag, hvilket gør billedet under det ser ud til at blive vasket og slidt.

Dette stykke er fyldt med tekstur. En blandingstilstand blev påført på hver tekstur for at tillade billedet nedenstående at vise igennem.

Ligesom billedet af Italien så vi, blev dette foto manipuleret ved hjælp af et lag fuld af farve med en blandingstilstand. Stilen har et lag af forskellige farvede klumper, sandsynligvis med en overlay-blandingstilstand anvendt på dem og en sænket gennemsigtighed.

Cirklen i midten af dette stykke har en blandingstilstand anvendt til den, så baggrunden kan vise sig.

Mini-Vejledninger

Sådan blandes farver med fotografier ved hjælp af Adobe Photoshop

I denne mini-tutorial vil vi anvende farve til et sort-hvidt fotografi ved hjælp af børsteværktøjet og blandingsfunktionerne. Jeg bruger dette spiderweb fotografi .

Åbn et nyt Photoshop-dokument, og læg fotografiet efter eget valg på lærredet. Jeg har givet mig en hvid ramme.

Vælg en blød børste og lys farve. Jeg har valgt en gul pastel. Opret et nyt lag ved at gå til Lag → Nyt lag. Mal en stor splodge af din farve på det nye lag, som det ses her:

Gentag processen med flere farver. Du kan male disse farver på samme lag - der er ikke behov for at oprette nye lag.

Når du er færdig med at farve dit lag, skal du gå til Filter → Blur → Gaussian Blur. Slør laget for at fusionere disse farver lidt mere. Alt over 100 pixels skal være fint, men det afhænger af lærredets størrelse: Jo større lærredet er, desto flere pixels skal du sløre det af.

Vi kan nu ændre blandingsfunktionen af laget. Vælg rullemenuen i lagpaletten ved at vælge "Overlay".

Sænk opaciteten af dit farvede lag til omkring 50%. Du skal ende med noget som dette:

Eksperimentering er nøglen; hver blandingstilstand ændrer det endelige produkt, hvilket betyder at du aldrig vil kunne reproducere et resultat. Eksemplet nedenfor bruger skærmbilledet for blandingstilstand, som vasker billedet ud og får det til at se retro. Eksperimentering med effekter som dette er typisk, hvordan retro Lomo og Holga kamera effekter gengives.

Ressourcer

Nedenfor er et lille udvalg af vintage plakat tutorials, der gør brug af blanding stilarter:

5. Tekstur og støj

Tekstur og støj tilføjer visuel interesse for dit arbejde. I nogle tilfælde ser et design ikke rigtigt ud uden dem. I andre tilfælde kan tekstur og støj være for meget. Nedenfor er et par eksempler på retro design, der fungerer godt med tekstur.

En billedtekst på lærredsstil anvendes i dette stykke, hvilket giver det overordnede design et dejligt slidt udseende.

Denne rene tekstur giver i sidste ende et rent design. Den retro look opnås med en let grunge børste for at fjerne nogle områder af logoet og typografi.

Papirtekst er blevet brugt overdrevent i dette stykke til at producere et slidt vintageagtigt digitalt stykke arbejde.

I lighed med det sidste eksempel er en papirtekstur brugt til at gøre kunstværket til en gammel plakat. En mørk tekstur er også placeret over toppen af bokserens silhuetter.

En kombination af træ, genbrugspapir og kaffefarvede teksturer er blevet brugt her for at producere en virkelig fantastisk effekt. En blandingstilstand er blevet anvendt på laget, som tegnet er på, så teksturet kan vise sig.

Teksturerne i dette webdesign er minimal og subtile, men det bidrager dog væsentligt til den visuelle interesse for det samlede arbejde.

Tekstur bruges her til at uddybe baggrunden og typografi. Den enkleste teksturer, men stadig så effektive.

Tekstur er blevet brugt minimalt for at opleve denne illustration, give den dybde og gøre den mere tiltalende for øjet.

Her er et stykke, der bare ikke ville se det samme uden tekstur: baggrunden, illustrationen og typografien er alle teksturerede.

Dette stykke er ret forskelligt fra de andre i denne udstillingsvindue; tekstur er ikke et fotografi, men et vektorbillede.

Ressourcer

Listen nedenfor indeholder links til flere gode hjemmesider, hvor du kan downloade teksturer - både premium og gratis at bruge i dit arbejde:

TextureVault
En premium markedsplads specielt til downloading af individuelle teksturer. Prisen varierer afhængigt af teksturstørrelsen.
Mistet og taget
En stor blog, der posterer nogle af de bedste teksturer rundt. Nogle virkelig høj kvalitet ting her. Du kan også se teksturer i et galleri .
CG-teksturer
Sandsynligvis en af de største tekstur gallerier rundt. Tusindvis af billeder er tilgængelige gratis.
TextureLovers
TextureLovers er stort set et galleri af teksturer fra hele nettet. Det er et godt sted at gå, hvis du ikke er sikker på, hvor du skal se, fordi den viser teksturer fra en række hjemmesider.

6. Billed Beskæring og lag masker

Billedbeskæring og lagmasker er effektive til at tilføje ekstra elementer til et arbejde. Hvorfor medtage et helt fotografi, når du bare kan vise, hvad du har brug for eller stil det for at matche resten af arbejdet? Enkelhed er nøglen i retro design.

Dette stykke gør stor brug af tekstur og typografiske effekter og bruger smart lag en maske til at afrunde et billede af galaksen. Det ser fantastisk ud.

Dette retro-stykke bruger ikke kun retromaskerede fotografier, men også cirkler, streger, blandingsformer og et begrænset farveskema - stort set alle de vigtigste elementer, der er omfattet af denne artikel.

Dette stykke er ultra-minimalistisk, men ser godt ud. Billederne er maskeret i cirkler og meget støjende, hvilket giver det et godt retro-futuristisk udseende.

Nedenfor er et par tutorials om beskæring af fotos og brug af Photoshop-lagmasker:

Skrevet udelukkende til WDD af Callum Chapman, en designer og illustration handel som Cirkelkasse Creative . Han kører også The Inspiration Blog og Picmix Store

Del dine vintage- og retrodesigner og illustrationer med os, samt artikler eller vejledninger, der kan hjælpe dine medgængere.

design webdesign retro årgang dribbble