Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Skep 'n Minimale Portefeulje Site Design (Plus 'n gratis PSD!)

by
Length:LongLanguages:

Afrikaans (Afrikaans) translation by Wasmia Mia (you can also view the original English article)

In hierdie ontwerphandleiding gaan ons die portefeulje-ontwerp "Smart Portfolio" deur Curt Ziegler skep, beskikbaar op ThemeForest as 'n WordPress of tema HTML. Ons bespreek ook die redes waarom dit so goed werk, en hoe jy jou eie persoonlike aanpassing van die sjabloon kan skep.

Check die einde van die pos vir 3 soet veranderinge van hierdie sjabloon; die bron lêers is op die huis!

minimal web design portfolio template tutorial

Oor die outeur: Curt Ziegler, ook bekend as Cudazi, is 'n webontwerper wat spesialiseer in WordPress-tema-ontwikkeling met 10 jaar ontwerpervaring, 'n aantal hoogs suksesvolle produkte en meer as 6000 verkope by ThemeForest! U kan ook meer van sy werk by cudazi.com vind.

'N Jaar gelede vrygestel, het die Minimale tema ontwerp verkoop byna 1000 gekombineerde tye, en het die weg gebaan vir baie ander minimalistiese sjabloonontwerpe. Hierdie sjabloon gaan jou deur hoe om die ontwerp self te skep, maar belangriker nog, ons sal ook bespreek waarom dit werk. Sodra ons klaar is, hoop ons dat jy jou eie weergawe van hierdie slanke, professionele ontwerp kan skep met jou eie styl, lettertipes en kleure!


Tutoriaal Besonderhede

  • Program: Adobe Photoshop
  • Moeilikheid: Beginner
  • Geskatte voltooiingstyd: 1 uur

Stap 1

Begin deur 'n nuwe dokument in Photoshop 1020px x 1020px te skep. Maak seker dat jou resolusie is ingestel op 72 pixels/duim en jou agtergrond is op wit gestel. Ons moet die agtergrondlaag ontsluit sodat ons 'n paar laagstyle kan byvoeg, regs op die agtergrond klik en "Layer from background" kies. U kan dan die laag weer na agtergrond hernoem.

minimal web design portfolio template

Stap 2

Voeg 'n tikkie grys bo-aan die bladsy by dubbelkliek op die nuwe agtergrondlaag en kies Gradient Overlay van laagstyle. Net 'n vinnige noot, jy kan altyd na die Lae-spyskaart gaan en die laagstyl kies in plaas van dubbelklik op die laag.

Stel die deursigtigheid op 5% en gebruik 'n lineêre gradiënt van -90 grade.

Kliek een keer op die gradiënt om die verloopredigeerder oop te maak en twee punte op te stel:

  • Swart - # 000000 op die plek van 0% (dit moet standaard gestel word)
  • Wit - #FFFFFF op die plek van 11%
minimal web design portfolio template

Klik OK in die verloopredigeerder en laagstylvensters om die gradiënt op die agtergrondlaag toe te pas. U moet nou 'n effense verduistering bo-aan die bladsy sien.


Stap 3

Op webwerwe met 'n baie ligte of eenvoudige agtergrond, wil ek graag 'n element byvoeg wat die gebruiker laat weet dat hulle na die heel bo van 'n bladsy teruggekeer het. In die geval van hierdie ontwerp is dit 'n 3-pixellyn die breedte van die inhoudsgebied met 'n ligte lyn wat die res van die pad oor die kop uitsteek.

Wanneer ek lyne en vorms byvoeg, hou ek daarvan om Photoshop se vektorvorms-gereedskap te gebruik. Tensy anders vermeld, moet u onderneem dat alle lyne en reghoeke met hierdie metode geskep word. Soos met enige tutoriaal, is daar verskeie maniere om dieselfde ding te bereik, so voel vry om te gebruik wat jy die meeste bekend is.

Kies die reghoekgereedskap uit die vektorvorms van die nutsbalk:

minimal web design portfolio template

Trek 'n reghoek oor die hele 1020px breedte van die bladsy en 3px lank. Dubbelklik op die gekleurde duimnaelskets in die lae paneel om die kleur na #DFDFDF te stel. Beweeg die reghoek heel bo aan die bladsy.


Stap 4

By 940px wyd sal 'n tweede reghoek ooreenstem met die breedte van ons bladsyinhoud. Kom ons stel 'n paar gidse op die bladsy om ons te help om jouself reguit te pas.

Gaan na View> Nuwe Gids ...

Kies Vertikaal en stel die waarde op 40px.

Voeg nog 'n vertikale gids by 980px by. Dit skep 'n 940px area in die sentrum vir ons inhoud.

minimal web design portfolio template

Stap 5

Voeg 'n tweede reghoek op die laag bo jou vorige een 940px wyd en 3px lank. Dubbelklik op die gekleurde duimnaelskets in die lae paneel om die kleur te stel na # 333333.

Beweeg die tweede reghoek tussen die gidse wat jy geskep het en skuif dit na die bokant van die bladsy.

minimal web design portfolio template

Stap 6

Net 'n bietjie skoonmaak om georganiseer te word, beweeg die twee koptekstlyne in hul eie gids.

minimal web design portfolio template

Stap 7

Dit is tyd om die logo te skep, wat 'n kombinasie van twee reghoeke en wit teks is. Ons sal dit stuk vir stuk bou en dan dit in plek bring sodra dit voltooi is.

Die logo is die boonste punt van ons omgekeerde piramide-ontwerp, waar die meeste mense se oë sal begin wanneer hierdie bladsy besoek word voordat hulle in die onderste dele van die werf afbeweeg.

Begin deur 'n reghoek van 222px breed teen 82px lank te skep. Dubbelklik op die gekleurde duimnaelskets in die lae en stel die kleur in op # 333333.

Skep 'n tweede reghoek 14px x 14px en plaas dit in die onderste regterkantste hoek van jou vorige reghoek. Stel die kleur in op #FFFFFF. Dit sal 'n uitgemaakte effek van die reghoek skep sonder om enige vorms te wysig.

(As jy nie die "kerf" sien nie, maak seker dat jou tweede reghoek bo jou eerste in die lae paneel geplaas word)


Stap 8

Voeg teks by die binnekant van die vorms wat jy pas geskep het. Vir hierdie demo sê die teks: minimaal.

Afhangende van jou teks wat gebruik word, moet jy die groottes aanpas om goed te pas.

  • Lettertipe: Arial
  • Grootte: 42pt
  • Opsporing: -20
  • Gewig: Vet
  • Kleur: #FFFFFF
minimal web design portfolio template

Stap 9

Beweeg al drie lae van die logo wat jy geskep het in hul eie gids genaamd Logo. Dit sal ons toelaat om dit op die bladsy baie makliker te plaas.

Die logo moet 40px wees van die onderkant van die koptekstlyne wat ons hierbo geskep het. As jy onthou, was hulle 3px lank, so ons moet 'n nuwe horisontale gids by 43px byvoeg. Gaan na View> New Guide en stel dit horisontaal met 'n posisie van 43px. Stel nog 'n gids by 125px wat sal in lyn wees met die onderkant van die logo.


Stap 10

Beweeg die logo, en pas die boonste van die nuwe gids wat jy hierbo geskep het, op en op die bladsy. Nou kan ons beweeg na die skep van die spyskaart.


Stap 11

Die spyskaart is geskep met twee horisontale lyne en teksgesentreer regoor die bladsy 40px onderaan die logo.

Voeg 'n horisontale gids by 165px by, dit sal die bokant van ons spyskaart wees. Skep nog 'n horisontale gids by 209px om met die onderkant van die spyskaart te pas.

Begin met die skep van 'n lyngesentreerde tussen die hoofinhoudgidse 940px wyd en 1px lank. Stel die kleur op #AFAFAF en skuif dit na die eerste gids wat ons hierbo geskep het.

Dupliseer die laag hierbo deur na Layer> Duplicate layer te gaan. Dit skep 'n nuwe laag in presies dieselfde posisie. Skuif hierdie nuwe laag na die tweede gids wat ons hierbo geskep het. Ons het nou die houer vir ons spyskaart.


Stap 12

Voeg die teks horisontaal en vertikaal tussen die twee lyne hierbo geskep.

  • Lettertipe: Arial
  • Grootte: 14pt
  • Opsporing: 0
  • Gewig: Vet
  • Kleur #AFAFAF
minimal web design portfolio template

Voeg jou lyne en kieslys teks by 'n gids met die titel Top-menu om dinge georganiseer te hou.


Stap 13

Vervolgens sal ons die groot promosieteks skep. Dit sal 40px onder die spyskaart wees, met die konsekwente 40px spasiëring tussen elemente.

Voeg 'n horisontale gids by 248px en 324px by om as die houer van ons groot promo teks te dien. Dit kan wissel afhangende van u teks, maar sal werk vir ons twee reëls van voorbeeldtekste wat gebruik word.

