Share
In deze zelfstudie maakt u een organische website in groene stijl met Adobe Illustrator. Deze tutorial laat zien hoe je illustratieve vectorafbeeldingen maakt en deze toepast op webdesign-lay-outs. Laten we beginnen!
Een tijdje geleden heb ik een tutorial geschreven met de titel Use Adobe Illustrator om een schone lay-out van de website te creëren die met veel tamtam werd begroet met een even opmerkelijke oppositie. Die tutorial was gericht op mensen die net begonnen zijn in Illustrator. Uiteindelijk is het ook op de voorpagina van Digg terechtgekomen.
Om dingen op de juiste manier in te stellen, neem ik even de tijd om het voor de hand liggende te wijzen ... dit websiteontwerp kan ook in Photoshop worden gemaakt! Het doel van deze geavanceerde zelfstudie is echter om uit te leggen hoe u Adobe Illustrator kunt gebruiken om een website te ontwerpen. Laat me ook een onderscheid maken tussen ontwerp en codering aan de voorzijde. Hoewel ik u laat zien hoe u de website in Illustrator kunt ontwerpen, zou dit verder kunnen worden gedaan (met het gebruik van op standaarden gebaseerde XTHML / CSS) om de ontwerpfunctie te maken.
Zonder verder oponthoud, hier is hoe u een groene landschapswebsite maakt in Adobe Illustrator.
U kunt de bronbestanden vinden in de map met de naam 'bron' in de bestanden die u hebt gedownload. Misschien wil je er even overheen kijken voordat we beginnen.
Maak een nieuw document met een breedte van 1160 px en een hoogte naar keuze. Stel de Kleurmodus in op RGB. Je kunt de Raster-effecten op High 300ppi laten staan omdat ons ontwerp niet veel gebruik maakt van rastereffecten.
Ik werk liever met een browser op de achtergrond, zodat ik een beter beeld krijg van hoe het uiteindelijke ontwerp eruit zal zien als het eenmaal is voltooid.
De verhoudingen van de browserschermen zijn niet hetzelfde als die van het 1160px-document, dus u gebruikt eenvoudigweg het gereedschap Direct selecteren (A) en klikt en sleept u over het rood gemarkeerde gebied. Gebruik vervolgens opnieuw het gereedschap Direct selecteren (zonder iets te deselecteren) door op een van de geselecteerde punten te klikken en alles naar de zwarte regel aan de rechterkant te slepen, dit is uw documentgrootte.
Een website met een breedte van 960 px of kleiner zal goed werken voor de meerderheid van de bezoekers van een website. Ons document is ingesteld op 1160 px breedte om te compenseren voor mensen met grotere monitoren die mogelijk het browservenster open breder uitrekken. De afstand tussen de blauwe verticale hulplijnen is 960 px en vertegenwoordigt het gebied waar al uw hoofdinhoud tussenin moet blijven. Alles buiten deze gidsen heeft het potentieel om voor sommige bezoekers buiten beeld te zijn.
Deze stap is essentieel voor het maken van een leesbare site. Zorg ervoor dat je weet hoe de website eruitziet wanneer je hem bekijkt met 100% zoom. U hoeft niet te werken met 100% zoom, maar u moet weten hoe de website eruitziet wanneer deze op ware grootte wordt bekeken (100%). Om de zoomlens te wijzigen, klikt u in de linkerbenedenhoek van uw documentvenster.
De eerste stap is om de glooiende heuvels te creëren. Teken een ellips met behulp van het ellipsgereedschap (L).
Dupliceer de Ellipse en overlapt ze.
Voeg de twee vormen in de Pathfinder samen met de optie Aftrekken van vormgebied. Dupliceer de vorm, maak deze een beetje kleiner en verplaats deze naar rechts en naar beneden, zoals hieronder wordt getoond.
Selecteer beide vormen en ga naar Object> Overvloeien> Mengopties. Selecteer Opgegeven stappen uit het vervolgkeuzemenu, voer een waarde in en klik op OK.
Ga naar Object> Blend> Make. U kunt de blend aanpassen als u niet tevreden bent met de resultaten door naar Object> Blend> Mengopties te gaan ...
Ga naar Object> Envelop Vervorm> Make with Warp ... Selecteer Arc in de vervolgkeuzelijst en wijzig de schuifregelaars om een aangename boog te maken. Klik op OK als u klaar bent.
Om de vormen verder te manipuleren, moeten we ze uitvouwen door naar Object> Uitbreiden te gaan. Klik OK.
Nu je vorm is uitgebreid, kun je het meer op een heuvel lijken. Gebruik het pengereedschap (P) om een andere vorm te tekenen die de contouren van de strepen volgt.
Gebruik eerst de Pathfinder om de gebieden van de heuvels af te snijden die extra zijn. Leg beide vormen op elkaar en geef ze een weelderig verloop.
Plaats de heuvel om de blauwe gids enigszins te overlappen. Dit geeft aan dat de heuvels verder naar links blijven wanneer de website wordt bekeken met een gemiddelde browsergrootte.
Maak andere heuvels met dezelfde techniek. Experimenteer met het aanpassen van de afstand en de grootte van de vormen en de boog om een kleine variatie te creëren.
Teken een eenvoudige boogvorm die een weg op de heuvels wordt. Geef het ook een subtiel grijs verloop.
Hieronder heb ik de horizontale helling van de heuvels gevarieerd om een beetje variatie te geven aan het stuk. Merk ook op dat zowel de heuvel aan de linkerkant als de heuvel aan de rechterkant zich net voorbij de blauwe gids uitstrekken.
Vervolgens maken we de lucht. Uiteindelijk is dit zo ingesteld dat wanneer de code wordt gecodeerd met XHTML / CSS, de lucht voor onbepaalde tijd aan zowel de linker- als de rechterkant zal worden herhaald, ongeacht hoe groot het browservenster is uitgerekt.
Creëer een lichtgekleurd verloop en plaats deze achter de heuvels.
Soms vind ik het effectiever om een verloop aan te passen door naar Bewerken> Kleuren> Illustratie opnieuw kleuren te gaan ... Nu kun je elke kleur selecteren (bovenste cirkel) en de schuifregelaar verplaatsen om alleen de kleur te krijgen die je zoekt (onderste cirkel). De wijzigingen die u aanbrengt, kunnen in realtime worden bekeken voordat u op OK drukt. Zorg er dus voor dat het dialoogvenster Live Colour niet het object bedekt dat u opnieuw wilt inkleuren..
Vervolgens voegen we kleine details toe aan de heuvels en wegen. Ik heb besloten om een paar blokkerende auto's te maken. Wanneer ze worden onderverdeeld in hun eenvoudigste vormen, zijn auto's heel gemakkelijk te maken. Begin met het tekenen van de basisvorm die je auto zal aannemen. Gebruik deze vorm als richtlijn.
Afhankelijk van de look waar je voor gaat, hoef je niet alles perfect symmetrisch te maken. De auto's die ik maak zijn enigszins grillig, dus de vormen hebben een willekeurige kwaliteit over hen. Teken vervolgens het dak in.
Teken de kappen, windscherm en bumper.
Teken de zijkant van de auto.
Teken de ramen en een paar ellipsen voor de wielen. Dat is het!
Dupliceer de auto en verander de kleur om het te verwarren. Het feit dat de auto gewelfd is, helpt ook om deze goed te laten aansluiten op de gebogen weg.
Gebruik de pen om een eenvoudige vogelvorm te tekenen. Dupliceer en draai dezelfde vorm om snel een aantal vogels te maken.
We zullen de wolken in de lucht creëren door eerst een rechthoek te tekenen met behulp van de Rechthoek-tool (M).
Gebruik de Warp Tool (Shift + R) om de rechthoek te verdraaien totdat je ziet dat het er meer uitziet als een wolk. Het kan gemakkelijker zijn om de rechthoek meer volledig te kromtrekken als u de grootte van het kettinggebied aanpast. Voltooi dit door te dubbelklikken op het hulpmiddel of door Option + Shift ingedrukt te houden en vervolgens te klikken en te slepen om het formaat te wijzigen.
Nadat u klaar bent met het maken van de algemene vorm van de wolk, merkt u misschien dat kromtrekken van een voorwerp meestal een overvloed aan extra punten oplevert. Deze extra punten maken de vorm complexer dan we nodig hebben. Vereenvoudig het aantal punten dat de vorm heeft door naar Object> Pad> Simplify te gaan. Pas uw curve-precisie aan tot de vorm vloeiender wordt.
Met behulp van het gereedschap Direct selecteren kunt u de punten en knooppunten aanpassen om elke vorm die u probeert te maken nauwkeuriger weer te geven.
Gebruik het potloodgereedschap (N) om een willekeurige bergvorm te tekenen. Vanwege de ononderbroken aard van tekenen met de potloodtool, is het soms moeilijker om het pad te sluiten wanneer je klaar bent met het tekenen van de vorm. Om een pad gemakkelijk te sluiten, houdt u de Option-toets ingedrukt voordat u klaar bent.
Voorwerpen die verder van de kijker verwijderd zijn, hebben niet zoveel details nodig. Maak gebouwen door eenvoudige rechthoeken samen te voegen met de Pathfinder.
Verplaats het gebouw door naar Object> Envelop Vervorm> Make with Warp ... te gaan Selecteer Arc in de vervolgkeuzelijst en voer waarden in die voor u goed zijn.
Dit is hoe je artwork er op dit moment uit zou moeten zien. Zoals je kunt zien, worden objecten steeds verder weg en worden ze lichter. Gebruik deze kennis bij het maken van uw lay-out. Dit helpt echt om het ontwerp een natuurlijke kwaliteit te geven.
Gebruik de Star Tool om een driehoek te tekenen. Om het aantal punten aan te passen dat een ster heeft, gebruik de pijl-omhoog en -omlaag terwijl u de vorm tekent. Terwijl je de vorm tekent, houd je de Shift-toets ingedrukt, zodra deze 3 punten heeft, om de basis van de driehoek perfect horizontaal te maken.
Teken een ovaal en voeg deze samen met de onderkant van de driehoek.
Geef de vorm een groen verloop.
Gebruik kleine driehoekjes in het gedeelte van de hoofdboom om het een beetje meer detail te geven. Gebruik een rechthoek voor de basis van de boom.
Dupliceer en varieer de grootte van de bomen om een bos te maken.
Pas de dekking van een ellips aan om een gestileerde schaduw te maken voor elke boom.
Nogmaals, gebruik het gereedschap Potlood om een organische vorm te tekenen om een steen te maken.
Deselecteer de belangrijkste rotsvorm en teken andere abnormale vormen die mos en schaduwen worden. Gebruik de Pathfinder om de vormen te verdelen en ontdoe je van de overbodige restjes.
Dit is wat je moet blijven.
Plaats de rotsen willekeurig in het hele ontwerp en geef ze een schaduw zoals je deed voor de bomen.
Maak een bladvorm met behulp van het gereedschap Pen.
Het geven van de bladvariaties in kleur draagt bij aan het realisme ervan. Teken met behulp van het potloodgereedschap (N) een vorm die eruit ziet als de mijne hieronder. Gebruik het Pathfinder-palet en verbreek het blad in secties. Verwijder de overgebleven vormen die geen deel uitmaken van het blad.
Selecteer elke sectie van het blad en geef het een subtiele kleurverandering om licht te simuleren dat elk deel van het blad raakt.
Teken een zeer smalle ellips die de stengel van het blad wordt.
Gebruik het gereedschap Verdraaien om de ellips in iets natuurlijker te maken.
Geef de bladeren en stelen een kleurverandering om de eentonigheid van de bladeren te verbreken. Ga naar Bewerken> Kleuren> Kleurbalans aanpassen ... verplaats de schuifregelaars naar wens.
Plaats de bladeren in een cluster in de hoek van het ontwerp.
Voeg de titel van de site toe aan het bovenste gedeelte. Als je titel wordt geschreven met een standaardlettertype zoals Helvetica, ben je bijna klaar met deze stap. Als uw titel geen systeemlettertype gebruikt, kunt u deze verbeteren met effecten zoals een slagschaduw of een afgeschuinde rand.
Dit is hoe de voltooide koptekst van de website eruit ziet. Observeer hoe de hoofdinhoud wordt bewaard tussen de blauwe hulplijnen die 960 px breed zijn.
Maak het hoofdgedeelte van de inhoud van de site. Ik besloot een aardevriendelijk thema te maken, dus blauw was een geschikte keuze voor dit ontwerp.
Gebruik het potloodgereedschap om een grote ijskegelvorm te maken.
Geef de ijspegel een innerlijke gloed om diepte toe te voegen door naar Effect> Stileren> Gloed binnen ... te gaan. Teken soortgelijke kleinere ijspegelvormen en plaats ze onder de grotere vorm. Je hoeft deze andere vormen geen innerlijke gloed te geven.
Gebruik het potlood om kleine stenen te maken om de waterval interessant te maken.
We gebruiken een scatterpenseel om een hoop bubbels op te bouwen. Teken een ovaal en sleep deze naar het penselenpalet. Selecteer New Scatter Brush en druk op OK. Als je Penselenpalet niet zichtbaar is, ga je naar Venster> Penselen.
Stel het formaat, de afstand en de spreiding willekeurig in en pas de schuifregelaars aan. Het is belangrijk om zowel de zwarte als de grijze driehoeken aan te passen, zodat je vormen willekeurig genoeg zijn.
Klik met het Pen-gereedschap geselecteerd op het spreidingspenseel dat u zojuist hebt gemaakt en teken een lijn. Wijzig het lijngewicht om de grootte van de cirkels te wijzigen of dubbelklik op de scatterborstel voor meer opties.
Als u de cirkels verder wilt bewerken, kunt u de lijn eenvoudig uitbreiden door naar Object> Uiterlijk uitbreiden te gaan.
Gebruik het gereedschap Pen om enkele visvormen te tekenen.
Plaats de steen die je eerder hebt getekend onderaan de pagina om een voettekst te maken.
Gebruik de spreidingsborstel die je hebt gebruikt voor de bubbels om een structuur voor de voettekst te maken. Als u de textuur wilt beperken tot het rechthoekige gebied van het voettekst, tekent u eenvoudig een rechthoek over de vorm van de bel, selecteert u de bubbels en de rechthoek en drukt u op Command + 7 om een masker te maken. Of gebruik de gebieden Doorsnedevorm in de Pathfinder om de bubbels buiten het rechthoekgebied te verwijderen.
Mijn navigatie kan eenvoudig worden gereproduceerd met behulp van CSS. Houd hier rekening mee wanneer u de uwe ook maakt. Elke tekst die een lettertype gebruikt dat geen systeemlettertype is, moet een afbeelding zijn. Het is nu gebruikelijk en geeft er de voorkeur aan om waar mogelijk CSS te gebruiken en niet afbeeldingen.
Maak enkele elementen die de opmaak kunnen verbeteren met behulp van eenvoudige vormen.
Ik heb besloten dat ik wil dat de afbeelding in de tekst wordt ingevoegd. Hiertoe selecteert u het item dat wordt ingevoegd en gaat u naar Object> Tekstomloop> Maken. Ga terug naar Object> Tekstomloop> Tekstomloopopties om de ruimte tussen de items en de tekst aan te passen.
Maak de formulierinvoervelden door een rechthoek te gebruiken, de hoeken rond te maken, een buitenlijnstreep te geven en tenslotte een subtiele verloopvulling. Al deze effecten kunnen eenvoudig worden gewijzigd door te dubbelklikken op elk effect in het Vormgevingpalet.
Maak een knop door opnieuw een rechthoek te tekenen, waarbij het afgeronde hoeken een lichte verloop en een slagschaduw geeft.
Voeg eventuele andere elementen toe om uw ontwerp te voltooien.
Dit is hoe het uiteindelijke ontwerp eruit ziet. Merk op hoe alle kritieke informatie binnen de blauwe handleidingen wordt gehouden. De voettekst herhaalt zich ook met CSS.
U hebt zojuist geleerd hoe u een groene landschapswebsite kunt maken in Adobe Illustrator. Ontwerpsets in vectorstijl kunnen een site onderscheiden door het een unieke uitstraling te geven. Ga aan de slag met uw eigen ontwerp en zie wat u kunt bedenken! De uiteindelijke afbeelding is hieronder of u kunt hier een grotere versie bekijken.
Accentsconagua