Als u een eigen webpagina wilt maken, moet u weten hoe u een site in Photoshop maakt. Adobe Photoshop is een grafische editor. Het is mogelijk om lay-outs en hun individuele elementen te tekenen. Dit is een vrij lang en gecompliceerd proces. In de loop der jaren hebben webontwerpers geleerd hoe ze sjablonen kunnen ontwerpen en webpagina's er op kunnen lay-outen. Maar een eenvoudige lay-out kan elke persoon verzamelen. Alleen basiskennis en fantasie van Photoshop zijn nodig.

In Photoshop kan een eenvoudig siteontwerp worden getekend, zelfs een beginneling kan dat

Vanaf de eerste keer dat u een pagina zoals de ontwerpmasters waarschijnlijk niet krijgt. Maar u kunt een aantrekkelijke en ongemakkelijke service trekken.

Weinig over het maken van sites

Decodering van sommige termen.

• CSS (Cascading Style Sheets) en HTML (HyperText Markup Language) zijn computertalen die worden gebruikt om webresources te maken. Als u de broncode van een pagina op internet opent, zijn er HTML-tags.
• Lay-out - lay-out en installatie van materialen uit de lay-out, verander het in een html-sjabloon. Het hangt af van hoe de objecten zijn gerangschikt, of ze er mooi uitzien in de algehele compositie, of het handig is om tekst en dergelijke te lezen.
• Lagen maken deel uit van de lay-out. Samen vormen ze het grote geheel. Maar ze kunnen afzonderlijk worden bewerkt en verplaatst.
• Het lichaam is de plaats waar de inhoud zich bevindt. Er kan een achtergrond omheen zijn.
• Frame (Frame) - het pagina-element. Een blok met wat informatie, beeld, vorm.

Een prachtige site helemaal opnieuw maken, kan alleen een professional zijn. Om dit te doen, moet je het webontwerp begrijpen en HTML kennen. Aangezien de voltooide lay-out nog steeds competent moet opleggen.

Maar er zijn meer eenvoudige manieren. Er zijn online services en programma's die .psd (Photoshop-bestandsformaat) automatisch converteren naar HTML en CSS. U hoeft de sjabloon alleen correct te monteren.

Om Photoshop te gebruiken, is het niet nodig om een ​​artiest te zijn en om alle opties van het programma te begrijpen. Maar als je het voor het eerst bent begonnen en niet weet hoe je tekst moet invoegen, een geometrische vorm moet tekenen, een laag moet dupliceren, van kleur moet veranderen of een willekeurig gebied moet selecteren, moet je beginnen met iets eenvoudiger. Om een ​​lay-out in Photoshop te maken, hebben we op zijn minst de eerste vaardigheden nodig om met het hulpprogramma te werken en basisfuncties te begrijpen (hoe een lijn tekenen, een gids plaatsen, een lettertype selecteren en dergelijke).

Algemene informatie over netwerkdiensten is ook handig. De site kan worden gekenmerkt door de volgende criteria:

• Enkele pagina. Alle elementen, inhoud en alle inhoud van de bron staan ​​op één plek. Op een pagina. Als u de inhoud van de service wilt bekijken, klikt u niet op de koppelingen of opent u geen nieuwe tabbladen. Tegelijkertijd kan de site zelf willekeurig groot zijn. Het zal passen in een kleine reclamefolder en een enorme roman van 600 pagina's.
• Vol. Omvat daarom veel pagina's. Dit kunnen bijvoorbeeld "Thuis", "Forum", "Gastenboek", "Antwoorden op veelgestelde vragen", "Contacten" zijn. Voor elk van hen moet je een lay-out doen. U hebt ook navigatie en een sitemap nodig: een apart gedeelte met koppelingen naar alle onderdelen van de service. Zodat de gebruiker snel de bladwijzer kan vinden die hij nodig heeft.
• "Rubber". Wijzigt de grootte afhankelijk van de schermresolutie. Uitgerekt samen met browservenster. We moeten van tevoren berekenen hoe de site eruit zal zien. Als met een breedte van 1300 alles normaal wordt weergegeven, kan een deel van het artikel in 900 pixels buiten de randen van het frame "gaan", zullen de afbeeldingen niet rechtstaan ​​zoals het hoort en zal de flash-animatie het invoerformulier sluiten.
• Vast. De inhoud van de site verandert de grootte niet. De eenvoudigste en meest praktische optie. Om de pagina er solide uit te laten zien en bij het uitzetten van het venster was er geen "lege" ruimte aan de randen, je kunt een rubberen achtergrond maken.

lay-out

Bepaal eerst welk ontwerp je nodig hebt. Het is niet genoeg om je simpelweg "voor te stellen", en dan te regelen in Photoshop. Moet een duidelijk beeld zijn. Teken een patroon op gewoon papier. Het is niet nodig om elke afbeelding opnieuw te tekenen. Genoeg schema: een paar rechthoeken en cirkels, die gewoonlijk de elementen van een webpagina aanduiden. Bedenk hoe de frames worden gelokaliseerd, waar het beter is om een ​​logo te plaatsen, waar informatie voor bezoekers wordt geplaatst.

