Students Save 30%! Learn & create with unlimited courses & creative assets Students Save 30%! Save Now
Advertisement
  1. Web Design
  2. Complete Websites
Webdesign

Webwerf Skoon e-Commerce Interface Design in Photoshop

by
Difficulty:BeginnerLength:LongLanguages:

Afrikaans (Afrikaans) translation by Meyria (you can also view the original English article)

Onthou die FreeBie Fashion Store? Vandag sal ek jou wys hoe om hierdie skoon e-handelswebwerf koppelvlak in Adobe Photoshop te skep. Hierdie handleiding is nie net gevul met baie Photoshop tegnieke nie, maar ook ontwerpkonsepte wat verder gaan as die partytjie wat ek seker is dat jou nie wil misloop nie. Kom ons begin dus!


Fashion Store, The Freebie

Eerstens, wil ek graag Sunil gee, wat eintlik hierdie koppelvlak ontwerp het. Ek het 'n paar veranderinge aan die uitleg aangebring, soos om dit volgens 'n rooster te herorganiseer.


Skets You Idee

Hou jou sketse los en rof.

Voordat ons regs in Adobe Photoshop spring, moet ons eers 'n oomblik vat om te dink oor die manier waarop ons ons ontwerp sal struktureer. Kom ons vat 'n pen en papier en begin met die skets van ons draadraamwerk.

Wanneer ons 'n draadraam skep, skets ons ons bladsy om verskillende visuele plasings vir elke element in ons bladsy uit te probeer. Dus, wat ons doen, is om te dink hoe elemente die beste werk, bymekaar pas op die bladsy en hoe hulle die beste met mekaar verband hou. Ons oorweeg ook watter elemente beklemtoon moet word en wat nie.

Op hierdie stadium moet ons nie meer bekommer oor hoe spesifieke elemente vertoon sal word nie, en dink aan wat die algehele werfontwerp kan word.

Ongelukkig, aangesien ek hierdie uitleg nie van nuuts af geskep het nie, het ek nie 'n skermskoot van die gesketse draadraam om jou te wys nie. Maar een ding wat ek sal sê: hou jou sketse los en rof. Hulle hoef nie fancy of artistiek te wees nie.

As jou nuut hieraan is, is hier jou eerste opdrag: probeer om hierdie finale ontwerp, of enige ander bestaande webwerf wat jou wil, te skets. Dit sal jou help om die verband tussen elemente op 'n webblad te sien.

Verdere Leeswerk:


Skep van 'n Gryskleur Draad Model

Nou het ons 'n paar idees geskets, dit is tyd om hierdie sketse in 'n meer soliede draadraamwerk te verander. Ons begin met die skep van 'n grysskaal draadraamwerk waar al die uitleg en tipe behandelings teenwoordig sal wees, maar daar sal geen kleur, tekstuur, beelde, ens. Wees nie.

Hier is hoe ons finale grysskaal draadraam moet lyk:


Uitleg: Samestelling

Voordat ons begin werk aan ons draadraamwerk in Adobe Photoshop, het ons 'n paar besluite om te maak.

Eerstens sal ons uitleg 'n vaste uitleg wees, dit beteken dat die dimensies van ons uitleg in 'n spesifieke aantal pixels gespesifiseer sal word. Ons uitleg sal 940px wyd wees, soos jou in die prent hieronder kan sien, of dit op 'n kleiner of groter venster gewys word, bly die grootte dieselfde.


Uitleg: Die Rooster

Met behulp van 'n rooster maak dit soveel makliker om ons elemente in lyn te bring en te besluit oor hul grootte. In hierdie ontwerp gebruik ons ​​hierdie Baseline Grid wat deur die ontsaglike ouens by Teehan+Lax geskep is. Dit is 'n 6px baseline rooster gekoppel aan die 960 rooster stelsel.

Verdere Leeswerk:

Soos ons verder gaan, sal ons bespreek hoe ons ons teks en elemente moet ooreenstem, maar nou moet jou voortgaan om hierdie artikel te lees om 'n idee te kry van hoe om hierdie rooster te gebruik.


Uitleg: Wit Ruimte

Wit, of Negatiewe Ruimte is die ruimte tussen elemente in ons koppelvlak. Die ruimte tussen hoofelemente word Macro White Space genoem. Mikro Wit Ruimte is die Wit Spasie tussen elemente soos lysitems, die spasie tussen 'n onderskrif en 'n beeld of die spasie tussen woorde en letters.

White Space help poswinkels, en ontwerpers gebruik gewoonlik White Space in hul ontwerpe om hulle 'n gevoel van gesofistikeerdheid en luukse te gee. Dit is dus iets wat ons moet versorg terwyl ons ontwerp.


Tipografie: Lettertipes

