CSS3 – Border-image maken in Adobe Illustrator

uit de cursus Vormgeven met CSS

Leuk dat je onze site bezoekt,

Ben jij leergierig?. Jij abonnee en dan ik geef jou 5% korting op de eerste maand! Wat vind je daar van? gebruik als kortingscode: DIEHARD

Geef een reactie of stel een vraag

Geef een reactie

Registreer als je wilt reageren.

Deze website gebruikt Akismet om spam te verminderen. Bekijk hoe je reactie-gegevens worden verwerkt.

Vormgeven met CSS

perm_identity Belinda | video_library 49 video's | query_builder 03:05:49

CSS3 is de nieuwe standaard en is onderverdeeld in modules waaraan apart ontwikkeld wordt.  Samen met HTML5 levert CSS veel voordelen voor webdesigners. De code is schoner, de vormgeving functioneler en de webpagina’s zijn bovendien sneller op diverse (mobiele)apparaten. Het biedt de fun en mooie hippe mogelijkheden voor het vormgeven van webpagina’s. Denk aan teksteffecten, patronen, schaduwrandjes en animaties. Samen met HTML5 levert CSS3 functionele grafische mogelijkheden, het wordt breed ondersteund en is sneller.

Modulaire ontwikkeling

Eigenlijk spreken we na CSS2 niet meer van een versie. De term CSS3 wordt gebruikt om de nieuwe vorm van CSS aan te duiden. CSS werd opgesplitst in aparte Modules. De modules waaraan apart gewerkt en ontwikkeld wordt zijn onder andere:

  • Backgrounds & Borders
  • Text Effects
  • 2D/3D Transformations
  • Animations

Natuurlijk wordt er in deze online cursus aandacht besteed aan de leuke en fancy mogelijkheden, maar ook bijvoorbeeld het gebruiken van Google Webfonts in een webpagina behoort tot de onderwerpen.

Dan vervang ik deze en plak ik vervolgens de gekopieerde code op deze plek. En dan is dit het eindresultaat.

Leuker is het natuurlijk om zelf een afbeelding te maken.

En hiervoor zou je bijvoorbeeld het programma Illustrator kunnen gebruiken.

En dat ga ik nu demonstreren.

Kies in Illustrator voor het maken van een nieuw bestand.

Dat doe je via de menubalk. Bestand > Nieuw.

Je kunt alvast een naam invoeren.

maar dat wil nog niet zeggen dat dit bestand bewaard is, hooguit dat deze alvast een naam heeft gekregen.

Ik kies voor Profiel > Web. Zodat in ieder geval mijn kleurmodus al op RGB gaat staan.

En dat de resolutie van de afbeelding ook alvast dpi is.

De grootte van de illustratie is belangrijk.

Ik wil namelijk voor elke illustratie die ik moet gaan voorbereiden.

Voor zowel de vier hoeken als de vier lopende zijden, pixels reserveren.

Dus dan moet ik drie keer , dat is pixels voor de breedte gebruiken.

En ook pixels voor de hoogte. En ik voer dit document door.

Het eerste wat ik ga doen is hulplijnen plaatsen om de pixels.

En daarvoor heb ik mijn hulplijnen nodig. Ik ga naar Weergave > Linialen > Linialen Tonen.

En vervolgens kan ik uit de liniaal hulplijnen trekken.

Het is een kwestie van in de horizontale balk gaan staan om een horizontale lijn te trekken.

En deze vervolgens te selecteren en op de juiste positie te plaatsen.

Liniaallijnen kunnen op slot staan, dus zorg ervoor dat je zeker weet dat je deze liniaallijn kunt selecteren.

Daarvoor ga je eerst weer terug naar Weergave > Hulplijnen. En als de optie 'Hulplijnen vergrendelen' aangevinkt staat.

Dan zul je deze moeten uitvinken. Op dit moment is deze bij mij uitgevinkt.

En dit betekent dus dat ik de hulplijn kan selecteren, met mijn zwarte pijl.

En bij Transformeren kan kiezen om deze exact op een bepaalde positie te plaatsen.

De illustratie links geeft aan wat je oriëntatiepunt is. Dus het punt die je wilt bepalen qua positie.

Ik wil deze horizontale hulplijn op pixels plaatsen.

Dan teken ik opnieuw een hulplijn. Ik zorg dat ik die opnieuw geselecteerd heb staan.

Ga opnieuw naar Transformeren en deze wil ik positioneren op pixels.

Dan rest mij nog om twee verticale lijnen te tekenen. Deze moet vervolgens weer op pixels x-afstand komen te staan.

En ik teken de laatste hulplijn en deze moet komen te staan op pixels.

Dan weet ik nu de begrenzingen waar tussen ik mijn illustraties ga tekenen.

Ik behoud het nu eerst even bij een hele simpele illustratie.

Dus ik ga naar mijn gereedschappenbalk en ik kies voor een standaard gereedschap als bijvoorbeeld 'ster'.

En ik plaats in deze hoek een ster.

Deze geef ik een kleur mee.

En als ik zelf een mooie kleur heb gemaakt.

Dan kan ik deze kleur opslaan in mijn stalenvenster. Ga ik naar mijn venster Stalen en kies ik voor 'voeg toe'.

En dan wordt deze toegevoegd aan mijn stalenvenster.

Dan kan ik vrij eenvoudig, hetzij deze ster dupliceren en ook voor de andere hoeken gebruiken.

Kwestie van de Alt-toets indrukken en vervolgens ingeklikt een kopie eruit slepen.

En dat doe ik dan zo voor alle hoekillustraties

Vervolgens moet ik nu nog illustraties maken voor de verticale- en horizontale randen.

En daarvoor gebruik ik een ander kader, namelijk een cirkeltje.

En ik teken een beetje uit de vrije hand cirkeltjes. Deze wil ik voorzien van een andere kleur.

Dus ik selecteer de drie cirkels. Ik meng opnieuw een eigen kleurtje.

En als ik hier tevreden mee ben en ik wil hem vaker gebruiken. Dan kan ik ook deze weer toevoegen aan mijn stalenvenster.

Maar ik kan hem ook vrij eenvoudig kopiëren en vaker toepassen als lijnillustratie.

Deze illustratie ga ik nu bewaren en dat doe ik via Bestand > Opslaan voor Web.

En dan kies ik voor .png met behoud van transparantie.

De breedte en de hoogte hiervan in totaal is pixels en ik ga vervolgens naar 'Opslaan'.

Zorg ervoor dat je het bestand onder een herkenbare naam, dus ik noem deze 'patroonster'.

En zorg ervoor dat deze wordt opgeslagen in de local root folder van je website. En ik kies daarvoor het mapje 'img' uit.

En bewaar daarin deze afbeelding.

Vervolgens keer je terug naar de website en ga je deze afbeelding gebruiken om zelf een border-image mee te creëren.