Zie voorbeelden van pagina's op internet. Denk aan welke je leuk vindt en waarom. Of het nu gaat om een ​​handige opstelling van frames, aangename kleuren of een interessante benadering van het ontwerp. Het ontwerp van iemand anders kopiëren is het niet waard. Het is genoeg om er inspiratie uit te halen. Hierna kunt u uitzoeken hoe u een site in Photoshop kunt tekenen.

• Maak een nieuw document (Bestand - Nieuw). Afmetingen worden geselecteerd met de berekening op kleine monitoren of lage resolutie: 1024 × 720 pixels. Dit is de breedte van het gedeelte "Informatie" en niet de hele afbeelding. Als u een pagina van 1100 pixels wilt, moet u een document maken van 1300 pixels breed. De lengte is namelijk niet vast - het hangt er vanaf hoeveel inhoud je op de bron wilt plaatsen. Dit zijn aanbevelingen, geen regels. Je kunt een grote lay-out bouwen als je wilt.
• Schakel de liniaal in. Druk op Ctrl + R of ga naar het menu Beeld - Linialen. Dit is een meetschaal. Ze verschijnt buiten de afbeelding. Zonder dit moet je de grootte en afstand "op het oog" schatten, wat niet echt van invloed is op het eindresultaat. U kunt deze functie configureren in het menu Bewerken - Instellingen - Eenheden van meting en linialen. Daar is het beter om centimeters per pixel te veranderen om met één parameter te werken, en niet om te berekenen hoeveel punten in één inch.
• Je moet ook het rooster activeren. Beeld - Toon - Grid of Ctrl + E (je kunt het ook uitschakelen). Dit is een soort analoog van een notebook in een kooi. In Photoshop worden verticale en horizontale lijnen weergegeven. Ze verschijnen niet op de tekening zelf. Ze zijn alleen te zien tijdens het bewerken. Deze functie is nodig om de elementen van de sjabloon gelijkmatig te rangschikken. Iemand die handiger is om met het rooster te werken, iemand zonder. Het is het beste om het in te schakelen als u voor de eerste keer een site maakt.
• Ga om het te configureren naar Bewerken - Instellingen - Gidsen, Raster en Fragmenten. Daar kunt u de grootte van de cellen kiezen, evenals de kleur en het type lijnen (effen, gestippeld, uit punten).

Een voorbeeld van modern siteontwerp

• Installeer de hulplijnen. Tussen hen zal de belangrijkste inhoudsbron zijn - het vaste lichaam van de site. En achter hen - een rubberen achtergrond. Klik hiervoor op Weergave - Nieuwe handleiding. Vink "Verticaal" aan in het vak "Oriëntatie". Noteer in het veld "Positie" de afstand waarop het object zich vanaf de linkerrand zal bevinden. Focus op de schaal van de liniaal.
• Er zijn twee hulplijnen nodig: rechts en links van de paginaraam. De afstand tussen beide moet maximaal 1003 pixels zijn voor beeldschermen met een resolutie van 1024 × 720. U kunt een andere breedte opgeven. Maar grote bronnen zijn lastig om te bekijken op kleine beeldschermen.
• Waarom 1003, niet 1024? Als de site naar beneden moet scrollen ("scrollen"), zal de browser een verticale schuifregelaar hebben om te scrollen. De grootte van deze schuif is ongeveer 21 pixels. Als u hier geen rekening mee houdt, verschijnt er een horizontale schuif. En de bezoeker van de resource zal de pagina links en rechts moeten verplaatsen om alle informatie te zien.
• Het lichaam moet zich in het midden van het canvas bevinden.

Dit zijn voorbereidende werkfasen. Hoe u een lay-out in Photoshop maakt, hangt af van uw verbeeldingskracht en smaak. Daarom zullen verder alleen algemene aanbevelingen van technische aard zijn.

• Ten eerste heeft je layout een achtergrond nodig. Het kan onafhankelijk worden gemaakt of van het netwerk worden gedownload. Er zijn veel bronnen met gratis texturen. Plaats geen afbeeldingen op de site waarop auteursrechten rusten. Neem geen heldere of contrasterende achtergrond. Het is beter om geen texturen te gebruiken met een groot aantal kleine opvallende details. Ze zullen de bezoeker afleiden van de hoofdtekst van de pagina.
• Als u de tekening eenvoudig in Photoshop opent, bevindt deze zich op een nieuw tabblad en wordt deze niet aan de lay-out toegevoegd. Markeer de hele achtergrond. Hiervoor hebt u de sneltoets Ctrl + A of het gereedschap Selectie nodig (deze bevindt zich in het linkerdeelvenster). Kopieer het en plak het in de sjabloon.
• Deze optie is ook beschikbaar als u op Bewerken - Plakken klikt.

