Maak een bulletinboard met realistische schaduwen, deel 1

Schaduwen en lichten kunnen een compositie maken of breken. Bulletinboards (of prikborden) zijn populaire grafische typen om te gebruiken in web- en printontwerpen, maar vaak zien ze er niet realistisch uit vanwege de manier waarop ze worden verlicht en in de schaduw worden gezet. In deze tweedelige instructiereeks zullen we laten zien hoe je een houten structuur kunt creëren en vervolgens hoe je authentiek ogende schaduwen en licht kunt maken met behulp van de stillevens die we op ons bord zullen plaatsen. Laten we beginnen door ons prikbord te maken en ons eerste element te plaatsen.

Stap 1 - De Corkboard-textuur

Maak een nieuw document aan (Grootte: 600px bij 400px). De grootte is aan u, maar dit zijn de dimensies die we in deze zelfstudie zullen gebruiken.

Hernoem de eerste laag "prikbord".

Tip: zorg ervoor dat paden zijn geselecteerd voor het gereedschap Rechthoek en Afgeronde rechthoek in deze zelfstudie.

Gebruik het gereedschap Rechthoek om een ​​rechthoek te maken (afmeting: 480px bij 280px).

Tip: als u een vorm een ​​vaste grootte wilt geven, opent u het paneel in de optiebalk.

Klik met de rechtermuisknop op de rechthoek en selecteer Maak selectie.

Tip: CTRL of CMD + ENTER als vervanging voor rechts klikken op een pad en Selectie maken selecteren.

Maak je voorgrondkleur # a37d54 en je achtergrondkleur # 4e2f0d. Deze twee kleuren zijn bruine schakeringen, maar u kunt dezelfde kleuren kiezen.

Om de textuur van het prikbord te produceren. Ga naar Filter> Renderen> Wolken, deselecteer je selectie en deselecteer je een selectie achteraf.

Tip: CTRL of CMD + D als vervanging voor het deselecteren van een selectie.

Verder gaan; ga naar Filter> Schets> Notitiepapier (Beeldbalans: 32, Graininess: 11 and Relief: 12).

Ga naar Filter> Penseelstreken> Spatten (Spuitradius: 15 en Vloeiend: 10).

Als laatste, laten we het een donkerdere kleur geven, ga naar Afbeelding> Aanpassingen> Schaduwen / Hoogtepunten (Schaduwen - Bedrag: 50%, Toonbreedte: 83%, Straal: 208 px Hoogtepunten - Hoeveelheid: 0%, Toonbreedte: 50%, Straal : 30 px Aanpassingen - Kleurcorrectie: +20, middentooncontrast: -17.)

De onderstaande afbeelding is het resultaat.

Stap 2 - De houten randen van Corkboard

In deze stap produceren we de houten randen van het prikbord.

Maak een nieuwe laag onder de laag "prikbord" en hernoem het als "randen".

Gebruik het gereedschap Afgeronde rechthoek om een ​​afgeronde rechthoek te maken (afmeting: 502px bij 302px en straal: 10px.). Klik met de rechtermuisknop op de rechthoek en selecteer "Maak selectie".

Tip: ALT + BACKSPACE om een ​​selectie in te vullen met de huidige voorgrondkleur. CTRL of CMD + BACKSPACE om het in te vullen met de huidige achtergrondkleur.

Vul deze rechthoek in met de kleur # 4e2f0d en deselecteer de selectie.

Tip: om twee of meer lagen te selecteren, SHIFT + KLIK erop.

Tip: om twee of meer lagen met elkaar te centreren, selecteert u de lagen die moeten worden uitgelijnd, kiest u het gereedschap Verplaatsen, klikt u op de balk Opties op Horizontaal uitlijnen en Lijn uit voor verticale centra:

Plaats nu zowel de lagen "prikbord" als "randen".

De onderstaande afbeelding is het resultaat.

Stap 2 - De houten randen van Corkboard - Corner Gaps-richtlijnen

Om ervoor te zorgen dat elke zijde van de grenzen authentiek is, moeten er openingen worden gemaakt tussen hun hoeken.

De richtlijnen die we in deze stap zullen maken, worden gebruikt om elke zijde van de randen naar behoren te selecteren en op verschillende lagen te plaatsen.

U moet de procedures in deze stap toepassen op alle hoeken van het prikbord.

Maak een nieuwe laag boven "randen" en onder "prikbord" en noem het "diagonale randlijnen" of iets dergelijks. We zullen deze regels gebruiken als richtlijnen om de hierboven genoemde diagonale openingen te creëren.

Zoom in op je afbeelding en gebruik de Pen Tool, houd SHIFT ingedrukt en maak een 45 graden schuin diagonaal pad in de rechterbovenhoek, zoals hieronder weergegeven.

Tip: zorg ervoor dat de penseeldiameter voor het gereedschap Potlood 1 px is.

Selecteer met het gereedschap Pen en selecteer "diagonale randlijnen", klik met de rechtermuisknop, selecteer Lijn volgen, selecteer Potlood in het vervolgkeuzemenu, klik op OK, klik nogmaals met de rechtermuisknop en kies Pad verwijderen.

Herhaal stap 2 aan alle andere kanten van het prikbord.

Stap 3 - De houten randen van Corkboard - De grenzen scheiden

Gebruik de diagonale lijnen die we zojuist hebben gemaakt, laten we ze gebruiken als richtlijnen om met de Pen Tool de rechterrand van het prikbord te selecteren.

Nadat u de rechterrand hebt geselecteerd met het gereedschap Pen, klikt u met de rechtermuisknop en kiest u Selectie maken.

Om de rechterrand op een nieuwe afzonderlijke laag te plaatsen, met de laag "randen" geselecteerd, dupliceert u de laag. Hernoem de nieuw geproduceerde laag naar "border right".

Herhaal stap 3 aan alle andere kanten van het prikbord.

Nadat je dit gedaan hebt, zou je elke rand van het prikbord op afzonderlijke lagen moeten hebben. Dus nu kunnen we de lagen "diagonale grenslijnen" en "randen" verwijderen.

Stap 4 - De houten randen van Corkboard - De verlopen toepassen

Het is tijd om enkele hellingen op onze grenzen aan te brengen. Laten we beginnen met de rechterrand.

Tip: als u de overvloeiopties van een laag wilt openen, klikt u met de rechtermuisknop op die laag en kiest u Overvloeimogelijkheden.

Tip: om een ​​nieuwe verloopschuifregelaar toe te voegen, plaatst u uw cursor rechts onder het verloopvoorbeeld.

