Design Cool Game Graphics ved hjelp av forskyvningskart

Denne opplæringen tar inspirasjon fra overlevelseskrekkfilgrafikk som Resident Evil og Undergang. Det som gjør at overlevelsesskrekksspillene er særegne, er at spilleren ofte finner seg alene i mørke, klaustrofobiske, sårbare situasjoner. Ammunisjon og helseoppstart er vanligvis svært begrensede mens fiender er rikelig - alt dette er designet for maksimal spillespenning.

Denne opplæringen gjenskaper et fiktivt spilldeksel ved å kombinere Photoshops kanaler med Lighting Effects Filter for å produsere realistiske forskyvningskart. For å starte, vil du opprette en tredimensjonal distressed logo, kombinere de samme teknikkene sammen med noen avanserte banefunksjoner for å lage de rustne bakgrunnspanelene. Til slutt vil vi vise deg hvordan du skal fargelegge en Cinema 4D-skapning, slik at den følsomt blander seg inn i miljøet.


Trinn 1

Start med å åpne "Baking_tray.jpg" fra "kilde" mappen. Dette er et ideelt grungy metallbilde for å forflytte logo-designen.



Steg 2

For presisjon jobber jeg først i Illustrator for å lage logoen og deretter importere til Photoshop. Åpne "Title.jpg" fra "source" -mappen og gå Image> Adjustments> Invert (Command + I). Gå nå til Velg alle (Kommando + A) og Kopier til utklippstavlen.

Tilbake i bildet "Baking_tray.jpg", bytt til kanalpaletten og klikk på ikonet Create New Channel. Nå Lim inn valget til den nye kanalen og merk det "Logo."



Trinn 3

Dupliser den nye kanalen ved å dra dens miniatyrbilde til ikonet Create New Channel og merk det "Logo blur." Gi nå en Gaussisk uskarphet på 5 px.



Trinn 4

Mål den øverste "RGB" komposittkanalen og skift deretter til lagpaletten din. Vi vil gjøre omfattende bruk av kanaler i denne opplæringen, så husk at når du er i kanalpaletten, må du ha komposittkanalen rettet mot å fungere på de faktiske lagene.

Dupliser "Bakgrunn" -laget ved å dra miniatyrbildet til ikonet Create New Layer og merk det "Logo raised." Nå for den morsomme delen. Gå til Filter> Render> Lys effekter. Velg et spotlight-alternativ, og følg innstillingene som vises nedenfor, velg "Logo blur" i rullegardinmenyen Texturkanal, kontroller hvitt er høyt alternativ og sett Mountainous-skyvekontrollen til 100%. Du kan også lagre innstillinger for fremtidig bruk angitt av pilen - jeg ringte min "LOGO LIGHTS."



Trinn 5

Kommando-klikk på "Logo" -kanalen for å generere et valg, og gå til Velg> Endre> Utvid med 2 px.



Trinn 6

Legg til en ny kanal, deretter med svart sett som forgrunnsfargen hit Slett for å fylle det aktive valget med hvitt. Merk denne kanalen "Logo utvidet." Du vil bruke dette til å trimme bort overflødig området neste.



Trinn 7

Generer et utvalg fra "Logo utvidet" -kanalen og deretter Inverse it (Shift + Command + I). Nå med målet "Logo raised" lagret, trykker du Slett. Jeg har midlertidig deaktivert synligheten av "Bakgrunn" -laget for å vise resultatet.



Trinn 8

Åpne "Scratches.jpg" fra "kilde" -mappen og velg Alle / Kopier. Tilbake i din loggfil legg til en annen kanal, Lim inn valget og merk det "Skraper". Aktiver nå synligheten til den øverste kompositt "RGB" -kanalen og trykk på Command + T for å endre størrelsen, som dekker logoen.

For å gjøre ting klarere, kan du alltid endre kanalens standardrøde til en mer brukervennlig farge. Velg først Kanalalternativer fra uttrekksmenyen, velg deretter en farge ved å klikke på fargeprøven og deretter justere dens opacitet for å smake.



Trinn 9

Vi bruker denne kanalen for å angripe logoen, så du vil unngå store hvite biter som ville gjøre den mindre teksten ulastelig. Bruk en liten, hardkanten, svart pensel for å slette områder som angitt. Du er også velkommen til å bruke Clone Stamp Tool (S) for å legge til flere riper.



Trinn 10

Mjukt "Scratches" -kanalen litt ved å gi den en Gaussisk uskarphet på 2 px.



Trinn 11

