Share
Wat is het belangrijkste ding dat u wilt dat uw portfoliosite doet? Uitblinken! Vandaag zal Paul J Noble ons door de creatie van zijn eigen unieke portfoliosite leiden. Hij zal ons tips en tricks laten zien in Adobe Photoshop, evenals enkele slimme manieren om onderscheid te maken tussen de pack van andere portfoliosites.
Denk aan uw portfoliosite is uw online woordvoerder voor potentiële klanten. Als het goed wordt gedaan, moet het mensen vertellen wat je doet, je beste werk laten zien en hen de gelegenheid geven om met je in contact te komen. Dat is allemaal vrij voor de hand liggende dingen - dus wat is het verschil tussen een gewone portfoliosite en een echt opmerkelijke?
De sleutel tot een effectieve portfoliosite is niet alleen het hebben van geweldige projecten - het laat een blijvende indruk achter op bezoekers. Natuurlijk kan dit betekenen dat je een ongelooflijke illustratie hebt als je een grafisch ontwerper bent, maar voor webontwerpers en ontwikkelaars betekent dit vaak dat je de grenzen van UI / UX en codering moet verleggen om te laten zien wat onze sterkste punten zijn.
In deze tutorial laat Paul J Noble ons zien hoe hij een aantal eenvoudige, maar opmerkelijk vernieuwende benaderingen van de UI / UX op zijn eigen site gebruikte om een portfoliosite te maken die de verwachtingen van de gebruiker oproept met behulp van interactiviteit en subtiele lichteffecten.
Laten we erin duiken!
Maak een nieuw document in Photoshop van 1400 x 900. De uiteindelijke, HTML-gerenderde site bevat 'vloeibare' (d.w.z. schaalbare) elementen, dus we moeten niet vergeten dat het uiteindelijke ontwerp geen vaste grootte heeft.
Het creëren van een solide achtergrond is een gemakkelijke manier om dingen op gang te krijgen. Voor dit ontwerp gaan we een basiskleur gebruiken
dat is donker genoeg om voorgrondafbeeldingen te accentueren, terwijl ook puur zwart wordt gecompenseerd dat in de folio-afbeeldingen kan voorkomen. We gebruiken ook een beetje blauw om een 'coole' donkere kleur te creëren die wordt geïntegreerd met de interface-elementen.
Selecteer Laag> Nieuwe opvullaag> Effen kleur en wijs de kleur # 252a3b toe.
Omdat we een schaalbare lay-out gebruiken, moeten we de minimale horizontale breedte definiëren. Voor de meeste commerciële sites is dit ongeveer 1000 pixels om gebruikers te voorzien van 1024x768 resolutieschermen. Voor deze site streven we echter naar 1100 pixels als een minimale breedte.
Zorg er ten eerste voor dat uw geleidingseenheden zijn ingesteld op pixels. Dit kan worden ingesteld door naar Voorkeuren> Eenheden en gidsen te gaan.
Ga vervolgens naar Beeld> Nieuwe gids. Omdat we onze inhoud centraal willen plaatsen en streven naar een totale minimale breedte van 1100 pixels, moeten we verticale hulplijnen plaatsen op 150 px en 1250 pixels..
Subtiele diagonale striping helpt het ontwerp op te heffen door een scheiding te creëren tussen de voorgrondportfolio-items en een gestructureerde achtergrond.
Om dit te bereiken, passen we een patroonvullaag toe. We moeten echter eerst het patroon maken.
Maak een nieuw document van 12x12 pixels met een transparante achtergrond en voeg een nieuwe vullaag toe met een zwarte vulling (# 000000).
Voeg nu een nieuwe laag toe (Laag> Nieuw> Laag). Gebruik de potloodtool met een penseelgrootte van 1 px om drie lijnen precies zo te tekenen als in de afbeelding hieronder.
Schakel de opvullaag uit en zet de laagdekking van de lijnen op 6%. Om dit als ons patroon op te slaan, selecteer je Bewerken> Patroon definiëren.
Ga terug naar ons oorspronkelijke canvas, maak een nieuwe laag met de textuur door Laag> Nieuwe vullaag> Patroon te selecteren en selecteer het eerder gedefinieerde patroon.
Nu we onze basis hebben gemaakt, kunnen we een aantal platte lagen laten vallen die de belangrijkste elementen van de site bevatten
Ten eerste onze navigatie. Aangezien deze site zo ontworpen is dat er geen verticaal scrollen plaatsvindt, kunnen we de navigatie positioneren om uit te lijnen met de onderkant van het scherm.
Maak een nieuwe groep in het lagenpalet en label deze groep 'Navigatie'.
Maak vervolgens een nieuwe laag met behulp van de Rechthoek-tool (U). Open het informatievenster en teken deze vorm zodat deze 1400x61 is (de volledige breedte van het documentvenster en 61 pixels hoog). Lijn deze laag uit onder in het documentvenster.
Pas nu een verloop toe op de laag door met de rechtermuisknop op de vormlaag in het palet Lagen te klikken en Overvloeimogelijkheden te selecteren en vervolgens Overlapping met verloop te selecteren (of selecteer Laag> Laagstijl> Overlay met kleurovergang).
Klik in de Graident-editor op de onderste kleurenkiezer om de Kleurkiezer te openen. Gebruik # 2f313a voor de linkerkleur (onderkant van de vorm). Gebruik # 3c3f49 voor de juiste kleur (bovenkant van de vorm).
Maak vervolgens een nieuwe laag en geef deze 'highlight' op. Gebruik het gereedschap Potlood met een penseel van 1 px en kleur #ffffff en teken een lijn terwijl je de shift vasthoudt over de bovenkant van de rechthoek die eerder is gemaakt. Zet vervolgens de dekking van deze laag op 6%.
Maak een nieuwe tekstlaag 20 pixels vanaf de linkerkant van het document en lijn de tekst uit om verticaal gecentreerd te zijn op de laag met de navigatiehoek.
In dit voorbeeld is het lettertype DIN Light toegepast bij 14 px met een losse tracking van 200. Om een verschuiving tussen twee delen van het logo te maken, worden twee kleuren gebruikt. Voor het eerste deel #dddddd en het tweede, donkere deel # 737375.
Voeg vervolgens een subtiele slagschaduw toe om het uiterlijk te creëren van de tekst die in de achtergrond wordt geplaatst. Selecteer Laag> Laagstijl> Slagschaduw.
Deselecteer 'Gebruik Globaal Licht', verander de richting in -45 graden, zet grootte op 0px, afstand 1px en dekking 30%.
Voor de belangrijkste navigatieknoppen gebruiken we een afgeronde rechthoekige vorm.
Maak een nieuwe groep met de naam 'knoppen'.
Maak een nieuwe afgeronde rechthoekvorm van 279x31 en verschuif 20 px vanaf de rechterzijde van het documentvenster en verticaal gecentreerd in de navigatiehoek.
Klik met de rechtermuisknop op de laag in het lagenpalet en selecteer Mengopties. Controleer Verloop overlay en gebruik de waarden # 292c33 tot # 43464f. Klik op OK en controleer vervolgens Bevel & reliëf.
Stel voor Bevel en reliëf de grootte in op 0px met een richting van 122 graden. Zet vervolgens de dekking van Markeer en Schaduw op 10% om een consistent, subtiel lichteffect te creëren.
Voeg tekstlabels toe met dezelfde lettertype-instellingen die werden toegepast voor het type logo. Omdat de knoplabels zich in een kleinere verticale ruimte bevinden, moeten we de grootte tot 12 px verkleinen en de tracking op 100 zetten. Gebruik dezelfde kleuren als het type logo maar gebruik de lichtere kleur voor het actieve paginanaam.
Om de knoppen te scheiden met behoud van het zacht verlichte uiterlijk van de navigatie, moeten we twee lijnen tekenen, elke 1px-breedte. De eerste moet zwart zijn (# 000000) en de andere is wit (#FFFFFF). Zet de dekking voor de witte laag op 6% en de zwarte laag op 12%. Dupliceer deze lagen door Shift-klikken op elk en vervolgens met de rechtermuisknop te klikken om de selectie. Plaats de dubbele lagen met een consistente spatiëring binnen de navigatie.
Deze knoppen hebben een andere functie dan de rest van de nav, dus we zullen een stijl toepassen die dit suggereert. Laten we deze knoppen inzetten om de hoofdnavigatie aan te vullen.
Maak eerst een nieuwe groep met de naam 'sociaal' en nest deze groep in de bovenliggende groep 'navigatie'.
Gebruik nu het gereedschap Afgeronde rechthoek met een straal van 4 px en houd de Shift-toets ingedrukt en maak een vierkante vorm van 25x25 px. Plaats deze verticaal verticaal in de navigatie en plaats de vorm 22 px links van de belangrijkste navigatieknoppen.
Klik met de rechtermuisknop op de zojuist gemaakte vorm en selecteer Mengopties.
Voeg een slagschaduw toe. Voor deze slagschaduw gebruiken we wit (#FFFFFF) en stellen we de mengmodus in op Licht. Stel de afstand in op 1px, spreid naar 0% en grootte naar 0px. Dit zorgt voor een effect van de onderste rand die wordt verlicht en vandaar dat de knop wordt ingezet.
Controleer vervolgens, terwijl je nog steeds in het Layer Style-venster bent, de innerlijke schaduw. Gebruik zwart (# 000000) met een dekking van 39%, afstand 1px en grootte 4px.
Selecteer ten slotte Color Overlay en gebruik # 353741. Dit maakt het uiterlijk van de vorm vlakker en voegt een contrast toe met de achtergrond.
Voor de pictogrammen voor sociale media nemen we een bestaande afbeelding en volgen de randen met de pen om een pad te maken (zorg ervoor dat Paden is geselecteerd in het menu Opties van de tool).
Nadat u een pad van het pictogram hebt gemaakt, gebruikt u het gereedschap Padselectie en klikt u met de rechtermuisknop op het pad dat u zojuist hebt gemaakt (zorg ervoor dat het pad is geselecteerd in het palet Paden). Selecteer Aangepaste vorm definiëren? Bewaar de vorm.
We kunnen het pictogram nu gebruiken als een schaalbaar vectorobject. Gebruik het gereedschap Pen om de opties te wijzigen in vormlagen (linksboven op de balk met opties) en selecteer Aangepast vormgereedschap en selecteer vervolgens het zojuist gemaakte pictogram. Houd de Shift-toets ingedrukt en sleep het object zodat het in de pictogramtegel past.
Zet de dekking op 20%.
Herhaal deze stappen voor alle resterende social media-pictogrammen.
In dit voorbeeld gaan we foliobeelden weergeven die 640x480 px zijn.
Omdat we de afgebeelde afbeelding verticaal boven de navigatie boven de navigatie willen centreren, moeten we nog wat extra handleidingen toevoegen. Selecteer Weergave> Nieuwe gids en voeg horizontale hulplijnen toe met 180px en 660px. Dit plaatst ons bekeken beeld in het midden van de verticale ruimte boven de navigatie.
We hebben ook wat tekst links van de afgebeelde afbeelding nodig, zodat we verticale hulplijnen bij 400 px en 350 px toevoegen om een marge voor de tekst te bieden en ruimte voor navigatie naast de afbeelding toe te staan. Voeg ten slotte verticale hulplijnen bij 1040px en 1070px toe om de rand van het weergegeven beeld en de marge tussen het aangrenzende beeld te definiëren.
Maak een nieuwe groep met de naam 'Projecten'. Teken vervolgens met behulp van het gereedschap Rechthoek een rechthoek 640x480px die uitgelijnd is met de linkerbovenhoek van de verticale gids op 400 px en de bovenkant op de horizontale gids op 180 px. Dit dient als tijdelijke aanduiding voor ons hoofdbeeld.
Klik met de rechtermuisknop op de zojuist gemaakte laag en selecteer Laag ragen.
Houd nu de Alt-toets ingedrukt en sleep de laag om een duplicaat te maken. Verplaats deze laag naar rechts van de laag met 30px marge om uit te lijnen met de gids op 1070px en met dezelfde basislijn.
Maak nog twee duplicaten en lijn deze uit aan de onderkant van elk met 30px marge tussen elk.
Gebruik vervolgens het gereedschap Verfemmer om elk van deze vormen te vullen met de kleur # 252a3a.
Maak een nieuwe groep met de naam 'Vignette' onder de groep 'Navigatie' en boven de groep 'Projecten'.
Maak een nieuwe laag en gebruik het gereedschap Verfemmer om de laag te vullen met de voorgrondkleur # 0f1219.
Teken met behulp van het gereedschap Ellipse een omtrek die elkaar kruist in de hoeken van de hoofdafbeeldingsgidsen.
Om een vigneteffect te creëren, moeten we dit gedeelte wegsnijden terwijl de rand van de snede wordt bevederd. Om dit te bereiken, gebruiken we Selecteren> Wijzigen> Veer. Beperk de selectie met 60px en knip dan de laagselectie (Ctrl-x / Command-x).
Nu we het werk gaan presenteren, moeten we een aantal screenshots plaatsen op de tijdelijke aanduidingen. Ga terug naar de groep 'Projecten' en plak een screenshot terwijl de hoofdplaatshouder is geselecteerd. Hierdoor wordt de laag boven de tijdelijke aanduiding ingevoegd. Klik vervolgens met de rechtermuisknop op de laag en selecteer Knipmasker maken.
Plak nog drie screenshots op de andere tijdelijke aanduidingen.
Verklein de dekking voor alle schermafbeeldingen behalve voor de gecentreerde schermafbeelding tot 20%.
Om elk project te annoteren, gebruiken we drie tekstlagen. Maak een nieuwe groep boven de 'vignette'-groep om deze lagen te huisvesten.
Voor de eerste, de kop, gebruiken we een licht lettertype. In dit voorbeeld heb ik DIN Light gebruikt, maar een ander soortgelijk lettertype kan ook prima werken. Gebruik het gereedschap Tekst om een tekstvak te tekenen in de hulplijnen links van het hoofdbeeld en 40px onder de bovenste hulplijn. Stel de kleur in op #FFFFFF, volg tot -25 voor een strakkere letterafstand en gebruik een lettergrootte van 28px.
We voegen ook een regel toe voor de projectcategorie en datum. Zet de grootte op 14px, volg tot 100, forceer doppen en pas de kleur # 338966 toe om deze lijn te accentueren.
Vervolgens gebruiken we voor de hoofdtekst een systeemlettertype zoals Lucida Grande of Lucida Sans Unicode op 12px met een kleur van # 8C8F95 en regelhoogte van 18px.
Om door onze folio-site te navigeren, kunnen we muis- of toetsenbordbediening gebruiken. Een intuïtieve plaatsing van navigatierichtingstoetsen is afhankelijk van hun functie. De rechterpijlknop wordt bijvoorbeeld rechts van de hoofdafbeelding weergegeven.
Voor de knoppen gebruiken we doorschijnende vormen die de dekking kunnen verschuiven bij zweven of klikken op gebeurtenissen. Maak een nieuwe groep met de naam 'Knoppen' boven de groep 'Vignette'.
Maak vervolgens een nieuw document met de afmetingen 37x37px. Teken met het pengereedschap een chevronvorm zoals hieronder. Herhaal het proces in Stap 8 met behulp van het Padselectiegereedschap, klik met de rechtermuisknop op de vorm en selecteer Aangepaste vorm definiëren. Bewaar de vorm.
Ga terug naar ons hoofddoek en gebruik het gereedschap Aangepaste vorm om de eerder gemaakte vorm in te voegen.
Selecteer vervolgens Bewerken> Transformeren> Horizontaal spiegelen. Dit wijst de pijl naar rechts. Kloon deze vorm en gebruik Bewerken> Transformeren> 90 graden met de klok mee draaien om de naar beneden wijzende vorm te creëren.
Plaats elk van deze vormen in het midden van hun respectieve richtingszijde. Sta 15px marge toe, zodat de knoppen de aangrenzende afbeeldingen kunnen overlappen en de dekking op 12% zetten.
Om de gebruiker te laten weten waar ze zich in het portfolio als geheel bevinden, abstraheren we het rasterontwerp en gebruiken we lijnen van verschillende hoogte om kolommen met afbeeldingen te vertegenwoordigen en een indicator om de huidige kijkpositie vast te stellen..
Maak een nieuwe groep met de naam 'Oriëntatie' en plaats deze groep boven de 'Vignette'-groep.
Gebruik het gereedschap Potlood en selecteer Vierkante penseelset in het uitvouwmenu. Verfijn dan met de kleur #FFFFFF en een dikte van 5px een lijn om uit te lijnen met de uiterst linkse grensgids en 60px hoog.
Klon deze laag en plaats deze 2 px naar rechts. Herhaal dit voor maximaal 12 regels.
Zet de dekking voor alle lagen op 12%. En eenvoudige manier om dit te doen is de dekking voor de eerste laag in te stellen, klik met de rechtermuisknop op de laag en selecteer Laagstijl kopiëren. Selecteer vervolgens alle resterende lagen en selecteer Laagstijl plakken.
Verspreid deze lagen met de opdracht Bewerken> Vrije transformatie om elke regel in te korten / vergroten.
Maak tenslotte een nieuwe laag en gebruik het potlood opnieuw om een markering op de eerste regel te tekenen. Dit is onze positie-indicator.
Vaak biedt toetsenbordbesturing een intuïtieve navigatie-ervaring. We moeten echter toestaan dat de gebruiker weet dat het toetsenbord de navigatie kan besturen. Om dit te bereiken, maken we toetsenbordpijlpictogrammen.
Maak een nieuwe groep met de naam 'Toetsenbord' en plaats deze boven de 'Vignette'-groep.
Teken met behulp van het gereedschap Rechthoekige vorm een vierkant (houd Shift vast) 20x20px met een kleur # 262a34. Klik met de rechtermuisknop op de laag in het palet Lagen en selecteer Mengopties. Controleer de lijn en breng een 1px-streek aan de buitenkant aan met de kleur # 32343f.
Gebruik vervolgens het pengereedschap (zorg dat de stijl is ingesteld op Standaard in de optiebalk) en teken met kleur #fff een pijl met een lichtjes vierkant punt. Pas indien nodig aan met het gereedschap Direct selecteren. Zet de dekking op 20%
Selecteer in de lagenpalet de twee zojuist gemaakte lagen. Klik met de rechtermuisknop en selecteer Dupliceerlagen. Gebruik vervolgens de menuoptie Bewerken> Transformeren om de gedupliceerde lagen in de juiste richting te draaien. Herhaal deze stap om alle vier pictogrammen te maken.
Alright! Nu zijn we klaar met het ontwerpgedeelte van het project? wat betekent dat we alles hoeven te coderen met behulp van enkele eenvoudige HTML / CSS, jQuery-sneltoetsen en een paar extra jQuery-trucjes. Als iemand wil zien hoe Paul dit ontwerp heeft gecodeerd, laat het ons weten in de opmerkingen, zodat we het kunnen regelen!
Accentsconagua