Ons moet altyd ons lettertipes / fonts sorgvuldig kies. Die keuse van die regte lettertipe is glad nie maklik nie, en jou moet baie aspekte kyk, van die keuse van 'n lettertipe met 'n persoonlikheid wat die regte boodskap sal lewer, hoe dit op die blaaier sal lyk. Ek sal nie in baie detail raak nie, maar ek wil graag 'n paar poste noem wat ek baie interessant gevind het:

Verdere Leeswerk:

In ons koppelvlak gebruik ons ​​die volgende drie lettertipes: Helvetica, 'n skoon en moderne lettertipe wat dit alles vertel. Georgia, 'n lettertipe wat koninklikes ontlok en 'n ernstige toon het. Bebas, 'n lettertipe wat die gesag van gesag het, en is soos 'n gewaagde stelling wat altyd 'n punt maak.

  • Helvetica Nuut: Body copy (Standaard font).
  • Bebas: Opskrifte (Aflaai hier).
  • Georgia: Ander hoofelemente (Standaard font).

Tipografie: Hiërargie

"Typografiese hiërargie" beskryf eenvoudig hoe verskillende lettertipes, gewigte en groottes van lettertipes 'n dokument struktureer.

Wat die lettergroottes betref, is die basislynrooster wat ons besluit het om te gebruik, ontwerp om verenigbaar te wees met standaard lettergroottes. Daarom sal ons by hulle hou. Hierdie groottes blyk uiters nuttig as dit gekombineer word met die voorste van drie. So hier is die belangrikste pixel groottes vir ons koppelvlak:

  • 24px: H1 opskrifte.
  • 18px: H2 opskrifte.
  • 14px: H3 en navigasie hoofde.
  • 12px: Body copy — met 'n leidende waarde van 18px.

Maar, in die sidebar-baniere en die inhoudsarea, sal ons uiteindelik 'n paar ander verskillende groottes gebruik (na alles, hierdie advertensies sal betyds vervang word)  maar hulle sal standaard lettergroottes wees.

Wat die gewigte betref, gaan ek van Romeinse Laer Geval tot Vet Laer Geval. Niks regtig ingewikkeld nie.


Tipografie: Leading, Kerning & Tracking

Soos ek reeds gesê het, gebruik ons ​​leidende (lynspasiëring) waardes wat vanaf die rooster gedryf word, wat sal wees: 18px en 21px.

Ons kerning sal metrieke vir liggaams teks wees, en optiese vir opskrifte (sien verdere leeswerk). En uiteindelik gebruik ons ​​die standaard dopwaardes (0) vir al die teks.

Verdere Leeswerk:


Tipografie: Anti-Aliasing

Hier is 'n baie uitstekende artikel. Jou moet hierdie een lees! Ek sal nie 'n enkele woord sê nie, behalwe dat vir liggaamsopskrifte (klein puntgroottes) ons Sharp sal gebruik, en vir opskrifte (groter puntgroottes) gebruik ons ​​Crisp.


Stap 1: Stel Die Dokument op

Noudat ons besluite geneem het, is dit tyd om Adobe Photoshop oop te maak en begin werklik ons ​​draadraamwerk te skep! open dus die rooster dokument wat ons voorheen afgelaai het, genaamd "grid2.psd". Die eerste ding wat ons gaan doen, is om al die bestaande lae in die dokument—te kies, behalwe vir die gids "Marks" — en ontslae te raak van hulle, of groepeer hulle in 'n gids en versteek dit nou. Voordat ons verder Gaan, laat ons die map "Merk" kies en klik op die knoppie "Alles Sluit" in die lae paneel.

Nou moet ons die hoogte van ons dokument, verander want ons finale ontwerp is groter as die bestaande dokument. Om dit te doen, gaan ons na Image> Canvas Size, verander die hoogte na 1540px en maak seker dat jou die Anker na Top Sentrum stel.

Klik dan op View> Extras (om ons Gidse te besigtig), Heersers (om die Heersers te Sien) en Snap (sodat die voorwerpe wat ons gaan skep, na die Gidse kan snap).


Stap 2: Die skep van die Agtergrond

Ons sal begin deur ons agtergrond te skep. Skep 'n nuwe laag, gee dit 'n naam (bv. "Bg"), en gryp die Reghoekige Marquee Tool(M). Maak 'n keuse oor die hele doek en klik om dit te voltooi deur op Shift+Backspace, Gebruik: Kleurr ... te klik en vul dan die keuse met hierdie kleurwaarde: #f5f5f3. Let daarop dat die kleurwaardes wat ons in die grysskaal draadraamwerk gebruik, nie die finale waardes is nie maar ons sal hulle gebruik om ons bladsy elemente te onderskei.


Stap 3: Skep die Toonste Balk

Kom ons skep nou die boonste balk. Gryp die Reghoekige Marquee Tool (M) weer, maak 'n keuse van 1260x45px, en vul dit dan met hierdie kleurwaarde: #2d2d2d.

Kies die Horisontale Tipe Gereedskap (T), tik jou navigasie items  en pas die volgende karakterinstellings toe:

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 55 Romeinse.
  • Grootte: 12px.
  • Kerning: Metrieke.
  • Kleur: #767676.
  • Anti-Aliasing: Sharp.

Om seker te maak dat ons teks goed in-lyn is met die agtergrond, kies beide lae (die tekslaag en die agtergrondlaag) en klik op Vertikale vertikale sentrums in die beheerbalk.


Stap 4: Skep die Inskry Wings Vorm

Tik die woord "Teken in" met behulp van die Horisontale Tipe Gereedskap(T), pas die volgende karakterinstellings, daarop toe en maak seker dat dit ooreenstem met die prentjie hieronder.

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 75 vet.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #ffffff.
  • Anti-Aliasing: Sharp.

Kom ons skep nou die invoervelde. Gebruik die Gereedskap vir Afgeronde Reghoek (U) om twee afgeronde reghoeke te maak  elkeen moet 127x26px wees, met 'n radius van 15px. Vul hulle met hierdie kleurwaarde: #767676 en pas hulle soos die prentjie hieronder.

Tik die twee woorde "Gebruikersnaam" en "Wagwoord" binne die twee velde, met die volgende karakterinstellings wat op hulle toegepas word, en pas hulle dan volgens die onderstaande prentjie:

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 55 Romeinse.
  • Size: 12px.
  • Kerning: Metrics.
  • Color: #ffffff.
  • Anti-Aliasing: Sharp.

Ons sal ons 'Gaan' knoppie skep deur die Gereedskap vir die Gereedskap vir Afgeronde Reghoek (U) te gebruik maar hierdie keer 'n 33x25px-reghoek met 25px-radius. Tik dan die woord 'Gaan' binne dit met dieselfde karakterinstellings in die vorige prent, maar verander die gewig na 75 Vet.

Gryp die Line Tool (L), skep 'n lyn van 1x25px en vul dit met wit. Tik dan die woord "Teken aan" met dieselfde karakterinstellings wat in die volgende prentjie vertoon word. Pas ook al die elemente wat ons in hierdie stap geskep het, ooreen.


Stap 5: 'N Advertensie Ruimte Skep

Kom ons gebruik die Reghoekige Marquee Tool (M) om 'n reghoek van 480x60px te maak, vul dit met #767676 in, en pas dit soos in die prent hieronder. Dit behoort as 'n plekhouer vir 'n advertensie spasie te werk.

Gee dan hierdie laag 'n Beroerte. Die prent hieronder wys die instellings wat ons wil hê


Stap 6: Die Skep van die Logo

Prakties gesproke moet ons logo nie hier in Adobe Photoshop ontwerp word nie, maar vir eers skep ons dit net hier. Gryp dus die Ellipse Tool (U), skep 'n sirkel van 60x60px, vul dit met hierdie kleurwaarde: #2d2d2d, en pas dit soos in die onderstaande prentjie.

Tik die letter "F" deur die volgende karakterinstellings te gebruik, en pas dit volgens die volgende prentjie:

  • Font: Voor Lets.
  • Size: 53.65px.
  • Color: #ffffff.
  • Anti-Aliasing: Crisp.

Tik dan die woord "Fashion" en pas die volgende karakterinstellings toe:

  • Font: Voor Lets.
  • Size: 30px.
  • Kerning: Optical.
  • Kluer: #2d2d2d.
  • Anti-Aliasing: Crisp.

En "Winkel" met die volgende karakterinstellings:

  • Font: Georgia.
  • Gewig: Regular.
  • Grootte: 12px.
  • Kerning: Metrics.
  • Kleur: #767676.
  • Anti-Aliasing: Sharp.

Maak seker dat jou hulle altwee volgens die onderstaande prent plaas.


Stap 7: Die Navigasie Balk Maak

In hierdie stap skep ons ons navigasiebalk. Gaan voort met die Reghoekige Marquee Tool (M), maak 'n keuse van 940x48px, vul dit met hierdie kleurwaarde: #c3c3c3, en sit 20 pixels onder die advertensie spasie soos in die prent hieronder.

Ons gaan voort om die Horisontale Tipe Gereedskap (T), te gryp en tik die titels van ons subb-ladsye aan deur die volgende karakterinstellings te gebruik:

  • Font: Bebas.
  • Gewig: Regular.
  • Grootte: 14px.
  • Kerning: Optical.
  • Kleur: #2d2d2d/#ffffff.
  • Anti-Aliasing: Crisp.

