Elementene til Retro Web Design

Vintage og retro stil blir stadig mer populær i dagens digitale kunstverk.

Bruken av retro og vintage temaer i design er sannsynligvis en av de mest gjennomgripende trender siden næringen gikk nesten helt digital.

I dagens innlegg ser vi på eksempler på arbeid hentet fra det fantastiske Dribbble , som hjelper oss med å fokusere på utdrag av et stykke, i stedet for hele design eller illustrasjon.

Herfra er det mulig å identifisere hvilke teknikker som har vært brukt og å beskrive hvordan de påvirker den generelle utformingen. Du vil bli kjent med disse designtrender og kunne replikere dem.

For å hjelpe deg, er korte opplæringsspørsmål spredt gjennom hele artikkelen. Vi vil også peke deg på flere andre nyttige opplæringsprogrammer og ressurser for å komme i gang med ditt eget vintage- og retroarbeid!

1. Sirkler og andre enkle former

Enkle former brukes ofte i vintage design. Sirkler er de vanligste, spesielt i merkevarebygging. Eksemplene nedenfor er nøye valgt for å vise deg hvor kraftige enkle former kan være.

Denne flotte illustrasjonen bruker elliptiske former for å produsere en sol og er ferdig fint med en typografisk effekt.

Circlebox Creative's merkevarebygging er basert på en sirkel og inspirert av vintage blekkfrimærker og merker. Designet er iset med blomstermønster og enkel typografisk styling.

Denne designen er litt annerledes fordi den er avhengig av enkle former for å gjøre det pop. Den blå linjeposten bruker en lang rad små sirkler for å skape en interessant nederste kant.

Denne vintage designen, som Circlebox Creative's merkevarebygging, er inspirert av vintage blekkfrimærker og merker. Identiteten ser ut som om den faktisk har blitt stemplet på et stykke papir, i motsetning til Circleboxens glatte og rene linjer.

Her er et annet merkevare basert på en sirkel. Tekstur og blå blant alle de gråene bringer virkelig denne designen til livs.

Et utrolig enkelt stykke arbeid bestående av to sirkler, en tekstur, noen blandestiler og ren typografi. Dette stykket demonstrerer virkelig kraften i enkle former.

Mini-Tutorials

Slik bruker du et damaskblomstermønster til en sirkel ved hjelp av Adobe Illustrator

Bruke et mønster til en sirkel i Illustrator er noe du sannsynligvis vil gjøre mye hvis du undersøker den retro trenden. Teknikken ligner på hva Glace Cakes gjør for sin merkevarebygging (vist ovenfor).

Åpne Illustrator, og tegne en sirkel. Hold Shift-tasten mens du drar sirkelen din ut for å holde den rundt. Sett inn damaskblomstermønsteret ditt ved å gå til File → Place.

Fjern eventuell bakgrunn og endre fargen på det nylig plassert mønsteret. Du kan velge individuelle elementer ved hjelp av Direct Selection-verktøyet.

Velg mønsteret ditt ved hjelp av markeringsverktøyet og gå deretter til Vindu → Pathfinder for å åpne Pathfinder-vinduet hvis du ikke allerede har det. Hold Shift-tasten og velg sirkelen din for å velge begge elementene samtidig. Klikk på "Minus Front" -knappen i Pathfinder-vinduet for å fjerne blomstermønsteret som ligger utenfor sirkelen din. Spill med fargevalg, og du er ferdig!

Opprette en boblet linje ved hjelp av Adobe Photoshop

La oss lage en boblelignende linje som den i eksemplet ovenfor.

Bruk det rektangulære markeringsverktøyet, dra et utvalg og fyll det med svart på et nytt lag. Velg det elliptiske markeringsverktøyet, og hold, mens du holder Shift-tasten, et veldig lite utvalg og fyll det med svart, igjen på et nytt lag.

Plasser den svarte sirkelen på bunnen av ditt svarte rektangel. Dupliser laget, og plasser den nye sirkelen ved siden av originalen.

