Slik lager du en enestående Twitter-bakgrunn i Photoshop

Hvis du er på twitter og leser denne bloggen, er det sjansene for at du allerede har tilpasset profilen din med en kul twitter-bakgrunn. I denne opplæringen lager vi en av våre egne rundt en sentral maskot: en svært detaljert twitterfugl, som du må tegne deg selv! Gjør deg klar til å gjøre mye mer enn å klikke i denne kunstneriske opplæringen!

Introduksjon

Når du lager en Twitter-bakgrunn, er det forskjellige ting å ta hensyn til. Det største problemet er at du ikke kan sentrere et bilde i twitterprofilen din. Så gi opp ideer du måtte ha om å pakke inn grafikk rundt kroppen. Du kan enten lage en flislagbar design, eller til venstre justere bildet. Siden kroppsstørrelsen ikke endres i henhold til oppløsningen den vises på, må du også bekymre deg om å holde hovedinnholdet ditt synlig over flere skjermstørrelser, og fading ut illustrasjonen din sømløst.

Hvis teksten går for langt til høyre, kan mange kanskje ikke lese det. Hvis illustrasjonen din er svært detaljert og slutter etter bare 250 piksler, vil den se merkelig ut på store skjermer, fordi den ikke fades ut til høyre og nederst. Og til slutt jobber du i webformat, så tenk på filstørrelsen når du designer det.

For å takle alle disse kravene, vil vi opprette en relativt liten bakgrunn som vil justere til venstre side og fade ut mot bunnen og til høyre. Og ved å falme ut, mener jeg ikke å slette halvparten av bildet, men etter hvert bruker færre og færre elementer. Det er en vanlig praksis for twitter bakgrunner å inkludere en kort biografi og lenker til hvor personen kan bli funnet online.

Min egen bakgrunn har ikke disse, fordi jeg føler at profilfilmen er synlig uansett til høyre, og du får også til å velge en lenke som folk kan bruke. Jeg lenker til porteføljen min, der det er flere lenker i min online-tilstedeværelse, hvis noen er interessert. Uansett, for å gjøre dette mer praktisk, er det en kort biografi (i dette tilfellet totalt falsk på grunn av mangel på inspirasjon) og et par lenker.

Endelig bildeforhåndsvisning

Ta en titt på bildet vi skal skape. Du kan se den endelige bildet forhåndsvisning nedenfor eller bildet i full størrelse her.

Trinn 1

Den første tingen å gjøre her, er å tegne maskot, en twitterfugl. Det er mange søte, lyse og skinnende twitterfugler der ute, så jeg ønsket en som ikke bare var forskjellig, men som representerte min stil. Tross alt handler en twitterprofil om eieren.

Prosessen sett under er veldig strukket ut, men kan forkortes. Jeg vil ikke at du skal tenke at dette er den eneste måten du bør gjøre, men hvis du ikke har mye erfaring med linjekunst, er det godt å ta deg tid og få hvert trinn riktig. På tide, etter å ha blitt mer erfarne, kan en enkel doodle være nok til å komme i gang i Photoshop.

For nå skjønner du imidlertid med å få et vanlig stykke papir og tegne ut noen grunnleggende skisser av fuglen. Fokus på å få stillingen riktig, og ikke bekymre deg for detaljene. de vil bli dekket senere.

Steg 2

Som du kanskje ser, er posisjonen til beina i skjermbildet under ikke identisk med sluttresultatet. Faktisk endret jeg dem på alle stadier fordi det er litt vanskelig å få dem til å se naturlig og estetisk ut på samme tid. Bare spor et grovt bilde av fuglen din i denne første fasen.

Trinn 3

Nå trenger du litt sporingspapir. Det er i utgangspunktet et halvt gjennomsiktig papir som lar deg tegne noe på toppen av et referansebilde, i dette tilfellet vår grove skisse. Jeg brukte to blyanter: en 2B og en 8B. Jo høyere tallet, jo mykere tippen. Jeg brukte 2B til å spore konturene og 8B for å tegne skygger. Viskelæret er kuttet i halv, slik at du kan bruke den skarpe kanten til å slette små områder. Det er nyttig for å legge til høydepunkter.

Jeg gled også et ekstra ark med sporingspapir i mellom for å gjøre det grove skissen mindre synlig. Hvis bildet ditt har for mye kontrast, er det en god idé å fade det ut mer, slik at du ikke blir forvirret.

Trinn 4