Kom ons skei nou die titels wat ons nou net geskep het. Gebruik die Line Tool (U), om 'n vertikale lyn tussen elke twee titels te maak, vul dit met hierdie kleurwaarde: #b4b4b4, en maak seker dat jou 20px tussen elke titel en vertikale lyn verlaat.


Stap 8: Skep die Afrol Menu

Kom ons skep nou 'n aftreklys, sal ons? Gryp die Reghoekige Marquee Tool (M), maak 'n keuse wat die spasie tussen die twee omliggende lyne van die woord 'WOMEN' invul en vul dit met hierdie kleurwaarde: #2d2d2d. Maak dan nog 'n keuse van 340x147px, vul dit met dieselfde kleurwaarde en pas dit volgens die onderstaande prentjie. Dit sal dien as 'n agtergrond vir ons keuselys.

Klik op die knoppie (T) op u sleutelbord om die Horisontale Tipe Gereedskap (T), te kies en tik die elemente van die sub-kieslys aan deur die volgende karakterinstellings te gebruik:

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 55 Roman.
  • Size: 12px.
  • Kerning: Metrics.
  • Leading: 30px.
  • Color: #767676.
  • Anti-Aliasing: Sharp.

Ten slotte, maak seker dat hulle in lyn is met die volgende prentjie.

Wat ons nou gaan doen, is om 'n raam vir 'n beeld te skep (waar ons 'n foto van 'n vrou sal plaas net om die gebruiker te vertel dat jou die 'Vroue'-afdeling gekies het). Gryp dus die Reghoekige Marquee Tool (M), maak 'n keuse van 139x105px, en vul dit met #1f1f1f, maak dan 'n ander keuse van 121x87px en vul dit met #767676. Maak seker dat die middelpunte van die twee reghoeke horisontaal en vertikaal is.


Stap 9: Die Soekkassie Skep

Kom ons gaan voort en skep 'n insetveld vir ons soekbalk. Gryp die Gereedskap vir Afgeronde Reghoek (U), skep 'n reghoek van 123x26px, met 15px radius, en vul dit met wit. Moenie vergeet om dit in ooreenstemming te bring soos in die prent hieronder aangedui nie.

Gebruik die wonderlike Horisontale Tipe Gereedskap (T) deur die woord "Soek" binne die geronde reghoek in te tik en pas die volgende karakterinstellings toe:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Romeinse.
  • Grootte: 12px.
  • Kerning: Metrieke.
  • Kleur: #767676
  • Anti-Aliasing: Sharp

Vind 'n ikoon van 'n vergrootglas, en plaas aan die regterkant van die soekkas, maak seker dat dit gekleur is met #929292 en in ooreenstemming met die prent hieronder.


Stap 10: Die Soekkassie Skep

Kom ons begin met die skep van die "Voorgestelde inhoud" gebied. Begin met die skep van 'n keuse van 640x315px deur gebruik te maak van die Reghoekige Marquee Tool (M), en vul dit met #c3c3c3 in.

Kom ons skep nou hierdie balk waar 'n boodskap oor die voorste produk gaan. Gryp die Rechthoekige Marquee Tool(M), maak 'n keuse van 480x33px, vul dit met hierdie kleurwaarde: #767676, en pas dit soos in die prent hieronder.

Kies die Horisontale Tipe Gereedskap (T) en tik 'n boodskap met die volgende karakterinstelling:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Romeinse.
  • Grootte: 14px.
  • Kerning: Metrieke.
  • Kleur: #ffffff.
  • Anti-Aliasing: Sharp.

Moenie vergeet om die teks en die agtergrond soos aangedui in lyn te bring nie.

Dit is tyd om 'n paar inleidende teks te tik. Gryp die Horisontale Tipe Gereedskap (T) en tik die woord "Versameling" met die volgende karakterinstellings:

  • Font: Georgia
  • Gewig: Vet.
  • Grootte: 18px.
  • Kerning: Optiese.
  • Kleur: #2d2d2d.
  • Anti-Aliasing: Crisp.

Tik dan die woord "Somer" met die volgende karakterinstellings:

  • Lettertipe: Georgia.
  • Gewig: Vet.
  • Grootte: 48px.
  • Kerning: Optiese.
  • Kleur: ffffff.
  • Anti-Aliasing: Crisp.

En tik uiteindelik "Helping you look cool" met die volgende karakterinstellings wat daarop toegepas word:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Romeinse.
  • Grootte: 18px.
  • Kerning: Optiese.
  • Kleur: #2d2d2d.
  • Anti-Aliasing: Crisp.

Maak seker dat ons ons teks ooreenstem soos in die prent hieronder aangedui.


Stap 11: Skep die Verkoops Teken

