Welkom bij de Design tutorial door Rogier Fischer. We gaan een mooi en strakke game layout maken.
- Elk hoofdstuk is een nieuwe map!
- Ik raad u aan dat wanneer u aan een nieuw hoofdstuk begint u eerst naar het tussenresultaat kijkt.
Eindresultaat:
Hoofdstuk 1: De achtergrond
Stap 1.1: Open een file van 1000 (breed) * 1200 (hoog) pixels.
Guides (view - > onderste kopje): 100 px en 900 px
stap 1.2: Maak een nieuw layer aan. Vul deze en geef hem een verticale gradiënt overlay.
Stap 1.3: Om de header te maken gebruiken dit plaatje:
Knip een mooi stuk uit het plaatje en gum de rand eraf.
Kopieer deze layer en zet de 2de op “Multiply” (layer style -> blending options)
Stap 1.4: Maak met de rounded rectangle tool (rechtermuisklik op rectangle tool) een groot wit vak over de achtergrond heen. (content vak)
Klik op: rastesize layer (rechtermuisklik op layer-> rastesize layer)
Maak de bovenkant recht (geen ronde hoeken meer)
Een geef de layout een "drop shadow". (layer style -> drop shadow)
Stap 1.5: Trek een blauwe streep (kleurcode: 074773) net boven de onderkant van content-layer.
Stap 1.6: Maak met de rounded rectangle tool een vakje linksonder in de layout. Geen het de volgende waardes:
Doe hierna CNTL + T
Klik met rechtermuisknop op de selectie en gebruik de functie “perspective”. Zet hem iets naar buiten (zie ook tussenresultaat)
Hoofdstuk 2: Menu
Stap 2.1: Maak met de rounded rectangle tool een vak ter breedte van de layout.
Klik nu op “rastesize layer”. En maak de onderkant recht.
Zet de layer recht op de content-layer (het witte gedeelte).
Zet de opacity op 56%
En geef hem de volgende gradiënt overlay:
Stap 2.2: Menu-items toevoegen. Gebruik de volgende tekstinstellingen:
Hou het aantal spaties tussen de kopjes gelijk. Als je niet uitkomt, voeg spaties toe of haal ze weg.
Stap 2.3: Maak een mouse-over. Met de volgende waardes
Hoofdstuk 3: Image slide
Stap 3.1: Maak met de rounded rectangle tool een vak met de kleur: d8d8d8
Stap 3.2: Snij de onderkant eraf zodat de onderkant plat is.
Stap 3.3: Maak nog een vak, ongeveer de helft breed van het vorige vak. Plaats hem over het vorige vak heen!
Stap 3.4: Snij op dezelfde hoogte de onderkant eraf zodat de onderkant overloopt op het vorige vak.
Stap 3.5: Geef het tweede vak de volgende waardes:
Stap 3.6: Plaats een plaatje (die even breed is!) onder de 2 vakken. Zorg dat de layer boven de andere layers ligt.
Maak het plaatje naar eigen inzien mooier
Stap 3.7: Maak met de rounded rectangle tool 1 klein vakje. Kopieer 2 keer deze en plaats naast elkaar in het tweede vak. Zet de layers onder het plaatje!
Stap 3.8: Geef de kleine vakjes de volgende waardes:
Stap 3.9: Maak een net wat groter maar wel klein vakje en plaats deze hoog in het tweede vak.
Stap 3.10: Geef hem de volgende waardes
Stap 3.11: Maak aan de onderkant van het plaatje een zwarte streep. (ongeveer 2 cm hoog) zet de opacity op 79%
Stap 3.12: Trek aan de bovenkant van de zwarte streep een lijn van 1 px hoog. Kleur: 93939
Stap 3.13: Maak een heel klein rechthoekje helemaal aan de linkerkant van de zwarte streep
kleur: 4ec9e4
Stap 3.14: Ctrl + t -> rechtmuisklik -> perspective. Zet hem iets naar binnen.
Stap 3.15: Vul de cijfers 1 t/m 4 in bij de kleine vakjes.
Zet wat tekst naast het kleine rechthoekje in de zwarte streep.
Zet linksboven een naam van het vak.
Hoofstuk 4: Sponservak
Stap 4.1: Maak een vierkantje van de image-slide tot de rand. (aan beide kanten 5 px overhouden)
Stap 4.2: Zet de “Fill Opacity” die bij advanced blending staat op 0.
Stap 4.3: Geef hem de volgende waarde:
Stap 4.4: Maak met de rounded rectangle tool een vakje even breed als het vierhoekje van daarnet
Stap 4.5: Maak de onderkant recht (snij de onderkant eraf)
Stap 4.6: Maak 2 lijnen die precies door het midden lopen.
Stap 4.7: Maak met de rounded rectangle tool een klein vakje rechtsboven.
Zorg dat hij 3 rechte hoeken heeft (zie ook tussenresultaat)
Geef hem deze waardes:
Stap 4.8: Maak een klein kruis een geef hem de volgende waardes.
Zet de opacity van deze gradiënt top 48%
Stap 4.9: Plaats de tekst en de logo’s (zie ook tussenresultaat)
Hoofdstuk 5: tussen-menu
Stap 5.1: maak een streep van 2 cm breed over de hele layout.
Geef hem deze waardes:
Stap 5.2: maak nu met de rounded rectangle tool een klein vakje (dit word een menu-item) geef hem deze waardes:
Stap 5.3: kopieer de layer maar verander de gradiënt overlay naar
Stap 5.4: Maak nu een 3,5 keer zo breed vakje naast het blauwe vakje met dezelfde style als het eerste vakje.
Stap 5.5: Plaats de tekst
Hoofdstuk 6: Latest posts
Stap 6.1: Maak een vierkantje. Helemaal links
Zet de “Fill Opacity” op 0%
geef hem een lijn: kleur: d8d8d8
Stap 6.2: Maak met de rounded rectangle tool een nieuw vakje, boven het vierkantje.
Snij de onderkant eraf zodat de onderkant plat wordt. Plaat hem boven (tegen aan)
het vierkantje.
Stap 6.3: Maak een rechthoekje in het vierkant, (even breed!) dit word het menu-item.
Zorg ervoor dat je hem deze kleur geeft: 303030
Plaats deze layer opnieuw net zo lang tot het vierkantje vol zit. (pas het vierkantje ernaar aan door hem kleiner of groter te maken)
Stap 6.4: Plaats de tekst en icons (zie tussenresultaat)
Stap 6.5: Kopieer dit mapje en plaats hem nog een keer. Onder het eerste mapje.
Stap 6.6: Plaats een advertentie voorbeeld
Hoofdstuk 7: Content
Stap 7.1: Maak een vierkant dat precies tussen de latest post en de advertorial
past. Geef hem de volgende waardes: en zet de “Fil Opacity” op 0.
Maak nu weer een vakje met de rounded rectangle tool (of kopieer diegene van de latests posts) en plaats hem linksboven het vierkant.
Stap 7.2: Vul de tekst in (zie tussenresultaat)
Stap 7.3: maak met de rounded rectangle tool een even breed vak en 125(?) pixels hoog vak.
Geef hem een lijn van 2 pixels, kleur: d8d8d8
En geef hem deze gradiënt
Stap 7.4: Maak 2 vierkantje helemaal links en rechts van het vak.
(Rechtermuisklik -> perspective) vouw beide kanten naar binnen zodat het een driehoek word met de punt naar buiten.
Geef er een de kleur: 303030
En de ander de volgende waardes:
Stap 7.5: Plaats 3 plaatjes (zie tussen resultaat).
Plaats de kop “Images”
Hoofstuk 8: artikel overzicht
Stap 8.1: plaats 3 plaatjes naast elkaar
Stap 8.2: plaats een zwarte lijn (30 px hoog(?)) over de plaatjes heen. En zet de Opacity op: 70%
Stap 8.3: Plaats de tekst. Je kan (zoals in eindresultaat) het icon dat we in stap 3.13 gemaakt hebben gebruiken.
EINDE
Het einde van deze tutorial, ik hoop dat jullie ervan genoten hebben en dat vele andere designers mijn voorbeeld zullen volgen!
Kom je er niet uit? je kan de psd file kopen voor 2 euro paypal. Stuur hiervoor een pm.
Sponseren kan ook: via paypal, wallie, sms, bellen en andere!
Ik heb dat mijn 21 uur en 28 minuten het waard waren!
