Share
In deze zelfstudie stellen we een high-end webontwerp samen met een helder, dun lettertype, prachtige achtergrondafbeeldingen en slim gebruik van ruimte en lay-out. U kunt de techniek eenvoudig gebruiken om uw eigen unieke ontwerpen te maken.
Als u vervolgens deze tutorial hebt gelezen, kunt u overstappen naar onze zusterwebsite NETTUTS en deze blijven volgen terwijl we het ontwerp in schone en eenvoudige HTML bouwen. OK laten we rock'n'roll zijn!
Het is een vrij elegant ontwerp, dat waarschijnlijk zou passen bij een site van het designportfolio-type, maar echt zou kunnen worden veranderd voor allerlei doeleinden. Het is afhankelijk van een elegante typografie, een gestructureerde lay-out en een visueel interessante achtergrond.
De echte kracht van dit ontwerp is om u te laten zien wat u kunt bereiken door het simpel te houden. Aan het einde van dit Photoshop-gedeelte van de zelfstudie laat ik u zien hoe we eenvoudig achtergronden en lettertypen kunnen uitwisselen en uitleg kunnen geven waarom dit ontwerp werkt goed.
Het is een eenvoudige structuur: horizontaal menu, hoofdrubriek en inhoudsgebied. Hoewel dit een homepageontwerp is, kun je je voorstellen dat een binnenpagina gewoon een ander deelvenster en een nieuw inhoudsgebied zou hebben. Voor de eenvoud zullen we alleen het ontwerp van de startpagina samenstellen.
Maak eerst een nieuw document. De mijn is 1100px breed x 1100px hoog. Dit is zodat ik een website kan maken die is gemaakt voor 1024 px breed, maar nog steeds de ruimte heb om te beslissen wat er buiten het zichtbare gebied zal gebeuren, zodat het ook op grotere schermen aardig wordt afgebroken.
Nu is het onze eerste taak om een mooie abstracte achtergrond te creëren. Om dit te doen, tekenen we een lineaire gradiënt naar beneden met behulp van deze twee kleuren: # 1b204c tot # 472373.
Nu willen we een visueel interessante achtergrond die abstract genoeg is om niet af te leiden van de tekst. Gelukkig is er een geweldige aquarelafbeelding gratis beschikbaar via GoMedia's Arsenal, klik je op de freebie-sectie en vind je twee aquarellen; degene die we willen is de groenige.
Hoewel het erg aangenaam is, is het veel koeler als we op CTRL + I drukken en het omkeren zodat het zo mooi roze / paars op zwart is.
Kopieer nu de aquarel naar ons hoofddoek en druk op Ctrl + T om het naar een redelijk formaat te transformeren. Ons doel is hier om het te laten vervagen naar zwart aan de rechterkant (zodat we onze HTML later kunnen uitbreiden met meer gemak). Bovendien willen we het ook niet te lang verticaal, dus het is het beste om een beetje van het teveel te wissen. Pak hiervoor een penseel en verf in het zwart om de onderste delen te verwijderen.
Merk op dat het het beste is om een penseel met een bepaalde textuur te krijgen, dus het is niet voor de hand liggend dat we onderdelen hebben gewist. Als u in de penseellijst bladert, is er een penseel bij Photoshop dat eruit ziet als het penseel dat wordt weergegeven. Het is geen slecht penseel om te gebruiken. Natuurlijk heb je misschien nog mooiere penselen en voel je vrij om die te gebruiken.
Als u klaar bent, vult u de gebieden rechts en onderaan in met zwart, zodat het hele canvas door deze laag wordt bedekt.
Verlaag nu de dekking van de waterverflaag tot ongeveer 70% en stel de overvloeimodus in op Overlay. Op die manier gaat een deel van de kleuren door om een mooiere look te creëren.
Plaats nu in een nieuwe laag boven de waterverflaag en trek recht omhoog en maak een lineair verloop van zwart naar transparant, zodat je doek achteraf in principe naar beneden verdwijnt.
Teken in twee nieuwe lagen een paar radiale verlopen van wit in transparantie, de ene groter dan de andere. Stel deze in op Overlay en 40% en 100% opaciteit voor respectievelijk de grotere en kleinere.
Kortom, je zou een hoogtepunt op onze afbeelding moeten aanbrengen om het een beetje meer textuur te geven.
Dus hier is de voltooide achtergrond. Het is donker, abstract en heel elegant met de kleuren. Natuurlijk is roze meestal niet jouw specifieke kleurkeuze en als dat het geval is, kun je een kleuraanpassingslaag er bovenop toevoegen en deze gebruiken om de kleur aan te passen. Ik vind de roze / paars leuk, dus ga er mee aan de slag!
Nu maken we een nieuwe laag en voegen een "logo" toe. Ik heb niet echt een doel met dit ontwerp, dus besloot ik om wat tekst in te voegen en te doen alsof dat mijn logo was. Omdat deze tutorial de helft van Psdtuts + en dan de helft van NETTUTS is, schreef ik een nette kleine "psd vs net".
De lettertypen die ik hier gebruik zijn Egyptian505 BT Bold en Egyptian505 LT BT Light (de lichtere versie van het lettertype is wat ik heb gebruikt voor de 'vs').
Om het 'vs'-bit iets te laten stijgen, kun je de basislijncontrole gebruiken in het Karakterpalet (getoond in de tweede afbeelding hieronder).
Ten slotte heb ik ook een beetje laagstijl toegevoegd aan de tekst met een vage Gradient Overlay zoals weergegeven en een 1px Inner Glow met wit.
Nu op dit punt, schakelde ik mijn linialen in (Ctrl + R) en tekende ik een aantal gidsen. Ik verdeelde mijn pagina in drie kolommen met lijnen op 50px, 320px, 610px, 900px. Tenminste dat zijn de nummers die ik had moeten gebruiken. Als ik naar mijn screenshot kijk, realiseer ik me dat mijn derde regel is uitgeschakeld ... d'oh!
Hoe dan ook, het gaat erom dat ik de ruimte definieer waar ik alle elementen in ga plaatsen, en als ik meerdere pagina's zou maken, zou ik dit raster op verschillende manieren kunnen gebruiken. Zoals het is, met alleen de startpagina die wordt ontworpen, ga ik die drie kolommen een keer gebruiken - een beetje later.
OK, dus nu tekenen we in onze eerste zwarte doos. Maak met je linialen en hulplijnen nog een nieuwe laag en teken een rechthoekige selectiekader (M) die van de ene naar de andere kant gaat. Vul deze met zwart en stel deze laag in op 80% dekking, klik met de rechtermuisknop op de laag en kies Mengopties. Klik vervolgens op Lijn en voeg een 1px witte lijn toe aan de buitenkant en stel deze in op Overlay. Dit geeft ons een echt coole rand waardoor de doos er veel scherper uit zal zien.
Dupliceer nu de boxlaag en gebruik Ctrl + T om het vak zodanig te transformeren dat het dezelfde breedte heeft maar veel korter is (zoals hieronder getoond). Dit wordt onze navigatiekast.
Zet de dekking op 40% en de vulling op 50%. Dit maakt onze doos veel zwakker en geeft diepte aan de twee vakken, waardoor het ene belangrijker en indrukwekkender lijkt dan het andere.
Dit soort contrast tussen de twee vakken is een geweldige manier om visuele prioriteit tussen elementen in te stellen. Wanneer de gebruiker naar de pagina komt, willen we dat ze eerst ons grote bericht zien en vervolgens de navigatiebalk. Door het te laten vervagen, vertellen we de gebruiker dat de minder prominente persoon als tweede moet worden bekeken.
OK, nu voegen we wat tekst toe. Nogmaals, ik heb hier Egyptisch Licht gebruikt voor de grote koptekst (die een afbeelding zal zijn in de uiteindelijke HTML) en Arial voor de menu-items (die HTML-tekstkoppelingen zullen zijn).
Nu een woord over typografie. Dit ontwerp is sterk afhankelijk van het feit dat we een eenvoudig, schoon lettertype hebben gebruikt. Door de tekst mooi en groot te laten lijken deze erg gewaagd, maar tegelijkertijd omdat het een erg dun lettertype is, ziet het er elegant uit.
Als u op zoek bent naar een high-end designuitstraling, zijn dunne, klassieke lettertypen moeilijk te verslaan. Toen ik Helvetica Ultralight voor het eerst ontdekte, herinner ik me dat ik gek was geworden door al deze ontwerpen te ontwerpen die er echt minimaal en up-marketig uitzagen.
Bovendien heeft dit bepaalde lettertype-Egyptisch-een zeer scherpe, schuine streep, gecombineerd met een soort squarishness waardoor het er best cool uitziet (denk ik).
Er zijn tal van andere geweldige lettertypen die je zou kunnen gebruiken. Als algemene regel echter, wil je iets klassiekers. Of met andere woorden, tenzij u weet wat u doet, wilt u liever wegblijven bij echt vreemd uitziende lettertypen, bijvoorbeeld iets dat erg futuristisch oogt. Eigenlijk als een goede, algemene regel, tenzij je super zelfvertrouwen hebt, is het meestal beter om richting gewone lettertypen te gaan.
Een ander soort lettertype dat hier heel goed zou werken, is iets dat een beetje op technologie lijkt, zoals dit lettertype dat Chris Garrett Media gebruikt. Ik heb geen idee welk lettertype dat is, of wat dat type lettertype wordt genoemd, maar het is best netjes. Misschien kan een vriendelijke typofiel ons verlichten in de comments :-)
Hoe dan ook, na het zien van de site van Chris Garrett Media, besloot ik dat het best cool zou zijn om een verloop overlay aan mijn type toe te voegen en het een beetje glans te geven. Zoals je hieronder kunt zien, voegen we hier een Gradient Overlay toe van zwart naar wit, een beetje vervaagd en over de Overlay-modus.
Nu kunnen we een extra grote zwarte doos tekenen voor het inhoudsgebied. Eigenlijk kun je de eerdere laag gewoon dupliceren en opnieuw transformeren.
En dat brengt ons op het punt dat in de onderstaande afbeelding wordt getoond. Het ziet er best cool uit!!
Nu voegen we een beetje dummy-inhoud toe aan de inhoud. Hier heb ik opnieuw Arial gebruikt voor het grootste deel van de tekst, maar voor de koppen in plaats van Egyptisch te gebruiken, ben ik met Georgië gegaan. Georgia is niet zo elegant, maar is een standaardlettertype, wat betekent dat ik deze koppen kan maken in gewone oude HTML in plaats van te vertrouwen op afbeeldingen (of Flash).
Eigenlijk is er met Windows Vista's release ook nog een ander semi-standaard lettertype dat hier goed werkt, genaamd Cambria. Maar Cambria heeft enkele rare weergaveproblemen in Firefox op Macs in bepaalde formaten, dus we houden het momenteel bij goede ol 'Georgia.
Ten slotte heb ik onderaan een nieuwe laag gemaakt, deze gevuld met een donkere paarsachtige kleur, een 1px-rand aan de bovenkant toegevoegd en voila hebben we een voettekst.
Alles bij elkaar is de site klaar om te bouwen.
Nu is een van de coole dingen aan dit ontwerp dat we de achtergrond eenvoudig kunnen verwisselen en het ontwerp ziet er nog steeds geweldig uit. Hier heb ik het geruild voor een afbeelding van iStockPhoto genaamd Passion, met een vergelijkbaar kleurenschema. Het is een erg coole 3D-weergave van licht en net als onze huidige achtergrond is het ook abstract en visueel mooi.
Hier heb ik een andere abstracte afbeelding van iStockPhoto, Blue Energy, gebruikt. Omdat de kleur is gewijzigd, heb ik ook de kleuren op enkele plaatsen - met name de tekst - aangepast en ook een grote gloed toegevoegd aan de hoofdkopie.
Nu is het onwaarschijnlijk dat je dit exacte ontwerp ooit nodig zult hebben, nu ik er een hele tutorial over geschreven heb. Laten we er dus iets over vertellen waarom het werkt goed, want dat zal je helpen de principes te gebruiken om je eigen unieke look te creëren.
Er zijn verschillende dingen die samenkomen om een ontwerp te maken dat hier werkt:
Natuurlijk zijn er nog veel meer dingen waar we over kunnen praten zoals kleur en voorrang, maar ik denk dat de belangrijkste ontwerpdingen waar je naar moet kijken hier de typografie in combinatie met de achtergrond zijn. Als laatste verklaring voor dat doel, hier is een klein plaatje dat alles zegt :-)
Nu genoeg van deze nambi-pambi Photoshop-dingen, laten we wat HTML / CSS gaan doen! Volg het tweede deel van deze tutorial waarin we ons ontwerp bouwen in een werkende website via NETTUTS-Web Development Tutorials!
Accentsconagua