design en elegant "taknemmelighed over log" landing side med photoshop,,,,,, hvad du vil skabe,,, i denne lektion, jeg vil guide dig igennem processen med at udforme en elegant landing side for en fiktiv "taknemmelighed over log" service.vi starter helt fra bunden, udarbejdelse af layout i adobe photoshop på ingen tid.vi vil bruge nogle grundlæggende og mellemliggende teknikker til at skabe denne konstruktion med omstilling i tankerne.lad os få det i gang!,,, tutor aktiver, for at følge med, skal du bruge nogle (frit) aktiver:,,, slappe af i solen foto fra skitterphoto, pt serif font fra skrifttype egern,, det dislay font fra skrifttype egern, kilde uden for font fra skrifttype egern, bruger avatarer fra brugerne blandt ansigter, få det dokument, klar, trin 1, begynder ved at skabe en ny photoshop dokument (, fil > nye...) med de indstillinger, som vist nedenfor.du er fri til at bruge et lærred, uanset størrelse, de foretrækker – internettet ikke er fast bredde, trods alt.,,,,, trin 2, lad os fastsætte nogle retningslinjer, så vores udformning har plads nok og er afbalanceret.jeg kan ikke altid bruge en forud defineret net, men at fastsætte nogle retningslinjer vil sikre orden og vil bidrage til at definere vores websted er bredde.gå til betragtning > nye guide... og fastsætte nogle retningslinjer.jeg plejer at vælge 1000px som et websted, bredde og tilføje nogle retningslinjer i hjørnerne, så det har plads til at trække vejret.,,, note:, retningslinjer, der anvendes til denne lektion: lodret på 200px, 500px, 700px, 900px og 1200px.,,, tip:, kan du også bruge guideguide photoshop stik af at gøre denne proces endnu hurtigere.,,,,, trin 3, fast i photoshop etikette, vi holder styr på tingene, og derfor let at navigere og klipper.lad os skabe tre lag - grupper, der hedder header, indhold og fod.at skabe grupper går til lag > nye > gruppe, - - og give hver enkelt en titel som nævnt.for hurtig oprettelse af en gruppe klikker bare mappen ikon.,,,,, udformningen af header område, hovedet eller område "over folden" (hvor der er i disse dage), spiller en meget vigtig rolle i samarbejdet med brugere og sikre, at besøgende bliver på webstedet.til denne landing side layout, vil jeg bruge et billede af to mennesker, der sidder på en bænk; en af dem holdt hænderne op i luften, at fremhæve positive følelser og lykke.,, trin 1, lad os først skaber baggrund af blog.i "hoved" - gruppen trækker en sort,�, farvede rektangel form ved hjælp af, rektangel værktøj (u), i mit tilfælde tegnede jeg et 1400x728px mellemstore rektangel og lagde den på toppen af dokumentet.,, nu henter de slappe af i solen, foto, trækker det i photoshop dokument, og det ovennævnte rektangel lag.omdøbe billedet lag på noget du genkender senere, i mit tilfælde jeg har brugt, img,.efter det her, alat, centrale og mus over billedet lag, indtil du ser en lille pil peger ned, så ud med det.du har lige oprettet, det maske.endelig reducere img - lag, uklarhed, til 70%, så den tekst, vi sætter på toppen, vil være mere læsbare, nu ramt, cmd + t, og resize billedet for at passe dine behov.,,, tip: hold ned, skifteholdsarbejde, er nøglen til at omdanne proportionalt.,,,,, trin 2., lad os skabe en global navigation til landingen side, så folk kan navigere gennem websted.,, skabe en ny gruppe, kaldet "navigation", læg det i "hoved" - gruppen.efter at vælge, rektangel værktøj (u), og drage en hvide rektangel form mellem første og sidste vertikale retningslinjer.gør det, 60px, højden så sejlads poster vil have plads til at trække vejret og ser ren ud.endelig kom 30px, ned fra toppen, så vi kan få den virkning, at det bliver flydende på vores image.,,,,, trin 3, lad os nu et logo og nogle forbindelser for at gøre vores navigation bar ligner noget, man kan bruge.for logoet, jeg har blot skrevet "grttd" ved hjælp af playfair - display - dristig kursiv), skrifttype, 26px, størrelse og farve mørkegrå,�e0e0e,.,,,,, for sejlads forbindelser, jeg har brugt, kilde uden for 14px, med større afstand mellem bogstaverne.for de vigtigste opfordring til handling "- skiltet op." jeg har brugt, sort, og den grønne farve,`c218,.vi er færdige med "navigation", så at mindske det ved at klikke på den lille trekant ikon næste gruppen navn.,,,,,,,, trin 4, lad os skrive en inspirerende budskab, der ledsager image og overordnede idé af webstedet.jeg skal bruge en stor fed skrifttype med under overskrift, som forklarer begrebet nærmere.,, da vi har en meget mørk baggrund for vores øverste område, det er klogt at anvende bleg tekst for at skabe stor kontrast og sikre læsbarhed.jeg har brugt hvide,&#ffffff, kilde uden for (sort) 80px, med en linjehøjde, 86px,.det, 120px under sejlads bar så budskabet er plads nok til at blive opfattet som vigtigt,.,,,, er på 70%,.,,, så lad os lægge under overskrift, at klarlægge hele konceptet og besøgende kan få svar på nogle spørgsmål.for at skabe en god typografiske kombination - blandes de vigtigste sans serif overskrift med elegant serif skrifttype, vi brugte tidligere for logo, for mere inspirerende skrifttype kombinationer, tjek: google web skrifttyper typografiske projekt og en begynder guide til parring skrifttyper.,, for resten, jeg har anvendt hvidt,&#ffffff, 26px, playfair - display (kursiv), skrifttype og placerede det, 40px, under den overordnede.,,,,, trin 5, lad os tilføje noget mere ind, så de besøgende kan se fordelen af at bo på webstedet.en taknemmelighed over log er baseret på registrering af ting, du er taknemmelig for, så nogle sociale bevis, vil være en god idé at vise folk, der bruger det faktisk og vise noget mere ønskeligt, som en stribe,.,, skabe en ny gruppe, kaldet "eksempel", så tag den, ellipse værktøj (e), og bedrift, skift, tegner en cirkel.i mit tilfælde er det, 60x60px,.efter at sætte et ansigt på toppen af cirklen lag, og med den, alt, nøgle, mus i lag, indtil du ser en lille pil peger ned, så slip det at skabe en, det maske.nu kan du resize image, hvis det er nødvendigt ved at klikke, cmd + t,.,, for denne forelæsning jeg bruger en tilfældig ansigt fra brugere blandt ansigter.,,, lille tip: holde vagt er nøglen til at trække /resize proportional former.,,,,, nu er vi nødt til at sætte en indikator af på hinanden følgende logbøger.lad os skabe en cirkel form, denne gang mindre, og en række indeni.simpelt, men forståeligt, og gør jobbet.for den cirkel farve jeg har genbrugt de tidligere anvendte green,`c218,.i mit tilfælde er det størrelse er 30x30px og teksten i er hvide,&#ffffff, kilde uden for (fed) 14px,.,,,,, endelig give vores person, et navn og tydeliggøre, hvad det står for.tag den, horisontale type redskab (t) og indlede et navn og streak længde.jeg har brugt, pt serif (fede kursiv) 16px for navn og kilde uden for (almindelig) 13px, for den periode.sørg for at bruge en linjehøjde store nok så elementer er plads til at trække vejret.,,,,, store, en sidste ting, før vi går over til det område.vi har brug for en stærk opfordring til handling (tcl), så brugeren kan gøre noget, efter at have set de billeder og læse overskrifterne.skabe en ny gruppe, kaldet "cta", som er den forgrund farve hvid,&#ffffff, og tag den, rektangel værktøj (t).efter at tegne et rektangel form, i mit tilfælde dens størrelse, 280x60px,.se sammenhængen i højden tidligere anvendes til navigation bar.efter at komme ind, nogle overbevisende kopi til den knap.jeg har brugt "leve →", farven er som tidligere, der anvendes på sejlads bar mørkegrå,�e0e0e, skrifttype, kilde uden for (semibold) 16px, sporing, der, 140.,,,,, trin 6, nu er vi færdige med "hoved".lad os åbne "indhold" gruppe og skabe en "beskrivelse".vi skal have en stærk overskrift efterfulgt af en mere detaljeret beskrivelse af hjemmesiden.det er vigtigt at gentage den opfordring til handling (tcl), så brugeren behøver ikke at tænke for meget, men er stadig i stand til at gribe ind, når klar.,, tag den, horisontale type redskab (t) og vælge en magtfuld skrifttype til dine overordnede.i mit tilfælde bruger jeg en smuk og elegant, men dog autoritativ leder, playfair - display (sort) 60px,.sørg for at give dette uhyre meget plads til at trække vejret, jeg har flyttet det, 100px, ned fra header image.,,,,, nu med det samme, horisontale type redskab (t), et rektangel, ved at klikke og slæbte det.i mit tilfælde er det en, 600x140px, størrelse boks, hvor jeg lagde nogle overbevisende kopi for brugerne at beslutte sig til at klikke på, i ly.for at skabe en klar visuel hierarki beskrivelsen tekst skal være mindre og ikke så tung.i mit eksempel, jeg bruger gray,򢰪, pt serif (almindelig) 18px,, højde, 28px,.hele element er flyttet ned af 50px fra overskriften til at give dette en ren og professionel ud.,,,,, efter at kopiere vores gæst kan være overbevist om, at give det en chance, så er det klogt at gentage opfordringen til handling (tcl) knap igen.åbne "hoved" - gruppen finder det "cta" gruppe og gentage det, som rammer, cmd + j.efter at flytte det til i "beskrivelse" gruppe - og ændre den knap farve til vores tidligere grønne en,`c218, og for den tekst, hvide,&#ffffff,.træk den ned, 50px fra kopi til konsekvent afstand.,,,,, ser godt ud indtil videre.lad os få en enkelt linje til visuelt særskilt beskrivelse blok fra den næste.tag den, linje værktøj (u), fastsat, vægt, 1px, og drage en vandret linje i den første og sidste vertikale retningslinjer.jeg har brugt en lys grå farve,&#e6e6e6, som ikke er for stærk, men virker perfekt.,,, lille tip, hold den, skifteholdsarbejde, er nøglen til at udarbejde en fuldstændig lige linje.,,,,, trin 7, nu er vi færdige med at blokere det er "beskrivelse" tid til at gå videre til den næste.skabe en ny gruppe, kaldet "bliv inspireret".efter at kopiere den overskrift og beskrivelse lag fra "beskrivelse" gruppe - og flytte dem til "bliv inspireret" - gruppen.klippe lagene og ændre kopi.nedenfor er mit eksempel:,,,,, nu sejle til "hoved" - gruppen og finde "eksempel" - gruppen.to hele gruppen af an, cmd + j, og flytte den til "bliv inspireret" - gruppen.vi vil genanvende vores eksempel fra toppen og vis bruger historier for at inspirere vores besøgende til at handle.,,,,, omdøbe den gruppe navn til "historie", og slippe af med den grønne indikator.desuden, du bliver nødt til at ændre teksten farve til mørkegrå,�e0e0e, så den er let læselig på hvid baggrund.brug et billede til avataren og skrive den pågældendes situation og placering i lettere gray,򢰪, så folk kan relatere til den person.,,,,, efter at skabe en tekst boks, 300x160px, størrelse ved hjælp af horisontal art værktøj (t), og skrive et eksempel af taknemmelighed over log opdatering.jeg har brugt, pt serif (kursiv) 16px, størrelse mørkegrå farve som før,򢰪,.,,,,, nu to "historie" gruppe to gange og ændre avatarerne, navn og beskrivelse.disse to grupper i horisontale for forlader jævnt fordelt huller mellem og en linje efter alle disse grupper, som vi gjorde før.,,,,, trin 8, nu, som vi har gjort med "bliv inspireret" gruppe, lad os gå videre til den sidste del af vor landing side.den endelige, opfordring til handling, (med nogle nærmere oplysninger) vil opfordre turister til at underskrive op i en e - mail - adresse.,, skabe en ny gruppe, kaldet "e - mail" og navigere med den foregående gruppe til at finde en overskrift lag så gentage det ved at slå, cmd + j, og flytte den til nyoprettede gruppe.ændre overskriften på noget opmuntrende og flytte rundt, 100px, under linjen for at bevare sammenhængen.,,,,, stor!sæt den forgrund farve til lysegrå,&#f5f5f5, og hente den, rektangel værktøj (u), for at gøre en kasse til en e - mail - område.det bør være den samme højde som vores vigtigste, opfordring til handling (tcl), selv om den bredde, betyder ikke så meget.i mit tilfælde er det 430x60px,.så tag den horisontale type redskab (t), og skriv "ind i din e - mail" eller noget lignende, sørg for at bruge en mørk farve, så det er let at aflæse.,,,,, nu gå over til "beskrivelse" gruppe i vores lag panel og finde "ly" - gruppen.to eksemplarer af an, cmd + j, og flytte den til "e - mail" - gruppen.den knap lige ved siden af den e - mail - område og center hele element.,,,, er på 80% synspunkt.,,, trin 9, enden er nær!lad os begrænse alle grupper og åbne op for "lille" - gruppen.sæt den forgrund farve til mørkegrå,d2d2d, og ved hjælp af, rektangel værktøj (u), udarbejde en fuld bredde rektangel med om, 230px, højden.det vil være vores lille baggrund og vil adskille område med sin modsætning.,,,,, gå videre og finde "navigation - gruppe" og logo lag, gentage det ved at slå, cmd + j, og flytte den til den "lille" - gruppen.ændrer farven hvid,&#ffffff, og flytte rundt, 50px under kanten af fod rektangel.,,,,, endelig samle, horisontale type redskab (t), og få nogle forbindelser, at brugerne kan få gavn af.sørg for, at gruppen deres forbindelser, så de let kan forbindes.jeg har brugt, kilde uden for (semibold) 16px, link gruppe overskrifter og pt serif (almindelig) 14px, link titler.,,,,, tillykke!,,,,,!vi er færdige med den indretning, så nu gennemgå lag, fjerne unødvendige, og giv det til din entreprenør, eller endnu bedre kode det selv.jeg har rørt ved nogle grundlæggende teknikker og vist min arbejdsgang for udformningen af web - skemaer, jeg håber, du har lært noget.,, jeg ville elske at høre din feedback og se resultaterne af denne lektion!,, ekstra ressourcer,, hvis du er ny landing side design, vi vil anbefale en række indledende tutorials, for at få dig op at køre med det sædvanlige:,,, landing side designprincipper: åbne opgave - supplement til det tuts + af adi purdila, en begynder guide til vellykket omstilling af ian yates,,, tips til at udforme niche landing sider af keir whitaker,,,,, hvis du er interesseret i at få hjælp med din landing side design, envato studie har en stor samling af landing side design & udvikling af tjenester, som du kan lide at udforske.du kan også se landingen side emner på envato marked.