Maak een schone Website lay – out in Photoshop-het ontwerpen van een website lay-out is meer dan het regelen van kleurrijke afbeeldingen en het vullen van wat tekst in de tekst frames. Het is een aanpak die boekdelen spreekt over het bedrijf van uw klant. De kleuren en afbeeldingen van de website bepalen de aard van het bedrijf, terwijl de kwaliteit van het ontwerp en de eenvoudige navigatie stroom van de website moet de gebruiker te binden met de organisatie en zet hem in een potentiële klant.
het ontwerpen van een goed uitziende en gemakkelijk toegankelijke website lay-out is verplicht voor elke wannabe webdesigner. Deze tutorial is bedoeld om u door het proces van het creëren van een website lay-out eenvoudige en schone website direct vanaf nul. Tijdens het proces, zult u belangrijke punten die u zullen helpen verder meer kennis over web designing leren.
schrijf uw vereisten op voordat u een website lay-out ontwerpt.
voordat u begint met het ontwerpen van een website lay-out, moet u weten hoe uw website eruit zal zien en wat de onderwerpen zijn die u in de website moet opnemen. Het is van cruciaal belang om een lijst van website lay-out elementen die uw klant nodig heeft op zijn website te maken. Samen met dat, de kwaliteit van een goede ontwerper is om een mock van de hele website voor te bereiden voordat hij begint te werken aan de uiteindelijke template.
begin uw gratis cursus ontwerpen
3D-animatie, modelleren, simulatie, spelontwikkeling & overige
verschillende ontwerpen bedrijven passen verschillende niveaus van pre-ontwerpen strategieën, die draad framing, prototyping, mockup, beta-versies en nog veel meer kan bevatten. In deze zelfstudie maken we een mock-upversie voordat we het originele sjabloonontwerp starten. Ik gebruik de grijstinten, die het mogelijk maken het mockup-blok te identificeren.
Canvas
jaren daarvoor waren er weinig besturingssystemen en beperkte apparaten om toegang te krijgen tot websites, maar de afmetingen van de pagina waren vastgesteld op één of twee formaten. Vandaag is het scenario totaal anders. Eindgebruikers hebben toegang tot sites op Desktops van verschillende groottes, mobiele telefoons, iPads en Tablets. Er is geen kans dat u kunt uw webpagina vast te stellen aan een bepaalde grootte in deze uiteenlopende situatie. Maar er zijn een aantal industrie standaard maten toegepast voor elk apparaat. U vindt langzaam uw favoriete maat, of uw klant kan u verwijzen naar een website om de maten na te bootsen.
in dit geval werken we aan de volgende dimensies. Maak je geen zorgen over de hoogte, want het gaat veranderen in de tijd. Hoe meer inhoud u toevoegt aan uw website, hoe meer de hoogte zal zijn.
onthoud dat het gebruikelijk is om verticaal naar beneden te scrollen, zodat u mogelijk niet op een bepaalde hoogte voor uw webpagina kunt herstellen, tenzij u niet wilt dat de gebruiker als Google op uw startpagina scrolt. Maar het is noodzakelijk om niet horizontaal te scrollen. Zo, beperk uw breedte volgens de industriestandaarden en niet creatief met het horizontale scrollen.
voor het web is de resolutie beperkt tot 72. Er zijn hogere resolutie afbeeldingen en pagina ‘ s gevonden op iPads en enkele tablets onlangs. Maar het is op een zeldzame gelegenheid, en het is beter om vast te houden met 72 gezien de internetsnelheid over de hele wereld.
Selecteer de bestanden met behulp van de opdracht Ctrl+A en teken hulplijnen gelijkmatig door de sjabloon. Een website moet netjes worden georganiseerd met elk element coherent aan elkaar gerangschikt. En website lay-out richtlijnen helpen u om het gemakkelijk te verkrijgen.
maak je model klaar.
het plaatsen van uw mockup-bestand op uw oorspronkelijke sjabloon helpt u om ruim voldoende tijd te besparen. Het ontwerpen van uw website wordt zo eenvoudig dat je uiteindelijk het voltooien van het kader binnen enkele minuten. Echter, de mockup zal alleen helpen bij het ontwerpen van de frames. Het voltooien van de elementen van het ontwerp met details, type arrangement en uitlijning zal meer tijd in beslag nemen dan het tekenen van de website lay-out.
kleurenschema en andere keuzes
het volgende na het gereed maken van uw framework is om een kleurenschema te kiezen. Maar het is beter om je kleuren klaar te krijgen voordat je begint te werken aan het ontwerp.
het komt allemaal neer op de boodschap dat je je wapens klaar moet maken voordat je het ontwerp start. Alles, inclusief pictogrammen, afbeeldingen en kleurkeuzes, moet klaar zijn voordat u begint met werken. Het organiseren en plannen van uw werk bespaart meer tijd en richt zich op design zonder belemmering tussendoor.
het kiezen van kleuren kan de keuze van een ontwerper zijn als het bedrijf nieuw is en nog geen huisstijl heeft. Klanten geven een idee van welke tinten Ze willen dat het logo of de achtergrond in sommige gevallen moet zijn. In de kwestie van bestaande bedrijven waar u kan nodig zijn om een hele website opnieuw te ontwerpen,u kan hebben om dezelfde kleuren te kiezen als per de behoeften van de klant.
er zijn tal van websites die u kunnen helpen om miljoenen kleurenschema ‘ s uit de archieven te kiezen. Probeer de volgende websites om te genieten van een ruime keuze aan kleurencombinaties.
kleur.Adobe.com
Colourlovers.com
hier heb ik enkele tinten blauw gekozen om te gebruiken voor de website. De hele website zal worden gepland binnen het volgende kleurenschema. Vergeet niet om drie of vier verschillende kleurencombinaties te kiezen, omdat we niet weten welke kleur de klant de voorkeur geeft. Zodra de klant een kleurenschema heeft voltooid, slaat u de schaduwwaarden op en zorgt u ervoor dat de kleuren een vitale rol spelen in elke verticale van de organisatie, vooral in de huisstijl.
ontwerpproces
er zijn vele manieren om uw ontwerpers voort te zetten. Er zijn geen harde en snelle website lay-out regels te definiëren of te volgen het proces van het ontwerpen; het is meestal een proces de ontwerper zal kiezen om zijn gemak.
sommige ontwerpers willen de volledige blokken en frames bouwen en beginnen te werken aan details in de tweede fase, gevolgd door het type en ten slotte uitlijningen en aanpassingen. Sommigen willen een deel van de pagina in een keer af te maken en neem het naar het volgende deel. We volgen de tweede stijl.
We eindigen de website in de volgende stappen
- Header & Voettekst
- Wat we doen
- Diensten
- Formulier
- Nieuws
- Voettekst
Header & Voettekst
De vuistregel om te bepalen van de afmetingen van de kop-of banner links naar uw creativiteit. Volgens de nieuwste trends, websites verschijnen met een enorme afbeelding die uw hele computerscherm dekt. De stijl wordt aangeduid als Hero image, die onlangs vrij populair werd.
in dit geval begonnen we met 120 pixels header en een 550 pixel hoogte voor de banner. De breedte moet overeenkomen met het documentformaat.
ontwerpen met effen kleur hebben een platte look die niet goed past bij grotere frames of afbeeldingen. Om de vlakke look te voorkomen, heb ik een kleurverloop overlay laag bovenop de banner aangebracht. Het geeft de banner een diepte die langzaam transformeert van de ene schaduw naar de andere.
vervolgens begonnen we het Logo te importeren en plaats het op de linkerbovenhoek van de header en een ander groter logo in het midden van de banner. U kunt ook de website lay-out vector vormen in de rechterbovenhoek, die worden gebruikt om de social media links te delen.
in dit stadium ben ik klaar met het toevoegen van het type in het Header & Banner gedeelte. Bedrijfsnaam, merk bericht, met links en diensten, worden toegevoegd in de tekst. U kunt ook een transparante knop op de Banner observeren.
platte tekst of te veel van het type zonder speciale functies zal de look en feel van uw webpagina bederven; de pagina zal de gebruiker snel vervelen, waardoor hij uw site snel kan verlaten. Bekijk de vectorvorm die ik heb toegevoegd aan de services links in de rechterbovenhoek van de banner. De stijl is eenvoudig, maar het vult de leegte vermijden van de alledaagse look.
Kies een afbeelding die geschikt is voor het bedrijf. Er zijn miljoenen stockafbeeldingen beschikbaar op het web, en het zal niet te lang duren om een afbeelding te vinden die bij uw eis past.
in mijn geval vond ik een beeld van hoge kwaliteit dat volgens mij goed zal passen bij mijn website. Ik heb geen business thema voor de website, dus ik ben vrij om een afbeelding die er goed uitziet op de banner post kiezen.
probeer enkele hd-afbeeldingen te downloaden van de gratis stockafbeeldingen hieronder
www..com.
mengen is een kunst die je moet beheersen om mooie banners te produceren. Hier heb ik drie lagen gemengd om het effect in de bovenstaande afbeelding te bereiken. Dit heb ik gedaan
- plaats de afbeelding op de blauwe kleurenbanner
- plaats de kleurverloop overlay boven de afbeelding
- verander de dekking van de afbeelding 40 procent en verander de Mengmodus naar verschil.
- Bekijk het lagen palet in de afbeelding hierboven om te begrijpen hoe de lagen op elkaar gestapeld zijn.
dit is hoe uw Header & Banner eruit zal zien als we er net mee klaar zijn. We werken aan één deel tegelijk, en het is tijd om naar het volgende niveau te gaan.
uitlijning is cruciaal als het gaat om het type; heb een idee van hoe uw site eruit moet zien, en tekst moet worden uitgelijnd voordat u het start. Op dit niveau gebruikte ik twee verschillende tekstframes, beide uitgelijnd naar links.
de volgende stap is het ontwerpen van het dienstengedeelte van de webpagina. Ik ontwierp een metalen ster in grijze tinten om verschillende diensten van het bedrijf te presenteren. De bedoeling achter het gebruik van de ster symbool is 5 sterren diensten.
als het gaat om het uitlijnen van de tekst, zijn hulplijnen uw beste vrienden. Samenhang binnen type en objecten kan worden verkregen door goed gebruik te maken van de witruimte en gelijke openingen tussen de elementen van het ontwerp. Ik gebruikte veel website lay-out richtlijnen om te zien dat alle objecten in het frame de juiste gaten en afstanden moeten behouden, die een behoorlijke hoeveelheid witruimte naar buiten brengen.
de volgende stap van ons ontwerp is het aanmaken van het formulierveld. In dit geval werk ik tegengesteld aan de methode die we hebben gebruikt bij het ontwerpen van de banner. We zullen de afbeeldingslaag onder de effen gekleurde laag plaatsen en een gradiëntlaag bovenop de twee lagen aanbrengen om er beter uit te zien. Spelen met de blending modi is altijd essentieel, terwijl het plaatsen van grotere beelden.
de keuze van de afbeeldingen voor deze site heeft geen specifiek thema. Ik denk dat dit beeld zal helpen de site er beter uitzien.
plaats de afbeelding onder de gekleurde achtergrondlaag. Om de afbeelding precies op de grootte van de gekleurde laag te bevestigen, gebruikt u opties voor laag maskeren.
kijk in het lagenpalet in bovenstaande afbeelding. De effen blauw gekleurde laag bevindt zich aan de bovenkant van de afbeelding, de Mengmodus wordt omgezet in overlay en de dekking wordt gereduceerd tot 65 procent.
ik gebruikte de gradiëntkaart boven op de twee lagen. De Mengmodus wordt gewijzigd in Tint en de dekking blijft hetzelfde.
de form box is klaar, wat ons brengt naar het einde van het vierde niveau in onze website ontwerp.
ons volgende niveau bestaat uit twee eenvoudige tekstframes. Het lijkt op het niveau twee van de webpagina, en ik gebruikte uitgelijnd de twee vakken vergelijkbaar met de top. Het handhaven van samenhang in uitlijning is een goede manier om de witruimte te gebruiken.
naarmate we het laatste deel van de pagina bereiken, is het tijd om opnieuw naar de afmetingen van de voettekst te kijken. De ontwerper moet plannen over de hoogte van de voettekst op basis van de links die hij daar moet gebruiken. In dit geval gaf ik een hoogte van 170 Pixels aan mijn voettekst. De breedte blijft hetzelfde als de website.
plaats de links en afbeeldingen volgens uw eis.
hiermee hebben we het ontwerpgedeelte van onze website afgesloten. De kleurcombinaties die we hebben gebruikt zijn minimaal; we maken gebruik van veel witruimte in ons ontwerp en hebben eenvoudige tekst met minimale lettertypen toegevoegd. De bedoeling is om een schone webpagina te ontwerpen, waarvan we hopen dat deze wordt vervuld.
kijk nogmaals naar het ontwerp van de hele pagina hieronder.
