Share
Deze zelfstudie is perfect voor beginnende Adobe Illustrator-gebruikers. We bespreken hoe u een website opmaakt en voorbereidt voor gebruik op internet. We zullen ook de onlangs vrijgegeven Website Elements Freebie gebruiken om ook het ontwerp te bespotten.
Begin een nieuwe document met een breedte van 960px en een hoogte naar keuze. Ik heb deze breedte gekozen omdat deze website waarschijnlijk internetverkeer zal veroorzaken met gemiddelde tot grote monitoren. Een breedte van 960 pixels is een veilige grootte die de meerderheid van de bezoekers bevoordeelt. Als laatste, stel je in Kleur mode naar RGB.
De zwarte rand geeft de documentgrootte weer (het Artboard) die we hebben gemaakt. Ik plaats graag een leeg screenshot van een browservenster op zijn eigen laag terwijl ik aan het ontwerpen ben, om een goed idee te krijgen van hoe mijn website er uit zal zien als het klaar is.
Deze volgende stap is erg belangrijk. Zorg ervoor dat u weet op welke zoomeenheid u het document bekijkt. Wanneer alles is gezegd en gedaan, is uw website voor 100% zichtbaar. Voel je vrij om in en uit te zoomen tijdens het werken aan je lay-out, maar wees er zeker van dat al je tekst- en ontwerpelementen leesbaar zijn wanneer ze voor 100% worden bekeken. Gebruik de vervolgkeuzelijst hieronder gemarkeerd (of typ eenvoudigweg het percentage dat u wilt) om de zoomlens in te wijzigen.
Sidenote: soms wordt Adobe Illustrator krampachtig en worden de cijfers niet weergegeven terwijl u ze typt in het hieronder gemarkeerde zoomgebied. Als u bijvoorbeeld 58% typt, veranderen de cijfers soms niet terwijl u typt. Als dit het geval is, drukt u eenvoudig op Return nadat u uw waarden hebt ingevoerd en wordt uw document verkleind naar het nummer dat u hebt ingevoerd.
Het tekengebied kan worden geschakeld tussen zichtbaar en onzichtbaar door naar Beeld> Tekengebied verbergen. Het probleem hiermee is dat het iets langer duurt dan het tonen en verbergen van handleidingen (Command + puntkomma-toets) Ik vind het dus het beste om handleidingen te gebruiken en het tekengebied te verbergen. In de loop van het opzetten van een hele website zult u merken dat het veel gemakkelijker is om een sneltoetscommando in te drukken in plaats van naar de bovenkant van het scherm te gaan en telkens uit een lijst te kiezen.
Misschien vindt u het eenvoudig om evenwicht en een mooie hiërarchie vast te stellen door eerst eenvoudige grijze vakken op uw pagina te tekenen. De dunne rechthoeken geven aan waar ik van plan ben om tekst te gebruiken, terwijl de grote grijze vakken afbeeldingen zijn.
Nadat u een algemeen idee hebt van hoe de lay-out eruit zal zien, kunt u hulplijnen toevoegen en de grijze vakjes verwijderen.
Gebruik alleen de hulplijnen als referentie en voeg andere elementen toe, zoals navigatie, tekst en scherpte waar het logo, de afbeeldingen en de pictogrammen zullen verschijnen. Het is handig om uw hulplijnen in en uit te schakelen (Command + puntkomma-toets), terwijl u de lay-out finessed. Als de gidsen die u tekende niet zo goed werkten als u dacht, pas ze dan absoluut aan zoals u wilt.
Sidenote: wanneer u hulplijnen in- en uitschakelt, worden ze automatisch vergrendeld. U kunt vergrendelde hulplijnen niet verplaatsen. Om snel gidsen te ontgrendelen, drukt u Command + Option + Puntkomma.
Ga verder met het finaliseren van je header met afbeeldingen, pictogrammen en afbeeldingen.
Hieronder heb ik besloten om een lichtblauwe kleur toe te voegen om de koptekst te verbeteren.
Voeg styling toe aan uw tekst, zorg ervoor dat u beslist hoe links en rubrieken eruit zullen zien. Ik vind het veel eenvoudiger en sneller om zoveel mogelijk ontwerpelementen binnen Illustrator te realiseren, zodat ik me kan concentreren op het programmeren en coderen van de website wanneer de tijd daar is.
Er zijn een aantal verschillende manieren om een ontwerp voor te bereiden voor gebruik binnen een WYSIWYG-editor (zoals What You See is What You Get), zoals Adobe Dreamweaver. De eerste methode is het gebruik van plakjes. Segmenten kunnen worden gemaakt met behulp van hulplijnen of een selectie. Als u hulplijnen wilt gebruiken om segmenten te maken, sleept u eerst hulplijnen naar uw pagina rond elk object waarvoor een eigen koppeling nodig is. Bijvoorbeeld een pictogram dat, wanneer erop wordt geklikt, naar een specifieke pagina gaat. Hieronder heb ik vier pictogrammen, elk pictogram zal de bezoeker naar een andere webpagina of gebied van de site leiden.
Ik heb gidsen getekend tussen elk pictogram en net buiten het blauwe gebied. Het is meestal schoner als u uw hulplijnen ongeveer 1 of 2 pixels buiten het gebied dat u snijdt tekent. Dit zorgt ervoor dat geen van je kunstwerken wordt afgesneden.
Sidenote: trek geen hulplijnen tegelijk over uw volledige lay-out. Gebruik in plaats daarvan secties één voor één. Voer bijvoorbeeld eerst het koptekstgebied uit. Wis al je gidsen door naar Bekijken> Gidsen> Duidelijke hulplijnen. Bewaar je plakjes voor het web (besproken in een latere stap) en herhaal dit proces voor andere delen van de lay-out.
Zodra je je gidsen hebt getrokken, is de volgende stap om er plakjes van te maken. Om plakjes van je gidsen te maken, ga je naar Object> Slice> Maken van handleidingen. Soms maakt Illustrator geen eerste keer plakken wanneer u probeert. Ik heb ondervonden dat ik deze stap soms drie of vier keer moet herhalen voordat Illustrator daadwerkelijk plakjes gaat maken. Hieronder geven de vakken met zwart nummer aan dat de slices zijn gemaakt.
Ga naar om uw plakjes op te slaan voor gebruik op een website Bestand> Opslaan voor web en apparaten ... Gebruik de Slice Select Tool (K) gemarkeerd in de linkerbovenhoek om de specifieke segmenten te selecteren die u wilt opslaan. Selecteer meerdere segmenten tegelijk door shift ingedrukt te houden. Pas de instellingen aan de rechterkant aan uw behoeften aan. JPEG-afbeeldingen werken het beste voor items met verschillende kleuren, terwijl het GIF-bestandsformaat goed werkt voor items met grote kleurgebieden en niet veel kleuren in het algemeen, PNG-bestandsindeling werkt goed voor transparante afbeeldingen (hoewel er mogelijk enige aanpassingen nodig zijn voor oudere IE-browsers). U wilt misschien de kwaliteit van het bestandstype testen en de Kwaliteit om bandbreedte te besparen. Als je klaar bent, klik je op Opslaan.
Bepaal waar u de afbeeldingen wilt opslaan. Ik heb het bureaublad gekozen. Selecteer onder Opmaak Alleen afbeeldingen en klik vervolgens op Opslaan.
Op je bureaublad heb je nu een map met de naam Afbeeldingen. In deze map bevinden zich de specifieke segmenten (afbeeldingen) die u hebt geselecteerd. Deze afbeeldingen zijn ideaal qua resolutie en bestandsgrootte voor gebruik op internet.
Wis je gidsen door naar Bekijken> Gidsen> Duidelijke hulplijnen. Teken nu nieuwe hulplijnen in het volgende gebied dat u wilt segmenteren. De hover-status (wanneer de muis boven de navigatie staat) is rood en de uit-status grijs. U moet beide versies van de navigatie maken. Om dit efficiënt te bereiken, moet u eerst uw navigatie rood maken en vervolgens naar Bestand> Opslaan voor web en apparaten ...
Selecteer de specifieke segmenten die u wilt opslaan. Omdat mijn navigatie niet bestaat uit afbeeldingen of een overvloed aan kleuren, heb ik besloten dat het beste bestandstype voor de navigatie GIF is en klik vervolgens Opslaan. Merk ook op dat als uw gebruiker een door het web ondersteund lettertype is, u dan kunt besluiten om html-tekst te gebruiken in plaats van afbeeldingen.
U kunt uw afbeeldingen op dit moment een nieuwe naam geven. Ze worden echter automatisch voor u benoemd, dus dit is niet verplicht.
Als u uw afbeeldingen op dezelfde locatie hebt opgeslagen als voorheen, ziet u dat de map Afbeeldingen op uw bureaublad nu de extra afbeeldingen bevat die u zojuist hebt opgeslagen.
Houd er rekening mee dat dit slechts één mogelijke workflow is. Als alternatief kunt u ergens in uw document aan en uit plaatsen, al uw segmenten maken en ze samen exporteren.
De andere methode om slices te maken is door een object te selecteren en vervolgens naar te gaan Object> Slice> Maken van selectie. Plakjes maken met behulp van handleidingen of uit een selectie is ook prima. Gebruik een workflow die u comfortabel en het best vindt voor het specifieke project waaraan u werkt.
Soms hoeft u de tekst die in een segment valt niet op te nemen. De voettekst heeft bijvoorbeeld tekst die is ingevoerd in de WYSIWYG-editor. Als dit het geval is, verwijdert u de tekst vóór of na het maken van de segmenten, maar eerder om de segmenten voor het web op te slaan.
Hieronder ziet u dat ik de tekst heb verwijderd nadat de slices zijn gemaakt.
Bekijk de definitieve website. Zoals u kunt zien, is het eenvoudig en effectief om een website in Adobe Illustrator op te zetten. Je kunt snel experimenteren met ontwerpen en deze fase van het webontwerpproces de aandacht en gedachte geven die het nodig heeft. U kunt de uiteindelijke afbeelding hieronder bekijken of een grotere versie hier bekijken.
Accentsconagua