Kom ons maak nou 'n verkooppunt. Gebruik die Ellipse Tool(U) om 'n sirkel van 80x80px te maak, vul dit met hierdie kleurwaarde: #2d2d2d, plaas dit dan soos in die onderstaande prentjie.

Tik 'n paar teks in hierdie kring (byvoorbeeld "40% af") en pas die volgende karakterinstellings toe:

  • Font: Georgia.
  • Gewig: Gereeld / Vet.
  • Grootte: 48px / 14px.
  • Kerning: Metrieke.
  • Kleur: #ffffff.
  • Anti-Aliasing: Crisp.

Stap 12: Die Hoofinhoud Area Skep

Kom ons gaan voort en begin met die skep van ons hoofinhoudarea. Ons begin met die titel, gryp dus die Horizontal Type Tool(T), tik 'n titel en pas die volgende karakterinstellings toe:

  • Font: Bebas.
  • Gewig: Gereeld.
  • Grootte: 24px.
  • Kerning: Optica.
  • Kleur: #2d2d2d.
  • Anti-Aliasing: Crisp.

Moenie vergeet om dit 20px onder die inhoudinhoud te plaas nie.

Met die Horisontale Tipe Gereedskap (T) nog steeds gekies, tik 'n vinnige beskrywing vir hierdie titel. deur die volgende karakterinstellings te gebruik:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Romeinse.
  • Grootte: 12px.
  • Kerning: Metrieke.
  • Kleur: #767676.
  • Anti-Aliasing: Sharp.

En natuurlik moet dit ooreenkomstig die basislyn rooster in lyn gebring word, soos in die prent hieronder aangedui.

Gebruik die Line Tool (U), skep 'n lyn wat 640px breed is en kleur dit met hierdie waarde: #e5e5e5.


Stap 13: Skep van die Produk Beelde

Gryp die Reghoekige Marquee Tool (M), maak 'n keuse van 200x152px, vul dit met #2d2d2d en pas dit 20px onder die lyn wat ons pas geskep het.

Skep nog 'n verkoopsteken soos die een wat ons in stap 11, geskep het maar hierdie keer maak die sirkel 45x45px en vul dit met White. En die teks moet 24px/14px wees en gevul met #767676.

Gebruik die Horisontale Tipe Gereedskap (T) om die naam en prys van die produk te tik deur die volgende karakterinstellings te gebruik:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Roman.
  • Grootte: 12px.
  • Leading: 21px.
  • Kerning: Metrics.
  • Color: #767676 / #000000.
  • Anti-Aliasing: Sharp.

Ons sal hierdie leë spasie tussen die teks vul met 'n ikoon - as jou wonder.

Plaas 'n ikoon van 'n winkelwagentjie, plaas dit in die leë spasie wat ons in die vorige stap gelaat het, en pas dit in soos in die prentjie hieronder.

As die ikoon gekleur is, gaan na Layer> New Adjustment Layer> Black & White ... om dit grysskaal te maak.

Kies al die produkvoorskou elemente wat ons in hierdie stap, geskep het en groepeer hulle saam, en dupliseer dan hierdie vouer vyf keer. Rig die ses produkvoorskoue soos in die prent hieronder getoon.


Stap 14: Die skep van die Big Sidebar Banier

Kom ons werk nou op ons sidebar. Ons begin met die groot banner, dus gryp die Gereedskap Gereedskap (U), skep 'n 280x314px reghoek en vul dit met #2d2d2d. Met die gereedskap wat nog geselekteer is, skep nog 'n reghoek van 280x41px en vul dit met #767676, en bely beide van hulle soos in die onderstaande prentjie.

Gebruik die Horisontale Tipe Gereedskap (T), tik 'n titel vir hierdie banner met die volgende karakterinstellings:

  • Font: Bebas
  • Gewig: Regular.
  • Grootte: 18px.
  • Kerning: Optiese.
  • Color: #ffffff.
  • Anti-Aliasing: Crisp.

Druk die (U) sleutel om die Ellipse Tool (U), te kies skep 'n sirkel wat 210x210px is, vul dit met #7676767 en probeer om dit op een of ander manier in ooreenstemming te bring met die prentjie hieronder.

Nou om die deel van die sirkel wat uit die agtergrond van die banner gaan, ontslae te raak, maak die laepaneel oop, stel die laag van die sirkel (''tag_bg'') reg bokant die laag van die banner agtergrond (''box_bg''), kliek dan regs op die sirkel se laag> Skep Uitsny Masker.

Gebruik nou die Horisontale Tipe Gereedskap (T), tik 'n paar teks binne hierdie sirkel, gebruik die volgende karakterinstellings:

  • Font: Georgia
  • Gewig: Regular.
  • Grootte: 18px / 14px / 24px / 30px.
  • Kerning: Optical.
  • Kleur: #ffffff.
  • Anti-Aliasing: Crisp.