Dupliser "Logo raised" -laget og merk det "Logo Scratches." Påfør Lighting Effects-filteret på nytt ved å bruke de samme innstillingene som tidligere, men å velge "Skraper" under Texture Channel, fjerner du merket av hvitt, og er høyt alternativ og setter Skyous-skyveknappen til 12%. Jeg lagret disse innstillingene som "LOGO SCRATCH LIGHTS."



Trinn 12

Dupliser "Bakgrunn" -laget og merk det "Innvendige riper". Klikk nå Kommando + F for å bruke filteret på nytt. For å skape illusjonen om dybden, bruk piltastene på tastaturet for å dytte laginnholdet 4 trinn til høyre og 4 trinn ned.



Trinn 13

Klikk på ikonet Create New Fill eller Adjustment layer, og bruk rullegardinmenyen til å velge Solid Color. Klikk på Fargeprøven og velg C: 75, M: 68, Y: 67 og K: 90. Pass på at dette laget sitter over "Innvendige riper". Sett nå blandingsmodus for å multiplisere og slipp opaciteten til 75%.



Trinn 14

Mål laget "Logo scratches" og legg til en Drop Shadow / Command og Emboss Layer Style som vist for å fremheve dybden.



Trinn 15

Mål "Color Fill 1" -masken, og velg K: 50 som forgrunnsfarge. Velg Gradient Tool (G) og bruk Radial forhåndsinnstilt for å dra fra midten ut - dette avslører nå noen skjulte detaljer og gir også en subtile hint av belysning.



Trinn 16

Dobbeltklikk på "Bakgrunn" -laget og merk det "Original metal", legg til en gruppemappe øverst i stabelen og merk det "LOGO." Skift-klikk på alle miniatyrene dine, og legg dem i mappen.

Deretter genererer du et valg fra "Logo utvidet" -kanalen, legg til et nytt lag nederst i gruppemappen og fyll ut valget med svart. Nå deaktiverer du alle andre lags synlighet midlertidig og bruker pennverktøyet (P) til Stier til å tegne en lukket sti som vist.



Trinn 17

Bytt til paletten til sti og Kommando-klikk på sti-miniatyrbildet for å generere et valg. Tilbake i lagpaletten din, sørg for at det nye laget er målrettet og fyll ut valget med svart.



Trinn 18

Merk det nye laget "Clipping mask", og aktiver deretter synligheten til alle lagene. Trykk nå Alt og klikk mellom hvert lags miniatyr i sin tur slik at alle lagene er klippet til grunnlaget.

Siden klipping gruppen bruker de ikke-gjennomsiktige områdene av bunnlaget som en maske, er det ingen mulighet for kanten forstyrrelser fra andre lag, så du igjen med en ren kant. Sett din loggfil til en side, for i neste trinn vil du opprette bakgrunnen.



Trinn 19

Opprett et nytt RGB-dokument 21 cm bredt med 27 cm høyt med en oppløsning på 300 dpi, og bakgrunnsinnholdet er satt til hvitt. Åpne "Baking_tray.jpg" igjen og gå Image> Rotate Canvas> 90 grader CW. Dra / slipp det i dokumentet ditt som et nytt lag. Transform for å passe og merk det "Metal", og dupliser deretter laget og gå til Rediger> Transform> Roter 180 grader. Sett nå blandingsmodus for å multiplisere og merk duplikatet "Metal multiply."



Trinn 20

Legg til en sentral veiledning, og besøk deretter loggfilen din og Shift-dra "miniatyrbildet" LOGO "i arbeidsdokumentet og posisjonen som vist. Du er nå ferdig med logo-dokumentet, slik at du kan lukke det.



Trinn 21

Last ned og åpne Chevron-bildet, og bruk Rectangular Marquee Tool (M) til å kopiere topphalvdelen, deretter Lim inn som et nytt lag under "LOGO" -mappen. Gå tilbake til chevronbildet, Verskv valget og Kopier> Lim inn igjen. Foreløpig slippe opaciteten til dette laget og juster stripene. Når du er ferdig, setter du opaciteten tilbake til 100%. Velg nå Eraser Tool (E) og bruk en middels, mykkantet børste for å blande topplaget.



Trinn 22

Med det øverste "chevron" laget målrettet treffer Kommando + E for å slå sammen. Re-størrelse og plassering øverst på lerretet, merk det "Chevrons", og sett blandemodus til ekskludering. Hold nede Alt mens du klikker på ikonet Create new fill or adjust layer, og velg Levels fra rullegardinmenyen. I det neste vinduet, velg Bruk Forrige lag for å lage klipmaske. Sett nå svartpunktet til 42, midtpunktet til 0,55 og hvitepunktet til 242.

Et normalt justeringslag vil endre mållaget, så vel som de under det, men klipping av en justering til et enkelt lag vil etterlate de underliggende.



