fremstilling af coffeeaddict: en vejledende træ design (fri psd og html).,,,,,,, godt design bør ikke gå til spilde.denne plan blev gjort til en kunde, som aldrig har betalt, og da der ikke var en overvældende positive tilbagemeldinger, har jeg besluttet at skabe en forelæsning om det.rige & cremet stofvirkninger give dette design en enestående tema.håber, du elsker kaffe!,,,, kilden filer, er vi ikke kun at give de photoshop filer til denne plan, vil vi også give væk, så du kan se http: //filer, hvordan det er i kode efter projekteringsfasen.du burde arbejde med denne lektion fra starten, men bare tag kilden filer samt., at vores dokument, som med enhver anden konstruktion, vi får brug for en god net til at komme i gang.jeg begynder altid med et dokument, der er 960px bred (som vil blive bredden af vores side).sørg for at give deres dokument tilstrækkeligt højde, der gør det muligt for alle de elementer, vi skal skabe &mdash, valgte jeg 1100px. træk retningslinjer til de sider af deres dokument.disse vil fungere som afløb for vores design område, som vil blive 960px bredt.også trække retningslinjer på 10px og 960px på horisontalt.disse vil fungere som en mand til at holde alt hugget op, når vi går ned af siden. når du har din retningslinjer, gå til image -> lærred størrelse og ændre den værdi af deres sejl bredde, 1000px.det vil give os et lille ekstra plads til at arbejde med på det ydre, og viser, hvordan webstedet vil udvide i browseren. den øverste venstre hjørne i deres dokument, burde se sådan, er vi nødt til at skabe nogle retningslinjer, som vi har et par piller løber lodret ned af siden.skabe 6 flere lodrette retningslinjer på 330px, 350px, 650px, 670px, 730px og 750px.de skal hjælpe os med at komme hen og holde alt sammen.,, skabe baggrund, vi hopper i baggrunden.vi er naturligvis for brown, fordi det er rigdom (og det er farven på kaffe).start ved at skabe et nyt lag, og udfylde hele dokumentet med farve (vi vil ændre det med lag stilarter).du kan gøre det her hurtigt ved at slå på skift + f5 - "fylder"., kalde det lag "bg", og klik på lag palet og udvælge "blanding muligheder".vælg "gradient overlay", og skabe en stigning fra𐜃c tile1308; vi vil have de mørkere brun øverst på denne side, og den lettere brown på bunden.,, nu er vi nødt til at tilføje en lille struktur, så den gradient ser ikke så flad.skabe et nyt lag, over din "bg" lag, og navnet på denne lag "mønsteret".,, ramte kommando + at udtage alle, med hele den udvalgte dokumenter, ramte forskydning + f5 at udfylde det lag, vælg din yndlings - — jeg har skabt mit tidligere, men du kan godt tons pixel mønstre her på tileables. afhængigt af farven på dit mønster, kan det være nødvendigt at tilføje et lag i stil med "farve overlay" med farvec2919.,, bør resultatet være sådan noget, skaber den gule navigation bar, nu hvor vi har vores baggrund har skabt, vil vi gå videre og begynde at indføre nogle af de elementer, på side &mdash. jeg begynder med det fine gule navigation bar., skabe et nyt lag - gruppen og kalde det "navigation".i "navigation" gruppe, skabe en udvælgelse, der er 100px høj og hele bredden af deres dokument.skabe et nyt lag, og ramte forskydning + f5 at udfylde lag.som din fylde farve, anvendelse&#edd38d (gul).kalde det lag "bg" inden for "navigation" gruppe.,,, du har din navigations - bar.det ser lidt fladt, så vi kan gå videre og tilføje nogle lag styles, til at gøre det stå her lidt mere.højre klik "bg" lag og udvælge blanding muligheder.,, drop shadow: uklarhed: 36%; vinkel: 90 grader, afstand: 5, spredning: 0, størrelse: 5, gradient - overlay -:&#b98045 til&#eacf9e,, "navigation" bar skal se sådan ud, når: igen har vi brug for en strukturen og mdash; ellers vil det ende med at se lejligheden.jeg brugte dette sand som tekstur, jeg havde liggende.det vigtige her er farven.du kan bruge en konsistens, du ville kunne lide, men farven, bør svare til det fylder farve, vi havde tidligere.tilføje denne struktur i et nyt lag over "bg" lag, vi tidligere har skabt, og det er uklarhed, til 30%.kalde det lag konsistens, og sikre, at det er den samme dimensioner som "bg" lag, ønsker vi at give lidt mere i dybden med den gule bar, så vi kommer til at skabe en mørk skygge manuelt på nederste kant.for at gøre det, foretage en udvælgelse på bunden af den gule bar og skabe et nyt lag,.,, udfylde denne nye lag med en hældning (forskydning + f5) fra gennemsigtig forf1408 (30% opacitet), der skulle gøre det for den gule bar.det skal se sådan noget, -, navigations - poster, skabe en ny gruppe ved navn "nav" og skabe alle de følgende tekst og lag i det. meget simpelt navigation, stort og let at læse.fonden er georgien, 30px.sørg for, at din tekst er god afstand mellem hvert ord (for at tage højde for mulige aktive stater).gør teksten farve𖦧f med aktiv post (i dette tilfælde),﬷b.,, at skabe de "aktive" understreger for sejlads, jeg brugte den børste værktøj til på en noget ret understrege.dette bånd logoet sammen med resten af stedet.må ikke bekymre dig, hvis du ikke får det på den første prøve og mdash; jeg tegnede det 50 gange, før jeg har fundet den, jeg kunne lide.,, vi har brug for "skilt" knappen.dobbelt navigation tekst (vælg teksten lag og command + j) og en ændring af ordlyden til "tegn". næste, udvælge de afrundede rektangel, værktøj og tegne et rektangel med radius 20px; dette vil give os den form omkring skiltet op tekst.,, sæt udfylde dette lag til 0%. og anvende følgende lag:, styles, indre skygge: ganger; uklarhed: 56%; farve:ɐb17; vinkel: 120 grader, afstand: 3px; kvæle: 0px; størrelse: 5px;, 1px slagtilfælde, ind med farve&#d1bc8d, logo på en serviet, skabe logoet jeg fandt en fri lager serviet og studset kanterne lidt.du kan finde din egen på: istockphoto eller andre frie områder. jeg har tilføjet et drop shadow, så det ud til, at den serviet sad over alt andet:, afstand: 0; spredning: 0; størrelse: 27px; farve:�, brugte jeg en bestand struktur af en kaffeplet (til at give lidt mere ægthed til vores kaffe stedet og serviet).du kan få brug for at ændre på den uklarhed, indtil det ser rigtigt ud.du kan også forsøge at blande tilstand i plet til at formere sig, så det er en smule mere, som for resten af logo, jeg valgte en håndskrift skrifttype og hurtigt trak en kop.intet er for vanskeligt her.,, gennemsøg kasse, vil vi nu skaber det gennemskinnelige - æske.skabe et nyt lag - gruppen under "gule bar" lag (, fordi vi ønsker, at den søgen bar skal anføres som en regning, som stikker ud under overskriften).din lag skal være noget i denne retning:, starter vi med at skabe de afrundede rektangel, der har søgningen bar i det.tag de afrundede rektangel, værktøj og skabe et rektangel, der er 300px bred og om 70px høj.sikre, at den rektangel, passer ind i vores "højre kolonne rendestenen" med de retningslinjer, som vi har skabt i de første trin af denne forelæsning.,, kalde det lag "containere", som er "container er fyldt til 0%, og der tilsættes en dråbe skygge: farve:� uklarhed: 45%; vinkel: 120 grader, afstand: 1px; spredning: 0px; størrelse: 5px, tilføje en stigning fra gennemsigtig forc2014,,, bør resultatet ser sådan ud:,, bagefter skal vi skabe input - æske med afrundede rektangel værktøj.skabe et rektangel med radius 5px, bredde: 280px, højde: 30px.det nye center rektangel i "beholder" rektangel, du tidligere har skabt.kalde det lag "bidrag", "bidrag" fyld til 0%, farve - overlay -:a på 43% opacitet, indre skygge: farve� vinkel: 120 grader, afstand: 1; kvæle: 0; størrelse: 5px, tag den tekst, værktøj og tilføje en tekst med&#af8753 som din farve.vælg din favorit materiel ikon (anbefaler jeg med iconfinder for ikoner)., 3, indledende kasser og mdash; browse /deltage /nyder, nu hvor vi har hele header skabt, kan vi nu komme ind på det egentlige indhold.vi skal skabe de 3 vigtigste spandevis af indhold.endnu en gang, tag afrundet rektangel redskab med en radius på 20px og skabe 3 afrundet kvadratisk eller rektangulær form i de tre kolonner, vi havde skabt tidligere.,, for at få disse kasser til at ligne hvad jeg viste bare på skærmbillede, anvende følgende lag styles:,,, jeg har fundet en god kaffe ikoner på nettet, der passer design perfekt, som jeg brugte på disse tre punkter.endnu en gang, vi gør brug af vores ressourcer og mdash; og ingen mening i at genskabe hjulet her. jeg så tilføjes en overskrift, med samme skrifttype, georgien, og nogle bulleted tekst, og denne del er gjort.,, de seneste undersøgelser, da udformningen bruger gennemsigtighed i design, følte jeg mig tabel styles ikke skulle være anderledes.tabellen er ren og enkel, som hjælper det falder i design perfekt. tag skiltet værktøj og skabe et kvadrat, udvælgelse, hvor du vil dit bord skal være.mit bord er 700px bred (efter de retningslinjer, vi tidligere), og 220px høj.,, at skabe et nyt lag, og udfylde dette lag (forskydning + f5) med en mørkere brun (jeg valgtec2014).kalde det lag "tabel bg" og uigennemsigtighed, til 70%.nu ved hjælp af en enkelt linje udvælgelse redskab, vi vil skabe adskillelse mellem søjler og rækker.når du har valgt, hvor vil du have din afsnit at være ramt slette og fjerne de fyldte pixels fra "tabel bg" lag, bør du har nu et godt bord net, som denne:,, jeg bruger georgien til at udfylde de celler med tekst, og jeg vil overlade det til dem at vælge farver /størrelser.sørg for at tilføje de vigtigste materialer, og tabel positioner. nu skal vi skabe de kreditvurderinger, ikoner.ved "pris" vurderinger, jeg valgte en skrifttype med en tyk dollartegn og anvendt nogle lag stil.når du finder din skrifttype, type i 4 dollartegn.gentage dette lag, så gør det rigtigt og type i 1 dollar tegn (de har separate lag stilarter, der anvendes for dem).for de "aktive" gule dollartegn, vil vi anvende følgende lag styles:,, og for den inaktive dollartegn, vi vil have dem til at se indpresningsdybde (som om, de ikke er fyldt).vi vil anvende forskellige lag styles her:,, for star - rating, jeg brugte photoshop skik form værktøj og valgte den stjerne.samme teknik, som vi brugte til dollartegn (simpelthen kopiere /pasta laget stilarter fra ovenfor), at stjernerne. din resultat skal være langs disse linjer:,, gruppe dette fælles træk, du skabte og kopiere den gruppe to gange, at det nedadgående at passe ind i nettet, du lavede før.det endelige resultat skal se sådan ud:,, mest aktive brugere, vores sidste hovedafsnit er den mest aktive brugere liste.vi skal fortsætte vores brug af georgien, men at tilføje en flot for de brugere, der ikke har avatarer.vil du se mønstret er faktisk fra ikonet i "browse" i rubrik nær toppen — den damp, der kommer fra her.endnu en fin detalje at binde designeren sammen.her er hvordan du skaber det. i højre kolonne rendestenen, tilføje overskriften (genbrug, hvad du havde skabt for "de seneste undersøgelser") og udfylde et rektangel med 40% opacitet (farve betyder ikke noget her.navnet på denne lag "beholder", og så vil vi tilføje nogle lag styles (farve - overlay - & apopleksi):,, bør resultatet være en uigennemsigtig kasse med en flot ydre grænse, som er mørkere end den indre baggrund:,, avatar, brug af mærket redskab til at skabe et 50px af 50px udvælgelse.skabe et nyt lag, og fylde deres valg med farve (forskydning + f5), nu skal vi tilføje nogle lag stil at gøre denne avatar ser lidt bedre for de brugere, der ikke har en avatar.,,, tilføje en tekst til brugerens navn og land, og den damp, der furer fra den kop, og at kopiere ro et par gange til at fylde rummet.,, fod, og endelig den fod.for at give en lille adskillelse, der er en mørkebrun til gennemsigtig gradient fra top til bund af en visuel linje for at bryde op i to dele.for at skabe denne adskillelse, brug skiltet værktøj til at foretage en udvælgelse og fylde udvælgelse med en hældning (brun gennemsigtige).tilpasning af opacitet af gradient, indtil du kan se mønstret fra baggrunden skinne igennem, endnu en gang, vil vi bruge georgien her for at skabe nogle supplerende forbindelser på stedet.jeg plejede 18px til forbindelsen, og 14px for ophavsret se nedenfor.sørg for, den venstre side er i overensstemmelse med de retningslinjer, vi har skabt tidligere., værket er at genbruge den kop ikon fra "browse" i rubrik ovenfor i den nederste højre hjørne, endnu en gang, at den rigtige side med retningslinjerne.,, konklusion, ikke så hårdt, ikke?det er ret simpelt, når du kan bryde den i stykke, genanvendelse af nogle af de samme metoder og teknikker, du har gjort det igen og igen.de skar filer er med, så du kan se, hvordan det er kodet.meget har ændret sig siden jeg designede &, angives dette, og mange af de billeder, kan sikkert blive genskabt med css3 og stigninger, men næsten tre år siden, det er, hvad jeg havde gjort det.du har måske set designet på www.coffeenatic.com. nu, at anlægget er væk, jeg troede, det ville være en god idé at dele det med alle, som jeg modtog en sådan positiv feedback om det.jeg håber, du nød det.,