Maak ook seker dat ''Faux Bold'' in die karakterpaneel gekies word.


Stap 15: Skep 'n Kleiner Zijbalk Banier.

Gryp die Gereedskap Gereedskap (U) en skep 'n reghoek van 280x144px, vul dit met #2d2d2d, en plaas dit volgens die onderstaande prent.

Kom ons skep nou die ''Know More'' knoppie. Gebruik die Reghoekige Marquee Tool (M) om 'n keuse van 120x30px te maak en vul dit saam met #767676.

Gryp dan die Horisontale Tipe Gereedskap (T), tik ''Meer ken'' binnein die reghoek deur die volgende karakterinstellings te gebruik:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Roman.
  • Grootte: 18px.
  • Kerning: Optical.
  • Kleur: #ffffff.
  • Anti-Aliasing: Crisp.

Met die Horisontale Tipe Gereedskap (T) nog steeds gekies, tik 'n paar teks soos in die prent hieronder met die volgende karakterinstellings:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Roman.
  • Grootte: 14px / 24px / 18px.
  • Leading: 24px.
  • Kerning: Optical.
  • Kleur: #ffffff.
  • Anti-Aliasing: Crisp.

Die prent hieronder wys hoe om die teks te pas.

Maak 'n afskrif van hierdie banner en laat 20px vertikale spasie tussen hulle.


Stap 16: Skep die ''Twitter Updates'' Afdeling

Skep 'n keuse van 280x235px deur die Reghoekige Marquee Tool (M), te gebruik, vul dit met wit en plaas dit 20px onder die vaandel.

Gryp die Horisontale Tipe Gereedskap (T) en tik 'n titel deur die volgende karakterinstellings te gebruik:

  • Font: Bebas.
  • Gewig: Regular.
  • Grootte: 18px.
  • Kerning: Optical.
  • Kleur: #2d2d2d.
  • Anti-Aliasing: Crisp.

Gebruik die Line Tool (U) om 'n lyn wat 240px breed is en vul dit met hierdie kleurwaarde: #e5e5e5.

Vind 'n ikoon/illustrasie van die Twitter voël en plaas dit soos in die beeld hieronder. Maak ook seker dat jou dit grysskaal maak soos in 'n vorige stap.

Gryp die Horisontale Tipe Gereedskap (T) en tik 'n paar teks as 'n voorbeeld van 'n tweet, en pas die volgende karakterinstellings toe:

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 55 Roman.
  • Grootte: 12px.
  • Leading: 18px.
  • Kerning: Metrics.
  • Kleur: #2d2d2d / #767676.
  • Anti-Aliasing: Crisp.

Tik dan ''Meer Tweets'' met die volgende karakterinstellings:

  • Font: Helvetica Neue LT Std.
  • Gewig: 55 Roman.
  • Grootte: 12px.
  • Kerning: Metrics.
  • Kleur: #2d2d2d.
  • Anti-Aliasing: Crisp.

Moenie vergeet om ''Onderstreep'' in die Karakterspaneel te klik nie.


Stap 17: Skep van die ''Ander Produkte'' Afdeling

Gryp die Gereedskap Gereedskap(U) en skep 'n reghoek van 940x264px, vul dit met #ffffff in, en plaas 20px onder die ''Twitter Updates'' afdeling.

Skep 'n titel vir hierdie afdeling wat presies dieselfde is as die een wat ons in die vorige stap geskep het. Gebruik dan die Line Tool (U) om 'n wye lyn van 898px te maak en vul dit met #e5e5e5 in.

Gebruik die Gereedskap Gereedskap (U) om 'n 178x113px reghoek te skep. Maak drie afskrifte van dit en pas hulle volgens die onderstaande prent.

Weer, Tik 'n paar inligting oor die produk en pas die volgende karakterinstellings toe op jou teks:

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 55 Roman.
  • Grootte: 12px.
  • Leading: 18px.
  • Kerning: Metrieke.
  • Kleur: #2d2d2d / #767676.
  • Anti-Aliasing: Crisp.

Ten slotte vergeet nie om ''Koop Nou'' onderstreep te maak nie.

Vind 'n pyltjie ikoon en plaas dit soos in die beeld hieronder, probeer om dit te verander na iets rondom 28x28px, en vul dit met hierdie kleurwaarde: #2d2d2d. Maak nog 'n kopie van hierdie ikoon en sit dit aan die regterkant.


Stap 18:Skep 'n Kleiner Zijbalk Banier.

Gryp die Rechthoekige Marquee Tool (M) en maak 'n keuse van 1260x122px, vul dit dan met #2d2d2d.

