Hoe maak je een One-of-a-Kind Twitter-achtergrond in Photoshop

Als je op twitter zit en deze blog leest, is de kans groot dat je je profiel al hebt aangepast met een toffe twitterachtergrond. In deze zelfstudie maken we een eigen rond een centrale mascotte: een zeer gedetailleerde twitter-vogel, die je zelf moet tekenen! Maak je klaar om veel meer te doen dan klikken in deze artistieke tutorial!

Invoering

Bij het maken van een Twitter-achtergrond zijn er verschillende dingen waarmee rekening moet worden gehouden. Het grootste probleem is het feit dat je een afbeelding in je Twitter-profiel niet kunt centreren. Dus geef alle ideeën op die je hebt over het inpakken van afbeeldingen rond het lichaam. U kunt een tegelontwerp maken of de afbeelding uitlijnen. Omdat de body-maat niet verandert volgens de resolutie die wordt bekeken, moet je je ook zorgen maken over het zichtbaar houden van je hoofdcontent over meerdere schermformaten en het naadloos laten vervagen van je illustratie..

Als uw tekst te ver naar rechts gaat, kunnen veel mensen de tekst misschien niet lezen. Als uw illustratie zeer gedetailleerd is en na slechts 250 pixels eindigt, ziet deze er vreemd uit op grote schermen, omdat deze niet naar rechts en onder uitflitst. En ten slotte werk je in webformaat dus denk goed na over je bestandsgrootte bij het ontwerpen ervan.

Om aan al deze vereisten te voldoen, maken we een relatief kleine achtergrond die uitgelijnd is met de linkerkant en langzaam naar beneden en naar rechts vervaagt. En door uit te faden, bedoel ik niet dat ik de helft van de afbeelding moet wissen, maar geleidelijk aan steeds minder elementen moet gebruiken. Het is een gebruikelijke gewoonte voor Twitter-achtergronden om een ​​korte bio en links naar waar de persoon online kan worden opgenomen.

Mijn eigen achtergrond heeft deze niet, omdat ik vind dat het profiel bio sowieso aan de rechterkant zichtbaar is en je ook een link mag kiezen die mensen kunnen gebruiken. Ik link naar mijn portfolio, waar er meerdere links zijn van mijn online aanwezigheid, voor het geval iemand geïnteresseerd is. Hoe dan ook, om dit praktischer te maken, is er een korte bio (in dit geval totale nep vanwege gebrek aan inspiratie) en een paar links.

Final Image Preview

Bekijk de afbeelding die we gaan maken. U kunt hier het uiteindelijke afbeeldingsvoorbeeld hieronder of de afbeelding op ware grootte bekijken.

Stap 1

Het eerste wat hier te doen is, is de mascotte te tekenen, een twitter-vogel. Er zijn veel leuke, heldere en glanzende twitter-vogels, dus ik wilde er een die niet alleen anders was, maar die mijn stijl vertegenwoordigde. Een twitterprofiel heeft tenslotte alles te maken met de eigenaar.

Het onderstaande proces is erg lang, maar kan worden ingekort. Ik wil niet dat je denkt dat dit alleen maar de manier is om het te doen, maar als je niet veel ervaring hebt met lijntekeningen, is het goed om je tijd te nemen en elke fase goed te krijgen. Na verloop van tijd kan een eenvoudige doodle, na steeds meer ervaring te hebben, genoeg zijn om je op weg te helpen in Photoshop.

Begin nu echter met het verkrijgen van een gewoon stuk papier en het opstellen van een paar basisschetsen van de vogel. Richt je aandacht op het rechtzetten van de houding en maak je geen zorgen over de details. die zullen later worden behandeld.

Stap 2

Zoals je misschien opmerkt, is de positie van de benen in de onderstaande schermafbeelding niet identiek aan het uiteindelijke resultaat. In feite heb ik ze in elk stadium veranderd omdat het een beetje moeilijk is om ze er natuurlijk en esthetisch uit te laten zien. Traceer gewoon een ruw beeld van je vogel in deze eerste fase.

Stap 3

Nu heb je wat calqueerpapier nodig. Het is eigenlijk een semi-transparant papier waarmee je iets kunt tekenen bovenop een referentiebeeld, in dit geval onze ruwe schets. Ik heb twee potloden gebruikt: een 2B en een 8B. Hoe hoger het getal, hoe zachter de tip. Ik gebruikte de 2B om de contouren te traceren en 8B om schaduwen te tekenen. De wisser is in tweeën gesneden, zodat u de scherpe rand kunt gebruiken om kleine gebieden te wissen. Dat is handig voor het toevoegen van hoogtepunten.

Ik heb ook een extra vel overtrekpapier tussengevoegd om de ruwe schets minder zichtbaar te maken. Als je afbeelding te veel contrast heeft, is het een goed idee om het meer te laten vervagen zodat je niet in de war raakt.