Trinn 23

Legg "MetalgrungeBrushes.abr" børster fra "kilde" -mappen, legg deretter til en maske på "Chevrons" -laget. Med svart sett som forgrunnsfarge, maling på masken ved hjelp av en stempling mote for å ødelegge områder - husk å rotere og vri børstene for å unngå repetisjon.



Trinn 24

Legg til et nytt lag under "Chevrons", merk det "Top grad", og sett Blandingsmodus for å Multiply. Nå Shift-dra en kort lineær gradient fra toppen ved hjelp av Forgrunn til gjennomsiktig forhåndsinnstilling.



Trinn 25

Utvid "LOGO" gruppemappen, legg deretter til et nytt lag under "Clipping mask" og merk det "Logo Shadow." Kommandoklikk "Clipping mask" -laget for å generere et utvalg, og med det nye lagsmålrettede fyllet med svart. Nå Transform fra sentrum for å forstørre fraksjonen.



Trinn 26

Gi nå "Logo Shadow" -laget et Gaussisk uskarphet på 24 px og sett Blending Mode for å Multiply.



Trinn 27

Åpne "3D_render.tif" fra "kilde" -mappen og dra / slipp som et nytt lag øverst i stabelen og merk det "Mutant."



Trinn 28

Legg til et nytt lag under "Chevrons," sett Blending Mode for å Multiply og merk det "Bottom grad." Shift-dra en lineær gradient fra bunnen ved hjelp av Forgrunn til gjennomsiktig forhåndsinnstilling som du gjorde i trinn 24, men gjør det litt dypere.



Trinn 29

Legg til et nytt nytt lag under "Mutant", sett Blandingsmodus for å Multiply og merk det "Mutant Shadow." Bruk nå Transform Tools Distort and Perspective-funksjoner til å omforme det.



Trinn 30

Gi laget et Gaussisk slør på 8 px.



Trinn 31

Legg til en maske og bruk en 50% svart lineær gradient for å forsiktig skygge skyggen fra toppen av lerretet som vist.



Trinn 32

Deaktiver synligheten av "Mutant" -laget og "LOGO" -gruppemappen. Mål "Mutant shadow" -laget og trykk Shift + Command + Alt + E til Stamp Visible (dette vil lage et komposittlag fra alle synlige). Navngi det resulterende laget "Bakgrunn fusjonert".



Trinn 33

Organiser nå noen av lagene; Først sletter du det hvite "Bakgrunn" -laget, og plasserer deretter "LOGO" -gruppemappen under "Mutant-laget". Deretter legger du til en ny gruppemappe som heter "BACKGROUND" og plasserer den under "Bakgrunnsflettet" -laget. Nå Skift-klikk alle lagene under den (vist i blått) og dra dem inn i "BACKGROUND" -mappen.

La visningen av "Mutant" -laget av for øyeblikket. Deretter legger du til baner for å legge til litt dybde i bakgrunnspanelet, så trekk inn noen guider som vist.



Trinn 34

Bruk pennverktøyet (angitt til stier), og trykk på Skift for å begrense 90/45 graders vinkler, og klikk dem til styrene som vist. Jeg har strøket dem med rosa og slått av styrene for klarhet i skjermbildet. Husk at du alltid kan bruke Direct Selection Tool (A) til å endre individuelle poeng etter behov.



Trinn 35

Velg nå Polygon under Custom Shape Tool (U) og angi alternativene til Stier med 8 sider. Vi vil at denne nye formen skal endre den opprinnelige banen, så sjekk også Exclude Overlapping Path Areas. Dra nå, legg til en stor, sentral polygon, (jeg har deaktivert guider for klarhet i skjermbildet). Du må også rotere mens du drar for å holde sidene firkantet.

Ikke svett hvis du tar feil i første gang, bruk bare Path Selection Tool (ikke Direct Selection Tool) for å plassere det etter behov. Formen kan også omformas ved å velge og gå til Rediger> Transform Path> Scale.



Trinn 36

Skift-klikk for å velge de fire øverste punktene i polygonen ved hjelp av Direct Selection Tool, og dra dem oppover for å forlenge formen utover lerretet ditt som vist.



Trinn 37

Sett forgrunnsfargen din til hvit, og generer et valg fra banen din. Deretter legger du til en ny kanal og merker den "Paneler". Deretter går du til Rediger> Stroke, i den neste dialogboksen skriver du inn en verdi på 5 px, og kontrollerer alternativet Plasseringssenter.



Trinn 38

Gi nå kanalen en Gaussisk uskarphet på 5 px.



Trinn 39

