Lag en ren og enkel CV Website Design

Create en ren og enkel CV Website Design

I denne designen opplæringen, vi skal skape vakre enkel og elegant grensesnitt for en CV Nettstedet på Adobe Photoshop som fungerer bra for mobiltelefoner og iPads. Som vi gå gjennom denne opplæringen, vil vi jobbe med: (! Mange av dem faktisk) Enkle former (rektangler, linjer, piler, etc), lagstiler, tegn- og avsnittsstiler, og så mange andre design og Photoshop teknikker som du kan tilpasse seg ditt nettsted grensesnittdesign arbeidsflyt. Den fullt kodet versjon er tilgjengelig på Themeforest som Stilig CV, en HTML tema

Om forfatteren:

IvyStudio er en populær ny forfatter på Themeforest takket være denne spesielle design . Lidenskap for web kreativitet og kommunikasjon er viktige element av Ivy Studio. Vi elsker å lage ren design og nyttig grensesnitt med en stor oppmerksomhet på detaljer. Nyt vår side www.ivystudio.it å se våre gjerninger og ta gjerne kontakt med oss dersom du ønsker!

Du kan også ta tak i fullt kodet versjon av denne filen på Themeforest slik at du kan se hvordan det er bygget!

Trinn 1

For å holde alt på linje vi kommer til å bruke 960s Grid System (Få det herfra). Når lastet ned, åpne opp filen "960_grid_12_col.psd".

Høyden på det aktuelle dokumentet er mindre enn vår endelige utformingen. Så, vil vi gå til Image> Canvas Size> Høyde:. 1558px

Vi liker å jobbe uten "rosa striper", så hvis du vil skjule det, må du gå til lag panel og velg bort lag synlighet.

Vi må også sørge for at våre linjaler og veiledninger blir sett. Så, vil vi gå til Vis> Tillegg /linjaler /Snap (slik at våre objekter knipse i tråd med våre guider).

Trinn 2

La oss gjøre vår bakgrunn nå. Gå til laget panel, høyreklikke på bakgrunnslaget, og velg "lag fra bakgrunn" og endre navnet "bg".

Nå, høyreklikk på bg lag, velg "Blending Options", gå til "Color overlay "og velge som bakgrunnsfarge. #dbdbdb

Nå velger bg lag og opprette et nytt lag fra Layer> New> Layer og endre navn på det". støy "

Nå vil vi bruke en enkel Noise tekstur. Velg lag støy og deretter fylle den (ved å klikke Shift + Backspace) med denne fargeverdi. #ffffff

Gå til Filter> Noise> Legg Noise> Beløp: 50%, Distribusjon: Uniform. Endre dette laget Blend Mode til: Multipliser, og ta sin Opacity ned til:. 15%

La oss lage en myk skyggeeffekt ved hjelp rektangel Tool (U). Lag et rektangel av 780x1800px, satt Fyll til 0%, og i blanding alternativer palel, sett "Drop Shadow" effekt som neste bilde.

Trinn 3

La oss begynne å lage vår header . Bruke rektangel Tool (U), opprette et rektangel av 780x170px og fyll den med color: # 7db222 (gjerne velge den fargen du ønsker, vil det være det samme for hele opplæringen). Deretter setter Blending Options panel som i bildene nedenfor:

Trinn 4

Det er på tide å skrive tittelen på nettstedet vårt. Grab Horizontal Type Tool (T), skriver nettstedet ditt navn i henhold til følgende tegn innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 90pt

Vekt
Kursiv

Anti-aliasing innstilling:
Glatt

Farge:
#fffffff

Utligning:
Optisk

Tracking:
-50

Da gjelder en Drop Shadow til vår tekst ved hjelp av innstillingene som vises i bildet nedenfor:

Nå kan du legge undertittel. Grab Horizontal Type Tool (T), skriv inn din og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 32pt

Vekt
Kursiv

Anti-aliasing innstilling:
Glatt

Farge:
ingen (Fyll til 0%)

