Recreating Instagram Retro filtereffekter

I denne opplæringen jeg kommer til å ta en titt på nøyaktig hvordan Instagram-filtrene fungerer, før gjenskape lignende effekter i Photoshop. Jeg vil også introdusere deg til noen interessante nye CSS egenskaper som vil hjelpe oss til å skape Instagram stil filtre direkte i nettleseren.

Det finnes en hel rekke vintage foto apps tilgjengelig på markedet fra Hipstamatic til kamera + men langt den mest kjente av alle disse programmene er Instagram; en av de opprinnelige spillerne som ble lansert i september 2010. Tre måneder senere i desember det hadde meldt seg over 1 million brukere.

Denne økningen i popularitet senere førte det til å bli kjøpt opp av Facebook for en rapportert $ 1 milliard dollar. Ikke verst for en liten oppstart av 13 personer.

Hvordan Instagram Filter Arbeid

Instagram har en rekke forskjellige filtre å velge mellom, alt fra "Lumo-fi" til "Nashville". Alle som er laget ved hjelp av en rekke metoder, filtre og effekter. Kevin Systrom, Instagram er co-grunnlegger legger til:

Det er egentlig en kombinasjon av en haug med forskjellige metoder. I noen tilfeller trekker vi på toppen av bilder, i andre vi gjør pixel matematikk. Det er egentlig avhengig av effekten vi går for. For eksempel, virkelig er Lomo-fi ikke mye mer enn det bildet med forsterket kontrast

Bildet nedenfor viser de forskjellige filtereffekter som brukes av Instagram:.
Bilde av Jessica Zollman /Creative Commons

Selv Hvert filter har forskjellige justeringer, avhengig av hvilken type av virkning selve prosessen for de fleste av dem kan bli brutt ned i seks trinn:

1. Justering

justering av farge og tone er trolig en av de viktigste trinnene som skiller hvert filter. Mange av egenskapene til hvert filter kan oppnås ved å sette ulike justeringsnivåene.

2. Dybdeskarphet

Dybdeskarpheten kan defineres som "avstanden mellom nærmeste og fjerneste objekter i en scene som vises akseptabel skarphet i et bilde". Hvis du er mest vant til å jobbe i grafisk design i motsetning til fotografering vil du sannsynligvis kjenne igjen det som litt i forgrunnen som vises skarp og klar og litt i bakgrunnen som vises uskarpt.

Ved å fokusere den skarpe /skarp litt om emnet som du fotografere og ha de omkringliggende områdene uklare, det bidrar til å trekke oppmerksomheten til det området du ønsker å fremheve.
Bilde gjengitt av SXU gratis arkivfotografi

​​Listen bilde illustrerer et godt eksempel på dybdeskarphet. Anlegget i forgrunnen vises i fokus, mens bakgrunnen er ute av fokus og ser uskarpt.

3. Lens Flare /Film Burn

På noen filtre Instagram legger et ekstra lag som vanligvis er et lysskjær eller film uskarphet. Legge til disse kan legge litt ekstra wow-faktor til bildet. Men disse bør brukes fornuftig som for mye vekt på lysskjær /film burn kan noen ganger gjøre den samlede effekten klebrig og amatørmessig.

Ta en titt på denne utvalg av linse bluss, som alle legger til vintage stil effekt:
Bilde av CG Arena
4. Gamle Film Effect Riper

For å legge til en vintage stil kornethet til et bilde og gi det en gammeldags følelse, er et overlegg tekstur brukt. Disse kan variere fra selve filmen riper generert støy. Støy oppstår når du får pikselnivå variasjon i fargeverdier som reduserer klarhet i et bilde. Datagenererte statisk støy er et ekstremt eksempel på støy.

5. Vignette

Når justeringer, dybdeskarphet og støy har blitt lagt til bildet, en vignett er plassert på toppen av det, nok en gang å fokusere oppmerksomheten på hovedinnholdet i bildet. En vignett er en teknikk som brukes i fotografering som reduserer et bildes lysstyrke eller metning mot kantene av bildet.
Bilde gjengitt av Wikipedia
6. Legge til en ramme

Til slutt blir en ramme lagt for å legge til at ekstra retro-ness til bildet. Rammene er ofte hva som kunne ha blitt sett på gamle ramme hjulene eller de opprinnelige polaroid stil bilder. De kan også fungere som eroderte eller revet i kantene som alle legger til at følelsen av bildet være en autentisk vintage photo.

