Share
Het is behoorlijk verbazingwekkend hoeveel kleur en achtergrond het uiterlijk van een website kunnen veranderen. In deze tutorial gaan we een snelle, eenvoudige maar effectieve lay-out samenstellen en vervolgens variaties maken met behulp van achtergronden, foto's en patronen. We zullen ook kijken naar het maken van naadloos betegelde achtergronden uit een foto, methoden voor het beëindigen van een enkele foto en eenvoudige manieren om pixelpatronen te maken. In het kort is het een volgepakte handleiding!
Dit bericht is dag 1 van onze webdesignsessie. Creative Sessions Session Day 2 "
Dus onze eerste taak is om een lay-out voor onze pagina te ontwerpen. We gaan niets speciaals doen, omdat de tutorial meer gaat over achtergronden dan over lay-outs. Toch moet het er goed uitzien en een echte werkbare lay-out zijn. Dus in de afbeelding hierboven zie je mijn plan met ruwe onderdelen van de pagina. Ik heb in een menu en submenu een paneel gepland om de sectie en een inhoudsgebied te introduceren. Ik heb ook gepland dat het minder dan 1000 px zou moeten zijn, zodat wanneer een persoon op een klein scherm de site bekijkt, ze de achtergrond nog steeds goed zien (aangezien dat een groot kenmerk van het ontwerp zal worden).
Nu zou ik erop moeten wijzen dat ik deze set dozen eigenlijk helemaal niet zo heb getekend. Het leek meer alsof ik gewoon aan het rondmodderen was totdat ik dacht: "oei, dat is een mooie lay-out". Maar voor deze tutorial is het beter om het op deze manier uit te leggen!
Zodat lay-out onze botten is, nu moeten we het invullen met wat dummy-inhoud en een kleurenschema.
Zoals je kunt zien, heb ik hier niets echt geweldigs gedaan, de elementen op de pagina netjes netjes en gelijkmatig geplaatst. Dus houd rekening met die afstand. In de afbeelding heb ik geprobeerd te laten zien hoe verschillende elementen in een rij staan (gele lijnen), hoe afstand ongeveer even verticaal en horizontaal is, evenals boven en onder elementen.
Houd er rekening mee dat dit slechts ruwe hulplijnen zijn en dat ik eigenlijk alleen met het oog werk totdat alles er goed uitziet. Maar als u niet zeker bent van de afstand, is het geen slechte start om dingen op een eerlijke manier te doen. Naarmate je meer op je gemak voelt met het uit elkaar plaatsen, kun je dingen variëren en met ongelijke balansen spelen.
In de bovenstaande afbeelding kunt u zien dat ik een hoofdlettertype voor het display heb gekozen met de naam Rockwell dat we in het deelvenster zullen gebruiken om de pagina een beetje karakter te geven. Als ik deze site aan het bouwen was, zou het een afbeelding kunnen zijn of ingevoegd met sIFR. De rest van de tekst is Helvetica en Arial, wat natuurlijk geschikt is voor HTML-gebruik. Ook gooide ik in een vector illustratie van een papieren vliegtuig dat ik jaren geleden tekende en als voorraad verkocht. Natuurlijk in een echt project, zou dit beeld iets te maken hebben met de site in plaats van willekeurig willekeurig te worden gegooid zoals ik hier heb.
Eindelijk heb ik een warm palet van aardetinten gebruikt. Ik ben eigenlijk een beetje een fan van beige en aardekleuren en je zult merken dat ik ze veel gebruik. Ik denk dat ze er een hele weg toe doen om websites er vriendelijker en toegankelijker uit te laten zien.
Dus de pagina ziet er goed uit, maar er is nog niets heel gedenkwaardigs aan en het is een beetje standaard. In de volgende stap voegen we wat Pools toe.
OK, hier kun je precies dezelfde lay-out zien, maar ik heb het opgepoetst en twee visuele elementen toegevoegd om het een beetje stijl te geven. Het eerste element is de pijl uit het zijmenu. Hierdoor lijkt het middenpaneel op een soort van overwoekerde tekstballon. De tweede visual die je ziet als je van dichtbij kijkt, is een soort puntthema.
In totaal hebben we dus drie visuele elementen gebruikt om de pagina wat stijl te geven: een illustratie, een interessante vorm die het raster breekt en een subtiel thema op basis van een eenvoudige vorm. Later voegen we een vierde visueel element - een achtergrond - toe om de stijl van de site af te maken.
In de bovenstaande afbeelding heb ik alle stukjes polijsten aangegeven die ik heb toegevoegd. Het zijn allemaal maar kleine hoogtepunten en gradaties in kleur, punten en natuurlijk de uitgesneden pijl. Misschien bent u ook geïnteresseerd in een eerder artikel dat ik een jaar geleden schreef over het polijsten van webontwerpen hier op Psdtuts+.
Dus daarmee hebben we onze basis lay-out!
Dus de eerste achtergrond die we gaan inruilen is een tegelafbeelding. In dit geval gebruiken we een grasfoto die ik heb gebruikt in die grass-tekst tutorial (een serie die ik nog moet afronden :-) Je kunt de originele grasfoto op Flickr krijgen.
Natuurlijk, als je de originele foto probeert te betegelen, ziet het er niet erg goed uit en het zal duidelijk zijn dat je dezelfde afbeelding steeds opnieuw herhaalt. In plaats daarvan moet u de afbeelding wijzigen zodat deze naadloos wordt genaaid. Gelukkig heb ik zojuist een tutorial over dit onderwerp gemaakt, dus ga naar het volgende gedeelte en lees:
Samen met de verandering in de achtergrond heb ik natuurlijk de kleur aangepast aan de nieuwe look. Merk op dat ik het gebruik van dezelfde schaduw van helder, lichtgroen als het gras vermeden heb - dit zou overweldigend zijn geweest. In plaats daarvan is het aanvullen van tinten van saaiere groenen donkerder en lichter een aanvulling op de achtergrond.
Nu zijn achtergronden zoals deze perfect voor het toevoegen van transparante lagen over de top. Hier hebben zowel het About-paneel als het Menu enige transparantie en ziet het er fantastisch uit omdat je een deel van het gras er doorheen kunt zien en het voegt enige diepte toe. Hoewel je de dekking van de betreffende laag eenvoudigweg kunt dimmen, is een andere optie om een paar extra lagen aan de bovenkant toe te voegen - een met een lichte gradiënt die vervaagt tot niets en de andere met een 1px highlight.
In de afbeelding hierboven zie je bijvoorbeeld in het menu dat ik een wit blok heb ingesteld op een dekking van 70%, daarboven is er een verloop van wit naar niets, en daarbovenop staat een witte lijn van 1 px op de onderrand. Deze extra lagen benadrukken de transparantie en geven de afbeelding diepte.
Dus al deze transparantie is eenvoudig te doen in Photoshop, maar je vraagt je misschien af hoe haalbaar het is om zo'n ontwerp te maken.
Gelukkig is dit mogelijk dankzij het .PNG-bestandsformaat waarmee je transparantie in je afbeeldingen kunt gebruiken. Eén ding om op te letten, is dat hoewel u transparantie kunt gebruiken (bijvoorbeeld een transparantie van 60%) u geen overvloeimodi voor lagen kunt toepassen (bijvoorbeeld Vermenigvuldigen of Overlay). Omdat het in een Photoshop-ontwerp belangrijk is om niets te doen dat niet echt kan worden gebouwd, alles wat ik heb gebruikt, zijn dekkingsinstellingen. Het is beperkter, maar je kunt nog steeds mooie effecten krijgen.
Laten we daarom een snelle HTML-test maken om er zeker van te zijn dat alles echt werkt zoals we ons voorstellen. Als u een transparante PNG wilt maken, voegen we eerst de lagen voor onze grote paneelvorm samen tot één. Omdat alle lagen enigszins transparant zijn, is het eindresultaat na het samenvoegen ook semi-transparant.
Kopieer dat nu naar een nieuw Photoshop-document en schakel vervolgens de achtergrondlaag uit (zie de afbeelding hierboven) en je zou de transparantie moeten zien.
Ga nu naar Bestand> Opslaan voor web en apparaten en kies PNG-24 uit de opties. U zou dezelfde transparantie moeten zien verschijnen in het voorbeeldvenster.
Vervolgens zal ik hetzelfde doen voor een paar meer afbeeldingselementen, omdat we in onze test willen aantonen dat het mogelijk is om een transparante PNG op een transparante PNG boven op een achtergrond te plaatsen.
Met al onze afbeeldingen gemaakt, is het nu gewoon een kwestie van wat HTML samenbrengen:
Achtergrond / transparantie-test
Dus alles wat we hier doen is de achtergrondafbeelding instellen op onze betegelde JPG. Vervolgens plaatst u een
Dat zal doen om te bewijzen dat dit ontwerp kan worden gebouwd. Eigenlijk zou je wat moeten repareren om het te laten werken in IE6, a Google-zoekopdrachten onthullen veel artikelen over het onderwerp, maar aangezien dit Psdtuts + is en niet NETTUTS, beëindigen we het hier gewoon :-)
Wat gemakkelijk gedaan kan worden met een harde textuurachtergrond zoals gras, is nog eenvoudiger te maken met eenvoudiger texturen zoals deze papiertextuur van Bittbox. Omdat de bronafbeelding beter is, kunt u veel grotere tegels voor de achtergrond maken, die er veel minder vaak hetzelfde uitzien.
Een andere optie voor achtergronden zijn eenvoudige pixelpatronen die bij herhaling een achtergrond een beetje textuur geven. Het patroon in deze variant van de lay-out is degene die ik op Creattica Daily heb gebruikt.
Je kunt dit soort patronen heel gemakkelijk maken. Om dit effect te bereiken, maakt u gewoon een nieuwe afbeelding 4px breed bij 5px hoog en zoomt u zo ver mogelijk in, en tekent u vervolgens deze pixels in:
Druk vervolgens op CTRL-A om alles te selecteren en naar te gaan Bewerken> Patroon definiëren, geef het een naam, dan kun je het patroon toepassen met een Patroon overlay door de overvloeiopties van een laag. Dus klik weer op je hoofd PSD-bestand met de rechtermuisknop op de laag waaraan je het patroon wilt toevoegen en selecteer vervolgens Meng opties kies dan Patroon overlay. In de afbeelding hierboven heb ik het patroon ingesteld Vermenigvuldigen op een donker grijze achtergrond.
Het is eigenlijk best leuk om met dit soort pixelpatronen te spelen. De pixel-liefhebbende mensen van K10K hebben een bibliotheek met Pixelpatronen die je ook kunt bekijken voor veel geavanceerdere ontwerpen.
De laatste variant die we zullen bekijken, is het gebruik van een enkele foto. Hier gebruik ik een mooie foto van West Bay Cliffs van Cristiano Betta die ik op Flickr vond:
Het is een mooie brede foto en het zorgde voor een mooi kleurenschema. Dus hier zijn een paar snelle stappen die ik heb genomen om de afbeelding te plaatsen.
Hier zit het gewoon op de achtergrond van ons ontwerp. Met wat transparantie ziet het er al behoorlijk netjes uit, maar wat er linksboven in de cel gebeurt?
Door de foto ongeveer 50px omhoog te bewegen, worden de rare verkleurde delen van de pagina geduwd. Het volgende probleem is dat we geen eindeloze fotoachtergrond kunnen hebben, dus we laten het in een kleur vervagen.
Door een donkerdere kleur uit de zee te kiezen, maken we een nieuwe laag en tekenen we een verloop dat vervaagt van de kleur naar transparant. Dit zit mooi boven de oceaanachtergrond en mengt het uit.
Nu ziet de achtergrond er eigenlijk een beetje plat uit, dus het zou leuk zijn om de kleuren een beetje op te fleuren. Hiervoor plaatsen we de foto op een afbeelding met een kleurverloop dat overeenkomt met de afbeelding.
In de bovenstaande afbeelding kun je zien dat ik in een verloop getekend heb met de purples en de sinaasappels van de originele afbeelding.
De verlooplaag instellen op bedekking en 70% verlicht de zonsondergang echt en maakt het er veel levendiger uitzien.
Nu is het volgende probleem dat we de foto opzij moeten laten verdwijnen. Dit zal lastig zijn, omdat we aan de ene kant een berg hebben en aan de andere kant gewoon de lucht. Dus waarschijnlijk is de beste oplossing om in de donkere kleuren over te gaan. Voor de meeste mensen zullen ze dit niet zien, het is alleen voor al die mensen die een groot scherm gebruiken en hun browsers openen.
Dus het eerste wat we zullen doen is een 1px verticale selectie van elke uiterste rand van de foto pakken en slaan CTRL-T om het over te zetten. De reden dat we dit doen, is dat als een van de achtergrond wordt weergegeven door de kleur die ik ga toevoegen, deze er niet raar uit zal zien.
Dus nu voegen we een nieuwe laag toe en tekenen we een gigantische ellips op de achtergrond, druk op CTRL-SHIFT-I om de selectie om te keren en te vullen met dezelfde donkere kleur als eerder.
Nu deselecteren we de laag en gaan we naar Filter> Blur> Gaussiaans vervagen om onze kleur te vervagen, met een straal van 80px. Dupliceer vervolgens deze laag en vervaag deze nogmaals met een straal van 120px, dan een derde keer met een straal van 160px. Dit zou een mooie zachte graduatie moeten geven.
Ons uiteindelijke ontwerp met een fotoachtergrond voor de meeste mensen zal dus lijken op de afbeelding hierboven. Maar we kunnen er zeker van zijn dat zelfs een groot browservenster niets dwaas zal onthullen.
U kunt meer leren over ontwerpen met grote achtergrondafbeeldingen door deze drie geweldige artikelen te lezen:
Zoals u kunt zien, hebben we veel kilometers gemaakt met onze eenvoudige lay-out en hopelijk heeft u onderweg iets nuttigs gekregen!
Dit bericht is dag 1 van onze webdesignsessie. Creative Sessions Session Day 2 "
Accentsconagua