Gjenta dette trinnet til du har noe som ser ut som følgende bilde. Du har mange lag. Velg alle dem mens du holder Shift-tasten, og gå til Lag → Flett lag for å gjøre dem til en.

Nå skal vi legge til noen enkle lagstiler eller blandingsalternativer for å få vår form til liv! Høyreklikk på laget ditt og velg "Blandingsalternativer." Lagformatvinduet skal åpnes. Bruk følgende effekter for å legge til en gradient, indre skygge og drop-skygge:

Og vi er ferdige!

2. To-tonede og begrensede fargeskjemaer

To-tonede fargeskjemaer er en stor ting i vintage design fordi det var ikke så lett tilbake i dag som det er nå å produsere fargeprints. Nedenfor er noen nyere eksempler på to-tonede og begrensede fargeskjemaer.

Denne minimalistiske designen får sin visuelle appell fra de svarte og hvite figurene og linjene, spesielt den horisontale stiplede linjen og utskjærte former fra bunnen av sirkelen.

Denne merkevaren gjentar noen få utvalgte farger overalt. Fargene fungerer utrolig godt sammen. Den gul-oransje er fokalfargen som fanger oppmerksomheten din.

Denne flotte retrodesignen er avhengig av farge og typografi. Den subtile one-pixel-brede linjene fullfører den av.

En annen to-tone svart og hvit design. Denne identiteten er basert på et merke og får et litt tredimensjonalt utseende fra enkel typografi og effekter.

Dette eksempelet viser virkelig hvordan effektiv farge kan være. Den bruker tre farger: oransje, brun og hvit. Kontrasten mellom de tre fargene fungerer veldig bra for designen.

Denne utformingen (selve identiteten, ikke bakgrunnen) er avhengig av farge og typografi.

Denne designen kombinerer oransje og en fin blågrønn med hvit. Fargekombinasjonen samsvarer med fancy grenser og enkle typografiske effekter.

Enda en annen typografisk logotype som bygger på to farger: hvit type på rødt. Legg merke til hvordan identiteten er basert på en sirkel.

Denne identiteten bruker bare tre farger, en elegant skrifttype og en fin blandingstilstand for å sette isingen på kaken.

Color Resources

En rekke flotte applikasjoner er der ute for å hjelpe deg med å lage dine egne fargeskjemaer. Dette lille utvalget deler flere av de beste:

ColourLovers (webapp)
Et nydelig nettsted dedikert til fargeskjemaer. Bla gjennom eksisterende temaer som er opprettet av fellesskapet, eller lag ditt eget fra grunnen ved å laste opp bilder.
Aviary Toucan (webapp)
En annen webapplikasjon, men uten et fellesskapssupport som ColourLovers. Denne applikasjonen lar deg lage farger fra grunnen eller fra importerte bilder.
Adobe Kuler (webapp)
Enda en annen fargestyring webapplikasjon, denne gangen brakt til oss av den allment elskede Adobe. Grensesnittet er fantastisk og brukervennlig. Kuler er vertskap for et fellesskap, og du kan bla gjennom de høyest karakteriserte fargevalgene.
Fargestrøm (iPhone app)
Denne iPhone-applikasjonen lar deg lage og lagre fargepaletter fra grunnen eller fra et importert bilde. Du kan også automatisk generere ordninger fra bilder ved hjelp av den innebygde fargeskjermen.
paletter (iPhone app)
Paletter ligner på Color Stream, slik at du kan lage og lagre fargevalg på farten fra grunnen av eller fra et bilde. Du kan også ta tak i farger fra favorittwebområdet ditt.

Hvis du er nybegynner, her er et par artikler verdt å sjekke ut: " Velge fargekombinasjoner "Og" Farge teori for designere, del 3: Lag dine egne fargepaletter .”

3. Typografiske elementer og trender

Typografi er en av de viktigste elementene i retro digital design. Det finnes uendelige muligheter med typedesign, noen av dem finnes i eksemplene nedenfor.

Denne brikken av typen design er fullpakket med tekst-effekt godhet. Teksten er ferdig med en dråpe-skygge og et enkelt, men virkelig kjempebra diagonal-linjemønster med en piksel.