• Een nieuwe laag verschijnt in de lijst rechtsonder. Klik erop met de rechter muisknop om de mogelijke acties te zien. In het menu "Laagopties" kunt u de naam ervan wijzigen. In de "Overlay-instellingen" zijn de basisbeeldinstellingen. Je kunt het laten gloeien, reliëf, glans, lijn, gradiënt. Als u een optie selecteert, worden de wijzigingen onmiddellijk in Photoshop weergegeven. Er is een set kant-en-klare stijlen. Dus vanuit de standaardtextuur worden originele ontwerpoplossingen gemaakt. En trek niets extra's.
• De knop "Filters" bevindt zich in de menubalk. Daar vindt u een verscheidenheid aan imitaties (pastel, aquarel, potloden), styling, texturen, schetsen, hoogtepunten, vervaging.
• U kunt een gewone achtergrond kiezen. Kleur hangt af van uw persoonlijke voorkeur. Maar het is beter om het niet zwart of giftig te maken. Geschikt beddengoed en zachte tinten of transparante kou (bijvoorbeeld lichtgrijs, lichtblauw).
• Na de texturen kunt u de site zelf verzamelen. Hier heb je de vrijheid om te creëren.
• Om een ​​vorm (lijn, vierkant, ovaal) toe te voegen, klikt u op de overeenkomstige knop aan de rechterkant. Het heeft het uiterlijk en de naam van het object dat momenteel is geselecteerd voor tekenen. Bijvoorbeeld "Ellipse Tool", "Polygon Tool". In Photoshop is het aantal vormen beperkt. Maar ze zijn te vinden op internet, gedownload en geïnstalleerd via het menu Bewerk - Set Management. Geef in het veld Type aan welke verzameling objecten u laadt.
• In verschillende versies van het programma worden deze cijfers op verschillende manieren genoemd. Ofwel door een knop in de vorm van een kleine zwarte driehoek (rechts) of door een tandwielpictogram of door het punt "Puntvorm" (dit staat onder de menubalk). Objecten kunnen worden gecombineerd, gegroepeerd, composities ervan worden gemaakt.
• Om een ​​tekstkader te maken, klikt u op de knop in de vorm van een hoofdletter "T". Selecteer vervolgens de plaats waar de tekens moeten worden gevonden, klik daar en typ wat u nodig heeft.
• Elk element is beter om op een aparte laag te zetten. Het is dus handiger om te verplaatsen en te bewerken zonder de hele site "aan te raken". Ga naar Lagen - Nieuw om dit object toe te voegen.

• Als u een afbeelding in een vooraf geselecteerd gebied wilt projecteren, selecteert u deze eerst en opent u vervolgens Bewerken - Speciaal plakken. Er zullen "Insert instead" en "Insert outside" opties zijn.
• U kunt een deel van de ene afbeelding naar een nieuwe laag overbrengen. Om dit te doen, selecteert u het, klik er met de rechtermuisknop op en selecteer "Knippen naar een nieuwe laag".
• Met vormen, bijschriften en afbeeldingen zijn dezelfde opties beschikbaar als met de achtergrond: effecten, filters enzovoort.
• In Photoshop zijn er nog veel gereedschappen om te tekenen: penselen, pennen, potloden.

U kunt een kwaliteitsresource maken, zelfs van eenvoudige geometrische objecten.

Er zijn hulpmiddelen met gratis lay-outs. Laad ze in Photoshop en bewerk ze indien nodig. Het is gemakkelijker en sneller dan helemaal opnieuw tekenen.

Hoe verander je een lay-out in een html-bestand?

U bent erachter gekomen hoe u een site in Photoshop kunt maken en hebt uw eerste lay-out ontworpen. Wat te doen? Het kan immers niet zomaar naar de hosting uploaden.

Het kan worden gegeven aan de codeerder die een html-sjabloon van hoge kwaliteit zal maken. Maar er is een andere optie. Gebruik de services om het PSD-bestand naar HTML en CSS te converteren.

• Psd2Html-converter. Betaalde online service. Converteer snel het Photoshop-formaat naar een webpagina-sjabloon. Met deze bron, zelfs van een slechte indeling, kunt u een fatsoenlijke site maken.
• HTML Panda.
• PSDCenter
• 40 dollar markup.

constructeurs

Lay-outs kunnen ook op speciale sites worden verzameld. Meestal is er een duidelijke en intuïtieve interface. U assembleert eenvoudig een sjabloon uit verschillende delen. Sommige elementen kunnen het beste in Photoshop worden getekend. Dus je krijgt het originele ontwerp. Ondanks het feit dat het is gemaakt op de constructor.

In Photoshop niet alleen tekenen. Het verzamelt lay-outs voor sites. In de meeste gevallen wordt dit gedaan door de meesters. Maar een eenvoudige sjabloon kan elke persoon maken. Alleen basiskennis van Photoshop is vereist.