Gebruik die tekshulpmiddel en voeg die volgende teks by jou bladsy:

Welkom by die aanlyn portefeulje van Jane B Doe,
Ph.D. student, ontwerper in stadsnaam, staat.

  • Lettertipe: Arial
  • Grootte: 42pt
  • Opsporing: -50
  • Lynhoogte: 45pt
  • Gewig: Vet
  • Kleur: #AFAFAF
  • Kleur (uitgelig): # B86443

Sentreer die teks vertikaal en horisontaal tussen die nuwe gidse.

minimal web design portfolio template

Plaas hierdie teks in 'n gids met die naam Promo Text om dinge georganiseer te hou.


Stap 14

Die tuisbladuitleg het drie groot stories met 'n ronde ikoon in die primêre (links) kolom. Soos jy moontlik raai, sal ons hulle 40px onder die hoof promo teks skep. Hier is wat ons sal skep:

minimal web design portfolio template

Stap 15

Eerstens, laat ons die drie elemente van elke storie skep. Die kop en teks sal 80px uit die gids links links, die vertrek vir die storie ikoon, inlyn. Voeg 'n vertikale gids by 120px by.


Stap 16

Gebruik die tekshulpmiddel en voeg die opskrif by: Leer meer oor my.

  • Lettertipe: Arial
  • Grootte: 21pt
  • Opsporing: 0
  • Gewig: Vet
  • Kleur: # 333333

Rig die teks met die nuwe gids by 120px hierbo geskep en plaas dit 40px onder die groot promo-teks.

Kom ons verander dinge effens. Nie dat ek iets teen gidse het nie, maar daar is 'n vinniger manier om ruimte-elemente soos hierdie kop 40px onder die teks.

Kies die skuif-instrument en beweeg die "Leer meer oor my" hele pad na die laaste reël van die groot teks.

Hou nou die skuif vas en tik die pyltjie pyltjie op jou sleutelbord vier keer, die teks spring 40px, 10 vir elke keer as jy druk met die skuif hou. (Jy kan dit sonder verskuiwing doen, maar jy sal 40 keer moet slaan wat jy meer as welkom is om te doen)

minimal web design portfolio template

Stap 17

Skep die storie teks, wat effens kleiner en ligter in kleur is. Rig dit uit met die kop wat hierbo geskep is. In plaas van die 40px spasiëring, laat ons dit naby by ongeveer 15px onder die koptekst hou.

Voeg 'n vertikale gids by 640px in om as die regterkantse grens van die teks te dien, hou dit binne die grens, sodat ruimte vir kolom twee onder die pad kan wees.

Hier is 'n paar gemorspos om te gebruik: Lorem Ipsum is eenvoudig dummy teks van die printsdf sdsg en tycpsum is die bedryf se standpunt vir die duasdfsdsdmmy-teks. Kyk na my resumen die bedryf se standaard duasdsdffmmy.

  • Lettertipe: Arial
  • Grootte: 17pt
  • Opsporing: 0
  • Lynhoogte: 20pt
  • Gewig: Vet
  • Kleur: #AFAFAF
minimal web design portfolio template

Stap 18

Die ikoon is 'n bietjie meer ingewikkeld, maar eintlik net 'n sirkel met 'n Photoshop-vorm op die bogenoemde laag.

Gebruik die Photoshop-vektor gereedskap, kies die Ellipse Tool. Klik en sleep op jou bladsy terwyl jy skuif hou om 'n perfekte sirkel te teken. Met die laag wat gekies is, druk Control + T (Command + T Mac) om die transformasie-instellings op te stel. Stel die Breedte (W) en Hoogte (H) op 60px.

minimal web design portfolio template

Dubbelklik op die laagse miniatuur om die kleur te stel na #333333.


Stap 19

Dubbelklik op die laag wat hierbo geskep is om die Layer Style-venster te laat verskyn.

Voeg 'n druppelskadu, buitenste gloed, gradiëntoorlaag en beroerte aan deur die onderstaande instellings te gebruik:

minimal web design portfolio template

minimal web design portfolio template

minimal web design portfolio template

minimal web design portfolio template

Stap 20

Die stap hierbo het die agtergrond geskep vir die drie ikone wat ons sal gebruik; Nou is dit tyd om die werklike ikoon te skep, bo-op die agtergrond.

Die eerste ikoon is net 'n klein lettertipe "i" in Georgia, 49pt, kleur van #FFFFFF, maar dit benodig 'n paar laagstyle.

Skep die "i" op 'n laag bokant die sirkel wat ons vroeër geskep het en dubbelkliek op die laag om laagstyle op te stel. Pas die volgende instellings toe vir buitenste gloed en beroerte:

minimal web design portfolio template

minimal web design portfolio template

Stap 21

Sentreer die "i" op die sirkel en plaas albei in 'n gids om dinge georganiseer te hou.

Beweeg die gids om links te skakel met die 40px vertikale gids langs die kop en teks wat vroeër geskep is, sodat jou bladsy só lyk:

minimal web design portfolio template

Plaas die ikoonmap, kop en teks in 'n gids soos Home Story A om dinge georganiseer te hou.


Stap 22

Dupliseer die gids wat hierbo geskep is twee keer, sodat jy drie stories het. Beweeg die tweede en derde stories so dat hulle almal 40px uitmekaar is.


Stap 23

Teken 'n 1px-lyn van die gids tussen 40px en 640px tussen die nuutgeskepte stories. Die lyn sal 600px wyd, 1px lank en gekleurd wees #AFAFAF. Aangesien die stories 40px uitmekaar is, plaas die lyn ongeveer 20px onder elke storie, behalwe die laaste een.

minimal web design portfolio template

Stap 24

In die prent hierbo wys ek voorbeelde van ander ikone, wat almal gemaak is met behulp van eenvoudige ingeslote vorms in die paneel Photoshop-vektorvorms, met dieselfde laag effekte soos beskryf in die stappe hierbo.


Stap 25

Vir hierdie ontwerp het ons 'n sekondêre kolom wat 300px wyd is met 'n 40px-geut tussen dit en die hoofkolom aan die linkerkant. Kom ons begin deur 'n vertikale gids by 680px by te voeg wat ons sal help om die blogposte en sosiale media-skakels in lyn te bring.

minimal web design portfolio template

Stap 26

Begin 40px onder die hoof promo teks, net soos die stories in die hoofkolom, laat ons 'n titel by die blog "widget" getiteld From the Blog. Rig dit uit met die vertikale gids wat ons by 680px geplaas het.

  • Lettertipe: Arial
  • Grootte: 15pt
  • Opsporing: 0
  • Gewig: Vet
  • Kleur: #333333

Stap 27

As jy die RSS-ikoon wil hê, laai 'n gratis ikoon deur wefunction.com af by: http://wefunction.com/2008/07/function-free-icon-set/

Grootte die ikoon op dieselfde hoogte as die "Van die blog teks" en skuif dit na regs, in ooreenstemming met die vertikale 980px-gids.


Stap 28

Die blogposte bestaan ​​uit eenvoudige lyne en reghoeke, die sleutel hou alles op 'n gelyke afstand.

Begin deur 'n 1px lang 300px wye lyn te skep vanaf die vertikale gids by 680px tot 980px, gekleurde # C3C3C3.

Beweeg die lyn 10px onder die dingesie-opskrif.

As jy 1px van witruimte onder die reël verlaat, voeg 'n reghoek agtergrond by vir die pos titel, 300px breed en 28px lank met 'n kleur van # F0F0F0.

Voeg die posdatum en titel in die reghoek hierbo by.

  • Lettertipe: Arial
  • Grootte: 13pt
  • Opsporing: 0
  • Kleur #333333
minimal web design portfolio template

Plaas die lyn, reghoek en pos titel in 'n gids sodat ons dit maklik kan dupliseer en beweeg.


Stap 29

Dupliseer die posmap hierbo om vyf afsonderlike plasings te skep. Skuif hulle af, laat 1px spasie tussen elkeen. Verander dan die agtergrond op mekaar na #FFFFFF of verwyder die reghoek.

Voeg een laaste grens by die onderste item om die lys van plasings af te sluit.

minimal web design portfolio template

Stap 30

Die sosiale media-afdeling is redelik eenvoudig omdat dit baie skoon en eenvoudig is.

Om te begin, laai die ikone van: http://webtoolkit4.me/2008/09/05/webtoolkit4me-releases-the-first-icon-set/


Stap 31

Begin 40px onderaan die blogposte, voeg 'n titel "Social Media" by. Die teks is dieselfde as die blog:

  • Lettertipe: Arial
  • Grootte: 13
  • ptOpsporing: 0
  • Kleur: #333333

Stap 32

Skep 'n nuwe gids vir die sosiale ikone, dit kan binne 'n ander gids wees, maar wees seker dat hierdie nuwe een slegs die ikone bevat.

Stel die versnellingsmodus op die gids na Luminosity, wat ons 'n eenvoudige swart en wit ikoon sal gee.

minimal web design portfolio template

Stap 33

Gaan na Lêer> Plaas en kies 'n ikoon uit die 32x32-lêergids van ikone wat hierbo afgelaai is, kies plek en sodra dit op jou webwerf is, druk enter om dit aan die bladsy te verbind.


Stap 34

Beweeg jou eerste ikoon 10px onder die sosiale media titel en pas links met die vertikale gids by 680px.

Voeg bykomende ikone by en plaas 10px uitmekaar na links.

minimal web design portfolio template

Stap 35

Dit is tyd om die webwerf te voltooi met 'n voetskrif, krediete en 'n eenvoudige spyskaart. Begin deur 'n # F0F0F0-lyn heeltemal oor die webblad 1px lank, 80px onder die laaste item op die bladsy, die derde storie in die hoofkolom te teken.


Stap 36

Teken nou 'n reghoek met dieselfde #F0F0F0 kleur om alles onder die 1px-lyn hierbo in te vul. Beweeg die reghoek af en laat 'n 1px gaping tussen die lyn en die bokant van die reghoek vir 'n lekker dubbellyn effek.

minimal web design portfolio template

Stap 37

Die voet teks is gesentreer op die bladsy en geplaas 20px onder die bokant van die footer. Die eerste reël wat gebruik word vir kopiereginligting is soos volg:

  • Arial
  • Grootte: 13pt
  • Opsporing: 0
  • Kleur #AFAFAF
  • Kleur: # B86443 (Uitgelicht)

Die tweede reël, wat vir 'n sekondêre spyskaart gebruik word, is 'n bietjie kleiner om 11pt, maar gebruik andersins dieselfde instellings as hierbo.


Finale produk

minimal web design portfolio template

Hoekom dit so goed werk

Die Minimale sjabloon werk so goed, want dit hou dinge eenvoudig. Deur enige hindernisse en afleidings uit die ontwerp te verwyder, word elke klein element wat in die ontwerp bly, verhoog in terme van belang. Die visuele hiërargie wat ontwikkel word, word net so reguit vorentoe soos wat dit word - binne oomblikke kan die besoeker van die webwerf onmiddellik die hoofvrae beantwoord:

  1. Logo: Waar is ek?
  2. Missieverklaring: Waaroor gaan dit?
  3. Navigasie: Waar kan ek gaan?
  4. Inhoudsopgawe: Wat kan ek hier leer?
  5. Zijbalk Kolom: Hoe kan ek meer uitvind?

Die volgorde waarin die leser hierdie hiërargie ontdek, maak nie saak nie. Omdat alles op 'n enkele bladsy op 'n skoon en ordelike wyse aangebied word, kan die besoeker die ontwerp sonder enige hindernisse of verwarring ondersoek. Dit is hoekom die gebruik van 'n kaalbeen sjabloon soos hierdie dikwels 'n fantastiese plek kan wees om 'n ontwerp te begin as jy 'n verlies vir inspirasie het. Dit is altyd maklik om ekstra elemente by te voeg ... wat moeilik is, spyker 'n suksesvolle raamwerk.


Skep jou eie pasgemaakte weergawes!

'N sjabloon soos Minimal net sou nie lekker wees om te gebruik as almal dieselfde presiese weergawe gehad het nie. Brandon, die webwerf redakteur hier, het besluit om 'n paar "persoonlike variasies" van die Minimale sjabloon te maak om te wys hoe veelsydig dit kan word sonder om ooit die minimalistiese gees van die ontwerp te verloor. Gaan hulle hieronder uit:

minimal web design portfolio template
In hierdie weergawe gebruik ons ​​die font Gotham, stippellyne vir die HR-elemente, en 'n heldergroen vir daardie vars, minty smaak!
minimal web design portfolio template
In hierdie weergawe gebruik ons ​​die font Museo, stippellyne vir die HR-elemente, en 'n diep blou aksent kleur.
minimal web design portfolio template
In hierdie weergawe gebruik ons ​​die lettertipe Ziggurat, stippellyne vir die HR-elemente, en ons het die kleurskema omgekeer vir 'n donker, ernstige styl.

Afsluiting

Dis dit!  Ek het probeer om alles so eenvoudig as moontlik te hou om 'n skoon, professionele minimale voorkoms te hou. As jy belangstel in die finale HTML- of WordPress-weergawes, stop dan na my ThemeForest portefeulje! Dankie vir die lees, gaan nou hieronder 'n paar kommentaar as jy daarvan hou!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.