Create En Minimal Portfolio Site Design (Pluss en gratis PSD!)
I denne designen opplæringen, skal vi lage rene, minimal portefølje Motivet " minimal ", tilgjengelig på Themeforest som WordPress eller HTML tema. Vi vil også diskutere årsakene til at det fungerer så bra, og hvordan du kan lage din egen personlige tilpasning fra malen
Sjekk ut i slutten av innlegget for 3 søte modifikasjoner av denne malen.; kildefilene er på Hus i
Om forfatteren: Curt Ziegler, også kjent som Cudazi, er en web-designer som spesialiserer seg på WordPress tema utvikling med 10 år med design erfaring, en rekke svært vellykkede produkter og over 6000 salg på Themeforest! Du kan også finne mer av sitt arbeid på cudazi.com.
Utgitt ett år siden, har Minimal temaet design solgt nesten 1000 kombinerte ganger, og hjalp bane vei for mange andre minimalistiske mal design. Denne malen vil lede deg gjennom hvordan du skal lage design selv, men enda viktigere, vi vil også være å diskutere hvorfor det fungerer. Når vi er ferdig, håper vi at du vil være i stand til å lage din egen versjon av denne elegante, profesjonell design ved hjelp av din egen stil, fonter og farger!
Tutorial Detaljer
program: Adobe Photoshop
Vanskelighetsgrad: Nybegynner
Estimert Gjennomføring Tid: 1 time
Trinn 1
Begynn med å lage et nytt dokument i Photoshop 1020px x 1020px. Vær sikker på at oppløsningen er satt til 72 piksler /tomme og din bakgrunn er satt til hvit. Vi trenger å låse opp bakgrunnslaget slik at vi kan legge til noen lagstiler, høyreklikk på bakgrunnen og velg "Layer fra bakgrunn". Deretter kan du endre navnet på laget tilbake til bakgrunnen.
Trinn 2
Legg til en touch av grått på toppen av siden ved å dobbeltklikke på det nye bakgrunnslaget og velge Gradient Overlay fra lagstiler . Bare en rask notat, kan du alltid gå til Lag-menyen og velg lag stil i stedet for å dobbeltklikke på laget.
Sett opacity til 5% og bruke en lineær gradient på -90 grader.
Klikk én gang på graderingen for å åpne gradient redaktør og sette opp to punkter:
Black - # 000000 på stedet fra 0% (dette bør settes som standard)
White - #FFFFFF på plasseringen av 11%
Klikk på OK i gradient editor og lag stil vinduer for å bruke gradient til bakgrunnslaget. Du skal nå se en liten mørkere på toppen av siden.
Trinn 3
På områder med en svært lys eller enkel bakgrunn, liker jeg å legge til et element la brukeren vet de ' har returnert til toppen av siden. I tilfellet av denne utformingen, er det et 3 bildeelement linje bredden på innholdsområdet med en lys linje som strekker seg resten av veien over spissen.
Ved tilsetting linjer og former, jeg ønsker å bruke Photoshop vektor former verktøy. Med mindre annet er angitt, forutsetter under at alle linjer og rektangler er laget ved hjelp av denne metoden. Som med noen tutorial, det er flere måter å gjøre det samme, så gjerne bruke det du er mest kjent med
Velg rektangel verktøyet fra vektorfigurer området på verktøylinjen.
< p> Tegn et rektangel over hele 1020px bredde på siden og 3px høy. Dobbeltklikk på den fargede miniatyr i Lag-panelet for å sette farge til #DFDFDF. Flytt rektangel til toppen av siden.
Trinn 4
På 940px bred, vil en andre rektangel matche bredden på vår side innhold, la oss sette noen guider på siden for å hjelpe oss justere alt jevnt.
Gå til Vis> guide New ...
Velg vertikal og sett verdien til 40px.
Legg til en vertikal guide på 980px. Dette skaper et 940px område i sentrum for vårt innhold.
Trinn 5
Legg til en andre rektangel på lag over din forrige 940px bred og 3px høy. Dobbeltklikk på den fargede miniatyr i lag-panelet for å sette farge til # 333333.
Flytt andre rektangel mellom guidene du opprettet, og skyv den til toppen av siden.
Trinn 6
Bare litt opprydding for å holde orden, flytte de to header linjene i sin egen mappe.
Trinn 7
det er på tide å lage logoen, som er en kombinasjon av to rektangler og hvit tekst. Vi skal bygge det bit for bit, og deretter flytte den på plass når den er ferdig.
Logoen er toppen poenget med vår omvendt pyramide design, hvor de flestes øyne vil starte når du besøker denne siden før smalner ned i lavere områder av nettstedet.
start med å lage et rektangel 222px bred 82px høy. Dobbeltklikk på den fargede miniatyr i lagene og sette farge til # 333333.
Opprett en ny rektangel 14 piksler x 14 piksler og plassere den i nedre høyre hjørne av forrige rektangel. Sett farge til #FFFFFF. Dette vil skape et hakk ut effekten av rektangelet uten å måtte redigere noen former.
(Hvis du ikke ser "hakk" sjekke at andre rektangelet er plassert over den første i Lag-panelet)
Trinn 8
Legg til tekst på innsiden av figurene du nettopp opprettet. For denne demoen er teksten sier. Minimal
Avhengig av teksten som brukes, må du kanskje justere størrelser for å passe skikkelig
Font. Arial
størrelse: 42pt
Tracking: -20
Vekt: Fet
Farge: #FFFFFF
Trinn 9
Flytt alle tre lag med logoen du opprettet i sin egen mappe kalt logo. Dette vil gi oss mulighet til å plassere den på siden mye enklere.
Logoen skal være 40px fra bunnen av header linjene vi laget ovenfor. Hvis du husker, var de 3px høy, så vi må legge til en ny horisontal guide på 43px. Gå til Vis> Guide Ny og sett den til horisontalt med en stilling 43px. Sett en annen guide på 125px som vil justere med bunnen av logoen.
Trinn 10
Flytt logoen, slik at øvre med den nye guiden du opprettet ovenfor og sentrert på siden. Nå kan vi gå inn å lage menyen.
Trinn 11
Menyen er laget med to horisontale linjer og tekst sentrert over siden 40px under bunnen av logoen.
Legg til en horisontal guide på 165px, vil dette være toppen av vår meny. Lag en horisontal guide på 209px å justere med bunnen av menyen.
Start med å lage en linje midt mellom de viktigste innholdsguider 940px bred og 1px høy. Sett farge til #AFAFAF og flytte den til den første guiden vi laget ovenfor.
Dupliser lag over ved å gå til Layer> Duplicate layer. Dette skaper et nytt lag i nøyaktig samme stilling. Flytt dette nye laget ned til den andre guiden vi opprettet ovenfor. Vi har nå beholderen for vår meny
Trinn 12
Legg til tekst sentrert horisontalt og vertikalt mellom de to linjene laget ovenfor
Font:.. Arial
Størrelse: 14 pkt
Tracking: 0
Vekt: Fet
Color #AFAFAF
Legg til linjer og menytekst til en mappe som heter Top Menu for å holde ting organisert.
Trinn 13
Neste, vi vil skape store reklametekst. Dette vil bli 40px under menyen tråd med konsekvent 40px avstanden mellom elementene.
Legg til en horisontal guide på 248px og 324px for å tjene som beholder av våre store promo tekst. . Dette kan variere avhengig av tekst, men vil arbeide for våre to linjer med eksempeltekst brukes
Bruk tekstverktøyet, legge til følgende tekst på siden din:
Velkommen til online portefølje av Jane B Doe, Ph.D. . Student, designer i bynavn, stat
Font: Arial
Størrelse: 42pt
Tracking: -50
Linjehøyde: 45pt
Vekt: Fet
Farge: #AFAFAF
Color (uthevet): # B86443
Senter teksten vertikalt og horisontalt mellom de nye guider .
Plasser denne teksten i en mappe som heter reklametekst for å holde ting organisert.
Trinn 14
hjemmesiden layout har tre store historier med en runde ikonet i hoved (tv) kolonne. Som du sikkert gjettet, vil vi lage dem 40px under hoved promo teksten. Her er hva vi vil lage:
Trinn 15
Først, la oss lage de tre elementene i hver historie. Overskriften og tekst vil justere 80px fra guiden helt til venstre, forlater rommet for historien ikonet. Legg en vertikal guide på 120px
Trinn 16
Ved hjelp av tekstverktøyet, legger overskriften:.. Lær mer om meg
Font: Arial
Størrelse: 21pt
Tracking: 0
Vekt: Fet
color: # 333333
Juster teksten med den nye guiden på 120px opprettet ovenfor og legg den 40px under den store reklametekst.
La oss forandre ting opp litt. Ikke at jeg har noe imot guider, men det er en raskere måte å plass elementer som denne overskriften 40px under teksten.
Velg flytteverktøyet og flytt "Lær mer om meg" hele veien opp mot siste linje av den store teksten.
nå, hold nede shift og trykk på pil ned på tastaturet fire ganger, teksten vil hoppe ned 40px, 10 for hver gang du trykker ned med shift holdt. (Du kan gjøre det uten skift, men du vil trenge for å treffe ned 40 ganger som du er mer enn velkommen til å gjøre)
Trinn 17
Opprett artikkelteksten, som er litt mindre og lysere i fargen. Juster det igjen med overskriften opprettet ovenfor. I stedet for den 40px mellomrom, la oss holde det i nærheten på rundt 15px under overskriften.
Sett en vertikal guide på 640 piksler for å tjene som den høyre kanten av teksten, holder det innenfor denne Boundry, slik at for rom for kolonne to nedover veien
Her er noen useriøs tekst for å bruke:.. Lorem Ipsum er rett og slett dummy teksten for printsdf sdsg og tycpsum har vært bransjens standdddard duasdfsdsdmmy textView min Resumen bransjens standard duasdsdffmmy < .no>
Font: Arial
Størrelse: 17pt
Tracking: 0
Linjehøyde høyde~~POS=HEADCOMP: 20 pkt
Vekt: Fet
Farge. #AFAFAF
Trinn 18
ikonet er litt mer komplisert, men egentlig bare en sirkel med en Photoshop form på lag over
< p> Ved hjelp av Photoshop vektor verktøy, merker Ellipse Tool. Klikk og dra på siden din mens du holder shift å tegne en perfekt sirkel. Med det valgte laget å trykke Ctrl + T (Kommando + T Mac) få opp transformasjon innstillinger. Sett Bredde (W) og Høyde (H) til 60px.
Dobbeltklikk på laget miniatyr til å sette farge til # 333333.
Trinn 19
Dobbeltklikk . på laget skapte ovenfor for å få opp Lagstil vindu
Legg til en skygge, ytre glød, gradient overlay og hjerneslag bruke innstillingene sees nedenfor:
trinn 20
skritt over skapt bakgrunnen for de tre ikonene vi vil bruke; Nå er det på tide å lage selve ikonet for å plassere på toppen av bakgrunnen.
Den første ikonet er bare en liten "i" i Georgia font, 49pt, fargen på #FFFFFF men trenger den et par lagstiler.
Lag "i" på et lag over sirkelen vi opprettet tidligere, og dobbeltklikk på lag for å få opp lagstiler. Påfør følgende innstillinger for ytre glød og hjerneslag.
Trinn 21
Center "i" på sirkelen og plasser både i en mappe for å holde ting organisert
Flytt mappe for å justere igjen med 40px vertikal guide langs overskrift og tekst som er opprettet tidligere så siden din ser slik ut:
Plasser ikonet mappen, overskrift og tekst i en mappe som Hjem Story En til å holde ting organisert.
Trinn 22
Kopier mappen opprettet ovenfor to ganger slik at du har tre historier. Flytt den andre og tredje historier ned slik at de er alle 40px hverandre.
Trinn 23
Tegn en 1px linje fra guiden på 40px til 640 piksler mellom de nyopprettede historier. Linjen vil ende opp med å bli 600px bredt, 1px høy og farget #AFAFAF. Siden historiene er 40px hverandre, plassere linjen ca 20px under hver historie bortsett fra den siste.
Trinn 24
I bildet ovenfor, viser jeg eksempler på andre ikoner, alle skapt ved hjelp av enkle inkludert figurer i Photoshop vektorfigurer panel som bruker det samme laget effekter som beskrevet i punktene ovenfor.
trinn 25
For denne design, har vi en sekundær kolonne som er 300px bred med en 40px takrenne mellom den og hovedkolonnen til venstre. La oss begynne med å legge en vertikal guide på 680 piksler som vil hjelpe oss justere blogginnlegg og sosiale medier linker.
Trinn 26
Starte 40px under hoved promo teksten akkurat som historiene i hoved kolonne, la oss legge til en tittel til bloggen "widget" tittelen fra bloggen. Juster det igjen med den vertikale guide vi plassert på 680 piksler
Font. Arial
Størrelse: 15pt
Tracking: 0
Vekt: fet
color: # 333333
Trinn 27
Hvis du ønsker RSS-ikonet, laste ned en gratis ikon satt av wefunction.com på: http: //wefunction.com/2008/07/function-free-icon-set/
Størrelse på ikonet til samme høyde som "Fra bloggen tekst", og skyv den til høyre, samkjøre med den vertikale 980px veilede.
Trinn 28
blogginnlegg består av enkle linjer og rektangler, er nøkkelen til å holde alt jevnt fordelt.
Start med å lage en 1px høy 300px bred linje fra vertikal guide på 680 piksler til 980px, farget # C3C3C3.
Flytt linjen 10px under widgeten overskriften.
Leaving 1px av mellomrom under linjen, legger et rektangel bakgrunn for stillingen tittel, 300px bred og 28px høy med en farge av # F0F0F0
Legg innlegget dato og tittel inne i rektangelet ovenfor
Font:.. Arial
Størrelse : 13pt
Spore:. 0
Color # 333333
Plasser linje, rektangel og etter tittel i en mappe slik at vi lett kan kopiere og flytte
Trinn 29
Duplicate innlegget mappen ovenfor for å opprette fem separate innlegg. Flytt dem ned, slik 1px mellomrom mellom hver. Deretter endre bakgrunnen på hver andre til #FFFFFF eller fjerne rektangelet.
Legg til en siste grensen til bunnen element for å fullbyrde listen over innlegg.
Trinn 30
< p> den sosiale medier delen er ganske grei siden det er veldig ren og enkel.
For å komme i gang, laste ned ikoner fra: http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/
Trinn 31
fra 40px under bunnen av blogginnleggene, legge til en tittel "Social Media" teksten er den samme som den bloggen:
Font: Arial
Størrelse : 13pt
Tracking: 0
color: # 333333
Trinn 32
Opprett en ny mappe for de sosiale ikoner, kan det være inne i en annen mappe, men vær sikker på at dette nye bare inneholder ikonene.
Sett blending mode på mappen til lyshet, vil dette gi oss en enkel svart og hvitt ikon.
Trinn 33
Gå til File> Place og velg et ikon fra 32x32 mappe ikoner lastet ned over, velge sted og når det er på din side, trykk enter for å begå den til side.
Trinn 34
Flytt første ikonet 10px under sosiale medier tittel og juster til venstre med den vertikale guide på 680 piksler.
Legg til flere ikoner og plassere dem 10px hverandre samkjøre til venstre.
Trinn 35
det er på tide å avslutte opp området med en bunntekst, studiepoeng og en enkel meny. Begynn med å tegne en # F0F0F0 linje hele veien over nettstedet 1px høy, 80px under det siste elementet på siden, den tredje historien i hovedkolonnen.
Trinn 36
Neste, tegne et rektangel med samme # F0F0F0 farge for å fylle ut alt under at 1px linje over. Flytt rektangel ned forlate en 1px gap mellom linjen og toppen av rektangelet for en fin dobbel linje effekt.
Trinn 37
bunntekst er sentrert på siden og plassert 20px nedenfor toppen av bunnteksten. Den første linjen, som brukes til informasjon om opphavsrett er som følger:
Arial
Størrelse: 13pt
Tracking: 0
Color #AFAFAF
Farge: # B86443 (Uthevet)
Den andre linjen, som brukes for en sekundær menyen er litt mindre på 11pt men ellers bruker de samme innstillingene som ovenfor Minimal mal fungerer så bra fordi det holder ting enkelt. Ved å fjerne eventuelle barrierer og distraksjoner fra design, blir hver liten element som gjenstår i utformingen økt i form av betydning. Den visuelle hierarki som er utviklet blir omtrent like rett frem som det blir - innen øyeblikk, kan den besøkende av nettstedet umiddelbart svare på de viktigste spørsmålene:? i hvilken rekkefølge leseren oppdager dette hierarkiet egentlig ikke engang saken. Fordi alt er presentert på én side i en ren og ryddig måte, er den besøkende fri til å utforske design uten noen hindringer eller forvirring. Dette er grunnen til at du bruker en barebones mal som dette kan ofte være et fantastisk sted å starte en design hvis du er på et tap for inspirasjon. Det er alltid lett å legge til ekstra elementer ... hva som er vanskelig er å spikre en vellykket ramme. En mal som Minimal bare ikke ville være morsomt å bruke hvis alle hadde de samme versjon. Brandon, siden redaktøren her, bestemte seg for å lage et par "tilpassede varianter" av Minimal malen for å vise hvor allsidig den kan bli uten å miste den minimalistiske ånd av design. Sjekk dem ut nedenfor: det er det! Jeg prøvde å holde alt så enkelt som mulig å holde et rent, profesjonelt minimal utseende. Hvis du er interessert i den endelige HTML eller WordPress versjoner stoppe over til min Themeforest portefølje! Takk for lesing, nå går la noen kommentarer nedenfor hvis du likte det!
Hvorfor det fungerer så bra
Logo: Hvor er jeg
< li> Mission Statement: Hva er dette for noe
Navigasjon: Hvor kan jeg gå
innhold kolonne:? Hva kan jeg lære her
Sidebar kolonne: Hvordan kan jeg finne ut mer?
lage din egen versjoner Custom!
I denne versjonen vi bruker skriften Gotham, stiplede linjer for HR-elementer, og en lys grønn for at fersk, minty smak I denne versjonen, bruker vi skriften Museo, stiplede linjer for HR elementer, og en dyp blå aksent color.In denne versjonen vi bruker skriften Ziggurat, stiplede linjer for HR-elementer, og vi har snudd fargevalget for en mørk, seriøs stil.
Konklusjon