Stap 4

Gebruik het potlood om de omtrek van de vogel te volgen. Je kunt je nu beginnen zorgen te maken over de details.

Stap 5

Je zou nu de algemene schets van elk deel van de vogel hebben voltooid.

Stap 6

Begin schaduw toe te voegen, zodat de vogel er 3D uitziet. Merk op dat de schaduwen erg eenvoudig zijn en niet erg realistisch hoeven te lijken. Dit is slechts een deel van het hele proces en geen definitief beeld, dus maak je geen zorgen over hoe het er fantastisch uit zal zien. Het enige dat u hoeft te doen, is duidelijk vormen en verlichting definiëren.

Dit deel is belangrijk omdat alle schaduwen in de toekomstige stappen ononderbroken lijnen worden. Lege ruimtes zijn hoogtepunten en parallelle lijnen zijn schaduwen. Maak de lijnen verder en korter, en het menselijk oog zal het als een gradiënt waarnemen. Dit is eigenlijk een met de hand getekend halftoonraster.

Stap 7

Pak een ander stuk overtrekpapier en plaats het over de potloodschets die je hebt gemaakt. Deze keer gebruiken we deze als referentie voor de uiteindelijke vogel van de lijnkunst.

Stap 8

Nu hoef je alleen maar parallelle lijnen over de schaduwen te tekenen. Trek de lijnen korter en korter om ze uit te faden.

Stap 9

Vergeet niet dat je de contour ook kunt laten vervagen, niet alleen de schaduwlijnen.

Stap 10

Wees deze keer heel voorzichtig met alle details. Laat die vormen eruit zien als echte veren, geen simpele rondingen.

Stap 11

Ga door met dit proces over het hoofd en lichaam. Zorg ervoor dat je genoeg hoogtepunten weglaat.

Stap 12

Zoals ik al zei, de voeten gingen onder een laatste wijziging. Ik wilde iets tussen een aanvalspositie en laag vliegen.

Stap 13

Ik maakte de tweede vleugel over het algemeen donkerder dan de eerste. Dat maakt de tekening er dynamischer en realistischer uit. Door een gelijk licht op de hele vogel te werpen, kan het er minder interessant uitzien. Zelfs als de houding te symmetrisch is, kun je altijd op verlichting vertrouwen om het wat op te fleuren.

Stap 14

En daar is het, helemaal klaar. Misschien een beetje te lang en uitgerekt, maar dat doet er niet toe, want je kunt het toch niet allemaal op de twitterachtergrond zien.

Stap 15

Scan het of maak er een foto van en zet het in Photoshop. Ga naar Afbeelding> Aanpassingen> Niveaus en verhoog het contrast aanzienlijk. Maak de lijnen donkerder, maar breng ook enkele van de hoogtepunten aan.

Stap 16

Ga naar Selecteren> Kleurbereik. Klik in het venster op een zwart gedeelte van de foto zodat u een selectie van de zwarte lijnen hebt. Druk op OK en kopieer de selectie (Command + C).

Stap 17