Tik 'n paar teks in die voetskrif met die volgende karakterin stellings:

  • Font: Helvetica Nuwe LT Std.
  • Gewig: 55 Romeinse.
  • Grootte: 12px.
  • Leiding: 21px.
  • Kerning: Metrieke.
  • Kleur: #ffffff / #767676.
  • Anti-Aliasing: Crisp.

Skep ten slotte 'n kopie van die logo en maak seker dit is in lyn met die prentjie hieronder, en dit is dit!


Kleur Kombinasie.

Noudat ons klaar is met ons grayscale wireframe, is dit tyd om te fokus op die kleur van ons koppelvlak. Kleur is 'n baie groot onderwerp, dus gaan ek net deur die kleurkombinasie deel. Ons kleurskema sal drie soorte kleure bevat:

  • Ondergeskikte of basiese kleur: Hierdie is 'n visueel swak of ondergeskikte kleur. Dit kontrasteer of aanvullings.
  • Oorheersende of hoofkleur: Hierdie een definieer die kommunikatiewe waardes van die kleurkombinasie.
  • Accent of hoogtepunt kleur: Dit kan simpatiek wees vir die basis of hoof kleur. Of jou kan 'n aksent kleur kies wat visueel sterk is en lyk asof dit met die hoofkleur kompeteer om spanning binne die kombinasie te bied.

Die volgende prent toon ons basis, hoof en aksentkleure.


Kyk Kamer

Aangesien ons 'n paar portrette in ons ontwerp gaan gebruik, het ek gedink ek moet kortliks praat oor ''Look Room''. Oor die algemeen sal 'n portretfoto 'n onderwerp en ruimte rondom hulle hê. Die visuele belangstelling in die portret kan van beweging kom, dit is hoe ons oë om die skoot beweeg. En om die oog te laat beweeg, pas die fotograaf die ruimte rondom die vak ooreenkomstig aan.

So byvoorbeeld, soos u in die prent hieronder kan sien, skep die belyning van die vak aan die linkerkant (1), met die White Space (Look Room) regs, beweging (3), wat ons oë in die rigting kyk waar die onderwerp kyk.

Verdere Leeswerk:


Stap 19: Kleur die Agtergrond

Kom ons begin om ons koppelvlak te kleur! Om die agtergrondlaag met kleur te vul, kan jou op die duimnaelskets in die lae paneel druk terwyl jou die Cmd/Ctrl sleutel hou om die pixels te kies en dan Shift+Backspace> Kleur ...> #f6f6f4 te kies. Of jou kan 'n Kleur Oorleg daaraan toevoeg.


Stap 20: Kleur die Boonste Balk

Kleur die woord ''Teken'' in met hierdie kleurwaarde: #ffffff, ''Gebruikersnaam/Wagwoord'' met: #8e8e8e, die invoervelde met #8e8e8e, die agtergrond van die knoppie en ''Teken'' met #ea6a53, en die navigasietekst met #999999.

Vul die advertensie spasie met 'n prent soos in die prentjie hieronder, en maak 'n knipmasker vir dit, soos ons in stap 14 gedoen het.

Tyd om die logo te kleur. Gee die sirkel en die woord ''Mode'' hierdie kleurwaarde: #2d2d2d, vul die letter ''F'' met dieselfde kleur as die agtergrond# f6f6f4, en die woord ''winkel'' met #bc3726.


Stap 21: Die Navigasiebalk Kleur.

Ons sal die navigasie agtergrond teks met hierdie kleurwaarde invul: #c3c3c3, die teks met #2d2d2d, die woord ''WOMEN'' met# f6f6f4 (wat die hover/geselekteerde toestand voorstel), en die vertikale skeidingslyne met #b4b4b4.

Om meer visuele belangstelling vir die navigasie teks, by te voeg voeg ons 'n Drop Shadow by. Die prent hieronder wys die instellings ...

As ons na die soekbalk beweeg, vul ons die invoerveld in met wit #ffffff, die woord ''Soek'' met #a6a6a6 en die ikoon met #ea6a53.

Kom ons gee ons subnavigasie balk 'n paar kleure ... Vul die agtergrond met #E2d2d2d, die teks met #c4c4c4, en die rand van die prent met #1f1f1f.

Ons sal die beeldgrens 'n bietjie meer interessant maak deur 'n Drop Shadow en 'n Inner Shadow daaraan te voeg. Al die instellings kan in die prentjie hieronder gesien word.

Skep ten slotte 'n prentjie van 'n vroulike model soos in die beeld hieronder getoon.

Nou is dit tyd om die stippellyne tussen die navigasie items te skep. Maak Adobe Illustrator oop, maak 'n nuwe dokument, kies die Lyn Segment Gereedskap (\), skep 'n lyn wat 135px breed is, en vul dit met Geen (/) in. Open dan die Stroke paneel en pas jou instellings aan volgens die onderstaande prent.

