design en innovativ portefølje stedet ved hjælp af alternative ui /afgift,,,,,,,, hvad er den første ting du vil have din portefølje, på at gøre?stå ud!i dag, paul j. noble vil føre os gennem oprettelsen af hans egen enestående konstrueret portefølje sted.han vil vise os tips og tricks i adobe photoshop, samt nogle kloge tilgange til løbende ud fra den pakke af andre portefølje lokaliteter.,,, at skabe en mindeværdig portefølje sted, tænk på din portefølje er stedet dit online talsmand for potentielle kunder.hvis det gøres ordentligt, vil det fortælle folk, hvad du gør, vise din bedste arbejde, og give dem mulighed for at komme i kontakt med dig.det er temmelig indlysende ting - - så hvad er forskellen mellem en almindelig portefølje websted og en virkelig bemærkelsesværdig?nøglen til en effektiv portefølje, stedet har ikke bare store projekter - det er fra et varigt indtryk på besøg.ja, det kunne betyde, at utroligt illustrationer, hvis du er en grafisk designer - men webdesignere og udviklere, betyder det ofte har brug for at skubbe grænserne for ui /afgift og kodning for at vise vores stærke punkter. i denne forelæsning, paul j. noble vil vise os, hvordan han brugte nogle enkle, men meget innovative tilgange til ui /afgift på sit eget område til at skabe en portefølje område, der strækker sig brugernes forventninger ved hjælp af interaktivitet og diskret belysning virkninger. lad os dykke i.,, trin 1 lærredet, skaber et nyt dokument i photoshop, at ’ r 1400 x 900.den endelige, html afsmeltet websted vil være ‘ flydende ’ (dvs. skalerbare) elementer, så vi ’ ll nødt til at huske på, at den endelige udformning ikke en fast størrelse.,, trin 2 grundlaget, skabe en solid baggrund er en let måde at få gang i tingene.for denne konstruktion, vi ’ skal være ved hjælp af en base, farve, og at &rsquo er mørkt nok til at forstærke forgrund, billeder, men også til udligning af ren sort, som kan forekomme i følgende billeder.vi vil også omfatte ’ nogle blå at skabe en ‘ fedt ’ mørk farve, der integrerer med interface elements., udvælge lag> ny fylde lag> farve og tildele farveüa3b.,, trin 3 om de retningslinjer, som vi &rsquo er ved hjælp af en skalerbar layout, er vi nødt til at definere den mindste horisontale bredde.for de fleste kommercielle websteder, det er omkring 1000 pixel af hensyn til brugerne 1024x768 beslutning viser.men dette sted vi ’ 11 mål, for som et minimum 1100 pixels bredde. for det første, sørg for at din guide enheder er sat til pixel.dette kan være ved at gå til præferencer> enheder og vejledninger, så gå på> nye guide.som vi ’ vil sætte vores indhold i midten, og vi &rsquo er et mål for den samlede bredde på mindst 1100 pixels, skal vi i vertikale vejledninger på 150px og 1250px.,, løntrin 4 skabe konsistens mønster, diskret diagonal striping vil hjælpe konstruktion ved at skabe en adskillelse mellem forgrundsviden porteføljeenheder og tekstureret baggrund. for at opnå dette, vil vi anvende en mønster fylde lag.men først må vi skabe mønster., skaber et nyt dokument 12x12 pixels med en gennemsigtig baggrund og tilføje en ny fylde lag med en sort udfylde (# 000000).,,, tilføjelse af et nyt lag (lag> nye> lag).ved hjælp af en blyant redskab med en pensel størrelse af 1px, drage tre linjer, præcis som de ser ud i billedet nedenfor.,, sluk fylde lag og fastsætte retningslinjer lag uklarhed til 6%.at redde vores mønster udvælge edit> definere mønster. gå tilbage til vores oprindelige lærred, skabe et nyt lag med konsistens ved udvælgelse af lag> ny fylde lag> mønster og udvælge de tidligere fastlagte mønster.,,, løntrin 5 sejlads, nu da vi har skabt og rsquo; vores base, vi kan sætte nogle flade lag, der omfatter de vigtigste elementer i stedet først vores navigation.dette sted vil være udformet således, at ingen lodret nedad, kan vi holdning sejlads til tilpasning til bunden., skabe en ny gruppe i lag palet og mærkning af denne gruppe &lsquo, navigation og rsquo;.og skabe et nyt lag af rektangel værktøj (e).med info - vinduet, gøre denne form, så det ’ s 1400x61 (den fulde bredde af dokumentet vindue og 61 pixels højt).tilpasse det lag på bunden af dokumentet vindue.,, anvende en gradient på lag af lige klikke form lag på lag palet og udvælgelse af blanding muligheder, så tjekker gradient - overlay - (eller udvælge lag> lag stil> gradient overlay). i graident redaktør, klik bunden farve gearvælgeren at åbne den farve - piller.til venstre farve (nederst i form) anvendelsef313a. for den rigtige farve (top form) anvendelsec3f49. næste, skabe et nyt lag, og lable denne ‘ fremhæve ’.ved hjælp af en blyant redskab med en 1px børste og farve&#ffffff, trække en streg og holder vagt på toppen af rektangel form blev dannet.- så sæt det lag ’ s røgtæthed 6%.,, trin 6 logotype, skabe en ny tekst lag 20 pixels fra venstre side af dette dokument og tilpasse teksten til vertikalt centreret om sejlads rektangel lag. i dette eksempel skrifttype din baggrund er blevet anvendt på 14px med en løs sporing af 200.at skabe et skift mellem to dele af logoet type to farver anvendes.for det første del&#g g g g g, og den anden, mørkere side򴁟.,, tilføje en diskret - skygge til at give indtryk af den tekst, der er indsat i baggrunden.udvælge lag> lag stil> drop shadow. unselect ‘ brug globale light ’, ændre retning - 45 grader, størrelse, 0px, afstand 1px og uigennemsigtighed, 30%.,, trin 7 navigation knapper, for de vigtigste navigation knapper, vil vi anvende en afrundet rektangel form., skabe en ny gruppe, kaldet ‘ knapper og rsquo;., skabe en ny rundet rektangel form ’ s 279x31 og opveje 20 px fra højre side af dokumentet vindue og vertikalt centreret i sejlads rektangel.,, højre klik laget i lag palet til og udvælge blanding muligheder.tjek gradient - overlay - og anvende de værdier,Ĥc33 til꧈f. klik - og tjek med koniske &emboss. for fasen &emboss fastsatte størrelse, 0px med en styring af 50 grader.så sæt fremhæve og skygge uklarhed til 10% for at skabe en konsekvent, diskret belysning virkning.,, tilføje tekst med samme skrifttype etiketter indstillinger som blev anvendt for logoet type.som den knap etiketter er indeholdt i en mindre lodret rum, vi skal mindske størrelsen til 12 px og stramme de sporer til 100.bruger de samme farver som logo type gælder dog lighteren farve til aktive side etiket.,, at adskille de knapper, samtidig med at den sagte tændt udseende af sejlads, bør vi drage to linjer, hver 1px bredde.for det første bør være sort (# 000000) og de andre hvide (# ffffff).sæt den uklarhed for hvidt lag til 6%, og den sorte lag til 12%.kopiere disse lag af skift klikke hver, og så lige klikke til udvælgelse.position to lag med konsekvent afstand inden for skibsfarten.,,,, trin 8 sociale medier knapper, disse knapper har en anden funktion end resten af nav - så vi ’ vil anvende en stil, der tyder på det.lad ’ s indpresningsdybde knapperne som supplement til de vigtigste navigation.for det første, at skabe en ny gruppe, kaldet ‘ social og rsquo; og rede denne gruppe i &lsquo, navigation og rsquo; moderkoncern.nu, med afrundede rektangel redskab med en radius på 4 px og holder vagt, skabe en firkantet aspekt i form af 25x25 forsyning.vertikalt center i navigation og holdning i form af 22 px til venstre for de vigtigste navigation knapper.,, højre klik form lige skabt og udvælge blanding muligheder.tilføj et drop shadow.for dette fald skygge vi ’ ll brug hvid (# ffffff), og blandingen tilstand for at lette.sæt afstand til 1px, spreder sig til 0% og størrelse, 0px.dette vil skabe en virkning af den nederste kant er tændt, og dermed den knap er indsat., næste, selv om den stadig er i lag - vindue, tjek indre skygge.use sort (# 000000) med uklarhed på 39%, afstand 1px og størrelse 4px., endelig vælge farve - overlay - og anvendelse񖗍.det vil knuse udseende af form og tilføje kontrast til baggrunden., for de sociale medier ikoner vi &rsquo, tager en eksisterende image og spore kanter pennen værktøj til at skabe en vej (sikre veje er udvalgt i værktøj muligheder menu)., efter at du har skabt en vej, og rsquo; den ikon, brug den vej, udvælgelse, værktøj og right-click den sti, du har lige skabt (sørge for, den vej er valgt i veje palette).vælg definere skik form...redde form.,, kan vi bruge ikon som skalerbare elevationsvektorobjektet.anvendelse af pennen værktøj, ændre mulighederne for at forme lag (øverst til venstre punkt på muligheder bar) og vælge skik form redskab, så vælg ikon har skabt.holder vagt, trækker den genstand, således at det passer i ikon fliser.sæt ikon uklarhed til 20%.,, gentager disse skridt til en eventuel resterende sociale medier ikoner.,, trin 9 flere vejledninger i dette eksempel, vi ’ skal være med shakespeares billeder, der er 640x480 px. som vi ’ d gerne vertikalt center, de var billede i rummet over sejlads, er vi nødt til at tilføje nogle flere vejledninger.vælg lyset> ny vejledning og tilføje horisontale retningslinjer på 180px og 660px.denne holdning, som vores set image i midten af lodret rum over sejlads. vi &rsquo er også brug for en tekst på venstre side af var billede, så vi ’ ll tilføje vertikale vejledninger på 400px og 350px af margen for teksten og give plads for sejlads ved billedet.til sidst tilføje vertikale vejledninger på 1040px og 1070px at definere kanten af betragtes image og margenen mellem tilstødende image.,, trin 10 skabe image placeholders, skabe en ny gruppe, kaldet ‘ projekter, og rsquo;.så, ved hjælp af rektangel værktøj, tegne et rektangel 640x480px, som bringer til toppen til venstre for vertikal vejledning på 400px og den øverste vandrette guide på 180px.det vil tjene som en indikation af en art, for vores vigtigste image.- tryk lag har lige skabt og udvælge rasterize lag., nu, med alat - nøgle, klik og slæbe det lag, at skabe en kopi.flyt den her til højre i lag med 30px margen for at bringe dem i overensstemmelse med de vejledende på 1070px og med samme udgangspunkt.skabe yderligere to kopier og tilpasse disse til bunds i hver med 30px margen mellem hver.,, og med maling spanden værktøj, fylde hver af disse figurer med farveüa3a.,, trin 11 vignet, skabe en ny gruppe, kaldet ‘ vignet ’ under &lsquo, navigation og rsquo; gruppen over ‘ projekter, og rsquo. gruppe.skabe et nyt lag maling spanden og bruge værktøj til at udfylde de lag af forgrundsviden farve�f1219.ved hjælp af den ellipse, værktøj, gøre en oversigt, der krydser i hjørnerne af de vigtigste image vejledninger.,,, at skabe en vignet virkning, og rsquo; ll nødt til at skære i dette afsnit, mens fløjlet kanten af snit.for at opnå dette, vi ’ ll brug udvælge> ændre> fjer.fjer udvælgelse af 60px og så skar de lag udvælgelse (ctrl-x /command-x).,,, trin 12 skabe projekt masker, som vi ’ skal være fremme arbejde vi ’ ll nødt til i nogle screenshots på placeholders.gå tilbage og lsquo; projekter, og rsquo; - gruppen og pasta et skærmbillede, mens de vigtigste indikation af en art er udvalgt.dette vil indsætte lag over indikation af en art.så, right-click laget og udvælge skabe udklip maske.,, pasta, tre mere screenshots på den anden placeholders.,, reducere uklarhed for alle screenshots bortset fra koncentreret skærmbillede til 20%.,, trin 13 at indsætte tekst herom, at hvert projekt vi ’ vil bruge tre tekst lag.skabe en ny gruppe over ‘ vignet &rsquo. gruppe til disse lag.for det første, overskriften, vi vil bruge en lys og rsquo; skrifttype.i dette eksempel - og rsquo har brugt din baggrund er imidlertid et andet lignende typer, kan også virke fint.ved hjælp af teksten værktøj, udarbejde en tekst boks i vejledninger til venstre for de vigtigste image og 40px under det øverste leder.sæt den farve til&#ffffff, sporings - 25 for en strammere brev afstand og anvendelse af en skriftstørrelse på 28px.,, vi ’ ll tilføje en linje til projektet, kategori og dato.sæt den størrelse, 14px, sporing og 100, kraft, hætter og anvende farve񒰖 at fremhæve denne linje, så for kroppen tekst, vi ’ vil anvende et system skrifttype som f.eks. lucida grande eller lucida sans unicode på 12px med en farvec8f95 og linjehøjde 18px., trin 14 tilfører mus kontrol, at navigere i vores blad sted vi ’ 11 mus eller tastatur mulighed for kontrol.et intuitivt placering for sejlads retningsbestemte knapper er i henhold til deres funktion.for eksempel, den rigtige pil knap vil gå til højre for den vigtigste image.for vi vil bruge rsquo knapper og gennemsigtige former, der kan flytte uklarhed om svæve eller klik begivenheder.skabe en ny gruppe, kaldet ‘ knapper og rsquo; at ’ s over ‘ vignet &rsquo. gruppe.så, skaber et nyt dokument med de dimensioner, 37x37px.anvendelse af pennen værktøj, udarbejde en chevron form som f.eks. nedenfor.at gentage processen i trin 8, ved hjælp af den vej, udvælgelse, værktøj, højre klik form og udvælge definere skik form.redde form.,, der går tilbage til vores vigtigste lærred, anvende den skik form redskab at indsætte den tidligere skabt form., så udvælge edit> omdanne> flip vandret.det vil sige, den pil mod højre.klon denne form og anvendelse edit> omdanne> roterer 90 grader er med til at skabe nedadvendt form.hver af disse profiler, holdning i centrum af deres respektive retningsbestemte side.give 15px margen, så de knapper kan overlappe de tilstødende billeder og reducere uklarhed til 12%.,, trin 15 orientering kort, så brugeren ved, hvor de er i porteføljen som helhed vi ’ ll abstrakt nettet udformning og anvendelse af retningslinjer for forskellige højde for at repræsentere kolonner af billeder og en indikator for fastlægge de nuværende - holdning., skabe en ny gruppe, kaldet ‘ orientering og rsquo, og denne gruppe over ‘ vignet &rsquo. gruppe.ved hjælp af en blyant værktøj, udvælge square børste fra de flyver menu.så, med den farve&#ffffff og en tykkelse af 5px, trække en linje for at bringe dem i overensstemmelse med det yderste venstre grænse vejledning og 60px højt.,, klon denne lag og holdning i denne 2px til højre.gentage det for op til 12 linjer.,, sæt uklarhed for alle lag til 12%.og let måde at gøre det på er der uklarhed for det første lag, så klik på lag og udvælge kopi lag stil.så vælg alle resterende lag og udvælge pasta lag stil.,, vakler disse lag med edit> fri omdanne ordre til at afkorte /øger hver linje.og endelig skabe et nyt lag og bruge blyant igen at drage en markør for den første linje.dette er vores holdning indikator., trin 16 tastatur kontrol, ofte tastatur kontrol vil tilbyde et intuitivt navigation erfaring.vi må imidlertid tillade, at brugeren ved, at tastaturet kan styre navigation.for at opnå det, vi vil skabe og rsquo; tastatur pil ikoner., skabe en ny gruppe, kaldet &lsquo, tastatur og rsquo, og denne over ‘ vignet &rsquo. gruppe.ved hjælp af rektanglets form værktøj, tegner en firkant (holde vagt) 20x20px med en farveĆa34.højreklik laget i lag palet og udvælge blanding muligheder.tjek slagtilfælde og anvende en 1px slagtilfælde udenfor med farve繗f., så brug af pennen værktøj (sikre stil er fastsat til misligholdelse i mulighed bar) og farve&#fff drage en pil med en lidt anden pointe.foretage de nødvendige tilpasninger med den direkte udvælgelse værktøj.sæt uklarhed til 20%, i lag palet, skift vælge de to lag har skabt.højreklik og udvælge to lag.så, ved hjælp af edit> ændre menuen mulighed drejes dobbelt lag til deres korrekte drejning.gentag dette trin at udarbejde alle fire ikoner.,, indgåelse, okay!nu er vi færdige med design del af projektet.hvilket betyder, at alt vi skal gøre, er at kode det ved hjælp af nogle grundlæggende /html /css, jquery hotkeys, og et par ekstra jquery tricks.hvis nogen ønsker at se, hvordan paul kodet dette design, lad os i de bemærkninger, så vi kan arrangere det.,