Share
In deze zelfstudie zal ik Photoshop CS6 gebruiken om een eenvoudige, schone portfolio met drie kolommen te ontwerpen, met een trending tijdlijn. Tijdens dit proces kijken we naar het maken van aangepaste rasters met richtlijnen, stylingtypografie en spelen met kleuren en contrast om de gewenste esthetiek te bereiken. Het voltooide PSD-bestand kan worden overgedragen aan een ontwikkelaar voor codering.
Om mee te kunnen doen heeft u de volgende (gratis beschikbare) middelen nodig:
Begin met het maken van een nieuw document (Bestand> Nieuw ... ) met behulp van de hieronder getoonde instellingen.
Laten we een aantal hulplijnen instellen, zodat onze lay-out voldoende ruimte heeft en er in evenwicht uit ziet. Ga naar Bekijken> Nieuwe gids ... en stel de volgende richtlijnen in: verticaal op 20px, 50px, 115px, 230px, 550px, 570px, 875px en 1180px, en horizontaal op 60px.
Tip: U kunt ook de GuideGuide Photoshop-plug-in gebruiken om dit proces nog sneller te maken.
We zullen ons document vanaf het allereerste begin overzichtelijk houden, dus laten we drie-lagengroepen met de naam creëren Linker zijbalk, beschrijvingen en Werk. Door aan deze etiquette van Photoshop te blijven, blijft alles overzichtelijk en gemakkelijk te navigeren of te bewerken. Ga naar om groepen te maken Laag> Nieuw> Groep ... en geef elke een titel zoals vermeld. Klik op het pictogram om snel een groep te maken.
De zijbalk aan de linkerkant zal dienen als een gebied voor een gebruikersprofiel, avatar, sociale links en primaire navigatie. Laten we het bouwen!
Selecteer de Rechthoekgereedschap (T), verander de voorgrondkleur in # 11171c en teken een rechthoek van 230x1320px in de Linker zijbalk groep. Het moet aan de linkerkant van het document tussen de rand van het document en de vierde verticale richtlijn worden geplaatst.
Maak een nieuwe groep boven de eerder gemaakte rechthoekvorm en geef deze een naam Profiel foto. Daarna kies je de Ellipse Tool (U) en, ingedrukt houden van de Verschuiving knop, teken een cirkel van 100x100 px en plaats deze rechts onder de eerste horizontale hulplijn. Het moet ook gecentreerd zijn met de derde verticale richtlijn.
Ga nu naar uifaces.com en neem een van de beschikbare avatars. Je kunt ook gewoon je eigen foto vinden en deze plakken boven de recent gemaakte cirkelvorm. Houd daarna de alt toets en muis over de miniatuur van de fotolaag totdat u een kleine pijl naar beneden ziet. Laat de knop los als je hem ziet en er een wordt gemaakt Knipmasker, uw foto bindend aan een circulaire vorm. Lijn het uit zoals u dat wilt, gebruik de Verplaatsingsgereedschap (V).
Minimaliseer nu het Profiel foto groep door op dat kleine pijltje naast de groepstitel te klikken. Verander daarna de voorgrondkleur in #FFFFFF en kies de Horizontaal tekstgereedschap (T). Selecteer de Lato (Regular) lettertype, formaat instellen op 16pt en schrijf de naam van onze portfolioteigenaar. In mijn geval is het het volledig fictieve Chris Johnson. Plaats het 25px onder de profielfoto en zorg ervoor dat deze gecentreerd is met de derde verticale richtlijn.
Nu hebben we een korte beschrijving van onze portfolio nodig, zodat bezoekers meteen een idee krijgen van waar het allemaal over gaat. We zullen dezelfde tool gebruiken; alles wat we moeten doen is de lettergrootte verkleinen tot 14pt en schrijf een paar korte regels over de portfolioteigenaar. Om het er georganiseerd en evenwichtig uit te laten zien plaats het 20px lager zodat het wat ruimte heeft om te ademen.
Goed. Laten we nu een aantal pictogrammen voor sociale media plaatsen, zodat het gemakkelijk is om verbinding te maken met de portfolioteigenaar. Maak een nieuwe groep met een volgende titel: Sociale media. Ga daarna naar Iconfinder om Dribbble, Twitter, Facebook en Google+ iconen als PNG te downloaden. Sleep ze naar uw Photoshop-document en plaats ze in de Sociale media groep. Klik nu met de rechtermuisknop op het pictogram Dribbble, selecteer Meng opties… en pas de Kleurbedekking keuze. In plaats van het standaard rood, stelt u de kleur in op wit.
Alle andere pictogrammen moeten ook wit zijn, dus laten we dezelfde laagstijl toepassen op de rest van de pictogrammen. Klik met de rechtermuisknop op de Dribbble pictogramlaag en selecteer Laagstijl kopiëren. Houd daarna de CMD toets en selecteer de tjilpen, Facebook en Google+ lagen. Klik nogmaals met de rechtermuisknop op een van deze en selecteer Plak de laagstijl. Tenslotte lijn je de pictogrammen uit zodat er een is 10px gat aan elke kant en de groep wordt geplaatst 20px onder de omschrijvingstekst.
Laten we de voorgrondkleur veranderen in wit #FFFFFF, kies dan de Lijngereedschap (U), reeks gewicht naar 1px en, ingedrukt houden van de Verschuiving toets, teken een horizontale lijn vanaf de linkerzijde van het document naar de vierde verticale richtlijn. Verplaats het 50px van de pictogrammen.
Om onze lijn meer visueel subtiel te maken, verminderen we de lijnlagen ondoorzichtigheid naar 10%.
Laten we ons nu concentreren op onze navigatie, dus maak een nieuwe groep met de naam Navigatie en plaats het boven de donkere rechthoeklaag. Kies daarna een documentpictogram uit de gratis vectorpictogrammen uit de pictogrammenset van Chapps en sleep het naar uw portfoliodocument. Raken CMD + T om het formaat van het pictogram te wijzigen 13x16px. Hierna dubbelklik je op de naam van de laag en geef je deze een nieuwe naam Werk pictogram. Als dat is gebeurd, dubbelklikt u op een laagminiatuur en wijzigt u de kleur in # d35136. Plaats het pictogram 40px onder de subtiele lijn en 20px vanaf de linkerrand, zodat het uitgelijnd is met de eerste verticale richtlijn.
Nu voor enkele navigatie-items. Kies het Horizontaal tekstgereedschap (T), kies de Lato (vet) lettertype, formaat instellen op 14pt en schrijf het volgende: WERK. Plaats dat voor de tweede horizontale richtlijn en zorg ervoor dat deze verticaal uitgelijnd is met de Werk pictogram.
Verander de voorgrondkleur naar # 424a51 en gebruik, met dezelfde teksttool, een aantal categorieën om onder het werk te gaan, elk beginnend op een nieuwe regel. Zorg ervoor dat de lijnhoogte is ingesteld op 24pt dus onze categorieën zijn gemakkelijk leesbaar. Plaats de categorielaag 20px onder de eerder gemaakte tekstlaag.
We moeten de actieve status van de link aangeven. Gebruik voor de actieve categorie wit #FFFFFF, klik gewoon op de tekst terwijl Horizontaal tekstgereedschap (T) is nog steeds geselecteerd, markeer de eerste categorie en verander de kleur.
Kies nu een gebruikerspictogram uit de eerder gebruikte icon set en verklein het naar 16x16px gebruik makend van CMD + T. Klik tweemaal op de miniatuur van de pictogramlaag en verander de kleur in # 27b599, hernoem de laag in Gebruikerspictogram dus het is gemakkelijker om onze lagen te beheren. Plaats het 30px onder de laatste categorie om het een negatieve ruimte te geven die als een scheidingsteken fungeert.
Verander de voorgrondkleur in groen # 27b599 zoals gebruikt voor de Gebruikerspictogram en kies de Horizontaal tekstgereedschap (T). Selecteer de Lato (vet) lettertype, stel de grootte in op 14pt en schrijf WAT BETREFT. Plaats dit label direct achter het gebruikerspictogram, zoals u deed voor het gedeelte hierboven. Verander vervolgens de voorgrondkleur naar # 424a51 en voer een aantal linktitels in voor het gedeelte 'Over'.
Laten we nu het laatste deel van onze navigatie maken; Contact. Kies het e-mailpictogram uit Gratis vector iconen van Chapps en pas het formaat aan naar 16x13 px, verander daarna van kleur naar # 088ecc en plaats het consistent als de iconen daarvoor, 30px onder de laatste tekstlaag van de Wat betreft sectie. Na binnengekomen te zijn CONTACT tekst, verander de voorgrondkleur in # 424a51 en schrijf enkele linktitels voor de sectie op.
Als we één blok naar rechts verplaatsen, gaan we nu aan de slag met de beschrijvingen van onze portfolio-items.
We minimaliseren de momenteel gebruikte Navigatie en Linker zijbalk groepen door op de kleine pijlen naast de groepsnamen te klikken. Vouw het beschrijvingen groep, verander de voorgrondkleur in # f7f7f7 en selecteer de Rechthoekgereedschap (T). Teken daarna een verticale rechthoekige vorm tussen de rand van Linker zijbalk en de vijfde verticale richtlijn. Deze rechthoek moet 320 x 1320 px zijn.
Verander nu de voorgrondkleur naar # e7e7e8 en kies de Lijngereedschap (U). Stel het gewicht in op 1px en houd de toets ingedrukt Verschuiving toets, teken een verticale lijn van boven naar beneden op de vijfde verticale richtlijn. Dit zou een betere visuele scheiding moeten creëren tussen de beschrijvingen groepsectie achtergrond en de hoofdachtergrond. Raken CMD +; om richtlijnen te verbergen / zichtbaar te maken. Tenslotte hernoemt u de lijnlaag naar V-lijn dus het is logisch later.
We gaan nog een verticale lijn tekenen, dus verander de lijn Gewicht naar 3px en teken een andere lijn over het document (de toets ingedrukt houden) Verschuiving sleutel om perfecte verticaliteit te behouden). Klik tweemaal op de naam van de laag om hem te hernoemen Tijdlijn. Verplaats daarna de regel 24 px rechts van de Linker zijbalk rand en 30 px naar beneden vanaf de bovenkant van het document.
Verander de voorgrondkleur in ons eerder gebruikte rood # d35136 en kies de Ellipse Tool (U). Houd daarna de Verschuiving toets en teken een cirkel van 11x11px. Plaats het 20px rechts van de rand van de Linker zijbalk gebied en 20 px omlaag vanaf de bovenkant van het document. Onze kleine cirkel moet mooi bovenop de recent gemaakte regel worden geplaatst.
Klik nu met de rechtermuisknop op de recent gemaakte cirkellaag en selecteer Meng opties… . Klik op Beroerte. set Grootte tot 3px, Positie naar Buiten en kleur aan # f7f7f7. Deze slag in de achtergrondkleur creëert het effect van onze cirkel die naast een lijn zweeft.
Verander de voorgrondkleur naar # 11171c en kies de Horizontaal tekstgereedschap (T). Kies als ususal de Lato (vet) lettertype, stel de grootte in op 14pt en voer een datum in voor het werk, bijvoorbeeld "7 november 2013". Dan, met behulp van de Verplaatsingsgereedschap (V), verplaats de datalaag 20 px naar rechts van de rode cirkel en 20 px naar beneden vanaf de bovenkant van het document.
Je zou nu een patroon in onze tussenruimte moeten hebben opgemerkt. Het is belangrijk om consistent te zijn en ritmische spatiëring voor verschillende elementen te gebruiken, zodat het ontwerp er in evenwicht uit ziet.
Verander de voorgrondkleur naar # 5e5e5e dus het is iets lichter dan de datum. Dit creëert een visuele hiërarchie, waardoor het lezen veel gemakkelijker wordt. Gebruik hetzelfde Horizontaal tekstgereedschap (T), Lato lettertype, maar deze keer verandert het lettertype in regelmatig en voer een paar regels in voor een korte werkbeschrijving. Maak vervolgens een regelbreuk door op de invoeren knop twee keer indrukken en voer de client en tags voor het werk in, bijvoorbeeld:
Markeer "client" en "tags" en stel het lettertypegewicht in Stoutmoedig, dus ze zullen verschillen van de beschrijving en worden gezien als links. Controleer ten slotte of de lijnhoogte is ingesteld op 18pt dus onze lijnen hebben genoeg ruimte om te ademen.
Als u de functies die we zojuist hebben gemaakt, wilt dupliceren, selecteert u de rode cirkel, de datum en de beschrijvingslaag. Sla dan CMD + J, of klik met de rechtermuisknop en selecteer Dubbele lagen ... , raken OK daarna. Verplaats de gedupliceerde inhoud een paar honderd pixels onder het origineel. We zullen de positie hiervan later aanpassen, omdat dit afhankelijk is van de hoogte van het werkbeeld dat we ernaast plaatsen.
Het laatste verticale gedeelte van onze lay-out is voor de portfolio-onderdelen zelf. Laten we het bouwen!
We beginnen (zoals gewoonlijk) met het minimaliseren van het momenteel gebruikte beschrijvingen groep en open de Werk groep. Kies het Rechthoekgereedschap (U) en teken een 610x400 px rechthoek tussen de zesde en achtste verticale richtlijnen (kleur doet er niet toe deze keer, zorg er alleen voor dat het zichtbaar is). Plaats het 20px onder de bovenkant van het document zodat het rondom 20px ruimte heeft.
Kies nu een afbeelding van je werk, ik gebruik het Notebook PSD Template screenshot dat ik eerder heb ontworpen. Sleep het naar uw Photoshop-documentvenster en zorg ervoor dat het boven de eerder gemaakte rechthoekige vormlaag wordt geplaatst. Ingedrukt houden ALT toets, beweeg de muisaanwijzer over de naam van de screenshotlaag totdat u een kleine pijl omlaag ziet. Als je het ziet, laat je de toets los en wordt er een gemaakt Knipmasker zodat je afbeelding alleen zichtbaar is binnen het gebied van de rechthoek. Eindelijk, druk op CMD + T en wijzig het formaat van de afbeelding zoals jij dat wilt.
Selecteer de rechthoekige vormlaag, dupliceer deze en verplaats deze 20 px onder de eerste afbeelding. Voeg nog een afbeelding van je werk toe, zoals we eerder met een werk hebben gedaan. Voor het tweede werkvoorbeeld heb ik de Raindrops-foto van unsplash.com gebruikt. Maak daarna een derde stuk werk en plaats het 20px lager dan het tweede. Voor het derde werkplaatje dat ik de NYC Skyline-foto heb gebruikt, moet je opnieuw unsplash.com vormen.
We moeten nu teruggaan en zorgen dat alles op een rij staat. Open de beschrijvingen groep opnieuw en vind de rode cirkel, datum- en beschrijvingslagen. Selecteer ze allemaal vasthouden CMD toets en verplaats ze naar beneden totdat ze uitgelijnd zijn met de bovenkant van de tweede portfolio-afbeelding. Dupliceer deze lagen door op te klikken CMD + J, of klik met de rechtermuisknop op de lagen en selecteer Dubbele lagen ... . Plaats ze vervolgens naast het derde werkbeeld en lijn ze uit met de bovenkant van dat beeld.
Geweldig. We zijn bijna aan het einde. Minimaliseer de beschrijvingen groep en open Werk groep opnieuw. Kies daarna het vernieuwingspictogram uit de icon set en sleep het naar uw portfoliodocument. Raken CMD + T en wijzig het formaat in 20x20px. Klik tweemaal op de miniatuur van de pictogramlaag en verander de kleur in # a0a2a4. Plaats het tenslotte 20px onder het werkbeeld.
Laatste stap! Laten we een dynamisch element maken dat verschijnt wanneer onze website naar beneden scrolt en de server meer werk aan het laden is. Kies het Horizontaal tekstgereedschap (T), Kiezen 14pt grootte Lato (vet) lettertype en voer de tekst in Bezig met laden… . Plaats het naast het pictogram Vernieuwen en verplaats het 10 px naar rechts. Selecteer daarna beide lagen, het pictogram en de tekst en plaats ze in het midden van de verticale richtlijn van het werkbeeld.
Dus daar heb je het. We hebben op een georganiseerde en efficiënte manier de layout van een portfoliowebsite helemaal opnieuw bekeken. Het bestand dat we hebben gebouwd, is klaar om te worden overgedragen aan een ontwikkelaar die het uit elkaar kan halen, alle benodigde elementen kan vinden en kan bouwen voor de browser.
Ik hoop dat je iets nieuws hebt geleerd door deze tutorial te volgen. Als je vragen hebt of problemen hebt, aarzel dan niet om me te pingen in de comments sectie of via Twitter.
Accentsconagua