Utligning:
Optisk

Tracking:
-50
< p> Deretter gjelder en Drop Shadow til vår tekst og Color Overlay, ved hjelp av innstillingene som vises i bildet nedenfor:

Trinn 5

La oss begynne å lage vår blokk. Bruke rektangel Tool (U), opprette et rektangel av 780x360px og endre navnet "personal_bg". Gå til Blending Options panel og sette Skygge, Indre skygge, og Color Overlay, som i følgende bilde:

Trinn 6

Nå lage boksen for vår personlige bilder. Bruke rektangel Tool (U), opprette et rektangel av 220x220px og fylle den med farge: #ffffff. Påfør deretter en Layer stil til det, i henhold til følgende bilde:

Trinn 7

Opprett boksen av sosiale ikoner, bruker Avrundet rektangel Tool (U), opprette et rektangel av 40x165px med radius: 5 px, endre navn på den sosiale Box og fylle den med color: # 7db222. Og nå opprette folden. Ved å bruke samme verktøy for å lage et rektangel av 20x20px med radius: 5px, endre navn på den sosiale fold, legg den under "personal_bg" lag, deretter traff Cmd + T (Ctrl + T) for å rotere det på 45 °. Nå satt følgende Blending Options innstillinger:

Trinn 8

Nå skal vi plassere sosiale medier ikoner. Vi begynner ved å laste ned denne vektoren sosiale medier ikoner, og deretter plassere fem ikoner (24x24px) som på bildet under:

Trinn 9

Lag nå "Kontakt" -knappen. Bruke rektangel Tool (U), opprette et rektangel av 170x50px, fyll den med color: # 7db222, og endre navnet "kontakt". Velg vektormaske av dette laget og ta tak i "Add Anchor Point Tool" og lage et enkelt ankerpunkt i midten på figurens venstre side. Deretter velger th "Konverter Point Tool", klikk på samme ankerpunkt og flytte den til venstre

Nå formen er klar, så som vanlig, legge til følgende Blending Options effekter.

Nå duplisere "sosial fold" laget og gi den nytt navn som "kontakt fold" (Selvsagt må det være under "personal_bg" lag).

Trinn 10

Nå kan du legge den «Kontakt» tekst på knappen. Grab Horizontal Type Tool (T), skriv inn din tekst og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 32pt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
#ffffff

Utligning:
Optisk

Tracking:
-50

Da gjelder en Drop Shadow til vår tekst ved hjelp av innstillingene som vises i bildet nedenfor:

Step 11

Opprett tittelen for vår del. Grab Horizontal Type Tool (T), skriv inn din tekst og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 36 pkt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
# 7db222

Utligning:
Optisk

Tracking:
-50

Da gjelder en Drop Shadow og Color Overlay til vår tekst ved hjelp av innstillingene som vises i bildet nedenfor:

Step 12

Nå innholdet. Grab Horizontal Type Tool (T), skriv inn din tekst og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 26pt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
# 7db222 (grønn) /# a4a6a6 (grå)

Utligning:
Optisk

Tracking:
-50

Deretter gjelder en Drop Shadow og Color Overlay til vår tekst ved hjelp av innstillingene som vises i bildet nedenfor:

Trinn 13

Som i de foregående trinnene skaper vår blokk. Bruke rektangel Tool (U), opprette et rektangel av 780px bredde, og variabel høyde (avhengig av innholdet) og endre navnet "content_bg", og legg den under "personal_bg" som i følgende bilde.

Trinn 14

Opprett tittelen for vår del. Grab Horizontal Type Tool (T), skriv inn din tekst navn etter følgende tegn innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 36 pkt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
# 7db222

Utligning:
Optisk

Tracking:
-50

Da gjelder en Drop Shadow til vår tekst med samme tittel innstillinger i "Personopplysninger" -delen.

Trinn 15

Nå kan du legge den første undertittel (grønn). Grab Horizontal Type Tool (T), skriv inn din og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 26pt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
# 7db222

Utligning:
Optisk

