layout tutorial van Rogier

Hallo,
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 1 punt. Stuur hiervoor een pm.

Ik heb dat mijn 21 uur en 28 minuten het waard waren!

TOP rogier!
Ik heb hem even snel doorgelezen, morgen lees ik hem nog een keer en dan ga ik het proberen.
Mijn complimenten
kenzo

Begin vindt ik al en beetje slecht je zegt zo van gum de randje eraf maar hoe doe je dat dan als beginner?
Je zegt dat je er 20uur over hebt gedaan, het kan wel uitgebreider
Niet dat ik het zelf kan, maar voor een beginner is dit niet goed

Dude, ooit gedacht de gum tool te gebruiken?

8 uur design zelf (eerst op papier getekend)
10 uur tut schrijven
4 uur ubb

Je kan trouwens zelf ook wel bedenken dat de tut niet voor beginners is.

En kan je dat herhalen? Ik dacht ff dat je uitgebreider zij.

Doe niet zo ondankbaar, ik maak gratis heel uitbreide tut en jij begint te zeiken dat hij te moeilijk is.

DAT LIGT AAN JEZELF

Kingunit schreef:

Begin vindt ik al en beetje slecht

je zegt zo van gum de randje erav
maar hoe doe je dat dan als beginner?
je zegt dat je er 20uur over hebt gedaan...
nouja het kan wel uitgebreider

niet dat ik het zelf kan, maar voor een beginner is dit niet goed

Pff afkraker..

Nice rogier !!
Ik ga hem morgen eens goed doorlezen.

het was niet zo zeer bedoeld om je aftekraken
het waren gewoon een paar tips hoe je een tutorial nog beter kan maken.
en nee het licht niet aan mij omdat ik het nog nooit geprobeerd hebt en dat ga ik ook zeker niet doen

Nicé tut!
Ook top dat je de voorbeelden laat zien

Ik snap dat Guides gedeelte niet.

Wat snap je er niet aan?

Als je bijvoorbeeld klikt op New Guid dan staat er zo een balkje met:

Horizontal
Vertical

Position: 0 cm;

Wat moet je daar doen?

je moet hem eerst op pixels zetten. (zoals ik zei )

100 px. moet dus de position worden.

Hij moet natuurlijk verticaal

hey mooie tut
t is tot k geen tijd heb anders ging k em ook maken

Jammer dat ik geen photoshop heb maar ik kan wel zeggen dat de layout er super uit ziet

Sommige dingen mogen inderdaad voor de leek op photoshop gebied nog wat duidelijker. Maar met een beetje zoeken kan je alles wel vinden.

vraagje dat ding onderaan waar dat wg op staat hij krijg je die vorm?