anvendelse af nye elementer i photoshop cs6 at skabe en administrator instrumentbræt grænseflade

anvendelse af nye elementer i photoshop cs6 at skabe en administrator instrumentbræt grænseflade,,,,,,, photoshop cs6 er fyldt med nye elementer, som vil hjælpe dig med at skabe bedre grænseflade design.i denne forelæsning vil vi udnytte photoshop er nye vektor redigering og slagtilfælde kapacitet til at skabe en administrator instrumentbræt grænseflade.vi vil også drage fordel af photoshop nye snap til pixel - nettet ved at hjælpe med at skabe sprøde og ren web - grafik.lad os komme i gang!,,,,,,, tutor aktiver, følgende aktiver blev anvendt i produktionen af denne forelæsning., 12 kolonner elnettet fra 960. gs, 26. pixel mønstre fra psdfreemium, trin 1: udarbejdelse af lærred, vi skal bruge 960 net med 12 kolonne indretning af 960.gs som ramme for vores design.download skabelonen fil i zip format og åbne 12 kolonner net.klik øje ikon på forsiden af lag 12 kol net til at skjule det, trin 2, klik sorte og hvide cirkel ikon for at tilføje nye tilpasning lag.vælge farve og vælge det hvide på næste dialog kasse.,,, trin 3, få nye lag.klik edit > udfylde og udvælge anvendelse: mønster.use diagonal tråd mønster fra psdfreemium.fordi det er cs6, lad os prøve at bruge sin nyeste træk.aktivér planlagt mønstre og udvælge symetry udfylde.,, trin 4, dæmpe lag uklarhed til 4%.,, løntrin 5, ønsker vi at sikre, at alle de lag område nøje.så lad os begynde med at samle dem i en logisk rækkefølge.vælg to lag - baggrund og - - og så ramte kommando /ctrl + g for at sætte dem i gruppen lag.,, trin 6, har vi ikke brug for baggrund lag, så slette det ved at trække det til slette ikon.,, trin 7, udvalgte lag.slå f2 og så ændre navnet.slå regning til automatisk at redigere næste lag.ændre navn, og så gentager det næste lag.,, trin 8: logo, aktivere afrundet rektangel værktøj.trække en afrundet rektangel form med en radius på 10 px og bredde 2 kolonne.den på toppen af lærred.i den mulighed, bar, der fylder farve til&#f16424 og slagtilfælde, at ingen.,,,, trin 9, double click lag i form af lag - panel til at åbne lag stil dialog kasse.aktivér mønster overlap.vælg pixel - fra psdfreemium.reducere dets omfang og uklarhed, at give det et naturligt stof tekstur udseende.,,, trin 10 nye lag over form.aktivér blød børste og male skygge på oversiden.,, trin 11, alat - klik mellem logo base og dets skygge.dette vil omdanne lag i en klipning maske og skyggen i logo.,, trin 12, gentag processen et par gange.du kan tilføje flere lag, hvis det er nødvendigt.male fremhæve dens lavere side.,, trin 13 nye lag i henhold til logoet.kommando /ctrl - klik form at gøre ny udvælgelse på grundlag af dens form.fyld udvælgelse med sort.,, punkt 14, gælder gaussisk sløre filter.klik filter > sløret > gauss - slør.,, trin 15, ramte kommando /ctrl + t til at udføre forvandling.højreklik og vælge warp.omdannelsen tegnkasse er opdelt i 3 x 3 æsker.træk den lavere kasse ned.tryk enter til at acceptere forandringer resultat., trin 16, trække mindre afrundet rektangel form.fra mulighed bar, fastlægger de fylder ikke og slagtilfælde, hvide med størrelse 1 pt.,, skridt 17, åbne slagtilfælde muligheder og derefter vælge knust nulstillet.klik på flere muligheder for at redigere den stiplede linje indstillinger.,,, gå 18 i lag - panelet, double click sin lag at åbne lag stil dialog kasse.- drop shadow, en vinkel på 90 &grader, aktivere anvende globale lys, dens størrelse 0 px og afstand 1 px.,,, skridt 19, aktivere rektangel, værktøj og klik på lærredet.på dialogen kasse, dets størrelse til 6 x 30 forsyning.klik nu at begynde at udforme.,, gå 20 klik sin udfylde rubrik i mulighed bar.vælg hældning og dens farve fra&#dfdfdf til&#ffffff.,, gå 21, trække et rektangel vej indenfor logo.dobbeltklik sin lag i lag - panel og aktivere drop shadow.,, skridt 22, tilføje drop shadow til lag form.,, nedenfor, er resultatet i større forstørrelse.som du kan se, at din vektor form er altid frisk.der er ingen halv pixel!det er takket være vektor - element i photoshop cs6.du kan deaktivere den, hvis du vil fra præferencer dialog kasse - - men jeg har ingen idé om, hvorfor nogen ville gøre det, gå 23, tilføje tekst i logoet.vi kan tilføje modsætning til teksten ved at ændre nogle af karakter til dristige.,, skridt 24, tilføje en dråbe skygge på teksten.,,, gå 25: vigtigste indhold baggrund, aktivere rektangel, værktøj og derefter drage et rektangel, som det væsentligste indhold baggrund.dets bredde 800 px, fyld:&#eeeeee og slagtilfælde:&#cccccc, størrelse: 1. pt.,, gå 26, tilføje ydre glød med følgende indstillinger.,,, skridt 27, tilføje en trekant, form og afrundet rektangel.sæt deres vej tilstand for at kombinere former.,, skridt 28, tilføje en tekst om regning at tilføje sin titel.tilføj lille statistik ikon fra nogle små firkanter.,,, skridt 29: vigtigste grafisk baggrund, udarbejde en hvide rektangel form som et grundlag for vores vigtigste figur.dets bredde 8 kolonner.sørg for at fastsætte sine slag til ingen.tilføj lag stil ydre glans.,,, gå 30, ramte kommando /ctrl + j at kopiere form.tilføj et stort rektangel form på den nederste del og dens tilstand, til at fratrække foran.tilføj gradient - overlay -.,,, skridt 31, udarbejde en afrundet rektangel.der fyldes op til hvide uden slagtilfælde.brug samme ydre glød og lægge det bag tidligere form.,, trin 32, få nye lag mellem disse to former.en elliptisk udvælgelses - og fyld den med sort.deseiect (kommando /ctrl + d) og derefter gøre det ved at tilføje gauss - slør.,, skridt 33, aktivere type redskab.tilføje afsnit titel,.,, skridt 34, aktivere linje værktøj, og så udarbejde en 1 px - linjen.fastsætte sit slagtilfælde farve til&#e4e4ee4.,, her er forskellen før og efter tilsætning af linjen.,, skridt 35: begynde at tegne linje figur, tegne et rektangel.sæt den fylder ikke og slagtilfælde til&#cccccc.,, trin 36, udvælge for slagtilfælde type fra mulighed bar.klik på flere muligheder og sætte bindestreg og afstand til 4 og 2.,,, skridt 37, drage 1 px horisontal linje med slagtilfælde&#cccccc.vælg for slagtilfælde.,, skridt 38, aktivere vej udvælgelse værktøj og udvælge linje vej, vi lige har gjort tidligere.slå kommando /ctrl + alat + t at kopiere og ændre det.- skift + ret pil to gange for at flytte den 20. px til højre.gentager, omdannelse og dobbeltarbejde proces ved at slå på kommando /ctrl + forskydning + alat + t skridt 39, gentage processen, indtil den rektangel er fyldt med kolonner.,, gå 40, reducere lag er uklarhed på 30%.,, skridt 41, gentager tidligere foranstaltninger, men denne gang med vandrette linjer.,, nedenfor er resultatet.nu har vi diskret - nettet om statistik baggrund.,, skridt 42, tilføje værdier på begge akse, x og y, gå 43, aktivere linje værktøj og trække en 1 px linje på nettet.fastsætte sit slagtilfælde farve til&#f16424.,, skridt 44, skift - drag at tilføje mere line.ved at tilføje flere linjer, indtil vi har en fuldstændig serie kort.,, skridt 44, gøre en lille cirkel form, og det er lige på grænsen?der fyldes op til den hvide og samme slag til linjen er fyld farve.,, skridt 45, double click cirklen form lag og aktivere lag stil slagtilfælde.dets farve hvid og holdning til udenfor.,, skridt 46, vælges den cirkel vej ved hjælp af sti retning værktøj og alat - trække det til at gentage det, skridt 47, bruge samme skridt til at gøre en anden figur.denne gang bruger forskellige farver og fastsætte sit slagtilfælde muligheder til skamme., som i foregående linje kort tilføje cirkler på hver linje segment.,, skridt 48, på toppen af kort tilføje figur legende.du blot tilføje en kort overensstemmelse med samme egenskaber som den linje, kort og tilføje en kort beskrivelse.,, skridt 49, udarbejde en afrundet rektangel.en fyldt til&#eeeeee og slagtilfælde til&#cbcbcb.,, tilføje lag stil indre skygge og gradient - overlay -.,,, gå 50, tegne et rektangel form på center for afrundet rektangel form.du kan bruge noget farve til sin fylde.fastsætte sit slagtilfælde til ingen.reducere sin fylde til 0%.tilføj lag stil gradient - overlay -.,,, skridt 51, drage 1 px overensstemmelse med farve&#cbcbcb i venstre og højre side.,, skridt, 52, tilføje tidsrum udvælgelse.kan du se, at teksten med forskellig baggrund er nu i aktiv tilstand,.,, skridt 53: ved hjælp af karakter, styles, lad os bruge karakter, ønsker at definere vores standard karakter.dette element er en forenklet udgave af karakter stil i adobe indesign.hvis du anvender ofte indesign dig med det samme vil kunne genkende det. åben karakter, styles panel og så klik nye ikon.i dialogen kasse, dets skrifttype type til arial regelmæssige, størrelse 12 pkt., og farve til򻚼.vi vil gøre brug af denne karakter stil i de fleste af teksten.det er derfor, at vi også navn som default karakter stil.,, skridt, 54, lad os anvende dette karakter stil til teksten.aktivér type redskab, udvælge tekst og derefter klikker karakter stil at anvende det, skridt 55, hvis vi ønsker at redde egenskaber fra eksisterende tekst, som en person styles?lad os gøre det til værdier på figur akse.nye karakter, styles.udvælgelse af teksten og klik omdefinere ikon.,, skridt, 56, double click karakter stil at udgive sine muligheder.ændre navn.anvendelse af denne karakter, - - at alle værdi på begge akse.,, skridt, 57, det gode ved karakter stil (og punkt stil for), er du bare kan ændre det til at redigere enhver tekst, der bruger denne stil.her er et eksempel.lad os klippe figur akse... en karakter stil, som vi tidligere for hver værdi på begge akse.dobbeltklik på det og ændre font type og størrelse, skridt 58: tooltip, aktivere afrundet rektangel værktøj.trække en afrundet rektangel og tilføje en lille trekant på venstre side.dets indhold:&#f1f2f2 og slag: ingen.,, skridt, 59, double click laget i lag - panel og tilføje sorte slagtilfælde.måske er du spørger, hvorfor bruger vi ikke slagtilfælde mulighed lige fra dens ejendom?svaret er i lag - slagtilfælde, du kan ændre slagtilfælde er uklarhed.det er noget, som du ikke kan gøre om cs6 photoshop.også tilføje ydre glød og gradient - overlay -.,,,,,,, gå 60, dobbelt form og ændre sin fylde farve til&#f16424.fjerne sine lag stil.tilføj rektangel vej på nederste del og dens tilstand, til at fratrække foran form.,,, skridt 61, tilføje lag stil, slagtilfælde og gradient - overlay til form.,,, skridt 62, drage 1 px lodret linje.sæt den fylde farve, sort.tilføj lag styles slagtilfælde.reducere lag uklarhed til 8%.,,, skridt 63, tilsættes små afsnit om formen.redde karakter ejendom som en karakter, styles.tilføj lag stil drop shadow.,,, skridt 64 tilføjer endnu en titel på den anden side.brug af samme karakter, stilarter og samme drop shadow.,, skridt, 65, tilføje en andel i det.det er altid en god ide at redde det som karakter, styles.på den måde kan du let edit sit udseende fra personerne styles panel.,, skridt 66, aktivere polygon, værktøj og dets side 3 i mulighed bar.gøre en lille trekant peger opad.dets indhold:&#c1c1c1 og slag: ingen.,, tilføje lag stil indre skygge.,,, skridt 67, tilføje en lille cirkel, og en anden trekant form - peger nedad, denne gang.brug samme farve og lag stil.,, skridt, 68, tilføje antal.som sædvanlig, sørg for at redde sin karakter stil.,, skridt 67, data, er positive.så lad os understrege dette ved at aktivere den pil.at ændre dens form, fylde farve tilff25d.,, skridt, 68, gentager nummeret til en anden data.,, skridt 69: mindre figur, drage lignende afdeling for mindre figur.du kan bruge samme metoder beskrevet ovenfor.husk at bruge mindre tekst størrelse på den titel.,, skridt 70, udarbejde en blå 1 px linje inden for nettet.fastsætte sit slagtilfælde muligheder til skamme.,, skridt 71, som i de vigtigste figur, tilføje cirkel på hvert punkt.,, skridt, 72, aktivere pen værktøj.udarbejde en ny form for den linje, der forbinder det med x - aksen.anvendelse af samme farve som den linje.den form for cirkler., tilsættes fri pixel - fra psdfreemium.,, skridt 73, skrue ned for den uigennemsigtighed, til 50%.,, skridt 74, tilføje procentdel på sin side.i denne mindre figur, ønsker vi også mindre tekst procentvise størrelse.,, skridt 75, tilføje en anden figur.,, skridt 75: inaktiv vigtigste regning, som i øjeblikket arbejder vi på statistik regning.lad os tilføje en regning, og læg dem i inaktiv tilstand.to tal: baggrund, vi fremsatte i skridt, 25 - 27.det vil være nyttigt, hvis du skjuler den statistik, regning bagefter.ændre sin fylde og slagtilfælde farve til&#c1c1c1.slette små rektangel i venstre side.træk toppen afrundet rektangel til højre.,, skridt, 76, tilføje en enkelt ikon fra en cirkel uden fyld og slag:򝵀 med en jeg indeni.,, skridt 77, bringe statistikkerne regning.tegn en inaktiv regning, hvis det er nødvendigt.,, skridt 78: sidebar menu, aktivere rektangel, værktøj og tegne et rektangel med store tab.en fyldt til&#eeeeee og slagtilfælde til&#cbcbcb.,,, skridt 79, udarbejde en afrundet rektangel.sæt den fylde en stigning fra&#d6d6d6d til&#f3f3f3 og slagtilfælde&#c1c1c1.dette er baggrunden for en inaktiv menu, gå 80, overlapper de afrundede rektangel.skifte farve for at fylde gradient fra&#ef6526 til fa834d og slag:&#f16424.den anvendes for aktive menu.sørg for, at det i henhold til lille trekant af statistikkerne regning.,, skridt 81, to første rundes rektangel til at lave flere baggrund for inaktive menuer.,, skridt 82, tilføje tekst på den knap.dobbeltklik sin lag at tilføje lag - drop shadow.for inaktive menu, brug mørkt tekst og lette drop shadow.,,, skridt, 83, aktiv menu, hvide tekst og mørke drop shadow.,,, skridt 84: søgning kasse, udarbejde en afrundet rektangel.ingen grund til at bekymre sig om sin fylde eller slagtilfælde, skridt 85 for sin fylde, lad os bruge samme stigning fra tidligere aftale menu.aktivér vej udvælgelse for og vælge den form.højreklik og vælge kopi udfylde.,, skridt, 86, vende tilbage til den nye form, ikke klik og vælge pasta udfylde.,, skridt 87, åbne fylde mulighed fra mulighed, bar og klik ikon under gradient forpremiere vende sin gradient retning.,, skridt 88, gentager samme proces for slag om.,,, skridt 89, tilføje indre skygge med følgende indstillinger.,, gå 90, aktivere type redskab og hvide knap mærke.tilføj lag stil drop shadow.,,, træder 91, tilføje en lille trekant peger nedad.fyld:&#eeeeee og slag: ingen.tilføje samme drop shadow som knap mærke.,,, step 92, tilsæt 1 px linje, som adskiller etiket og pil.dets farve til&#b04312 og så tilføje et let fald i skyggen med vinkel 180 &grader,.,,, skridt 93, lad os tilføje en mini - her symbol på knappen.start ved at trække en cirkel vej med størrelse 10 x 10 forsyning.fastsætte sit slagtilfælde hvid, med størrelse: 2 pkt., og fyld til ingen.,, skridt, 94, tilføje en 2, punkt linje ved siden af en cirkel med 45 &grader; vinkel.,,, skridt, 95, igen, og der tilsættes samme fald skygge til her ikon.,,, skridt 96, udarbejde en afrundet rektangel ved siden af den knap.use fylde gradient fra&#ededed for hvide og 1 pt slagtilfælde&#c1c1c1.,,, skridt 96, tilsættes små tekst i form.vi ønsker, at det skal være diskret.så bruger vi en meget lys grå (# b0b0b0).,, skridt, 97, lad os tilføje en mini - ikon.start ved at trække en lille cirkel, form og så tilføjer et plus tegn fra to afrundede rektangel.sæt plus tilstand, til at fratrække foran form.vælg tegnet form ved hjælp af sti udvælgelse værktøj, og så dreje det 45 &grader,,,,,,, sidste billede, endelig!vi har draget en vektor figur helt i photoshop.det var meget svært i tidligere udgaver af photoshop, men som du kan se, photoshop cs6 virkelig hjælper at strømline vores arbejdsgang.jeg håber du har nydt godt af disse nye teknikker, og denne forelæsning.tak for at læse.


























































































































































Previous:
Next Page: