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

Skep 'n Illustratiewe Enkelblad Web Ontwerp Met Photoshop

by
Length:LongLanguages:

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

Hallo almal! Dit is my eerste tutoriaal op hierdie wonderlike nuwe webwerf van die tuts + familie. Hierdie keer het ek vir jou 'n baie gedetailleerde handleiding oor die skep van 'n enkele bladsy illustratiewe webdesign van nuuts af met Photoshop. U sal leer hoe om 'n uitleg vir 'n enkele bladsy webdesign te bou, illustratiewe agtergronde met 'n spesifieke styl te skep, 'n swaai navigasiebalk te ontwerp, met teks met CSS3 in gedagte te werk en meer ... gereed om te begin?


'N Paar Lewendige Voorbeelde

In die afgelope tyd was daar 'n paar groot "vertikaal-blaaiende" webwerwe wat om die net gespring het. Voordat jy in duik, kom ons kyk na 'n paar van hulle om te sien hoe die finale effek sal lyk. Dit sal help om die res van die tutoriaal in konteks te stel:


Voordat Iy Begin

Hierdie handleiding benodig basiese kennis van die Photoshop Tools. Ek sal basiese verduidelikings oorskakel, soos hoe om 'n laagmasker te maak, hoe om 'n gids te voeg of hoe om 'n tekslaag te voeg.

My ontwerp is gebaseer op verskeie voorbeelde rondom die web van 'n baie nuwerwetse styl, 'n vertikale panoramiese vektor landskap as 'n agtergrond en skoon teksareas wat die belangrike inligting bevat. Stel jou hierdie webwerf voor as 'n enkele bladsy ontwerp as 'n portefeulje webwerf van 'n kreatiewe ontwerper of illustrator.

Ons gaan nie in die koderende gedeelte van hierdie projek gaan nie, want ons sal fokus op die verskillende illustrasies en uitlegtegnieke, maar dit is gebaseer op die gewilde jQuery.ScrollTo-invoegtoe passing, wat u kan raadpleeg vir wenke om hierdie tipe van kodering te koder. ontwerp.

Kom ons begin dit, die bates vir hierdie tutoriaal is:


Stap 1: Aan die begin

Eerstens moet ons die werkdokument opstel. Ek basiseer hierdie uitleg op die 12 kolomme 960 Grid Stelsel wat u gratis kan aflaai, anders maak net 'n dokument 960px saam en teken 'n paar Gidse na links en regs .

As algemene praktyk op webdesign werke moet ons hierdie area verhoog om te sien hoe dit hoër resolusies lyk, maar ons moet ook 'n standaard grootte vir die hoogte opstel. Hierdie hoogte moet die minimale sigbare area wees (bo die vou) aangesien ons 'n enkele bladuitleg ontwerp. Gaan na Image> Canvas grootte en stel die breedte op 1420px en die hoogte na 750px.

Illustrative One Page Design Tutorial

Stap 2 - Afdelingsafdelings

Gebruik dan 'n temporale grafiese weergawe om die dokument in dele te verdeel. Gebruik die Gereedskap Gereedskap om 'n reghoek van bo na onder te maak (750px hoogte). Verhoog dan die Canvas Size baie (jy kan die Crop Tool hier gebruik).

Illustrative One Page Design Tutorial

Stap 3 - Afdelingsafdelings

Trek 'n Gids onderaan Rechthoek en dupliseer dit, pas dan die kop se kopkant by die onderste reghoek se onderkant en voeg 'n Gids onderaan die tweede reghoek by. Herhaal hierdie proses soveel keer as afdelings op die uitleg. , in hierdie geval benodig ons 4: Tuis, Oor ons, Portefeulje en Kontak ons. Dan, verwyder die ekstra doek met behulp van die Crop-gereedskap. Jy moet 'n doek van ongeveer 3000px hoogte hê met 4 afdelings, elk van 750px. Verwyder die reghoekige reghoeke en beweeg vorentoe.

Illustrative One Page Design Tutorial

Stap 4 - Hemel Agtergrond

Gebruik die Gereedskap Gereedskap om 'n reghoek van bo na onder van die derde afdeling te teken. Voeg dan 'n Gradient Overlay Layer Style toe met die volgende kleure: #FFFFFF # 6E98C8 # 2A3256 en # 0C0E1A, stel die hoek tot 90 ° (dit is baie belangrik aangesien hierdie gradiënt agtergrond gesny sal word om op die x-as herhaal te word) en OK druk.

Illustrative One Page Design Tutorial

Stap 5 - Gras Agtergrond

Teken 'n reghoek in die vierde gedeelte van die dokument en voeg dan 'n Laagstyl> Gradient Overlay toe met hierdie kleure: # 486302 # 64A500 en # BEDC40. Sowel as die vorige stap, stel die hoek tot 90 °.

Illustrative One Page Design Tutorial

Illustrasies: Die Raket

Stap 6 - Raketlichaam

Nou begin ons die bykomende grafiese elemente van die agtergrond te ontwerp. Die eerste element wat ons moet teken is 'n spasie raket wat op die afdeling een van die ontwerp geplaas word. Maak hiervoor 'n nuwe dokument (400px breedte en 600px hoogte) en stoor dit met 'n beskrywende naam soos 'raket', voeg 'n donkerblou agtergrond # 181C35 by.

Vervolgens, teken die Pen Tool aan, teken 'n wit gevulde vorm soos die prent hieronder, dupliseer dit en gaan na Edit> Transform> Flip Horizontal en plaas die kopie presies langs die oorspronklike, kies albei lae en voeg dit saam deur op Command / Beheer + E. Dit sal die Raket se Liggaam wees.

Voeg nou 'n Layer Style> Gradient Overlay by die "Rocket Body" -laag met die volgende kleure: # 0B85DB, # 014C83, # 2396EF, # 004B82 en # 1477B8, stel die hoek tot 0° en druk OK. Eindig die gradiënt rasteriseer deur die "Rocket body" -laag saam te voeg met 'n nuwe leë laag.

Illustrative One Page Design Tutorial

Stap 7 - Strepe

Skep drie geel ellipse met behulp van die Ellipse Tool en plaas dit soos die prentjie hieronder toon. Rasterize hulle (Regskliek op die laag miniatuur en kies Rasterize). Hou dan die Command / Ctrl sleutel en klik oor 'n Ellipse miniatuur op die Layer Paneel om outomaties die vorm van die laag te kies en gebruik die Cursors om die seleksie 'n paar pixels hierbo te skuif. Klik dan die Delete-sleutel. Hierdie proses sal 'n mooi gekromde streep skep. herhaal die aksies met die ander ellipses.

Illustrative One Page Design Tutorial

Stap 8 - Meer strepe

Dupliseer elke streep en plaas dit 'n paar pixels bokant die oorspronklike. Kies dan al die strepe en voeg dit saam op 'n laag met die naam "Strepe". Dan beheer / Ctrl op die "Raketlichaam" om die Rocket-vorm te kies en gaan dan na Kies> Verander> Uitbreid en stel 2 pixels in, en draai die Keuse om deur Command / Ctrl + Shift + I te druk. Volgende op die lae-paneel klik op die "Stripes" -laag en verwyder die seleksie.

Illustrative One Page Design Tutorial

Stap 9 - Streep Se Styl

Kies die "Strepen" -laag en voeg 'n Layer Style> Gradient Overlay by die volgende kleure: # EFAC00, # BD8401, # C39700, # FFCF2C, # C39700, # BD8401 en # EFAC00 Angle 0°. En 'n subtiele Swart Drop Shadow (Grootte: 2px).

Illustrative One Page Design Tutorial

Stap 10 - Rocket Wenk

Kies die "Rocket Body" -laag en gebruik dan die punt van die vuurpyl, soos die prentjie hieronder wys, kopieer die keuse en plak dit bo die vuurpyllaag en onder die strepe, noem die nuwe laag "Wenk". Kopieer die Streep se Layer-styl en plak die styl na die "Wenk".

Illustrative One Page Design Tutorial

Stap 11 - Rocket Window

Gebruik die Ellipse Gereedskap om 'n ellipse aan die linkerkant van die vuurpyl naam die "Window" te maak en voeg dan 'n Layer Style> Gradient Overlay toe met die volgende kleure: # 777777, # E8E8E8, #ADADAD, #FEFEFE, # C8C8C8 en Angle: 0°.

Dan dupliseer die "Window" -laag en maak dit 'n bietjie kleiner, plaas die kopie reg oor die oorspronklike. Aangesien die ellips 'n vektormasker is, verander die kleur van die agtergrond na: # 00CCFF en dubbelkliek op die Gradient Overlay Layer Style, verander in die dialoog die Blending Mode na die skerm. Voeg uiteindelik 'n subtiele Inner-skaduwee by die "Window Copy" -laag en as jy 'n Drop Shadow na die "Window" -laag wil hê.

Illustrative One Page Design Tutorial

Stap 12 - Raketbasis

Kom ons voeg die vuurpyl basis, plaas al die Rocket verwante lae (liggaam, punt, strepe en venster) en voeg hulle saam. Gebruik die Pen-Gereedskap om drie vorms te gebruik wat volg op die voorbeeld van die onderstaande beeld, hulle bo die nuwe "Liggaam" -laag en een hieronder. Gebruik hierdie vulkleur vir die vorms: #FBCC28.

Illustrative One Page Design Tutorial

Stap 13 - Volume na die basis

Voeg drie nuwe vorms by wat die volume aan die vuurpylbasis uitbeeld. Volg die onderstaande foto en gebruik hierdie vulkleur: # AB8204.

Illustrative One Page Design Tutorial

Stap 14

Pas die 'n Gradient Overlay Layer Style toe aan die voetstukke, gebruik die volgende kleure: #FACB2, #FFF393, #FFD952 en #D4A500, stel die hoek tot 90°, probeer om so 'n ding soos die onderstaande prent te kry.

Illustrative One Page Design Tutorial

Stap 15 - Finale Besonderhede

Voeg al die lae saam (ek het altyd 'n kopie van die vektorglaaie in 'n kopie gelaat net in geval). Skep 'n ellips oor die vuurpyl gevul met hierdie kleur: #DFF8FF, gaan dan Filter> Blur> Gaussian Blur en stel die Radius op 23 of 24 pixels, noem die laag "Lig". Opdrag / Ctrl - Klik oor die Rocket se liggaamslaag om die vorm te kies, Command / Ctrl + Shift + I om die seleksie te omkeer en die keuse uit die "Lig" laag te verwyder. Verander uiteindelik sy Blendingsmodus na Sagte Lig.

Illustrative One Page Design Tutorial

Stap 16 - Plaas die vuurpyl op die verhoog

Voeg al die vuurpyllae saam en kopieer dit. Plak die vuurpyl aan die regterkant van die afdeling 1 van ons hoof dokument.

Illustrative One Page Design Tutorial

Stap 17 - vuurpyl

jy kan hierdie stap doen óf op die vuurpyl-dokument of in die hoof een. Skep twee ellipse met die Ellipse Tool een kleiner as die ander, soos die onderstaande prentjie vertoon, gebruik die volgende kleure: #FF8A02, #FFC801. Voeg albei lae saam in 'n nuwe laag met die naam "Fire". Plaas dit dan net agter die "Raket" -laag. Dan pas 'n 9-pixel Gauss-vervaging toe en gebruik die Free Transform Controls die vuur 'n bietjie wat dit smaller maak.

Illustrative One Page Design Tutorial

Sterre Agtergrond

Stap 18 - Skep 'n gepasmaakte Borselvoorinstelling

Maak die sterreborstels oop van die voorgedeeltes, maak dan die Brush Presets Panel (F5) oop.

Onder Brush Tip Shape kies die 50px-ster en verander die grootte na 25px, Merk die boks Spacing en stel die waarde op tot 300%.

Onder verstrooiing stel Scatter na 1000% Beheer: Pendruk (in geval jy 'n grafiese tablet het) Tel: 1 en Count Jitter: 100%.

Op Color Dynamics, stel die Forround / Background Jitter tot 100%.

Laastens, stel die voorgrondkleur op: # E1F5FF en die agtergrondkleur na #FFFFFF, en verf op 'n nuwe laag net bokant die "Sky" -laag. Jy kan die deursigtigheid van die "Stars" -laag verminder om hulle 'n bietjie minder intens te maak.

Illustrative One Page Design Tutorial

Warmlugballon

Stap 19 - Die basiese vorms skep

Die tweede bykomende illustrasie van ons ontwerp sal my 'n lekker warmlugballon hê. Skep 'n nuwe dokument met die naam "Balloon" 400px x 600px en vul dit met 'n blou # 476492 agtergrondlaag. Dan, met behulp van die Pen Tool skep verskeie vorms soos madeliefie se kroonblare om die ballonvorm te bou.

Illustrative One Page Design Tutorial

Stap 20 - Ballon se mandjie

Gebruik die Peen-Gereedskap om 'n vorm te maak soos die eerste skermkiekie van die prentjie hieronder, en gebruik die Gereedskap Gereedskap twee diagonale balke langsaan en 'n dwarsbalk. Met die Pen Tool teken 'n baie eenvoudige mandjie en met die Ellipse Tool gee dit 'n bietjie diepte.

Illustrative One Page Design Tutorial

Stap 21 - Die ballon kleur

Verander nou die agtergrondkleur van die ballonlae na # FFE305 # D00000 en # 0162A7. Kies dan die middelste gedeelte en pas 'n Layer Style> Gradient Overlay toe met 'n Reflected Black - White gradient. Verander die Gradient Blending Mode na Overlay en speel met die hoek sodat dit 'n bietjie bult lyk. Dien dan 'n Innerskadu-styl toe, met behulp van die waardes wat op die onderstaande beeld getoon word, die belangrikste is die dekking, dit behoort ongeveer 50% te wees. Kopieer die laagstyl en pas dit toe aan al die ander vorms. As die skaduwee nie goed lyk nadat dit toegepas is nie, dubbelkliek op die Gradient Overlay-effek en klik en sleep oor die skaduwee om dit te beweeg.

Illustrative One Page Design Tutorial

Stap 22 - Kleur die Mandjie.

Verander die kleur van die mandjie verwante lae tot bruin: #874E21 en plak die laastyl van die vorige stap. Vir die interne ellips gebruik 'n donkerder kleur: #291700. En dis dit! voeg al die lae saam en gebruik Dodge / Burn Tools om skaduwees en ligte by te voeg.

Illustrative One Page Design Tutorial

Stap 23 - Plaas die ballonne

Kopieer die ballon en plak twee kopieë op die tweede gedeelte van ons dokument, een groter as die ander. Kies die kleiner ballon en gebruik die Lasso Tool maak 'n keuse van die werklike ballon. Druk dan op Command + U om Hue Saturation waardes aan te pas en verander soos jy wil. Plus jy kan diepte van die veld byvoeg deur die tweede ballon 'n bietjie te vervaag.

Illustrative One Page Design Tutorial

Wolke

Stap 24 - Teken die Wolke

Om vorentoe te beweeg met die agtergrondontwerp, is dit tyd om wolke by ons lug te voeg. Skep 'n nuwe dokument met die naam "Clouds" enige grootte wat jy wil, en vul dit met dieselfde agtergrond as "ballon" -lêer: #486493. Gebruik dan die Pen-hulpmiddel om 'n paar wit wolke te maak, soos die prentjie hieronder toon.

Illustrative One Page Design Tutorial

Stap 25 - Wolke Styles

Pas op die wolke lae 'n Laag Styl> Gradient Overlay met hierdie kleure: #D1D7E7 - #FFFFFF Hoek: 0 grade, en 'n Inner Glow kleur: # BBD5D6 Blend modus: Normaal, die grootte hang af van die grootte van jou wolke, m gebruik 6px.

Voeg 'n paar wolke op die afdeling 2 van ons hoofstuk, agter die ballonne, as jy 'n bietjie diep in die landskap wil voeg, verduister sommige wolke 'n bietjie.

Illustrative One Page Design Tutorial

Stap 26 - Meer Wolke

Voeg meer wolke langs die horison by die afdeling 3 van die hoof dokument, verander die kleure 'n bietjie, want die Inner Glow gebruik #FFFFFF en vir die Gradient Overlay: #DBE1F1 - #FFFFFF.  Jy moet iets soos die prentjie hieronder kry.

Illustrative One Page Design Tutorial

Stap 27 - Tyd om 'n breek te neem

Ons het net die lug voltooi, onthou, moenie belangrike elemente langs die grens plaas nie en hou al die lae georganiseer. Ons is halfpad, dit is 'n goeie tyd om koffie te kry!

Illustrative One Page Design Tutorial

Berge

Stap 28

Kom ons voeg die berge by, hierdie keer werk ek reg op die hoofdokument. Gebruik die Pen Tool om 'n bergagtige vorm te maak soos in die prent hieronder aangedui. Dien dan 'n Laagstyl> Gradient Overlay toe met die volgende kleure: # 557200 - # 88B707 en stel die hoek as beter pas vir jou, in hierdie geval 99 grade. Dan dupliseer die berg, plaas dit agter die eerste berg en maak dit 'n bietjie groter, en verander die kleure van die Gradient Overlay na: #415800 - #8AB00B om dit 'n bietjie donkerder te maak.

Illustrative One Page Design Tutorial

Stap 29 - Lig en skaduwees

Skep 'n nuwe laag bo die Big Mountain en noem dit 'Shadows' met 'n groot sagte Borsel en hierdie kleur: #527300 verf sommige skaduwees. Dan Command / Ctrl- Klik op die berglaag om 'n keuse daaroor te skep en druk dan op Command / Ctrl + Shift + I om die seleksie te omkeer en die seleksie uit die "Skaduwee" -laag te verwyder. Herhaal die proses om 'n laag te skep met die naam "Lights" met 'n liggroenkleurige Borsel om ligte aan die berge by te voeg.

Illustrative One Page Design Tutorial

Bome

Stap 30 - Teken die bome

Gebruik die Pen Tool, teken die boomstam en sommige takke. Teken dan op 'n nuwe laag 'n gestileerde vorm met die blare. Voeg 'n Gradient Overlay Layer-styl op die stamlaag toe deur hierdie kleure te gebruik: #574E00, #957800 die hoek hang baie van jou vorm af. Vir die blare gebruik die volgende kleure vir die Gradient Overlay: #577E01, #8DDA00. Voeg dan meer blare op klein bosse voor die takke.

Skep verskillende vorms en as jy wil, voeg 'n bietjie donker, donker ellips by die basis van elke boom. Raster elke boom en beweeg vorentoe.

Illustrative One Page Design Tutorial

Stap 31 - Plaas die bome op die agtergrond

Plaas die bome oor die berge en oor die groen veld op die afdelings 3 en 4 van ons hoof dokument, maak die bome onderaan die beeld groter as die een langs die berge om 'n diepte van die veld illusie te skep, kleinste bome 'n bietjie.

Gebruik uiteindelik die Dodge / Burn Tools op die grootste bome om die intensiteit van die skadu's te verhoog.

Illustrative One Page Design Tutorial

Stap 32 - Voltooiing van die Agtergrond

Op hierdie punt het jy 'n mooi illustratiewe agtergrondontwerp. Plaas al die agtergrond verwante lae in 'n gids genaamd "Agtergrond".

Illustrative One Page Design Tutorial

Bladsy Titel (Logo)

Stap 33 - Bladsy Titel

Kom ons voeg die bladsy titel by, gebruik die Tipe Gereedskap twee tekslaaie, op die eerste tipe "Webontwerp" en op die tweede: "Tutsplus" (Natuurlik kan u hierdie woorde self vervang). Dan op die karakterspaneel die lettertipe vir Futura Book (jy kan enige ander gebruik). Vir die eerste reël stel die grootte tot 42pt, Kerning: 0pt, merk die All Caps opsie en stel die Foreground-kleur na White #FFFFFF. Vir die tweede lyn gebruik ek ook Futura Book, Grootte 18pt en 1250pt van Kerning, stel die voorgrondkleur aan # FFD001 en merk die All Caps opsie ook.

Illustrative One Page Design Tutorial

Stap 34 - bladsy titel besonderhede

Gebruik die Line Tool, teken 'n blou lyn (# 9AA4D9), voeg 'n wit Outer Glow-effek by en rasteriseer die lyn (voeg dit saam met 'n swart laag bo of onder dit). Dien dan 'n Laagmasker> Alles in en vul die masker met 'n Swart / Wit weerspieël verloop.

Maak seker dat die titel naby die tweede gids van links is, wat 10 pixels regs van die 960-linkerkant beteken.

Illustrative One Page Design Tutorial

Navigatiebalk

Stap 35 - Navigasie Agtergrond

Gebruik die Gereedskap Gereedskap om 'n klein wit reghoek in die boonste reghoek van die afdeling 1 te maak, stel die vulwaarde op 25% en voeg dan 'n 1pixel wit streep, deursigtigheid: 50% by. Rasteriseer die laag deur dit saam te voeg met 'n swart laag bo of onder, voeg 'n laagmasker by> Alles verberg ... en vul dit met 'n weerspieëlde swart / wit gradiënt, probeer om iets soos die onderkant van die prentjie hieronder te kry.

Illustrative One Page Design Tutorial

Stap 36 - Navigasie Skakels

CSS3 stel ons in staat om lettertipes op ons webwerf in te sluit. Daar is 'n paar gratis lettertipes wat gratis lettertipes bevat wat gereed is om op ons ontwerp te gebruik. Ons sal handig wees met die pragtige lettertipe genaamd: "Bonveno". Tik die navigasie skakels met behulp van Bonveno, Grootte: 12pt, Alle Caps en Voorgrond: Wit. Kies die HOME skakel en markeer dit met geel #FFCF00. Voeg 'n instruksionele teks by: "Spring na" met behulp van bonveno, grootte 8px en grys voorgrond.

Illustrative One Page Design Tutorial

Stap 37 - Nav Bar besonderhede

Om 'n beter agtergrond te hê, dupliseer die "Nav" -laag, en skuif die kopie 'n paar pixels onder aan die linkerkant. Uiteindelik, verander elke laag se deursigtigheid tot 50%. Plaas al die navigasie verwante lae op 'n gids genaamd "Navigation".

Illustrative One Page Design Tutorial

Stap 38 - Effekte by die Titel voeg

Om meer klem op die werfnaam te gee, kies die groot woord en gebruik 'n subtiele gradiënt oorlaag (#C5C5C5 - #FFFFFF) en 'n klein Drop Shadow (Afstand en Grootte 2 px). Dien die klein druppelskaduwee toe op die tweede lyn ook.

Illustrative One Page Design Tutorial

Welkom teks

Stap 39 - Voeg die Titel by

Kom ons voeg die welkomsttekst by, ons sal begin om die titel by te voeg. Aangesien die titels gewone teks moet wees, gebruik Bonveno lettertipe en geel voorgrond (#FFCF00). Pas die Drop Shadow toe wat op die vorige stap gewys is. Moenie huiwer om verskeie gidse te gebruik om u inhoud te merk nie. In hierdie geval skep ek gidse 10 px bo en onder die welkome titel om my te help om die paragraaf teks en die agtergrond daarvan by te voeg.

Illustrative One Page Design Tutorial

Stap 40 - Welkom Box agtergrond

Gebruik die Gereedskap Gereedskap om 'n boks as 'n agtergrond vir die welkomsttekst te teken, gebruik hierdie kleur # 0E1122 vir die boks en tot onder 25%. Behalwe voeg 'n 1px Stroke toe met hierdie kleur #4E6575.

Illustrative One Page Design Tutorial

Stap 41 - Styl die teks agtergrond

Rasteriseer die boks (voeg dit saam met 'n leë laag), dan pas 'n laagmasker toe en vul dit met 'n swart-wit gradiënt. Jy kan 'n groot sagte kwas gebruik en verf oor die laagmasker om sommige areas te verberg om die vervaagte sagter te laat lyk. Laastens, net soos met die navigasie sleg, dupliseer die agtergrond van die boks en beweeg dit 'n paar pixels onder links om 'n styl te skep wat soortgelyk is aan die een wat onderaan die prentjie hieronder verskyn.

Illustrative One Page Design Tutorial

Stap 42 - Voeg die welkomsttekst by

Gebruik die Tipe Gereedskap om 'n boks van Paragraaf Teks te maak en vul dit in met Lipsum-teks, gebruik "Lucida Sans - Regular" as font gesig, Grootte 11px, Leiding: 19pt, en Voorgrond Kleur: Wit. Ten slotte, aangesien CSS3 ons toelaat om hierdie soort besonderhede by te voeg, voeg 'n 2px Black Drop Shadow by die paragraaf van die teks.

Illustrative One Page Design Tutorial

Stap 43 - Sosiale Media Skakels

Gebruik dieselfde instruksies soos aangedui op Stappe 40 en 41 om hierdie keer 'n agtergrond te skep, maar kleiner. Open die sosiale netwerk ikone uit die bates en plak die volgende ikone: RSS, Twitter en Facebook, voel vry om die ikone van jou voorkeur by te voeg. Ten slotte, skryf die woord "Netwerk" as 'n titel en gebruik "Helvetica" (Arial werk ook fyn) om 'n paar wit getalle inskrywers, volgers en houers by te voeg.

Illustrative One Page Design Tutorial

Stap 44 - Besoek die welkomblad

Op hierdie punt het ons die afdeling 1 wat die werklike welkombladsy (of tuisblad) is. Dit is 'n goeie tyd om te hersien dat alles in 'n behoorlike posisie is. Probeer om balans te hou met die wit tempo, bv. Die spasie tussen die linkerkant en die welkomsttekst en die regte grens met die netwerkikone is dieselfde. Werk met wit spasie (wat natuurlik nie letterlik wit is nie) is baie ingewikkeld, verwerp die impuls om elke klein spasie met 'n prent of ikoon in te vul. Dikwels is 'n wye en duidelike agtergrond meer as 'n duisend blink elemente.

Behalwe dat al jou lae georganiseer word, is onderaan die prentjie hieronder 'n dopstruktuur wat ek gemaak het. Een van die belangrikste dopgehou hier is "Nav", ek beplan om 'n swaaiende navigasie met behulp van JavaScript te skep, maar vir mock-up doeleindes moet ons dit 'n paar keer dupliseer om te sien hoe die ander bladsye of afdelings lyk.

Illustrative One Page Design Tutorial

About Us

Stap 45 - Oor ons afdeling

Vir hierdie afdeling, herhaal basies die proses van die stappe 39-42, maar plaas die lae aan die regterkant van die tweede afdeling wat die titel verander na "About Us". Op hierdie stadium het ek beplan om 'n tabbladsy-funksie by te voeg, maar verander die tabblokposisies aan die onderkant, met behulp van die "Bonveno" lettertipe, skryf die tabs onder die paragraaf oor ons. Gebruik hierdie voorgrondkleur vir die oortjies: #C3DFFF en White vir die gekose oortjie. Laastens, gebruik die Polygoon-instrument 'n Sky Blue # D5E5F2 driehoek om die keuse te merk.

Illustrative One Page Design Tutorial

Stap 46 - Dupliseer die navigatiebalk

Net om te sien hoe dit lyk, dupliseer die vorige afdeling se "Nav" gids, maar merk die woord "About Us" op die navigasie skakels. Maak seker al die inhoud is tussen die marges van die afdeling en organiseer die lae in dopgehou.

Illustrative One Page Design Tutorial

Portefeulje

Stap 47 - Portefeuljesafdeling

Herhaal die instruksies van die vorige stappe om 'n vak inhoud te skep, maar in plaas van geel vir die titel, gebruik blou: # 336A91 en gebruik die volgende kleur vir die boks agtergrond: # 7FA5D2 en 'n wit streeplaag-styl.

Illustrative One Page Design Tutorial

Stap 48 - Portefeulje-items Plaashouers

Vir hierdie afdeling sal ons 'n baie eenvoudige portefeuljegalery ontwerp. Gebruik die Gereedskap Gereedskap om 'n paar ligblou blokkies aan die linkerkant van die onlangs geskep boks inhoud te teken. en 'n groot reghoek aan die linkerkantste terrein. Voeg 'n Laagstyl> Stroke, 1px en Wit by elke boks. Gebruik die Gereedskap Gereedskap om klein blokkies onderaan regs van die groot vierkant te maak wat soos 'n duimnaels sal wees om 'n soort oorgangseffect te beheer. Voeg dan 'n paar duimtekste oor elke vierkant by om uit te beeld watter inhoud daar geplaas moet word. Jy kan eintlik voorbeeldprente gebruik as jy wil.

Illustrative One Page Design Tutorial

Stap 49 - Sosiale Portefeulje

Volg dieselfde proses as Stap 43, voeg 'n paar skakels by vir Social Media portefeulje, soos Flickr of LinkedIn. Gebruik die "Bonveno" lettertipe vir die titel en hierdie kleur: #034D8A.

Illustrative One Page Design Tutorial

Stap 50 - Hersien ooit is in plek

Dupliseer die "Nav" gids nogmaals en merk die woord "Portfolio". Maak seker dat alles binne die grense van die afdeling drie is en organiseer jou lae.

Illustrative One Page Design Tutorial

Kontak Ons

Stap 51 - Kontak agtergrond en etikette

Ons is amper klaar, laat ons nou 'n houer byvoeg vir die kontakvorm. In hierdie geval moet die reghoek groen wees # 67A802 en die Stroke-ligter groen #B8D942. Die titel van die afdeling moet "Kontak ons" wees en ek gebruik 'n wit voorgrond om die kontras met die agtergrond te verhoog. Verf die boks 'n bietjie en dupliseer om die dubbele reël-effek van die vorige inhoudskassies te skep.

Uiteindelik gebruik Wit voorgrond en 'n kleiner Grootte van 'Bonveno' lettertipe die kontakvorm etikette.Pas die Drop Shadow toe wat ons ook vir die titels by hierdie etikette gebruik.

Illustrative One Page Design Tutorial

Stap 52 - Teken die invoervakke

Gebruik die Gereedskap vir Afgeronde Reghoek (5px-radius), teken die volgende vorms wat die werklike insetareas van ons kontakvorm sal word. Gebruik dan die laagstyle van die Innerskadu, Kleuroorlêer (#4B6800) en Stroke (#A8D02F) hieronder.

Illustrative One Page Design Tutorial

Stap 53 - Voeg die inset teks by

Met behulp van die "Bonveno" -tipe-tipe 'n paar dummy-woorde in die invoervakse, gebruik ek hierdie kleur as voorgrond: #AFD437. Onder die invoervakies kan u ook 'n foonkontaklyn byvoeg (verander gerus die inligting soos u wil).

Illustrative One Page Design Tutorial

Stap 54 - Kontakknoppie

Laastens, laat ons die kontakknoppie byvoeg, met die afgeronde rechthoek (5px-radius) teken 'n knoppie. Dien 'n Drop Shadow, 'n Gradient Overlay (#B17F02 - #FFD101) en 'n Stroke Style (#FFDB04) toe.

Illustrative One Page Design Tutorial

Stap 55 - Kontakknoppie

Vir die knoppie se teks gebruik ek die "Futura Black" lettertipe, maar voel vry om enige ander lettertipe te gebruik. Dien dan 'n Inner Shadow, 'n Kleur Overlay (# 564100) en 'n Stroke (# F0C401) toe op die tekslaag. Jy moet iets baie soortgelyk aan die onderkant van die prentjie hieronder hê.

Illustrative One Page Design Tutorial

Stap 56 - Hersien die Kontakafdeling

Nadat u 'n nuwe voorbeeld van die navigasiekieslys duplikateer, beklemtoon die woord "Kontak" hierdie keer. Uiteindelik moet u verseker dat al die inhoud van die kontakblad binne die grense van die vierde afdeling van die ontwerp is en u lae organiseer.

Illustrative One Page Design Tutorial

Afsluiting

En dis dit! Hoop jy hou van hierdie tut, nou is dit jou beurt om jou eie illustratiewe eenblad webontwerp te probeer!

.Illustrative One Page Design Tutorial
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.