Instagram-filtrene vanligvis begynner livet i Photoshop. Derfra blir de da programmert inn mål C som en del av den opprinnelige iPhone-app. Instragrams 'co-grunnlegger utdyper dette :.

Våre filtre er en kombinasjon av effekter - kurve profiler, blandingsmodi, fargenyanser, etc. Faktisk, jeg vanligvis lager dem i Photoshop før du oppretter algoritmer for å gjøre dem på telefonen

gjenskaper Instagram filter i Photoshop

Dette er hva vi skal opprette - du kan se før og etter effekten av å legge våre Instagram stil filtre.
< h3> Trinn 1: Lag Canvas

start med å lage en 600x600px firkant lerret og gi den en bakgrunnsfarge. Jeg har valgt å bruke den opprinnelige Instagram blå for min bakgrunn. Lim inn din valgte bildet til lerretet, deretter endre størrelsen og beskjære bildet hvis nødvendig

Trinn 2:. Juster farge

Nå er det tid for å gjøre fargen og tonejustering til bildet. Gjør dette ved å gå til "Bilde" i toppmenyen og velge Justeringer> Kurver. Du vil da bli presentert med en pop-up boks der du kan endre disse verdiene.

Start med å øke de grønne nivåer. Endre utgangs til '30', for eksempel. Ditt bilde skal nå se litt mer grønt. Vi vil også øke blues i bildet. Endre blå utgang til "100". Ditt bilde skal nå se ganske vasket.

Vær oppmerksom på at når du endrer disse justeringene kan du leke deg til du får ønsket effekt for bildet ditt. Når du har gjort dette, duplisere bildet du nettopp har laget. Du kan gjøre dette ved å høyreklikke på bildet laget og velge "Duplicate layer '

Trinn 3:. Opprette Dybdeskarphet

Med dupliserte laget valgt gå til Filter> Blur> Gaussian Blur, øke "Radius" til 5px og klikk "OK". Nå tar den sirkulære Marquee verktøyet og tegne en sirkel rundt området av fotografiet som du ønsker å være i fokus.

Når du har gjort det gå til Layer> Layer Mask> Skjul markering. Det skal nå ha opprettet en lagmaske sirkel ut av uskarpt bilde.

I lag-panelet, gå til lagmaske, trykk "alt", og klikk på lagmaske. Lerretet skal nå bytte til lagmaske. Gå til Filter> Blur> Gaussian blur og uskarpe masken ved 30px. Nå skal dette skape effekten av dybdeskarphet med motivet på bildet i fokus og bakgrunnen ut av fokus

Trinn 4:. Film Burn og Lens Flare

Ta en titt på Google bilder eller andre lager bildesider for et utvalg av lysskjær og filmbrannskader. Etter å ha valgt fakkel /brenne eller begge så kan du kle dem på toppen av den opprinnelige, sette Blend Mode av filmen brenne til "Overlay" eller en annen modus som "Screen". Igjen, eksperimentere med disse for å se hva som dekker ditt bilde ..

Lens fakler kan også oppnås opprinnelig i Photoshop ved å gå til Filter> Render> Len flare ... og angi ønsket effekt.

Trinn 5:. lage filmen riper

Legg noen lager film riper, eller lage din egen støy ved å gå til Filter> støy> Legg til støy deretter spille rundt med overgangsmodi for å få ønsket effekt

i dette tilfellet har jeg valgt å sette mitt lager bilde til "Multipliser" og har senket opacity til 14%

Trinn 6: Opprette Vignette

Vi er nesten på slutten av å skape Instagram stil filter effekt. Før det skjer trenger vi bare å legge den siste finpussen. For å lage vignetten, legge til et nytt layer og fyll den med en solid svart. Så rundskrivet stort telt verktøyet og tegne en stor oval form i midten av bildet med kantene på oval nesten berøre sidene av bildet.

Skjær telt utvalg ut av den svarte ved å trykke på " delete-tasten på tastaturet. Så, nok en gang gå til Filter> Blur> Gaussian blur og uskarphet vignetten laget. Retusjer oblat for å sørge for at sidene av det er helt svart og ikke en gjennomsiktig uskarphet. Når dette er gjort, redusere tettheten tilsvarende. Jeg har senket min til 63%

Trinn 8: Legg Frame

Den siste delen er å legge rammen. Jeg har valgt å legge en gammel filmrull utseende ved hjelp av en kombinasjon av å skape en rektangulær omkrets av bildet og innlemme det med noen tall, bokstaver og piler fra noen lager opptak av gamle filmruller.

