design en ren e - websted grænseflade i photoshop,,,,,,, huske mode butik gratis?i dag vil jeg vise dig, hvordan at skabe dette websted i adobe photoshop rent e - grænseflade.denne lektion er ikke kun fyldt med mange photoshop teknikker, men også design begreber, som går ud over de "sådan" - del, som jeg er sikker på, du vil ikke gå glip af.så lad os komme i gang!,,,, mode - butik, gratis, for det første vil jeg gerne rose sunil, som faktisk udviklet denne grænseflade.jeg har foretaget et par ændringer i udformningen, såsom omlægning af det i henhold til et gitter.,, tegning, din idé, hold dine tegninger løs og hård.,, før vi hopper ind i adobe photoshop, skal vi tage et øjeblik til at tænke over, hvordan vi vil strukturere vores design.lad os få en pen og papir, og begynder at tegne vores trådnet. når vi er at skabe et trådnet, vi skitsere vores side til at afprøve forskellige visuelle praktikophold for hvert element i vores side.så det, vi gør, er at tænke på, hvordan bestemmelser fungerer bedst sammen på den side, og hvordan de bedst forholder sig til hinanden.vi skal også overveje, hvilke elementer der bør understreges, og der skulle ikke på dette stadium bør vi holde op med at bekymre dig om, hvordan specifikke elementer vises, og tænk på, hvad den samlede område design kan blive. desværre, for jeg har ikke skabt det her layout fra bunden, jeg har ikke en skærm, skudt af tegnet trådnet for at vise dig.men én ting vil jeg sige: hold dine tegninger løs og hårdt.de behøver ikke at være smart eller kunstneriske. hvis du er ny her, her er din første opgave: prøve at tegne det endelige design eller andre eksisterende websted, du kan lide.dette vil hjælpe dig meddelelse med elementer på en webside. yderligere oplysninger:,, 18. gode eksempler på to - wireframes og mockups, hvorfor tegnede skitser og wireframing idéer styrker design, at skabe en grayscale trådnet, nu har vi skitseret nogle ideer, det er tid til at gøre disse skitser til et mere solidt trådnet.vi begynder at skabe et grayscale trådnet, hvor alle layout og type behandling vil være til stede, men der vil ikke være nogen farve, tekstur, billeder osv. her er, hvordan vores endelige grayscale trådnet bør se ud:,, layout: sammensætning, før vi begynder at arbejde på vores modellen i adobe photoshop, vi har nogle beslutninger. første, vores udformning vil blive en fast indretning, betyder det, at de aspekter af vores udformning vil blive specificeret i et bestemt antal pixel.vores udformning vil blive 940px - - som du kan se på billedet nedenfor, uanset om det er anført på en mindre eller større vindue, dens størrelse er den samme.,, layout: nettet ved hjælp af et net gør det meget nemmere at tilpasse vore bestemmelser og træffer afgørelse om deres størrelse.i denne udformning, vi vil bruge denne baseline - nettet, der er skabt af fede fyre på teehan + lax.det er en 6px baseline - nettet sammen med 960 elforsyningsnet, yderligere behandling:, som vi går videre, vil vi drøfte, hvordan at tilpasse vores tekst og elementer, men nu skal du læse denne artikel for at få en idé om, hvordan man bruger den net.,, at hurtigere med en baseline - nettet,, layout: hvidt rum, hvid eller negative er rummet mellem elementer i vores interface.rummet mellem vigtige elementer er makro - hvide rum.små hvide rum er det hvide rum mellem elementer som f.eks. liste over poster, rummet mellem en legende og et billede eller rummet mellem ord og breve. hvide rum hjælper holdning mærker og konstruktører bruger hvide rum i deres design for at give dem en følelse af raffinement og luksus.så det er noget, som vi bør tage sig af, mens vi er ved at designe.,, typografi: typografiske skrifttyper, bør vi altid vælge vores skriftsnit /skrifttyper omhyggeligt.at vælge den rigtige font er ikke let på alle, og du er nødt til at se på mange aspekter af valget med en skrifttype med en person, der vil give det rigtige budskab, for, hvordan det vil se ud om browser.jeg vil ikke gå i detaljer, men jeg vil gerne nævne et par stillinger, som jeg fandt meget interessant: yderligere oplysninger:,, en nybegynder er vejledning til parring skrifttyper, hvordan du skal vælge en skrifttype, "hvad skrifttype, skal jeg bruge?"- fem principper for valg og brug af typografiske skrifttyper, at vælge den rigtige skrifttype: en praktisk vejledning om typografi på nettet, vælge dit web skrifttyper klogt, om valget af type i vores grænseflade bruger vi de tre følgende skriftsnit: helvetica, en ren og moderne skrifttype, som siger det hele.georgien, med en skrifttype, der vækker royalty og har en alvorlig tone.bebas, med en skrifttype, der har den autoritet, og det er en dristig udtalelse, altid at lave en pointe.,,, helvetica neue: organ kopi (standard skrifttype).,, bebas: positioner (download).,, georgien,: anden hen elementer (standard skrifttype, typografi). hierarki, "typografiske hierarki" blot beskriver, hvordan forskellige typografiske skrifttyper, vægt og størrelse af skrifttyper struktur et dokument, i form af minimumsskriftstørrelse, baseline - net, har vi besluttet at anvende er designet til at være i overensstemmelse med standard minimumsskriftstørrelse, det er derfor, vi holder med dem.disse størrelser, vise sig at være meget nyttig, når det kombineres med førende hidrørende fra tre.så her er den vigtigste pixel størrelser for vores interface:,,, 24px,: h1 pos.,, 18px: h2 pos.,, 14px, h3, navigation og pos.,, 12px: organ kopi med en førende værdi af 18px.,, men i samråd med bannere og var indhold område, vil vi ende med et par andre forskellige størrelser (efter alle de reklamer vil blive erstattet i tide), men de vil være standard minimumsskriftstørrelse, som for vægt, jeg går fra romersk lavere sag til dristige lavere.ikke noget kompliceret.,, typografi: førende, kerning &, sporing, som jeg allerede har sagt, at vi vil bruge førende (linjeafstand) værdier baseret på nettet, som skal være: 18px, og 21px. vores kerning vil være metrikker for organ tekst, og optiske for rubrik (se yderligere læsning).og endelig vil vi bruge misligholdelse - værdier (0) for alle teksten. yderligere oplysninger:,, målekriterier og optiske kerning, typografi: anti - aliasing, her er en fremragende artikel.du skal læse det her.jeg siger ikke et ord, bortset fra krop kopi (lille størrelse), bruger vi skarpt, og positioner (større punkt størrelser) vi bruger crisp.,,, der trykker af typografiske anti - aliasing, trin 1: oprettelse af dokumentet, nu hvor vi har truffet nogle beslutninger, der er tid til at åbne adobe photoshop og begynde at skabe vores trådnet.så åbn det dokument, som vi tidligere har kaldt "grid2. psd".den første ting, vi skal gøre, er at vælge alle de eksisterende lag i dokumentet, bortset fra folder kaldet "mærker" - - og slippe af med dem, eller en gruppe dem i en mappe og gemme dem for nu.før vi går videre, lad os vælge den "mærker" mappe og klik &ldquo, lås alle ” knap i lag - panelet, skal vi nu til at ændre højden af vores dokument, fordi vores endelige udformning er højere end de eksisterende dokument.for at gøre det, vil vi gå til image> lærred størrelse, ændre højden til 1540px og sikre, at anker til top center.,, så klik på> statister (på vores guider) ledere (på grund af ledere) og kom (så de ting, vi skal skabe kan kom til vejledninger).,, trin 2: at skabe baggrund, begynder vi med at skabe vores baggrund.skabe et nyt lag, give det et navn ("bg" for eksempel), så tag det rektangulære markise værktøj (m).skabe et valg i hele lærred, og for at udfylde det klik forskydning + backspace, brug: farve...fyld udvælgelse med denne farve værdi:&#f5f5f3.bemærker, at farven værdier, vi bruger i grayscale modellen ikke er de endelige værdier, men vi skal bruge dem til at differentiere vores side elementer.,, trin 3: oprettelse af den øverste bar, lad os skabe de bedste bar.igen tage rektangulære markise værktøj (m), skabe en udvælgelse af 1260x45px, og fyld den med denne farve værdi:d2d2d.,, vælges den horisontale type redskab (t), type din navigation, anvendes følgende karakter indstillinger til det:,,, skrifttype,: helvetica neue lt kønssygdom.,, vægt,: 55 roman.,, størrelse: 12px.,, kerning: målekriterier.,, farve:.,, anti - aliasing, sharp., til at sikre, at vores tekst er i overensstemmelse med den baggrund, udtage begge lag (teksten lag og baggrund lag) og klik på tilpasse vertikale centre i kontrol bar.,, trin 4: at skabe tegn i form af type "under" ved hjælp af den horisontale type redskab (t), anvende følgende karakter indstillinger til, og sørg for at tilpasse det billedet nedenfor.,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 75 dristige.,, størrelse: 12px.,, kerning: målekriterier.,, farve:&#ffffff.,, anti - aliasing, sharp.,, lad os skabe input - områder.ved hjælp af de afrundede rektangel værktøj (e) skabe to afrundede rektangler, hver af dem skal være 127x26px, med 15px radius.fyld dem med denne farve værdi: og tilpasse dem som billedet nedenfor.,, type, de to ord "bruger" og "kodeord" i de to områder, med følgende karakter indstillinger, der anvendes til dem og bringe dem i overensstemmelse med billedet nedenfor:,,, skrifttype,: helvetica neue lt kønssygdom.,, vægt,: 55 roman.,, størrelse: 12px.,, kerning: målekriterier.,, farve:&#ffffff.,, anti - aliasing, sharp., - - skaber vi vores "go" - knappen med afrundede rektangel værktøj (u), men denne gang 33x25px rektangel med 25px radius.så type ordet "gå" i det ved hjælp af samme karakter, der i det foregående image, men ændrer sin vægt 75 dristige, tag linen værktøj (l), skabe en række 1x25px og fylder den med hvide.- type "skilt" ved hjælp af samme art, der er anført i det følgende billede, også bringe alle de elementer, vi har skabt i dette skridt i henhold til det.,, løntrin 5: at skabe en reklameplads, lad os bruge den rektangulære markise værktøj (m) for at skabe et rektangel med 480x60px, fyld den med og tilpasse det i billedet nedenfor.det burde virke som en indikation af en art til en reklameplads.,, så giv den her et slagtilfælde.billedet viser de indstillinger, vi vil have.,, trin 6: at skabe logo, praktisk taget vores logo, burde ikke være konstrueret i adobe photoshop, men nu vil vi kun skabe skabe det her.So grab the Ellipse Tool (U), create a circle of 60x60px, fill it with this color value: #2d2d2d, and align it as shown the image below., ,Type the letter "F" using the following character settings, and align it according to the following image:, ,,Font,: Avant Quelombre.,,Size,: 53.65px.,,Color,: #ffffff.,,Anti-Aliasing,: Crisp., ,Then type the word "Fashion" and apply the following character settings to it:, ,,Font,: Avant Quelombre.,,Size,: 30px.,,Kerning,: Optical.,,Color,: #2d2d2d.,,Anti-Aliasing,: Crisp., ,And "Store" with the following character settings:, ,,Font,: Georgia.,,Weight,: Regular.,,Size,: 12px.,,Kerning,: Metrics.,,Color,: #767676.,,Anti-Aliasing,: Sharp., ,Make sure you place them both according to the image below., ,Step - 7: at skabe sejlads bar i dette skridt, vil vi skabe vores navigations - bar.bare tag det rektangulære markise værktøj (m), skabe en udvælgelse af 940x48px, fyld den med denne farve værdi:&#c3c3c3, og putter 20 pixels under annoncer i billedet nedenfor.,, vi går hen og tag den horisontale type redskab (t) og type titler på vores de sider ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: bebas.,, vægt, nemlig regelmæssige, størrelse: 14px.,, kerning: optiske.,, farve:d2d2d /&#ffffff.,, anti - aliasing: crisp.,, lad os nu separate titler vi har skabt.ved hjælp af linjen værktøj (u), skabe en lodret linje mellem hver to titler, fyld den med denne farve værdi:&#b4b4b4, og sikre, at forlade 20px mellem hvert afsnit og lodret linje.,, trin 8: at skabe ned menu, lad os skabe en ud menu, skal vi?tag det rektangulære markise værktøj (m), skabe en udvælgelse, der fylder rummet mellem to omkring linjer af ordet "kvinder" og fylder den med denne farve værdi:d2d2d. så skabe endnu en udvælgelse af 340x147px, fyld den med samme farve, værdi og tilpasse den efter billedet nedenfor.det vil tjene som baggrund for vores ud menu.,, rammer de (t) knap på dit tastatur til at udvælge de horisontale type redskab (t), og begynd at skrive de elementer af sub - menu, ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman, størrelse: 12px.,, kerning: målekriterier.,,, der: 30px.,, farve:.,, anti - aliasing, sharp. og endelig, sørg for, at de er tilpasset som følgende billede.,, hvad vi skal gøre nu, er at at skabe en ramme for et billede, hvor vi får et billede af en kvinde, bare for at fortælle brugeren, du har valgt "kvinder").så tag det rektangulære markise værktøj (m), skabe en udvælgelse af 139x105px, og fyld den medf1f1f, skabe en udvælgelse af 121x87px og fylder den med.sikre, at centre for de to kvadratisk eller rektangulær form, ubearbejdet, tilpasses horisontalt og vertikalt.,, trin 9: at skabe eftersøgningen bar, lad os gå videre og skabe et bidrag inden for vores søgen bar.tag de afrundede rektangel værktøj (u), skabe et rektangel med 123x26px, med 15px radius, og fyld den med hvide.glem ikke at bringe det som vist i billedet nedenfor., med fedt horisontale type redskab (t), type "leder" i afrundede rektangel og anvende følgende karakter indstillinger til det:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman.,, størrelse: 12px.,, kerning: målekriterier.,, farve:.,, anti - aliasing, sharp.,, finde et ikon for et forstørrelsesglas og sted på højre side af søgningen bar, sørg for at det er farvet med og justeret efter det billede nedenfor.,, trin 10: at skabe eftersøgningen bar, lad os begynde at skabe "var indhold" område.start med at oprette et udvalg af 640x315px med rektangulært markise værktøj (m), og fyld den med&#c3c3c3.,, lad os skabe den bar, hvor et budskab om den var produkt går.tag det rektangulære markise værktøj (m), skabe en udvælgelse af 480x33px, fyld den med denne farve værdi: og tilpasse det som vist i billedet nedenfor., vælges den horisontale type redskab (t) og type en besked efter følgende karakter om:,,, skrifttype,: helvetica neue lt kønssygdom.,, vægt,: 55 roman.,, størrelse: 14px.,, kerning: målekriterier.,, farve:&#ffffff.,, anti - aliasing, sharp.,, glem ikke at bringe teksten og baggrund som påvist,.,,, det er på tide at type nogle indledende tekst.tag den horisontale type redskab (t) og type "samling" ved brug af følgende karakter indstillinger:,,, skrifttype,: georgien.,, vægt,: dristigt.,, størrelse: 18px.,, kerning: optiske.,, farve:d2d2d.,, anti - aliasing,: levende, så type "sommer" ved brug af følgende karakter indstillinger:,,, skrifttype,: georgien.,, vægt,: dristigt.,, størrelse: 48px.,, kerning: optiske.,, farve:&#ffffff.,, anti - aliasing: sprøde., og endelig type "hjalp du ser cool" med følgende karakter indstillinger anvendelse for det:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman.,, størrelse: 18px.,, kerning: optiske.,, farve:d2d2d, anti - aliasing.,: crisp.,, sørg for at tilpasse vores tekst som vist i billedet nedenfor.,, trin 11: at skabe salg et, lad os skabe vores salg navneskilt.brug den ellipse værktøj (u), for at skabe en 80x80px cirkel, fyld den med denne farve værdi:d2d2d, så det som vist i billedet nedenfor.,, type en tekst i denne cirkel (40% af "f.eks.) og anvende følgende karakter indstillinger til det:,,, skrifttype.: georgien.,, vægt,: løbende /dristige.,, størrelse: 48px /14px.,, kerning: målekriterier.,, farve:&#ffffff.,, anti - aliasing: crisp.,,, trin 12: at skabe det vigtigste område, lad os gå videre og begynder at skabe vores vigtigste område.vi begynder med titlen, så tag den horisontale type redskab (t), type en titel, og anvende følgende karakter indstillinger til det:,,, skrifttype,: bebas.,, vægt, nemlig regelmæssige, størrelse: 24px.,, kerning: optiske.,, farve:d2d2d.,, anti - aliasing: sprøde.glem ikke, at det var 20px under område., med de horisontale type redskab (t) stadig udvalgte, - en hurtig beskrivelse for dette afsnit af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt, størrelse: 55 roman.,,, - 12px.,, kerning: målekriterier.,, farve:.,, anti - aliasing, sharp.,, og det bør tilpasses i henhold til baseline - nettet som vist i billedet nedenfor.,,, der benytter strækningen værktøj (u), skabe en linje, der er 640px bred og farve det med denne værdi:&#e5e5e5.,, trin 13: at skabe produkt billeder, tag det rektangulære markise værktøj (m), skabe en udvælgelse af 200x152px, fyld den medd2d2d og tilpasse det 20px under den linje, vi har lige skabt.,, skabe en salg, som den, vi har skabt i trin 11, men denne gang gøre kredsen 45x45px og fylder den med hvide.teksten bør være 24px /14px og fyldt med.,, brug den horisontale type redskab (t) til type, navn og prisen på det pågældende produkt ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman.,, størrelse: 12px.,,, der: 21px.,, kerning: målekriterier.,, farve: /�.,, anti - aliasing, sharp.,, vi fylder den tomme plads mellem teksten med et ikon - i tilfælde af, at du tænker.,, et ikon i en indkøbsvogn, sted i det tomme rum, vi er tilbage i det foregående trin og tilpasse det som vist i billedet nedenfor. hvis ikon er farvede, gå i lag> ny justering lag> sorte og hvide...for at gøre det grayscale.,, vælge alle produktets forpremiere elementer, som vi, der er blevet skabt i dette skridt, og gruppen dem sammen, så gentage denne mappe, fem gange.tilpasse seks produkt forpremierer som vist i billedet nedenfor, punkt 14: at skabe store sidebar banner, lad os arbejde på vores gruppemøde.vi starter med store banner, så tag den rektangel værktøj (u), skabe en 280x314px rektangel og fylder den medd2d2d. med værktøj stadig udvalgte skabe en rektangel med 280x41px og fylder den med og tilpasse dem begge som vist i billedet nedenfor., ved hjælp af den horisontale type redskab (t), type en titel for dette banner ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: bebas,, vægt, nemlig regelmæssige.,, størrelse: 18px.,, kerning: optiske.,, farve:&#ffffff.,, anti - aliasing: crisp.,, - (e) er nøglen til at udvælge de ellipse værktøj (u), skabe en kreds, der er 210x210px, fyld den med� og forsøge at bringe det på en måde, som på billedet nedenfor.,, nu for at slippe af med den del af cirklen, der går ud af banner baggrund, åbne lags panel, lagde lag af cirklen ("tag_bg") lige over lag af banner baggrund ("box_bg"), så klik på cirklen er lag> skabe det maske. nu ved hjælp af horisontal art værktøj (t), type en tekst i denne kreds, ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: georgien, vægt, nemlig regelmæssige, størrelse: 18px /14px /24px /30px.,, kerning: optiske.,, farve:&#ffffff.,, anti - aliasing: sprøde., også sikre, at "falsk dristige" karakter - panelet er udvalgt.,, trin 15: at skabe en mindre sidebar banner, tag rektangel værktøj (e) og skabe et rektangel med 280x144px, fyld den medd2d2d, og placere det i henhold til billedet nedenfor.,, lad os skabe "mere" knappen.brug det rektangulære markise værktøj (m) at skabe en udvælgelse af 120x30px og fylder den med. så tag den horisontale type redskab (t), type "mere" inden for det rektangel, ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55, roman.,, størrelse: 18px.,, kerning: optiske.,, farve:&#ffffff.,, anti - aliasing: sprøde., med den horisontale type redskab (t) stadig udvalgte, type en tekst som i det billede, under anvendelse af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman.,, størrelse: 14px /24px /18px.,,, der: 24px.,, kerning: optiske.,, farve:&#ffffff.,, anti - aliasing: sprøde.,, billedet nedenfor viser, hvordan man tilpasse teksten.,, en kopi af det op og forlade 20px vertikale afstand mellem dem, trin 16: etablering af "twitter opdatering" afdeling, skabe en udvælgelse af 280x235px med rektangulært markise værktøj (m), fyld den med hvide, og det 20px under banneret.,, tag den horisontale type redskab (t) og type et afsnit med følgende karakter indstillinger:,,, skrifttype,: bebas.,, vægt, nemlig regelmæssige, størrelse: 18px.,, kerning: optiske.,, farve:d2d2d., anti - aliasing: sprøde., ved hjælp af linjen værktøj (u), skabe en linje, der er 240px bred og fylder den med denne farve værdi:&#e5e5e5.,, finde et ikon /illustration af twitter - fugl, og det er som på billedet nedenfor.også sørge for at gøre det grayscale, således som vi gjorde det i en tidligere fase.,, tag den horisontale type redskab (t) og type, en tekst, som er et eksempel på et fløjt, anvendes følgende karakter indstillinger til det:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55, roman. størrelse: 12px.,,, der: 18px.,, kerning: målekriterier.,, farve:d2d2d /.,, anti - aliasing: sprøde., så type "mere tweets" ved brug af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman.,, størrelse: 12px.,, kerning: målekriterier.,, farve:d2d2d.,, anti - aliasing: sprøde.,, glem ikke at klikke på "understreger" karakter panel.,, skridt 17: etablering af "andre produkter", tag rektangel værktøj (e) og skabe et rektangel med 940x264px, fyld den med&#ffffff, og 20px under "twitter opdatering"., skabe en titel dette afsnit er nøjagtig den samme som den, vi har skabt i de foregående trin.- så brug linje værktøj (u), for at skabe en 898px bred overensstemmelse og fylder den med&#e5e5e5.,, anvende rektangel værktøj (u), for at skabe en 178x113px rektangel.tre eksemplarer af det og tilpasse dem efter billedet nedenfor.,,, - nogle oplysninger om produkt - og anvende følgende karakter indstillinger til deres tekst:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman.,, størrelse: 12px.,,, der: 18px.,, kerning: målekriterier.,, farve:d2d2d /.,, anti - aliasing: sprøde., og glem ikke at lave "køb nu" understreget.,, finde et ikon, af en pil, og som på billedet nedenfor, prøv at resize det noget omkring 28x28px, og fyld den med denne farve værdi:d2d2d. en kopi af denne ikon, og læg den på højre hånd. side.,, gå 18: at skabe fod område, tag det rektangulære markise værktøj (m) og skabe en udvælgelse af 1260x122px, fyld den medd2d2d.,, type en tekst i den fod, ved anvendelse af følgende karakter indstillinger:,,, skrifttype,: helvetica neue lt standardafvigelse, vægt: 55 roman, størrelse: 12px.,,, der: 21px.,, kerning: målekriterier.,, farve:&#ffffff /.,, anti - aliasing: sprøde.og endelig en kopi af logoet og sørge for, at det er i overensstemmelse med i billedet nedenfor, og sådan er det!,, farve - kombination, men når vi er færdige med vores grayscale trådnet, det er tid til at fokusere på at male vores interface.farve er et meget stort emne, så jeg vil kun gå gennem den farve kombination.vores farver, vil indeholde tre typer af farver:,,, der er underordnet eller uædle farve: dette er et visuelt svage eller underordnede farve.det er i modstrid eller supplerer.,, dominerende og vigtigste farve: det definerer den kommunikative værdier af farven kombination.,, accent eller fremhæve farve: dette kan være positivt indstillet over for basis - eller vigtigste farve.eller i stedet, du kan vælge en accent farve, der er visuelt stærke og ser ud til at konkurrere med de vigtigste farve, med henblik på at skabe spændinger i kombination, følgende billede viser vores base, hoved - og accent farver.,, værelse, da vi vil bruge nogle portrætter i vores design, - jeg vil kort tale om "efter room".generelt et portræt fotografi vil have et emne og område omkring dem.den visuelle interesse i dette portræt kan komme fra bevægelighed, det er sådan, vores øjne bevæge sig rundt i skud.og få øjnene bevæger sig, fotografen tilpasser område omkring emnet i overensstemmelse hermed., så f.eks. som du kan se på billedet nedenfor, tilpasning af hensyn til venstre (1), med det hvide rum (se rummet), til højre, skaber bevægelse (3), som gør vores øjne se i den retning, hvor emnet er ude.,, yderligere behandling:,, en praktisk vejledning til udarbejdelse af ansigter, du ser, når de ser, gå 19: farver baggrund, lad os begynde at farve vore grænseflade.for at udfylde den baggrund lag med farve, kan du klikke på sin virksomhed beskrevet i lag - panel og have cmd /ctrl nøgle for at udvælge sine pixels så klik forskydning + backspace> farve - ->&#f6f6f4.eller du kan tilføje et farve - overlay til det. gå 20: farver toppen bar, farve, ordet "tegn" med denne farve værdi:&#ffffff "brugernavn og kodeord" med:e8e8e, input områder mede8e8e, baggrunden for "og" - skiltet op. "# ea6a53 og navigation tekst med.,, fylde reklameplads med et image som vist i billedet nedenfor, og at skabe det maske for den, ligesom vi gjorde i punkt 14.,, tid til at farve det logo.giv den cirkel, og ordet "og" denne farve værdi:d2d2d, fyld "f" med samme farve som baggrund&#f6f6f4, og ordet "forretning" med&#bc3726.,, gå 21: farver sejlads bar, vi fylder navigation baggrund tekst med denne farve værdi:&#c3c3c3 teksten medd2d2d, ordet "kvinder" med&#f6f6f4 (der repræsenterer svæv /udvalgte stat), og den vertikale adskillelse af strækninger med med&#b4b4b4., med henblik på at tilføje mere visuel interesse for sejlads tekst, vil vi tilføje en dråbe skygge til det.billedet viser miljøer...,, flytter til søgning bar, vi fylder input område med hvide&#ffffff, ordet "leder" med&#a6a6a6 og ikon med&#ea6a53.,, lad os give vores ubåd navigation bar nogle farver... fyld baggrund medd2d2d teksten med&#c4c4c4, og grænsen for det billede medf1f1f.,, vi får billedet grænsen en smule mere interessant ved at tilføje et drop shadow og en indre skygge til det.alle de indstillinger kan ses på billedet nedenfor. og endelig et billede af en kvinde model som vist i billedet nedenfor.,, nu er det tid til at skabe de stiplede linjer mellem sejlads poster.åbne adobe illustrator, skaber et nyt dokument, udvælge linjesegment redskab (er), skabe en linje, der er 135px bredt, og fyld den med ingen (/).så åbne slagtilfælde panel og justere deres indstillinger i henhold til billedet nedenfor.,, modtaget den stiplede linje og sæt det ind i adobe photoshop, to kopier af den, og fylde dem med denne farve værdi:.,, skridt 22: farve, den store konference banner, vi starter dette skridt fra sætte et billede til at udfylde den baggrund af banner.gå til fil> sted...> udvælge et billede>.,, lad os gå videre og farve cirklen med teksten i den.farven værdier, vi skal bruge, er vist i billedet nedenfor., med henblik på at gøre antallet "50" stå her lidt, vi vil anvende en dråbe skygge til lag, der indeholder.indstillinger kan ses på billedet nedenfor.,, tid til at arbejde med titlen... fyld baggrund af det med denne farve værdi:�, og teksten med den farve værdi:&#c3c3c3.så skabe to stiplede linjer (som den, vi har skabt i trin 21) fylde dem med og placere dem som vist i billedet nedenfor.,, lad os tilføje nogle visuelle interesse for afsnit baggrund, ved at tilføje en diskret grunge konsistens til det.downloade denne fantastiske børste fastsat: "funktion diskret grunge pensler" skabt af den seje fyre på wefunction eller andre børster du foretrækker.skabe et nyt lag lige ovenover titlen baggrund lag, samtidig med at den udvalgte, maling i afsnit med en af de børster med pensel værktøj (b) (eller måske kan du bruge en af de pngs indgår i stedet) fyldes med hvid, reducere lag er uklarhed ned til 30%.endelig right-click på> skabe udklip maske... gå 23: farver det viste område, skal vi udfylde den baggrund af var område med en hældning, for at få det til at se mere interessant.så gå videre og tage gradient værktøj (g), åbne gradient redaktør fra kontrolpanelet, og sæt din farve værdier fra&#b6a397 til d8a83., er vi nødt til at præcisere det område, der er fyldt med hældning, og det gør vi ved at foretage en udvælgelse over det.så lad os gå til lag - panelet, klik på den baggrund lag 's virksomhed beskrevet og have cmd /ctrl er nøglen til at foretage en udvælgelse, over det, og med gradient værktøj (g) stadig udvalgte, udvælge radiale gradient, og trække fra, som vist i billedet nedenfor og have skiftet nøgle til at begrænse den engel.,, farven værdier af de elementer i dette afsnit er anført i billedet nedenfor. for at få et billede af en kvinde model, sted i vores dokument, og tilpasse det i henhold til nettet som vist i billedet nedenfor.,, skridt 24: farve de små sidebar bannere, igen. vi sætter endnu et billede, som baggrund for vores banner, og brug den farve værdierne i billedet nedenfor til farve vores elementer, for at gøre vores tekst står lidt mere,vi giver det et drop shadow.de indstillinger, kan ses på billedet nedenfor.,, og vi vil gøre det samme med de øvrige banner...,, så lad os give nogle farver til "twitter opdatering" afdeling... billedet nedenfor indeholder alle de farver, værdier, som bør vi bruger til dette afsnit, gå 25: farve de vigtigste område, vi starter med titlen, fyld den med denne farve værdi:d2d2d, så beskrivelsen med denne værdi:, så spil med&#e5e5e5.,, flytter til produktet forsmag... første indtryk af produktet, så er alle elementer med de værdier, de ses i billedet nedenfor.,, elementer i "andre produkter" afsnit, skal være farvet med de samme værdier, som er angivet i det foregående trin, sørg for at udfylde den baggrund med hvide&#ffffff,og pil ikon med鼃.,, påvirker den lille område, udfylder den fod baggrund med denne farve værdi:d2d2d, og teksten med&#a0a0a0 og&#ffffff., og endelig de farver af logoet, er vist i nedenstående billede...,, konklusioner, og det er stort set det!jeg håber du har nydt at læse denne forelæsning, og, hvad vigtigere er, så har du fundet det nyttigt.hvis du har nogen spørgsmål, så tøv ikke med at forlade en bemærkning, og jeg vil gøre mit bedste for at hjælpe.
