Tools | tech | trends: WordPress, Photoshop
Expert: Danny Outlaw
01 Nieuw document openen
Om te beginnen maken we een nieuw document aan in Photoshop. De grootte hiervan is 960 x 400 pixels. Het volgende dat je doet is een rechthoek aanmaken die dezelfde achtergrondkleur heeft als je site. We hebben voor een monotoon ontwerp gekozen en gebruiken de achtergrondkleur #6B6B6B.
02 Het contentvlak
Nu gaan we een vlak aanmaken waar onze interessante artikelen in zullen komen te staan. Maak een rechthoek met afgeronde randen. De ronde randen hebben een radius van 10 pixels. Zorg er daarna voor dat de kleur van de rechthoek past bij de achtergrondkleur van stap 1 door #EDEDED te gebruiken.
03 Content inhoud stijlen
Voeg de volgende laageffecten toe: Drop Shadow (Slagschaduw); Color (Kleur): #000000, Opacity (Dekking): 51%, Distance (Afstand): 0, Spread (Spreiden): 21, Size (Grootte): 6. Stroke (Rand); Size: 1px, Color: #000000 en Position (Positie): Outside (Buiten). Gradient Overlay (Verloopbedekking). Gebruik de standaard zwart-witte overloop met Opacity: 5 en Angle (Hoek): 90 graden.
04 Achtergrond
Eerst maken we een frame/achtergrond aan waar de afbeelding in komt te staan. Geef de achtergrond de kleur #FFFFFF. Voeg een Drop Shadow toe met de waarden: Color: #000000, Opacity: 75, Distance: 0, Spread 15 en Size: 7. En geef de afbeeldingachtergrond een Stroke met Size: 1px en Color: #000000.
05 Afbeelding toevoegen
Plaats nu een voorbeeldafbeelding in het vlak uit stap 4. Om de afbeelding goed tot zijn recht te laten kom geef je alle kanten dezelfde padding. Wij raden een witruimte aan tussen de 10px en 12px groot. Voor een nog beter effect voegen we een lichte rand toe met de eigenschappen Size: 1px en Color: #6B6B6B.
06 Featured-banner
Maak een witte rechthoek aan van 47px bij 350px. Draai de rechthoek totdat deze de gewenste hoek krijgt. Zet de laag om naar pixels (rasterize). Snij de overtollige ruimtes weg, zodat de banner netjes binnen het contentvlak past. Voeg een Drop Shadow toe met: Color: #000000, Opacity: 50%, Angle: 135, Distance: 3, Spread: 5 en Size: 7.
07 De banner opmaken
Voeg de volgende overvloeiopties aan de laag toe om meer kleur en diepte te krijgen. Inner Glow (Gloedbinnen): Opacity: 100, Color: #FFFFFF, Blend Mode (Overvloeimodus): Normal (Normaal), Stroke: Size: 1px,Color: #BBB900, Position: Inside (Binnen), Gradient Overlay: Opacity: 100, Gradient: #F0E202 en #EBE802, Style: Linear (Lineair) en Angle: 90.
08 Tekst en opmaak
Typ de woorden ‘Featured Article’ en draai de laag tot dat je dezelfde hoek te pakken hebt als in stap 6. Voeg de volgende overvloeiopties aan de tekst toe: DropShadow, Blend Mode, Opacity: 56, Angle: 120, Distance: 1, Spread: 0, Size:1. Inner Shadow (Schaduw binnen): zie de afbeelding hierboven voor de instellingen.
09 Balk met meer artikelen
Maak een rechthoek aan met de volgende laagstijlen: Gradient Overlay, Blend Mode: Normal, Opacity: 100, Style: Reflected (Gereflecteerd), Angle: 180, Scale (Schaal): 150, Colors: #CD0000 en #FF1A00. Stroke: Size: 1px, Color:#BB0500, Position: Inside. Inner Glow: Opacity 21, Color;#444343. Inner Shadow, zie de afbeelding.
10 Meer afbeeldingen
Selecteer de afbeeldings- en achtergrondlagen uit stap 4 en 5. Dupliceer beide lagen en sleep deze naar de balk die we bij stap 9 hebben aangemaakt. Houd shift ingedrukt en schaal beide lagen tot de gewenste grootte in de rode balk. Herhaal deze stap om nog twee afbeeldingen aan te maken.
11 De tekst toevoegen
Nu is het tijd om de tekst op te gaan maken door een titel, datum, auteursregel en de naam van de expert toe te voegen. We gebruikten Arial voor deze drie teksten. De titel is vetgedrukt, 20px en heeft de kleurcode: #000000. De datum-en-auteursregel heeft een lettergrootte van 12px en #6B6B6B. De auteursnaam is vetgedrukt en heeft #FF1900 als kleur. De hoofdtekst is 16px, heeft de regelhoogte van 20px en kent de kleur #6B6B6B.
12 Scheidingslijn
Gebruik voorzichtig de Pencil-tool (Potlood) om een lijn van 1px en met de kleur #000000 te tekenen. De lijn heeft de breedte van het tekstvak. Zet Fill (Vulling) van deze laag op 85%. De scheidingslijn is er om de titel en rest van tekst van elkaar te scheiden. Voeg een Drop Shadow toe; Color: #FFFFFF, Opacity: 92, Angle: 90, Distance: 1, Spread: 0 en Size: 0.
13 ‘Lees meer’-knop
Pas de volgende instellingen toe: Gradient Overlay, BlendMode: Normal, Opacity 100, Style: Linear, Angle: 90, Scale: 100, Colors: #CD0000 en #FF1A00. Stroke: Size: 1px, Color: #BB0500, Position: Inside. Inner Glow: Opacity 40, Color; #444343. Drop Shadow; Color: #FFFFFF, Opacity:92, Angle: 90, Distance: 1, Spread: 0 en Size: 0. Voor InnerShadow, zie hiernaast.
14 Selectie weergave
Het laatste dat we gaan toevoegen, is een selectiepijl die naar het huidige onderwerp wijst. Maak een klein vierkantje en vul dit met de kleur #EBEBEB. Draai dit onder een hoek van 45 graden. Positioneer het zo dat het voor de helft in de achtergrond wegvalt en dat de andere helft naar het geselecteerde onderwerp wijst.