Her er min personlige favoritt typografiske brikke i denne utstillingsvinduet. Det fusjonerer noen gode vintage stiler med moderne teknikker. Typen bringes til liv ved å legge til subtile detaljer, for eksempel den ene piksel hvite streken på linjen "Du er hjertelig invitert", og de like viktige dropshadows på datatypen.

Denne retro typografien avslører overraskende enkle teknikker. Design-typen er duplisert tre ganger og reposisjonert. Den nederste duplikat er deretter strukturert for å skape en nydelig retro stil om noen minutter.

Enda mer typografi som bruker en enkel dråpe-skygge for å legge til dybde til det elegante, dekorative skrifttypen.

Enkel typografi kombinert med semi-gjennomsiktige former og en subtil tekstur. Designet møtes pent.

Du kan ikke bli mye enklere enn dette: et kraftig valg av skrifttyper.

Denne tredimensjonale typografien var mest sannsynlig fullført i Illustrator, og benyttet seg av 3-D-verktøyene der. Subtile støy har blitt lagt til designet, som fungerer godt med det begrensede fargeskjemaet.

Dette flotte lille øyeblikksbildet av digitalt produsert retro design kombinerer tekstur, støy, enkle former, forskjellige blandestiler og et flott fargeskjema. Typografien, spesielt den større typen, blir levendegjort av de skarpe drop-skyggene.

Denne imponerende delen av vintage-inspirert forretningsbrevpapir gjør bruk av hånddrevne elementer for utseendet. Designet har også et begrenset fargevalg.

Den hvite typografien i denne utformingen har blitt fusjonert med bildet som om det var der da bildet ble tatt. Det fungerer bra med sepia-bildet.

Mini-Tutorials

Slik oppretter du håndtegnet typografi ved hjelp av Adobe, Photoshop eller Illustrator

I denne korte opplæringen lærer du hvordan du raskt produserer, skanner og vektoriser din håndtegnede type ved hjelp av Adobe Photoshop og Illustrator.

Først og fremst skisser noen bokstaver:

Du må fylle ut skissertypen din på en eller annen måte. Du kan gjøre dette ved å bruke maling eller markør. Jeg vil bruke svart indisk blekk og en fin pensel, som jeg anbefaler, hovedsakelig fordi den er så ren og fet.

Begynn å fylle ut dine skisserte linjer.

Du bør ende opp med noe som ser slik ut.

Skann deretter bildet ditt. Hvis du ikke eier en skanner, kan du bare fotografere arbeidet - bare sørg for at det er høy kvalitet. Når bildet er skannet eller fotografert, åpner du en ny Photoshop-fil og går til Arkiv → Plasser; Finn bildet og legg det i dokumentet.

Gå til Bilde → Justeringer → Lysstyrke / Kontrast. Øk kontrastnivået til et sted rundt 50. Dette vil mørke svart i bildet.

Lagre filen som et bilde, og åpne Adobe Illustrator. Opprett en ny RGB-fil, og gå til File → Place. Finn ditt nylig lagrede bilde og legg det på lerretet ditt. I menylinjen øverst på lerretet, velg alternativet "Live Trace". Teksten din er nå en fungerende vektor og kan skaleres opp eller ned som du vil, for å bli brukt i dine Photoshop-dokumenter.

Slik legger du til typografi til et byfotografi ved hjelp av Adobe Photoshop

Vi skal legge til typografi på et fotografi ved hjelp av en teknikk som ligner den som ble brukt til Amsterdam fotografiet ovenfor. For formålet med denne opplæringen bruker vi dette bildet av Barcelona .

Kopier fotografiet, og opprett et nytt Photoshop-dokument. Lim inn fotografiet i dokumentet. Velg tekstverktøyet og skriv "Barcelona" i skrifttypen du ønsker. Gå til Rediger → Transform → Roter, og roter typografien i en vinkel slik at den omtrent settes opp med vinkelen til bygningene.

Du vil legge merke til at noen av bokstavene ikke overlapper bygningene. For å fikse dette, velg pennverktøyet og utvide bunnen av bokstavene manuelt ved å tegne nye former over dem. Når du har gjort dette, høyreklikker du og velger "Fyll ut banen". Fyll utvalget med svart.

Deretter sletter du de overlappende områdene av typen din. Igjen, bruk pennverktøyet for å lage et valg. Zoom rett inn i bildet ditt og spore rundt bygningen og treet. Når du har gjort dette, høyreklikker du og går til "Lag valg". Du bør nå ha en flytende prikkelinje som den nedenfor:

Høyreklikk på typografi laget og velg "Rasterize Type." Dette vil slå det fra et type lag til et standard lag. Slett ditt typelag med de egendefinerte figurene vi laget tidligere ved å velge dem alle mens du holder Shift-tasten og gå til Lag → Flett lag. Valget vi laget i det siste trinnet med pennverktøyet, bør fortsatt være aktivt. Med enkeltlagslaget nå valgt, trykk Slett-tasten. Dette bør fjerne all overlappende tekst.

Det er nå tid til noen veldig enkel fotoredigering for å slå sammen din type litt bedre. Velg bakgrunnslaget (som skal være bildet ditt), og gå til Bilde → Tilpasninger → Desaturat for å slå bildet ditt til gråtoner / svart og hvitt. Gå nå til Bilde → Justeringer → Fotofilter. Velg sepia-alternativet fra rullegardinmenyen og spill av med glidebryteren for å angi intensiteten av effekten. Jeg valgte rundt 60%.

Høyreklikk på ditt type lag og velg "Blandingsalternativer" fra menyen. Bruk et fargeoverlegg til din type; Jeg brukte en lysebrun. Her er mitt resultat:

Slik bruker du en skygge og mønsteroverlegg til typografi ved hjelp av Adobe Photoshop

I denne korte opplæringen vil vi jazz opp et enkelt stykke typografi ved hjelp av innebygde Photoshop-effekter. Vi lager også vårt eget mønster.

La oss først lage vårt enkle mønster. Åpne et nytt Photoshop-dokument som er 3-3 piksler. Velg nå blyantverktøyet. Zoom rett inn i lerretet ditt, og bruk svart # 000000 plass tre punkter diagonalt over lerretet ditt, som vist nedenfor:

Gå til Rediger → Definer mønster for å hente følgende feltboks. Ring mønsteret ditt noe passende (jeg ringte min "Diag Line 1"). Trykk på "OK" -knappen. Ditt mønster er ferdig!

Opprett et nytt, nytt Photoshop-dokument. Fyll bakgrunnen med en lys farge etter eget valg, og legg til litt typografi på lerretet. Skriftene jeg brukte er Helvetica Neue Medium og Helvetica Neue Bold.

Velg teksten din og endre fargen. Velg noe som skiller seg godt ut med bakgrunnen. Det er viktig å angi tekstfargen i stedet for å bruke et fargelegglag fordi vi skal bruke et mønsteroverlegg senere, og dessverre kan du ikke bruke begge.

Høyreklikk på ditt type lag, og velg "Blandingsalternativer" for å åpne Lag Style-vinduet. Velg "Mønsteroverlegg", og velg mønsteret vi laget tidligere, i rullegardinmenyen for mønster. Endre blandemodus til "Overlegg" og opasiteten til 30%. Resultatene varierer avhengig av fargevalg, så vær så snill å eksperimentere.

Vi skal nå bruke en indre skygge. Bruk innstillingene som er sett på skjermbildet nedenfor:

Bruk nå en veldig svak, men viktig dropshadow. Å være oppmerksom på små detaljer er alltid verdt det. Bruk lignende innstillinger som de som vises i skjermbildet nedenfor:

For å fullføre typografien dupliserer vi teksten helt. Høyreklikk på type laget og velg "Dupliser lag." Velg Flytt-verktøyet, flytt typen andre steder i dokumentet, og plasser det under ditt originaltypelag. Senk opaciteten, og du er ferdig.

4. Blendende stiler