Kopieer die streeplyn en plak dit in Adobe Photoshop, maak twee afskrifte daarvan en vul hulle almal saam met hierdie kleurwaarde: #484848.


Stap 22: Die kleur van die Groot Zijbalk Bzanier

Ons sal hierdie stap begin deur 'n prent te plaas om die agtergrond van die banier te vul. Gaan na Lêer> Plaas ...> Kies 'n prent> Plaas.

Kom ons gaan voort en kleur die sirkel met die teks daarin. Die kleurwaardes wat ons moet gebruik, word in die prent hieronder gewys.

Om die nommer ''50'' te laat uitstaan, sal ons 'n Drop Shadow toepas op die laag wat dit bevat. Stellings kan in die onderstaande prent gesien word.

Tyd om te werk op die titel ... Vul die agtergrond daarvan met hierdie kleurwaarde: #000000, en die teks met hierdie kleurwaarde: #c3c3c3. Maak dan twee stippellyne (soos die een wat ons in stap 21 geskep het) vul hulle met #414141 en plaas hulle soos in die onderstaande prentjie.

Kom ons voeg visuele belangstelling by die titel se agtergrond, deur 'n subtiele grungestruktuur daaraan te voeg. Laai hierdie wonderlike kwasstel: ''Funksie Subtiele Grunge Borsels'' geskep deur die awesome ouens by WeFunction of enige ander kwas wat jou verkies. Skep 'n nuwe laag reg bokant die titel se agtergrondlaag, terwyl dit gekies is, verf oor die titel met een van die kwaste met die Borselgereedskap (B) (of miskien kan jou een van die PNG's wat ingesluit word gebruik) vul dit met wit, verminder dan die laag se dekking tot 30%. Ten slotte, kliek-met die rechtermuisknop op> Skerp masker maak ...


Stap 23: Kleur van die Voorgestelde Inhouds Area 

Ons sal die agtergrond van die inhoudsarea met 'n gradiënt invul om dit meer interessant te maak. Gaan dus voort om die Gradient Tool (G), te gryp maak die Gradient Editor van die Control Panel oop en stel jou kleurwaardes van# b6a397 tot #9d8a83.

Ons moet die area spesifiseer wat met die gradiënt gevul moet word, en ons doen dit deur 'n keuse daaroor te maak. So gaan ons na die lae paneel, klik op die miniatuur van die agtergrondlaag terwyl jou die Cmd/Ctrl-sleutel hou om 'n keuse daaroor te maak en met Gradient Tool (G) nog steeds gekies, kies Radial Gradient en sleep soos in die beeld hieronder terwyl jou die Shift sleutel hou om die engel te beperk.

Die kleurwaardes van die elemente in hierdie afdeling word in die onderstaande prent getoon.

Laastens, vind 'n foto van 'n vroulike model, plaas dit in ons dokument, en pas dit volgens die rooster soos aangedui in die prent hieronder.


Stap 24: Die Kleure van die Klein Zijbalk Baniere Kleur

Weereens, ons sal nog 'n prentjie as agtergrond vir ons banier plaas, en gebruik die kleurwaardes wat in die onderstaande beeld gewys word om ons elemente te kleur.

Om ons teks meer uit te steek, sal ons dit 'n Drop Shadow gee. Die instellings kan in die prentjie hieronder gesien word.

En ons sal dieselfde doen met die ander vaandel ...

Kom ons gee nou 'n paar kleure aan die "Twitter Updates" -afdeling ... Die prent hieronder bevat al die kleurwaardes wat ons vir hierdie afdeling sal gebruik.


Stap 25: Kleur van die Hoof Inhoudsarea

Ons begin met die titel, vul dit met hierdie kleurwaarde: #2d2d2d, dan die beskrywing met hierdie waarde: #858585, dan die lyn met #e5e5e5.

Gaan na die voorskou van die produk ... Plaas eers 'n prent van die produk en kleur al die elemente met die waardes wat in die prent hieronder getoon word.

Die elemente in die afdeling "Ander Produkte" sal gekleur word met dieselfde waardes soos in die vorige stap. Maak seker dat jou die agtergrond met wit #ffffff en die pylikoon met #040707 invul.


Kleur die voetgebied

Vul die footer se agtergrond met hierdie kleurwaarde: #2d2d2d, en die teks met $a0a0a0 en #ffffff.

En uiteindelik word die kleure van die logo in die volgende prent vertoon ...


Konklusie

En dit is pretty much it! Ek hoop jou het dit geniet om hierdie tutoriaal te lees, en, belangriker nog, jou het dit nuttig gevind. As jou enige vrae het, moet asseblief nie huiwer om kommentaar te lewer nie, en ek sal my bes doen om te help.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.