Du kan også skape noen interessante revet effekter ved å laste ned noen avrevne photoshop børster og bruke lagmaska ​​verktøyet med disse.

... og det er hvordan du kan gjenskape Instagram stil filtre i Photoshop. Nå la oss gå videre til å skape dem med CSS.

Translating Instagram Filtre for Web

Selv om jeg ikke vil si at gjenskape Instagram innfødte filtre i CSS som er mulig, det har vært noen introduksjoner til en verden av CSS nylig som gjør det nesten
mulig. Ved å spille rundt med disse egenskapene er det mulig å opprette lignende effekter med litt eksperimentering.

Jeg kommer til å introdusere deg til noen av dem som forhåpentligvis vil hjelpe deg å komme i gang og på vei.

filtre

i øyeblikket bare WebKit-baserte nettlesere støtter denne egenskapen, men med litt flaks vil det bli implementert i alle de store moderne nettlesere snart. Filter gir muligheten til å legge Photoshop stil effekter til et bilde gjennom kraften av CSS. Filtrene er som følger:

Blur

Gray skala

Sepia

Lysstyrke

Saturation

Hue Roter

Kontrast

Invert

Selv om noen av de ovennevnte virkninger kan komme til nytte for denne type ting, jeg kommer til å se på to som vil være mest effektive når emulere Instagram stil bilder. For fullstendig informasjon om markeringen for bruk av disse egenskapene kan du sjekke ut denne CSS3 filtre blogginnlegg.

Kontrast

Kontrast er forskjellen i farge og lys mellom deler av et bilde. Økende dette kan ofte føre til en lysere, mer levende bilde, mens redusere det kan føre til en mer falmet bilde.

Blur

blur filter kommer i virkelig hendig når gjenskape dybdeskarphet i et bilde. Overlegg to kopier av samme bilde, og deretter legge en flekk av rundt 5 eller 6 piksler til teten bildet. Vi kan da bruke CSS maskering for å maskere ut den biten som vi ønsker mer i fokus, ved å avsløre den underliggende skarpt bilde.

CSS Maske

CSS Maske gjør det mulig å spesifisere en annen grafikk element, form eller fil som skal brukes som en klipping region. Brukt sammen med blur filter du kan lage noe virkelig interessant dybdeskarphet effekter.

Kompositte

Tilbake i 2012 så jeg en tweet som nevnt hvordan det ville være kjempeflott om du kunne gjennomføre Photoshop stil fargemoduser til bilder ved hjelp av CSS. Vel, nå, takket være et forslag fra Adobe, kan det snart være mulig! Forslaget er for 'CSS compositing "og er beskrevet som" Blending og sammensetting for web ".

Det er ennå ikke implementert i alle nettlesere, men Adobe har satt sammen et utvalg nettleser som implementerer den og lar deg leke seg med sitt forslag. Du kan finne ut mer på Adobe sammensetting. Med disse kommer alle kjente Adobe blandingsmodi, for eksempel skjerm, overlay og formere seg.

CSS Graderinger

CSS gradienter kan brukes til å lage noen virkelig fine overlay toner for din Instagram stil bilder. Ved hjelp av en gradient som gul til gjennomsiktig til rosa og deretter endre tettheten av disse kan noen ganger gi en hyggelig tone, slik at det føles retro og opptre på en lignende måte å filme brenne.

Konklusjon

det virker som alle i øyeblikket bruker apps som Instagram for å gi sine fotografier som retro magi. Det er ingen tvil om det; de gjør bildene dine føler varmere og legge til flere tegn til hva som ellers kan være ganske kjedelig bilder.

Som popularitet fortsetter å stige, vil flere effekter og filtre skal innføres. Ved å forstå de grunnleggende begreper om hvordan disse effektene oppnås bør du nå være i stand til å lage dem for din nettside eller app ved hjelp av Photoshop. Med tiden skal jeg tenke CSS vil ha en hel rekke egenskaper som lar oss manipulere bilder på en lignende måte. Den gode nyheten er at ved å bruke noen av de egenskapene jeg har nevnt i dag kan du sikkert begynne å leke seg med noen interessante Instagram stil effekter akkurat nå.

Vet du om noen andre CSS egenskaper som kan komme i nyttig for å lage Instagram effekter? Gi meg beskjed i kommentarfeltet nedenfor!

Flere Links,

Lese og ressurser 10 Photoshop handlinger for å skape Instagram stil effekter

Instagram filtre for Photoshop

Adobe nettleser for visning av CSS sammensetting.

Lag instagram bilder ved hjelp av PHP

IOS Objective C Instagram stil filtre