Hoe Om 'n Sjabloon Vir 'n Webwerf Te Teken

INHOUDSOPGAWE:

Hoe Om 'n Sjabloon Vir 'n Webwerf Te Teken
Hoe Om 'n Sjabloon Vir 'n Webwerf Te Teken

Video: Hoe Om 'n Sjabloon Vir 'n Webwerf Te Teken

Video: Hoe Om 'n Sjabloon Vir 'n Webwerf Te Teken
Video: Hoe om 'n protea te vou. 2024, Mei
Anonim

Daar is 'n groot aantal webwerf-sjablone op die internet, maar dit het een nadeel - dit is nie uniek nie. As die werfseienaar nie wil hê dat die ontwerp van sy webwerf elders moet herhaal nie, kan hy 'n sjabloon by 'n professionele ontwerper bestel of dit self probeer skep.

Hoe om 'n sjabloon vir 'n webwerf te teken
Hoe om 'n sjabloon vir 'n webwerf te teken

Dit is nodig

Adobe Photoshop-program

Instruksies

Stap 1

Die skep van u eie sjabloon is nie so 'n moeilike taak soos wat dit op die eerste oogopslag lyk nie. Om te werk, het u Adobe Photoshop nodig - u moet natuurlik ten minste 'n basiese begrip hê om daarmee te werk. Maar voordat u die program begin en begin skep, moet u vooraf oor die toekomstige ontwerp nadink. Die maklikste manier om dit te doen, is om eers ten minste honderd gereedgemaakte templates te leer ken, die voor- en nadele daarvan te evalueer. Let op die suksesvolle oplossings van sekere ontwerpelemente. Dit beteken nie dat u dit sal kopieër nie, maar dit is redelik om 'n paar pragtige en gerieflike oplossings as basis te neem.

Stap 2

Op grond van die ontleding van ander mense se sjablone en u eie kreatiwiteit, moet u 'n idee kry van hoe u webwerf daar sal uitsien. Die beste is om rowwe sketse te maak van die toekomstige ontwerp met kleurpotlode op gewone A4-velle. U moet eers met Photoshop begin werk nadat u 'n duidelike idee het van wat u presies gaan teken.

Stap 3

Begin Photoshop, skep 'n nuwe 1200x1600-projek, stel 'n deursigtige agtergrond. Skakel die liniaalhulpmiddel aan, as dit nog nie aan is nie, druk dit op die sleutelkombinasie Ctrl + R. Aktiveer snapping: View - Snapping.

Stap 4

Nou moet ons die sjabloon verdeel met gidse wat die rande van sy elemente - sye, kolomme, ens. U wil byvoorbeeld die sjabloon verdeel sodat daar 'n smal kolom aan die linkerkant is, 'n wye kolom regs aan die regterkant van die sjabloon en dat daar bo-aan ruimte is vir 'n opskrif. Dit beteken dat u drie vertikale lyne (die linkerrand van die sjabloon, die regterkant en die lyn tussen hulle) en 'n horisontale een nodig het, wat die onderste rand van die opskrif aandui. Om 'n vertikale lyn in te stel, skuif die wyser na die linker liniaal aan die linkerkant, druk op V en hou die sleutel ingedruk en sleep die lyn na die gewenste plek. Doen dieselfde met die ander twee vertikale lyne. Horisontale is op dieselfde manier gebou, slegs die boonste liniaal word gebruik.

Stap 5

Soek 'n agtergrond vir u sjabloon, dit moet 'n klein, herhalende patroon wees. Maak dit oop in Photoshop, kies, kopieer. Plak dan soveel keer in die sjabloon as u dit met die agtergrond moet invul. Plak word soos volg gedoen: "Wysig" - "Plak" en sleep dan die agtergrondarea na die gewenste plek. Dit is nog vinniger om 'n afbeelding in te voeg met die Ctrl + V-opdrag. Voeg 'n agtergrond vir die werfkop op dieselfde manier by. U kan verskillende gradiëntvullings gebruik om 'n agtergrond te skep.

Stap 6

Teken die rande van die sjabloon met die potloodhulpmiddel en fokus op die reeds getekende lyne (dit wil sê bo-op hulle). U het die basis van die eenvoudigste sjabloon ontvang, nou moet u dit aanvul met die nodige besonderhede - navigasieknoppies, menulyne, verskillende versieringselemente, ens. Lees die ooreenstemmende artikels oor die werk met Adobe Photoshop vir meer inligting oor hoe om knoppies en ander elemente te skep.

Stap 7

Die sjabloon is gemaak, nou moet u dit in stukke sny om dit in die html-bladsy in te voeg. Gebruik die snygereedskap om te sny. Om dit te vind, klik u met die rechtermuisknop op die Frame-instrument en kies Cutout in die menu wat oopmaak. Nou kan u die sjabloon na wens nesmaak en dan stoor: "File" - "Save for Web". Kies die lêertipe: HTML en beelde in die venster wat oopgaan, spesifiseer die lêernaam: index.htm en stoor dit. U het 'n index.htm-lêer en 'n prentmap met gesnyde beelde.

Aanbeveel: