På toppen av lerretet, opprette et rektangel med rektangelverktøyet i vektor former området på verktøylinjen. Lag den så bred (eller bredere) enn lerretet og 7px høy. Siden dette er ved hjelp av vektorfigurer verktøy, dobbeltklikk på den fargede thumbnail sette farge til 51767c, en fin grønn.

Trinn 5

Legg til en enkel linje til bunnen ved å dobbeltklikke ditt lag over og legge en strek i Lagstil vinduet.

Størrelse: 2px

Beliggenhet: Utenfor

Farge: 8baaaf

Siden din topplinja er full bredde og på toppen av lerretet, er du bare kommer til å se lysere grønne linjen nederst -. akkurat hva vi ønsket å oppnå

Hvorfor ikke bare trekke en annen linje under 7px linjen? Det finnes ingen rett eller gal måte, men jeg foretrekker å bruke den samme formen, hvis jeg ønsker å endre eller flytte dette området, er det en mindre lag å spore opp.

Sett den nye topplinja i en mappe som heter Header å holde ting organisert

Color (venstre side). 51767c

Color (høyre side): 514829

Trinn 7

Nå, la oss bruke noen lagstiler å snu ting opp et hakk, dobbeltklikk på teksten laget og legge til følgende:

Bruk en Drop Shadow, Gradient Overlay og Stroke:

Trinn 8

Nå trenger vi å sentrere teksten på siden for å justere med sentrum guide vi plassert på 500px.

Som med alt, er det mange måter å utføre den samme oppgaven. En failsafe måte er å bruke Juster verktøy.

Velg flytteverktøyet fra hovedverktøylinjen.

Klikk en gang på tekstlaget for å være sikker på at den er aktiv.

Trykk Ctrl + A (velg alle) - hele lerretet bør ha en markering rundt omkretsen

I justere verktøylinjen, velger du justere horisontale sentre

Din tekst vil hoppe til sentrum av.. siden, nå trenger vi å plassere den 40px fra spissen.

Trinn 9

Velg flytteverktøyet fra hovedverktøylinjen.

Dobbeltsjekk at din tekst laget er likevel valgt i lag panel. Hvis ikke klikker du én gang på den.

Mens du holder nede Shift-tasten, klikk på teksten og forsiktig flytte den opp slik at den hviler mot bunnen av dine header linjer. (Hvis du holder nede shift sikrer at du vil holde på den vertikale midtlinjen)

Nå, med flytteverktøyet fortsatt aktiv, hold nede shift og trykk på pil ned på tastaturet fire ganger. Dette vil bump teksten ned i trinn 10px totalt opp til 40px vekk fra spissen.

Du kunne ha satt en annen guide og målt, men dette er en veldig rask måte å få ting der du trenger dem. Igjen, det er mange måter å utføre den samme oppgaven.

Plasser logoen i en egen mappe som heter Logo for å holde ting organisert.

Step 10

Nå er det på tide å . legge et slagord er under vår logo

Ved hjelp av tekstverktøyet, legge til følgende tekst:

Velkommen til nett portefølje av Jane B Doe, Ph.D. student, designer i bynavn, stat

De tekstinnstillinger er:.

text-align: center

Font: Georgia

Vekt: Regelmessig

Størrelse: 26pt

Tracking: 0

Ledende: 38px

Farge: 51767c

Trinn 11

Ved hjelp av de samme teknikkene som logoen på toppen, må vi først å sentrere denne teksten på siden og flytte det til å bli 40px under bunnen av vår logo.

Sett slagord i sin egen mappe med tittelen Undertittel å holde ting organisert

Litt av en side note her:. Det er viktig å være i samsvar med avstanden mellom elementer både vertikalt og horisontalt.

Hvis elementene er forskjellige avstander fra hverandre, de skal være sånn for en grunn. Elementer som er tett sammen innebærer en følelse av relasjon til hverandre hvor gjenstander plassert lenger fra hverandre føle uavhengig.

Trinn 12

skillelinjen brakett er hva det ser ut til å være, en gigantisk brakett , rotert på sin side.

Denne spesifikke ene er ImprintMT Shadow men gjerne bruke den stilen du føler passer hvis du ikke har det bestemte en installert.

For ImprintMT Shadow, skriften -Størrelse brukte var 440pt.

Fargen på braketten er 51767c med laget opacity satt til 10% for å tone ned ting, ellers braketten dominerer side og er ment å bare lede øyet ned til nedre deler av hjemmesiden.

Du har to alternativer når du legger til braketten, velger standard type verktøy og rotere teksten 90 grader med transformeringsverktøyet (Ctrl + T) eller å bruke loddrett type verktøy. Jeg foretrekker det første alternativet, siden det er bare en enkelt element på siden og roterer det er ikke så stor av en avtale.

Trinn 13

Senter braketten på siden og legg den 40px under slagord akkurat som vi gjorde med logo og slagord over.

Plasser braketten i en egen mappe som heter Bracket å holde ting organisert.

Trinn 14

Nå er vi kan lage noen små elementer til å lede besøkende til de ulike delene av nettstedet vårt. I mitt eksempel, jeg brukte tre kolonner, hver med sitt eget ikon, men du kan legge til mer eller to rader om nødvendig.

Ikonene jeg brukte kan lastes ned gratis fra wefunction.com.

Step 15

Siden vi bli vant til sentre elementer på siden, la oss begynne med å lage midtkolonnen og jobbe oss ut.

Ved hjelp av standard tekst verktøyet, opprette det første elementet, Education. Skriftinnstillingene er:

Font: Georgia

Vekt: Fet

Størrelse: 24 pkt

Tracking: 0

Farge: 51767c

Før vi kommer til sentre noe på siden, må vi også legge ikonet

Trinn 16

Det er flere måter å få. et bilde i prosjektet, men jeg liker å bruke File> Place.

Velg ett av ikonene som lastes ned fra wefunction.com, jeg valgte paper_content_pencil_48.png.

Når du plasserer ikonet på siden, vil du legge merke til resize håndtak, mens du ser dem, du kan angi bredden og høyden til 70% siden de er litt stor for vår design.

Du kan alltid gå tilbake og gjøre dette ved å velge lag og trykke Ctrl + T for å bruke trans verktøyet.

Step 17

Vi må justere teksten med ikonet før samkjøre både samlet med siden.

Sørg for at dine lag for ikonet og teksten er ved siden av en en annen i ditt lag panel og deretter velge både ved å klikke og holde nede shift.

Nå, i de justere verktøylinjen Klikk på Juster venstre kant, og klikk deretter justere vertikale sentre. Vi er nesten stille.

Velg ikonet lag og bruker bare venstre pil, flytte den 10px bort fra den venstre kanten av overskriften din.

Plasser overskriften og ikon i sin egen mappe tittelen Seksjon å holde ting organisert og som skal brukes til ytterligere justering.

Trinn 18

Nå må vi justere "Section" mappe med siden.

Klikk én gang på mappen med tittelen Seksjon å velge det

Trykk Ctrl + A (velg alle) -. hele lerretet bør ha en markering rundt omkretsen

I. Juster verktøylinjen, velger du justere horisontale sentre.

Din tekst og ikon i mappen vil hoppe til midten av siden.

Ved hjelp av de samme teknikkene som vi har alle sammen, flytte denne mappen 40px under skillelinjen.

Trinn 19

Seksjonene jeg viser har også en liten beskrivelse på hjemmesiden. Inne i seksjon mappen, legge til følgende tekst som et eksempel:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. . Proin molestie Forespørsel

De skriftinnstillinger er:

Font: Arial

Vekt: Normal

Størrelse: 13pt

Tracking: 0

Ledende: 22pt

Farge: 858872

Trinn 20

Senter denne teksten på siden og flytte den 40px nedenfor tittelen og ikon.

Vi har nå et ferdig delen vi kan kopiere til de andre områdene.

Velg Section mappe, bør den inneholde ikonet, tittel og tekst vi nettopp lagt. Under Layer, velg Duplicate Group ... og skriver inn et navn. Gjør dette en gang til, slik at vi har tre totalt, alle stablet oppå hverandre.

