|
Donkere GamingtemplateGemaakt door Nielz op 2006-05-08
Design door: Slayer_Prk
Volledige rechten gekocht door: Nielz
Tutorial door: Nielz
In deze tutorial zullen we je laten zien, hoe deze lay-out is gemaakt:
Klik
Een paar dingen om te beginnen:
- De tutorial is om je te léren hoe dit soort templates zijn gemaakt, het is niet toegestaan om dit resultaat te verkopen of er op een andere manier aan te verdienen. Het copyright ligt volledig bij Graphicious.nl
- Wees creatief, je kunt een aantal technieken van deze tutorial prima gebruiken bij andere lay-outs, maar precies alles kopiëren raden we niet aan.
- Bij het maken van deze tutorial verwachten we dat je redelijk wat over Photoshop kent, als je die nog niet hebt kun je beter even wat andere tutorials volgen. Ik ga bijv. niet zeggen wanneer je een nieuwe layer oid moet aanmaken.
- Geef namen aan je layers, stel je voor dat je op het laatst even iets wilt veranderen, maar je bent een uur bezig om het te zoeken!
- Stop je layers in maps, zo houd je alles georganiseerd, we gaan ervan uit dat je dit zelf kunt uitvogelen, wanneer je nieuwe maps maakt etc.
- Dit is een lange tutorial , dus pak je favoriete drinken en eten, zet muziek op en bereid je voor op een lange tijd achter de PC!
1.Om te beginnen begin je een nieuw bestand in Photoshop.
Width (breedte): 700 pixels
Height (hoogte): 800 pixels
Transparante achtergrond.
Voor de rest kun je de settings gewoon zo laten.
2. Dan vul je je achtergrond met een donkere kleur, hier werd #303030 gebruikt.
3. Pak dan als voorgrondkleur een íets donkere kleur, hier werd #2a2a2a gebruikt.
Pak dan de gradient tool, deze settings werden hier gebruikt:
4. Hou dan van links naar rechts de gradient tool in terwijl je shift inhoud. Niet een té lange, zie screenshot (ware grootte).
5. Doe het zelfde bij rechts, maar dan natuurlijk omgekeerd. Als je er zeker van zijn dat de 2 gradients even breed zijn kun je ook even het stuk kopiëren en plakken. (Wel even Edit-Transform-Flip Horizontal doen)
6. Nu gaan we de lay-out even wat breder maken, ga naar Image – Canvas Size en voer de volgende settings in:
7. Dit hebben we nu: (op 50 %)
Beetje saai en kaal ofniet? Maar we zijn dan ook nog lang niet klaar!
8. Zoom dan in op de linkerhelft, en maak een lijn van onder naar boven (net naast je voorste vlak), dan weer 2 lijnen, en daar weer een lijn in dezelfde kleur naast.
9. Dan pakken we de gradient tool weer, als voorgrondkleur neem je: #252525. Verder dezelfde settings als bij stap 3:
10.
Selecteer dan het hele deel links van de lijn:
11.
Maak dan met de gradient tool een “lijn” van rechts naar links, terwijl je shift inhoudt, zodat het een rechte lijn blijft:
Ook hier weer is de screenshot op ware grootte
12.
Herhaal stap 8 t/m 12 voor de rechterkant, je kunt ook nu weer het stuk kopiëren en plakken (ook nu weer even edit-transform-flip horizontal)
13.
Nu gaan we beginnen met de header. Pak hiervoor 3 of meer plaatjes van de game die je in je header wilt gaan zetten. Plak ze erin, en zorg dat de hoogte niet meer dan 150 pixels is. Laat ze dan in elkaar overlopen (mocht je niet weten hoe dit moet, bekijk dan de tutorial hierover in de tutorial sectie!). Dan ga je bij elk van die layers naar Image-Adjustments-Desaturate om de kleur eruit te halen.
14.
Snij er dan met de pen tool of met de polygonal lasso tool een stuk uit bij de hoek, hierin komt de titel van je site. Ook kun je er even een stroke omheen doen, door het geheel te selecteren en dan naar Edit-Stroke te gaan. Hier werd een 1 px stroke gedaan met de kleur #404040
Dit hebben we tot nu toe:
15.
Maak daarboven een nieuwe layer aan en pak een stel techbrushes, ook die van Graphicious (te vinden in ons downloadcenter) kun je hiervoor gebruiken. Zet de opacity op 25 %.
16.
Plaats er dan een render in, ook hierbij ga je weer naar Image-Adjustments-Desaturate.
17.
De header is nu wel een beetje héél grijs ofniet? Dat maakt niet zoveel uit, maar toch nog maar een kleurtje erin, dit wordt de “tweede kleur” van je layout. Hier werd rood gekozen, maar je kan net zo goed blauw of groen kiezen. Pak die kleur dus, en selecteer met de Pen Tool het deel van je render dat je wilt gaan “highlighten”. Vul dat dan met die kleur en zet die layer op overlay.
18. Selecteer dan het geheel met de pen tool, en ga naar Image-Apply Image. Terwijl je de selectie houdt ga je naar Filter-Blur-Gaussian Blur. Vul hierbij een waarde rond de 10 in. Zet de layer dan op overlay en plaats hem onder je render.
19.
Maak weer een nieuwe layer boven alles aan en selecteer het vak dat je wilt gaan gebruiken om je naam in te zetten, maar dan iets kleiner. Vul dit met een willekeurige kleur.
20.
Druk er met je rechtermuisknop en ga naar Blending Options, vink dan Gradient Overlay aan, de kleuren die gebruikt zijn zijn: #353535 en #303030:
21.
Vink dan ook Stroke aan:
Dit hebben we dan:
22:
Typ dan je text, en duplicate die layer. Ga dan met die layer naar Edit-Transform-Flip Vertical, en rasterize de layer. Versleep hem dan naar onderen.
23.
Pak dan een Softe Gum, en gum de onderkant weg, zodat het lijkt weg te faden. Zet dan de opacity op 50 %.
Dit hebben we tot nu toe:
24. BELANGRIJK: Maak een map/group aan waarin je de layers gaat plaatsen, dat scheelt je zo weer wat werk!
Maak onder de header met de Rounded Rectangle Tool een vlak, de hoogte ongeveer 30 pixels, de breedte hangt er maar net vanaf hoe veel je er wilt hebben. Hier werd 90 pixels gekozen.
25.
Ga dan naar de Blending Options en vink Stroke aan:
26.
Ga dan naar Selection- Load Selection en kies wit als je voorgrondkleur.
27.
Pak dan de Gradient Tool met de volgende settings:
Maak dan met de Gradient Tool van boven naar onder weer een kleine lijn, terwijl je shift inhoudt. Zet de layer dan op 10 % opacity.
28.
Voeg dan tekst toe, eventueel kun je de eerste letter dezelfde kleur doen als “je tweede kleur”, hier dus rood:
29.
Voor de andere buttons kun je het gewoon duplicaten en verschuiven en de tekst veranderen. (Dat gaat dus het gemakkelijkst als je een map had gemaakt).
30.
MAP AANMAKEN!
Dan gaan we maar eens aan het menu werken, want wat heb je aan een site als je er niet doorheen kunt klikken? Om te beginnen selecteer je de hele rechterkant met de Rectangular Marquee Tool, op een klein stukje na, want er moet nog wel een footer in je template. Laat aan alle kanten nog wel een aantal pixels over, want er moet nog een lijn langs.
(screenshot op 50 %)
31.
Ga dan naar Edit-Stroke, zet hem op 1 pixel outside, en selecteer de kleur die je voor de andere lijnen gebruikt hebt, hier dus #404040, door steeds dezelfde kleuren voor dit soort dingen te kiezen komt er een soort “eenheid” in de template.
32.
Bij deze layout is ervoor gekozen om de rechterkant in 3 menu’s te verdelen, nou is het natuurlijk het mooist als die dan ook evenhoog zijn! Daarvoor kun je het best even je vlak meten met de Measure Tool en dat dan gedeeld door 3 doen, daar trek je dan “tijdelijke” lijnen, waar je niet moet overheen gaan. Klinkt allemaal een beetje vaag, maar het zal waarschijnlijk nog wel duidelijker worden.
33.
Selecteer dan een deel van het vak:
Vul het met een willekeurige kleur.
34.
Ga dan naar de Blending Options van die layer en vink Gradient Overlay aan:
Ga dan naar Stroke, en kies een kleur die iets donkerder is dan de omlijning van je menu, hier werd #353535 gekozen. 1 pixel dik en aan de Outside.
35.
Dan plaats je er tekst in.
36.
Hieronder vul je een vak met de kleur #2b2b2b, hieromheen een stroke met #353535.
37.
Doe hetzelfde bij de andere 2 boxen, als je dus een map hebt gemaakt, kun je die map duplicaten en verplaatsen. Dit hebben we nu:
(screenshot op 50 %)
38.
MAP AANMAKEN!
Ziet er al mooi uit, ofniet? Maar we missen nog iets! Waar moeten we de main tekst in plaatsen? Juist, main content boxes hebben we nodig!
39.
Weer gaan we omlijning plaatsen, zelfde methode als eerst, ook nu wordt de kleur #404040 gebruikt.
40.
Eerst maken we een soort Main Content Titel, waar bijv. de auteur van het stuk kan geplaatst. Maak hiervoor met de Polygonal Lasso Tool een selectie, vul die met een willekeurige kleur
41
Kopieer dan de Layer Style van de “Titel-layer” van 1 van de rechtermenu’s, plak die op deze layer.
42.
Selecteer dan het “tekstvak”, hier werd gekozen voor 2 main content boxes, dus is het tekstvak klein, je kunt natuurlijk ook 1 groot tekstvak doen.
43.
Vul dit met #2b2b2b, en doe er een stroke omheen met #353535 als kleur.
45.
Indien je 2 content boxes hebt gedaan kun je layer map duplicaten en verschuiven.
44.
Als allerlaatst gaan we nog een zogenaamde footer toevoegen, waarin je bijv. je copyright neer kunt zetten. Selecteer hiervoor de hele onderzijde. Herhaal dan stap 41.
45.
Klaar! Het enige dat nog nodig is, is wat tekst om het geheel op te vullen, anders lijkt het wat leeg. Willekeurige dummytekst kan gevonden worden op Lipsum.com
Eindresultaat:
Klik
|