Voeg in de overvloeiopties voor de laag "grens rechts" een verloopoverlay toe (hoek: 0 graden, eerste verloopschuifregelaar: # e77d15, tweede verloopschuifregelaar: # f69834, schuif met derde verloop: # 804504).

Gebruik nu de laag "border top", nog een Gradient Overlay (eerste gradiënt schuifregelaar: # e77d15, tweede gradiënt schuifregelaar: # f4942d, derde gradiënt schuifregelaar: # d16f04).

Gebruik vervolgens de laag "border left", nog een Gradient Overlay (eerste gradiëntslider: # 0d550e, tweede gradiëntslider: # f4942d, derde gradiëntslider: # d16f04).

Ten slotte past u de laag "border bottom" toe met een andere overlay met gradiënten (schuif met eerste verloop: # 6e3c0b, schuif met tweede verloop: # f4942d, schuif met derde verloop: # d16f04).

De onderstaande afbeelding is het resultaat.

Stap 5 - De houten randen van Corkboard - De textuur toepassen

Vergeet niet dat je deze stap aan alle andere kanten van het prikbord moet herhalen.

Dupliceer de laag "border right", klik met de rechtermuisknop op de nieuwe gedupliceerde laag met de naam "border right copy" en kies Clear Layer Style.

Tip: CTRL of CMD + J om een ​​laag te dupliceren.

Tip: CTRL of CMD + KLIK op de miniatuur van een laag om de inhoud te selecteren.

Selecteer de inhoud van de laag "border right copy" (CTRL of CMD + KLIK op de laagminiatuur). Vul de selectie in met de kleur # d48631.

Ga naar Filter> Ruis> Ruis toevoegen (Bedrag: 33.03%, Gaussiaans en Monochroom).

Ga naar Filter> Vervagen> Bewegingsonscherpte (hoek: 90 graden en afstand: 24 pixels).

Hier is het leuke gedeelte; we zullen knopen maken op onze houten randen.

Ga naar Filter> Liquify (Brush Size: 8, Brush Density: 50 and Brush Pressure: 100). Gebruik het dradenkruis in het Uitvloeiingsvenster om de inhoud van de laag "grensrechterkopie" te trekken, uit te rekken en te wervelen om houten knopen te maken.

Tip: u kunt de dekking van een laag in het deelvenster Lagen wijzigen:

Zet de dekking van de laag "border right copy" op 50%.

Hernoem deze laag "border right wooden texture", groepeer hem met de laag "border right" en hernoem de groep als "border right".

De onderstaande afbeelding is het resultaat.

Herhaal stap 5 aan alle andere kanten van het prikbord.

Stap 6 - De binnenschaduw van Corkboard

Laten we een lichte schaduw toevoegen aan de bovenkant van de binnenkant van het prikbord.

Breng in de overvloeiopties van de laag "prikbord" een binnenste schaduw aan (mengmodus: normaal, kleur: # 000000, dekking: 100%, hoek: 90 graden, afstand: 1px, choke: 0%, maat: 3px).

De onderstaande afbeelding is het resultaat.

Stap 7 - Het papier

Maak een nieuwe laag en hernoem het als "papier". Kies het Rechthoekige selectiekader en maak een selectie zoals hieronder:

Selecteer de laag "papier" en vul de selectie met wit in.

Voeg in de mengopties van de papierlaag een verloopoverlay toe (schuif met het eerste verloop: # d1d1d1, tweede schuifregelaar voor verloop: #ededed).

Breng vervolgens een Slagschaduw aan (Dekking: 100%, Hoek: 90 graden, Afstand: 1px, Spread: 0%, Grootte: 5px).

Klik met de rechtermuisknop op de laag "papier" en selecteer Lagen maken. Klik op OK wanneer u dit dialoogvenster ziet:

Stap 8 - Het papier - Breng het tot leven

Het belangrijkste hulpmiddel dat hier wordt gebruikt, is de Warp Tool.

Tip: CTRL of CMD + T om het gereedschap Vrije transformatie naar voren te brengen, klik met de rechtermuisknop op de selectie en kies Verdraaien om toegang te krijgen tot het gereedschap Verdraaien.

Selecteer de laag "papier" en open het gereedschap Warp.

Pak de rechterbenedenhoek van het papier en trek het omhoog zodat het lijkt alsof de wind het blaast.

Trek aan alle andere hoeken.

De onderstaande afbeelding is het resultaat.

Stap 9 - Het papier - Hoogtepunten

Nu maken we enkele hoogtepunten op deze hoeken.

Tip: Command + ALT + SHIFT + N om een ​​nieuwe bijsnijdlaag te maken op de momenteel geselecteerde laag.

Tip: Sleep een laag in het deelvenster Lagen om deze onder of boven een andere laag te verplaatsen.

Maak een nieuwe kniplaag net boven "Gradient Fill" op papier, wijzig de naam in "highlight bottom right", klik op de vervolgkeuzelijst Overvloeimodus en kies Scherm.

Tip: Het verlooppaneel ziet er zo uit:

Selecteer het gereedschap Verloop, klik op het deelvenster Verloop en pas een verloop toe (Verloopschuif eerste niveau: # 000000, Schuifbalk tweede verloop: #ffffff, schuif met derde verloop: # 000000).

Sleep een verloop in de rechteronderhoek van het papier zoals hieronder weergegeven:

Gebruik het gereedschap Vrije transformatie om het formaat van de markering aan te passen, te wijzigen en te draaien. Je kunt ook de dekking van de markering verlagen om het geloofwaardiger te laten lijken.

Maak meer hoogtepunten op de andere hoeken van het papier.

De onderstaande afbeelding is het resultaat.

Stap 10 - Het papier - Schaduwen

Nu, om de schaduw van het papier realistischer te maken. Selecteer de laag "de slagschaduw van het papier", verplaats de schaduw een paar pixels naar beneden en zet de dekking lager op 60%. Net zoals we op de krant deden, krom de schaduw zoals hieronder getoond:

De onderstaande afbeelding is het resultaat.

Stap 11 - Het papier - De tekst krabbelen

Laten we iets op het papier schrijven.

Maak een nieuwe laag, selecteer het Tekstgereedschap, kies een handschrifttype lettertype, we kiezen voor "Journaal" (Grootte: 26px), veranderen de kleur van het lettertype in # 414040 en beginnen wat tekst op het papier te typen.

De onderstaande afbeelding is het resultaat.

Blijf op de hoogte voor deel II

In het laatste deel II van deze serie zullen we meer elementen op ons bord plaatsen en dit ontwerp afronden.