Trinn 21

Velg en av de dupliseres lagene over og ved hjelp av piltastene, flytter lagene en lik avstand fra sentrum. Denne avstanden vil variere avhengig av hvor bredt setningene er og hvor lenge titlene kan være, men beholde avstanden mellom de tre kolonnene konsekvente.

Bytt ut ikoner og tekst i hver del for å tilpasse videre. Anmeldelser
Step 22

Nå som vi har en idé om hvordan "høy" denne siden vil bli, kan vi legge i bakgrunnen.

Klikk på bakgrunnslaget slik at neste lag opprettet vises like over dette, ellers vil den vises over alt vårt innhold.

På toppen av lerretet, opprette et rektangel med rektangelverktøyet i vektor former området på verktøylinjen. Lag den så bred (eller bredere) enn lerretet og høy nok til å gå bak alle elementene vi har laget så langt, er mitt 620px høy. Ideelt sett vil det være 40px høyere enn den nederste av de tre seksjonene vi bare lagt til. Bruk linjalen verktøy i hovedverktøylinjen for å kontrollere og justere bakgrunnshøyden tilsvarende for å treffe 40px.

Gi nytt navn til dette laget kroppen solid bakgrunn.

Trinn 23

Dobbelklikk på den fargede miniatyr å sette farge til ffffff. (Hvit)

Dobbeltklikk på lag for å få opp lagstiler vinduet og bruke følgende innstillinger:.

Drop Shadow og Gradient Overlay

Dette vil skape en fin visne på den øvre kanten av bakgrunnen.

Trinn 24

Nå kan vi legge til noen simulert papir-aktig struktur.

Lag et nytt lag over bakgrunns vi nettopp lagt og fyll den med heldekkende farge. f5f7ed

Dobbeltklikk på laget og legge et mønster Overlay lag stil. (Pattern bibliotek: Artister Overflater> Granitt)

Sett opacity til 15% og trykke OK for å bruke, vil du legge merke til mønsteret tar over hele siden - la oss fikse dette i neste trinn
<. p> Gi dette laget kroppen tekstur overlegg.

Trinn 25

Velg kroppen tekstur overlay lag og deretter legge til en vektormaske fra bunnen av lag panel.

Nå velger gradient verktøyet fra venstre verktøylinjen og dobbeltsjekke at du bruker standard hvit-til-svart gradient fra verktøylinjen.

Lagmasker ikke "se" i fargen, men i stedet bruke svart og hvitt for å finne ut hva de skal skjule (maske) eller hva som skal vises i laget masken det knyttet til.

Trinn 26

Mens du holder nede shift (for å holde det helt loddrett) drar ned på lerret fra den øvre grønne linjen øverst på siden ned omtrent 100px. Dette vil forsvinne ut av granitt mønster i en solid sidebakgrunn, og legger et snev av papir-aktig struktur til nettstedet uten å bli distraherende.

Plasser kroppen solid bakgrunn og kroppen tekstur overlay lag i sin egen mappe flislagt Body bakgrunn for å holde ting organisert.

Trinn 27

De sosiale medier ikoner ikke er fra et sett, men laget fra de faktiske logoer. En stor kilde til ikoner og logoer er www.iconfinder.com - finne de du ønsker å bruke og anvende følgende endringer i hvert element:

Sett lagmodus til LuminositySet opacity til 10-40 % avhengig av logoene usedResize hver slik at de er alle av lik høyde

Trinn 28

Legg til bunntekst sentrert og plassert 20px under sosiale medier ikoner med følgende innstillinger.


Font: Arial

Vekt: Normal

Størrelse: 11pt

Tracking: 0

Ledende: 22pt

Farge:! 858872

sluttprodukt

Bonus

PSD nedlasting inkluderer også en bonus portefølje stil side

Konklusjon Anmeldelser

Det er det! Jeg prøvde å holde alt så enkelt som mulig for de av dere bare starte opp, men med noen design det er flere måter å oppnå de samme resultatene. Hvis du er interessert i den endelige HTML eller WordPress versjoner stoppe over til min Themeforest portefølje! Anmeldelser