Bruk blyanten til å spore fuglens disposisjon. Du kan nå begynne å bekymre deg for detaljene.

Trinn 5

Du bør nå ha fullført den generelle oversikten over alle deler av fuglen.

Trinn 6

Begynn å legge til skyggelegging, slik at fuglen ser 3D ut. Legg merke til at skyggene er veldig grunnleggende, og trenger ikke å se veldig realistiske ut. Dette er bare en del av hele prosessen, og ikke et endelig bilde, så ikke bekymre deg for at det ser bra ut. Alt du trenger å gjøre er klart definere former og belysning.

Denne delen er viktig fordi alle skyggene blir kontinuerlige linjer i fremtiden. Tomme mellomrom er høydepunkter og parallelle linjer er skygger. Gjør linjene mer fjernt og kortere, og det menneskelige øye vil oppleve det som en gradient. Dette er i utgangspunktet en håndtegnet halvtone skjerm.

Trinn 7

Ta et annet stykke sporingspapir og legg det over blyantskissen du har laget. Denne gangen bruker vi denne som referanse for den endelige, line art fuglen.

Trinn 8

Nå er alt du trenger å gjøre, å tegne parallelle linjer over skyggene. For å fade dem ut, bare trekk linjene kortere og kortere.

Trinn 9

Husk at du kan fade ut omrisset også, ikke bare skyggelinjene.

Trinn 10

Denne gangen, vær veldig forsiktig med alle detaljer. Gjør disse figurene som ekte fjær, ikke enkle kurver.

Trinn 11

Fortsett denne prosessen over hodet og kroppen. Sørg for å gi ut nok høydepunkter.

Trinn 12

Som jeg sa, gikk føttene under en siste endring. Jeg ville ha noe mellom en angrepsposisjon og lavt nivå flygende.

Trinn 13

Jeg gjorde den andre vingen generelt mørkere enn den første. Det gjør tegningen ser mer dynamisk og realistisk ut. Støping av like lys over hele fuglen kan gjøre det ser mindre interessant ut. Selv om stillingen er for symmetrisk, kan du alltid stole på belysning for å krydre det litt.

Trinn 14

Og der er alt gjort. Kanskje litt for høy og strukket, men det spiller ingen rolle siden du ikke kan se alt i Twitter-bakgrunnen uansett.

Trinn 15

Skann det eller ta et bilde av det og sett det i Photoshop. Gå til Bilde> Justeringer> Nivåer og øke kontrasten betydelig. Mørk ut linjene, men ta opp noen av høydepunktene også.

Trinn 16

Gå til Velg> Fargevalg. På innsiden av vinduet klikker du på et svart område på bildet slik at du får et utvalg av de svarte linjene. Trykk OK og kopier valget (Command + C).

Trinn 17