Dupliser "Bakgrunnsflettet" lag og merk det "Panel groves." Bruk nå et lyseffekterfilter ved hjelp av en retningslysinnstilling som vist. Velg også "Paneler" i rullegardinmenyen Texturkanal, samt fjern merket for alternativet White Is High og sett Mountainous-skyvekontrollen til 50%.



Trinn 40

Legg til en ny kanal og merk den "Nitter", og velg deretter Ellipse Custom Shape Tool. Sett det til å fylle piksler. Bruk rullegardinmenyen til å velge Fast størrelse og skriv inn 30 px i feltene Bredde og Høyde. Aktiver synligheten til komposittkanalen "RGB", og juster deretter fargen og opasiteten til masken som passer. Sett nå forgrunnsfargen din til hvit og legg naglene langs kantene på panelene.



Trinn 41

Dupliser "Rivets" -kanalen og merk det "Rivets uskarphet." Legg nå en Gaussisk uskarphet på 4 px.



Trinn 42

Plasser "Bakgrunnsmelt" -laget over "Panel grooves" -laget, og gi nytt navn til "Rivets". Kjør nå samme Lighting Effects-filteret du brukte i Trinn 39, men velg "Rivets blur" -kanalen i Texture Channel-menyen. Sjekk også White Is High og sett Mountainous-glideren til 25%.



Trinn 43

Generer et utvalg fra din "Rivets" -kanal og Utvid med 4 px. Nå Inverse seleksjonen, sørg for at "Rivets" -laget er målrettet og trykk Slett for å avsløre det underliggende laget.



Trinn 44

Med bakgrunnen nå fullført, er det på tide å blande skapningen til sitt miljø litt bedre. Start med å aktivere lagets synlighet og gå til Bilde> Justeringer> Erstatt farge. Velg et rosa område som angitt med Eyedropper, og sett deretter Fuzziness til 124. Sett nu fargen på +11 og Saturation til -78.



Trinn 45

Mørk den nederste delen av skapningen ved å lage et lagbasert utvalg fra "Mutant". Legg til et nytt lag over det og fyll med svart. Nå Shift-dra en svart lineær gradient fra toppen av masken, sett Blending Mode til Multiply og merk det "Mutant multiplisere."



Trinn 46

Klipp et fargebalansjusteringslag til "Mutant" -laget og sett midtpunktet Rød til +15, Grønn til -3 og Blå til -49. Juster skyggen Rød til +8 og Blå til -10.



Trinn 47

Mørk skapningen mer ved å klippe et nivå justeringslag og sette utgangsnivået whitepoint skyveknappen til 153.



Trinn 48

Bruk en stor, svart, mykkantet børste på "Levels 2" -masken for å forsiktig slette skapningens ansikt og hender.



Trinn 49

Lyseffektfilteret som ble brukt i trinn 30, har lettet bunnpanelet og figurens skygge. Løs dette ved å flytte "Bottom grad" -laget ut av mappen "BACKGROUND" og legg den over "Panel groves" -laget. Flytt også "Mutant shadow" -laget ut av mappen "BACKGROUND" og legg den under "LOGO" -mappen.



Trinn 50

Nå justerer du den overordnede fargene ved å legge til et normalt fargetone / Saturation-justeringslag (ikke klipp det) øverst i lagstakken ved å bruke følgende innstillinger: Mastermetning: -12, bruk deretter rullegardinmenyen Rediger-menyen til å velge Rød til -8, gul til -43, grønn til -65 og cyan til -32.



Trinn 51

3D-gjengivelsen ser litt for skarp ut i forhold til resten av bildet. Løs dette ved å gi "Mutant" -laget en liten mengde Gaussisk uskarphet (jeg brukte en verdi på 1,5 px).



Trinn 52

Du er nesten ferdig, bortsett fra å legge til noen grafikk. Gå til bilde> lerretstørrelse, fest lærredet til bunnen og øk høyden til 28,5 cm - dette gir ekstra plass til toppbanneret.



Trinn 53

Til slutt åpner du "Graphics.psd" fra "kilde" -mappen. Deretter Shift-dra den inn som et nytt lag. Zoom inn og se etter eventuelle områder som kan forbedres. Jeg revidert "LOGO" -mappen og justerte Opacities i "Logo scratches" -laget til 77% og "Color Fill 1" -laget til 80%.



Konklusjon

Teknikkene jeg har forklart i denne opplæringen kan brukes på mange forskjellige prosjekter fra utskrift til web. Noen gode effekter kan også oppnås ved å lage komplekse veier i Illustrator og legge inn som baner i Photoshop. Disse kan deretter konverteres til alfakanaler for bruk med Lighting Effects Filter.

Det endelige bildet er under. Du kan se den store versjonen her.