Blending Styles (vanligvis kjent som Blending Mode i Photoshop og Illustrator) er en fin måte å legge dimensjon på arbeidet ditt uten mye arbeid. Den lar deg blande gjenstander og farger sammen på flere forskjellige måter. Blandingsmodi brukes ofte med forskjellige opasitetsnivåer; for eksempel når du bruker en fotografisk tekstur til et bilde, som vi diskuterer senere.

Det ser ut til at det er tre former i denne merkevaren, men faktisk er det bare to: en blå og rød. En blandingstilstand har blitt brukt på figurene slik at den teksturerte bakgrunnen kan vise seg, blande fargene og skape en levende mørk lilla.

Dette lille stykket er fullpakket med ulike blandemoduser, teksturer, fotografier og enkle former, noe som resulterer i et kraftig arbeid.

Dette herlige arbeidet gjentar enkle former og bruker forskjellige blandemoduser for å gjøre hver form unik. Blandingsmodi har også blitt brukt på typografien.

De to sirkler i dette designet har forskjellige blandemoduser som er brukt på dem, hvorav den ene prosjekterer en rød fargetone på bildet under, det andre som forandrer bildet under en mørk rød, og som begge tillater tekstur å vise seg gjennom. En levende rød er produsert der de to figurene møtes.

Dette Open Yoga Gallery-stykket er en av mine favoritter i utstillingsvinduet. Den kombinerer et mykt og begrenset fargevalg med et fotografi, og legger til støy, lys tekstur og stilig typografi.

Bildet i dette stykket kan ha blitt produsert ved å legge over hele bildet med en solid farge og endre blandingsmodus for laget, slik at bildet under det ser ut som det er vasket og slitt.

Dette stykket er fullpakket med tekstur. En blandingstilstand ble påført på hver tekstur for å tillate bildet under å vise gjennom.

I likhet med bildet av Italia vi så, ble dette bildet manipulert ved å bruke et lag fullt av farger med blandingsmodus. Stilen har et lag med forskjellige fargete blader, mest sannsynlig med en Overlay-blandingstilstand som er brukt på dem og en senket gjennomsiktighet.

Sirkelen i midten av dette stykket har en blandemodus påført den, slik at bakgrunnen kan vises.

Mini-Tutorials

Slik blander du farger med fotografier ved hjelp av Adobe Photoshop

I denne mini-opplæringen vil vi bruke farge til et svart-hvitt fotografi ved hjelp av penselverktøyet og blandemodusene. Jeg skal bruke dette spiderweb fotografiet .

Åpne et nytt Photoshop-dokument, og legg bildet av ditt valg på lerretet. Jeg har gitt meg en hvit ramme.

Velg en myk børste og lysfarge. Jeg har valgt en gul pastell. Lag et nytt lag ved å gå til Lag → Nytt lag. Mal en stor splodge av fargen din på det nye laget, som sett her:

Gjenta prosessen med flere farger. Du kan male disse fargene på samme lag - det er ikke nødvendig å lage nye lag.

Når du er ferdig med å fargelegge laget, går du til Filter → Blur → Gaussian Blur. Slør laget for å slå sammen disse fargene litt mer. Alt over 100 piksler skal ha det bra, men det avhenger av størrelsen på lerretet ditt: Jo større lerret er, desto flere piksler må du sløre av.

Vi kan nå endre blandingstilstanden til laget. Fra rullegardinmenyen for blandemodus i lagpaletten velger du "Overlegg".

Senk opaciteten til ditt fargede lag til rundt 50%. Du bør ende opp med noe slikt:

Eksperimentering er nøkkelen; hver blandingstilstand endrer sluttproduktet, noe som betyr at du aldri kan reproducere et resultat. Eksemplet nedenfor bruker blandingsmodusskjermbildet, som vasker bildet ut og gjør det til å se retro ut. Eksperimentering med effekter som dette er typisk hvordan retro Lomo og Holga kamera effekter gjengis.

ressurser

Nedenfor er et lite utvalg av vintage plakat opplæringsprogrammer som gjør bruk av blanding stiler:

5. Tekstur og støy

Tekstur og støy legger til visuell interesse for arbeidet ditt. I noen tilfeller ser et design ikke rett ut uten dem. I andre tilfeller kan tekstur og støy være for mye. Nedenfor er noen eksempler på retro design som fungerer godt med tekstur.

En fotografisk tekstur i lerretstil er brukt i dette stykket, og gir den overordnede designen et nydelig slitt utseende.

Denne rene tekstur produserer til slutt en ren design. Den retro utseendet oppnås med en lett grunge børste for å fjerne noen områder av logoen og typografi.

Papir tekstur har blitt brukt overdrevet i dette stykket for å produsere et slitt ut vintage-utseende digitalt stykke arbeid.

I likhet med det siste eksemplet har en papirstruktur blitt brukt til å gjøre kunstverket til en gammel plakat. En mørk tekstur er også plassert over toppen av bokserens silhuetter.

En kombinasjon av tre, resirkulert papir og kaffe flekkestrukturer har blitt brukt her for å produsere en virkelig fantastisk effekt. En blandingstilstand har blitt brukt på laget som tegnet er på, slik at tekstur kan vises.

Teksten i dette webdesignet er minimal og subtil, men likevel bidrar det betydelig til den visuelle interessen til det samlede arbeidet.

Tekstur brukes her for å gi opp bakgrunn og typografi. Den enkleste av teksturer, men fortsatt så effektiv.

Tekstur er brukt minimalt for å gi opp denne illustrasjonen, gi den dybde og gjøre den mer tiltalende for øyet.

Her er et stykke som bare ikke ville se det samme uten tekstur: bakgrunnen, illustrasjonen og typografien er alle teksturerte.

Dette stykket er ganske forskjellig fra de andre i denne utstillingsvinduet; Tekstur er ikke et fotografi, men et vektorbilde.

ressurser

Listen nedenfor inneholder lenker til flere flotte nettsteder hvor du kan laste ned teksturer - både premium og gratis å bruke i arbeidet ditt:

TextureVault
En premium markedsplass spesielt for nedlasting av individuelle teksturer. Prisen varierer avhengig av størrelsen på tekstur.
Tapt og tatt
En flott blogg som legger inn noen av de beste teksturene rundt. Noen veldig høye ting her. Du kan også vise teksturer i et galleri .
CG-teksturer
Sannsynligvis en av de største teksturgalleriene rundt. Tusenvis av bilder er tilgjengelig gratis.
TextureLovers
TextureLovers er i utgangspunktet et galleri med teksturer fra hele nettet. Det er et flott sted å gå hvis du ikke er sikker på hvor du skal se, fordi den viser teksturer fra en rekke nettsteder.

6. Bilde Beskjærings- og lagsmasker

Bildebeskjæring og lagmasker er effektive for å legge til flere elementer i et arbeid. Hvorfor ta med et helt fotografi når du bare kan vise hva du trenger eller stil det for å matche resten av arbeidet? Enkelhet er nøkkelen i retro design.

Dette stykket gjør stor bruk av tekstur og typografiske effekter, og bruker en lagmaske smart til å avrunde et bilde av galaksen. Det ser flott ut.

Dette retro-stykket bruker ikke bare retromaskerte fotografier, men også sirkler, streker, blandemoduser og et begrenset fargeskjema - nesten alle hovedelementene som er dekket av denne artikkelen.

Dette stykket er ultra-minimalistisk, men ser bra ut. Bildene er maskert i sirkler og veldig støyende, noe som gir det et flott retro-futuristisk utseende.

Nedenfor finner du noen veiledninger om beskjæring av bilder og bruk av Photoshop-lagmasker:

Skrevet utelukkende for WDD av Callum Chapman, en designer og illustrasjon som Sirkelboks Creative . Han kjører også The Inspirasjon Blogg og Picmix Store

Del dine vintage- og retro-motiver og illustrasjoner med oss, så vel som artikler eller opplæringsprogrammer som kan hjelpe andre lesere.

design webdesign retro årgang dribbble