Tracking:
-50

Deretter påføres en Drop Shadow til vår tekst og Color Overlay, ved hjelp av innstillingene som vises i bildet nedenfor:

Step 16

Deretter legger andre undertittel (grå). Grab Horizontal Type Tool (T), skriv inn din og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 22pt

Vekt
Kursiv

Anti-aliasing innstilling:
Glatt

Farge:
# a4a6a6

Utligning:
Optisk

Tracking:
-50

Deretter påføres en Drop Shadow til vår tekst og Color Overlay, ved hjelp av innstillingene som vises i bildet nedenfor:

Trinn 17

Til slutt innholdet. Grab Horizontal Type Tool (T), skriv inn din og ifølge det til følgende innstillinger:

Font Family
: Helvetica

Størrelse
: 17pt

Vekt
Regular

Anti-aliasing innstilling:
Glatt

Farge:
# a4a6a6

Utligning:
Metrics

Tracking:
0

Leading:
28pt

Step 18

Lag nå årets lag. Som "Kontakt" -knappen, skape den samme form ved hjelp av rektangel Tool (U), men nå med de nye dimensjonene 100x36px. Duplisere "Kontakt fold" lag, som vanlig, for å skape "Year fold".

Trinn 19

Nå kan du legge den "Year" tekst på knappen. Grab Horizontal Type Tool (T), skriv inn din tekst og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 25pt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
#ffffff

Utligning:
Optisk

Tracking:
-50

Da gjelder en Drop Shadow til vår tekst som «Kontakt» tekst og til slutt må du ha et resultat som i følgende bilder:

Trinn 20

Som i forrige trinn, skape vår blokk. . Bruke rektangel Tool (U), opprette et rektangel av 780x og endre navnet "contact_bg"

Opprett siste stripe med rektangelverktøyet (U), opprette et rektangel av 780x15px og fyll den med color: # 7db222.

Trinn 21

Nå kan du legge teksten på etiketten. Grab Horizontal Type Tool (T), skriv inn din tekst og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 26pt

Vekt
Roman

Anti-aliasing innstilling:
Glatt

Farge:
# 7db222

Utligning:
Optisk

Tracking:
-50

For begge deretter bruker den vanlige Drop Shadow effekt.

Trinn 23

Lag nå tekstfeltet. Bruke rektangel Tool (U), opprette et rektangel av 210x33px og fylle den med color: # f4f4f4. Gå til Blending Option panel og angi verdien som i følgende bilde:

Nå bruker den samme prosessen for å lage alle tekst fieds, bare for det store feltet på høyre dimensjonene er 300x200px
<. h2> Step 24

Nå opprette "Send melding" -knappen. Bruke Avrundet rektangel Tool (U), opprette et rektangel av 210x33px, radius: 5px, og fyll den med color: # 7db222. Tilsett Blending Option effekt som i følgende bilde:

Step 25

Til slutt lage teksten "Send melding" -knappen. Grab Horizontal Type Tool (T), skriv inn din tekst og ifølge det til følgende innstillinger:

Font Family
: Delicious (få det fra her)

Størrelse Bilde: 22pt

Vekt
Fet

Anti-aliasing innstilling:
Glatt

Farge:
#ffffff

Utligning:
Optisk

Tracking:
-50

Da gjelder en Drop Shadow til vår tekst som «Kontakt» tekst og til slutt vil du ha et resultat som i følgende bilder:

Konklusjon

Det er det, folkens! Vi er ferdige med vår nettside grensesnitt design. Vi håper virkelig du har funnet denne opplæringen nyttig. Og hvis du har noen kommentarer, vennligst la dem nedenfor, og vil sørge for å svare på dem. Også, ikke glem å sjekke ut oppfølgingen del om hvordan å få dette designet leve! Anmeldelser

Previous:Designe en profesjonell, Clean alle blogger Theme i Adobe Photoshop

Next Page:The Making of CoffeeAddict: En Illustrasjons Wood Design (Gratis PSD og HTML!)