Maak een nieuw Photoshop-document met een breedte van 750 px en een hoogte van 700 px en een resolutie van 72 dpi. Plak de vogel (Command + V), dubbelklik op de laag en voeg een effect Kleuroverlay toe. Kies een donkerblauw (# 387ebc) en druk op OK. Maak een nieuwe lege laag (Command + Shift + N), klik op beide lagen in het lagenmenu en voeg ze samen (Command + E). Dat maakt de Layer Style plat.

Stap 18

Gebruik nu, in een nieuwe lege laag onder de lijntekeningen, het gereedschap Pen (P) om de vogel een achtergrondkleur te geven (# 33ccff).

Stap 19

Voor dit deel is het het beste om een ​​pentablet te hebben, maar dat is niet helemaal noodzakelijk. U kunt een gewone penseel of de pen gebruiken om de hooglichten en schaduwen te maken. Ik deed het met een tablet. In deze stap volgt u de eerste paar hooglichten met wit en maakt u er een knipmasker van zodat het alleen in de vogel verschijnt.

Stap 20

Teken nu grotere streken van een heldere cyaan (# 7ff4fe). Maak een aparte laag voor elk van deze.

Stap 21

Onder de vorige verf je nog grotere highlights met een iets donkerdere cyaan (# 4de2ff).

Stap 22

Een laatste highlight-kleur is een paar grijze accenten (# ddded9).

Stap 23

Gebruik nu een fel geel (# f5e456) om de snavel te kleuren en voeg wat schaduw toe met een donkerder geel (# bcb833).

Stap 24

Om de vogel af te maken, vult u de bek in met hetzelfde donkerblauwe, en trekt u het oog. Gebruik wit en hetzelfde donkergele.

Stap 25

Je moet nu teruggaan naar de tekentafel om een ​​paar wolken te schilderen. Ik heb hiervoor verschillende soorten reactievakken gebruikt. Dit is een sociaal netwerk, komische stijl shout-outs staan ​​voor de hand. Volg de omtrek met een grijstint (# d0cdbe).

Stap 26

Geef de achtergrond een lichtere tint (#edeedb).

Stap 27

Teken nu een paar dunne lijnen voor schaduwen (# dfe0d0) en markeringen (#ffffff).

Stap 28

Herhaal dit proces om een ​​paar andere typen opmerkingen te maken. Gecombineerd, drukken deze eenvoudige verklaringen, gedachten en uitroepen uit. Ik probeer niet te veel te schreeuwen over mijn profiel, dus maak je geen zorgen, deze zijn puur decoratief. Ik schreeuw niet tegen mijn volgers :)

Stap 29

Het is tijd om een ​​bio en links toe te voegen. De eenvoudige kleine tekst is Calibri Regular en de krantenkoppen zijn binnen Rockwell Std Bold. Het en-teken is Mrs Eaves Medium Italic. Gebruik dezelfde kleuren als de vogel.

Snelle tips

Onthoud altijd dat je verschillende anti-aliasmethoden uitprobeert bij het werken met tekst, vooral bij lage resoluties. In het eerste voorbeeld bevindt het woord zich in de Sharp-modus. Merk op dat de middelste letters lijken te knikken en onder de onderste regel vallen. Het kan subtiel zijn, maar het is een vergissing.

Niet alleen dat, maar de letters zijn zelfs niet parallel. Iedereen lijkt zijn eigen oriëntatie te hebben. Om dit op te lossen, probeert u een alternatieve antialiasingmethode, in dit geval Strong. Nu hebben de letters een gemeenschappelijke oriëntatie en een genivelleerde basislijn.

Hoewel de vorige een subtiele oplossing is, is de volgende een veel voorkomende fout. Ongelijke tracking kan ertoe leiden dat sommige letters elkaar overlappen en dat anderen te ver van elkaar verwijderd zijn. Hoewel je deze bugs meestal niet op reguliere tekstregels kunt opmerken, zal grote display-tekst deze inconsistenties onthullen.

Om dit te verhelpen, moet je de ruimte tussen elke letter handmatig wijzigen. Kies het gereedschap Tekst (T), klik in een regel tekst en sleep een selectie van de eerste twee letters. Voer een passend nummer in het trackingveld in. Wanneer je precies de juiste ruimte hebt gevonden, selecteer je de tweede en derde letter en doe je hetzelfde. Ga door elke spatie van twee-bij-twee letters tot alle tracking correct is. U ziet het verschil tussen aangepast en standaard volgen in de instantie boven en onder van het woord.

Stap 30

Zoek de vectorvormlaag waar je de vogel hebt getraceerd. Klik op de miniatuur van het Vectormasker van de laag om het pad te openen. Gebruik het gereedschap Pad selecteren (zwarte pijl) om het pad te selecteren en te kopiëren (Command + C). Open illustrator, plak het pad (Command + V) en druk op enter in het venster dat wordt geopend in Illustrator (Samengestelde vorm). Selecteer de lijnkleur en kies wit (het is zwart hier, zodat u het kunt zien). Stel het slaggewicht in op 2 pt.

Stap 31

Breng het Stroke-paneel (Venster> Lijn) omhoog en gebruik de volgende instellingen. Let niet op de grijze achtergrond.

Stap 32

Kopieer het (Command + C) en plak het (Command + V) in het Photoshop-bestand als een slim object. Herhaal het proces ook met de opmerkingen.

Stap 33

Gebruik hetzelfde koptekstlettertype om een ​​paar typografische accenten rond de opmerking te maken. We zullen ook verschillende vogels uit het Birds 2 Vector-pakket van Go Media's Arsenal gebruiken. Plak ze gewoon als slimme objecten en geef ze een kleurenoverlay met elke gewenste kleur.

Stap 34

Gebruik verschillende vogels met verschillende kleuren. Probeer het niet te overdrijven, of overlappen.

Stap 35

Ik wilde ook het idee geven dat vogels berichten dragen, dus plaatste ik brieven rond, in de buurt of bij de echte vogels. Ze zijn allemaal met een van de drie lettertypen die we eerder hebben gebruikt.

Stap 36

Herhaal het motief ook in de bovenhoek. Maak het niet wetenschappelijk. Houd de oriëntatie willekeurig en niet noodzakelijk allemaal in één richting.

Stap 37

En spreid dan de vogels gewoon over het canvas. Vergeet niet om ze te laten vervagen, hoewel aan de rechterkant en onderaan door steeds minder te plaatsen.

Laatste afbeelding

Dat is het! Onze Twitter-achtergrond is voltooid. U kunt hier het uiteindelijke afbeeldingsvoorbeeld hieronder of de afbeelding op ware grootte bekijken.

Dit is de versie die ik heb op mijn twitter-profiel.