Lag et nytt Photoshop-dokument som er 750 px i bredde og 700 px i høyde, og med 72 dpi. Lim inn fuglen (Command + V), dobbeltklikk på laget og legg til en Fargeoverleggseffekt. Velg en mørkblå (# 387ebc) og trykk OK. Opprett et nytt, tomt lag (Command + Shift + N), klikk på begge lagene i lagmenyen og slå sammen dem (Command + E). Det vil flate lagstilen.

Trinn 18

Nå i et nytt tomt lag under linjekunsten, bruk pennverktøyet (P) for å gi fuglen en bakgrunnsfarge (# 33ccff).

Trinn 19

For denne delen er det best å ha en penntablet, men det er ikke helt nødvendig. Du kan enten bruke en vanlig børste eller pennverktøyet for å lage høydepunktene og skyggene. Jeg gjorde det med en tablett. I dette trinnet sporer de første høydepunktene med hvitt og gjør det til en kappemaske, slik at den bare ser ut i fuglen.

Trinn 20

Tegn nå større slag av en lys cyan (# 7ff4fe). Lag et eget lag for hver av disse.

Trinn 21

Under den forrige måler du enda større høydepunkter med en litt mørkere cyan (# 4de2ff).

Trinn 22

En endelig høydefarge vil være noen grå aksenter (# ddded9).

Trinn 23

Bruk nå en lys gul (# f5e456) for å farge nebbet og legg til noen skygger også, med en mørkere gul (# bcb833).

Trinn 24

For å fullføre fuglen, fyll inn nebbet med samme mørkeblå, og trekk øyet. Bruk hvitt, og det samme mørkegult.

Trinn 25

Du må gå tilbake til tegnebrettet nå for å male noen få skyer. Jeg brukte flere typer kommentarbokser for dette. Dette er et sosialt nettverk, comic style shout-outs er rett på cue. Spor omrisset med en gråtonde (# d0cdbe).

Trinn 26

Gi bakgrunnen en lysere nyanse (#edeedb).

Trinn 27

Nå bare tegne noen tynne linjer for skygger (# dfe0d0) og høydepunkter (#ffffff).

Trinn 28

Gjenta denne prosessen for å lage noen andre typer kommentarkasser. Kombinert uttrykker disse enkle setninger, tanker og utrop. Jeg prøver ikke å rope for mye på profilen min, så ikke bekymre deg, disse er rent dekorative. Jeg roper ikke på mine følgere :)

Trinn 29

Det er på tide å legge til et bio og lenker. Den enkle, små teksten er Calibri Regular og overskriftene er i Rockwell Std Bold. Ampersand er Fru Eaves Medium Kursiv. Bruk samme farger som fuglen.

Rask tips

Husk alltid å prøve forskjellige antialiasingmetoder når du arbeider med type, spesielt ved lave oppløsninger. I det første eksemplet er ordet i skarp modus. Legg merke til at midtbokstavene ser ut til å spenne og slippe under bunnlinjen. Det kan være subtilt, men det er en feil.

Ikke bare det, men bokstavene er ikke engang parallelle. Hver av dem synes å ha sin egen orientering. For å fikse dette, prøv en alternativ metode for antialiasing, i dette tilfellet Sterk. Nå har bokstavene en felles orientering og utjevnet grunnlinje.

Mens forrige kan være en subtil løsning, er neste en svært vanlig feil. Ujevn sporing kan føre til at noen bokstaver overlapper og andre er for langt fra hverandre. Mens du vanligvis ikke kan merke disse feilene på vanlige små linjer med tekst, vil stor skjermtekst avsløre disse inkonsekvensene.

For å fikse dette må du manuelt endre mellomrom mellom hvert brev. Velg Typeverktøyet (T), klikk inne i en tekstlinje og dra et utvalg av de to første bokstavene. Skriv inn et passende nummer i sporingsfeltet. Når du har funnet akkurat riktig plass, velg det andre og tredje bokstaven og gjør det samme. Gå gjennom hvert mellomrom av to-til-to bokstaver til all sporing er riktig. Du kan se forskjellen på tilpasset og standard sporing i ovennevnte og under forekomsten av ordet.

Trinn 30

Finn vektorgradslaget der du sporet fuglen. Klikk på Vector Mask-miniatyrbildet for laget for å få opp banen. Bruk Path Selection Tool (svart pil) for å velge banen og kopiere den (Command + C). Åpne illustrator, lim inn banen (Command + V) og trykk enter i vinduet som åpnes i Illustrator (Compound Shape). Velg slagfargen og velg hvit (den er svart her, slik at du kan se den). Still slagvekten til 2 pt.

Trinn 31

Ta opp berøringspanelet (Vindu> Stroke) og bruk følgende innstillinger. Ikke bry deg om den grå bakgrunnen.

Trinn 32

Kopier det (Command + C) og lim det (Command + V) i Photoshop-filen som en smart objekt. Gjenta prosessen med kommentarfeltene også.

Trinn 33

Bruk samme overskriftstype, lag noen typografiske aksenter rundt kommentaren. Vi vil også bruke en rekke fugler fra Birds 2 Vector Pack av Go Media's Arsenal. Bare lim dem inn som smarte objekter, og gi dem et fargeoverlegg med hvilken som helst farge du vil ha.

Trinn 34

Bruk forskjellige fugler med forskjellige farger. Prøv å ikke overdrive det, eller overlappe dem.

Trinn 35

Jeg ønsket også å gi ideen om fugler som bærer meldinger, så jeg sendte brev rundt, i nærheten eller holdt av de faktiske fuglene. De er alle med en av de tre skriftene vi brukte tidligere.

Trinn 36

Gjenta motivet i øverste hjørne også. Ikke gjør det vitenskapelig. Hold orienteringen tilfeldig, og ikke nødvendigvis alle i en retning.

Trinn 37

Og så bare spred fuglene over lerretet. Husk å fade dem ut skjønt på høyre og bunn ved å plassere færre og færre.

Endelig bilde

Det er det! Vår twitter bakgrunn er fullført. Du kan se den endelige bildet forhåndsvisning nedenfor eller bildet i full størrelse her.

Dette er versjonen jeg har på min Twitter-profil.