Adobe Illustrator is een webdesign-toepassing die wordt gemaakt van vector graphics voor een breed scala aan toepassingen waaronder print, de beweging en het web. Vectorafbeeldingen wiskundige formules gebruiken voor het presenteren van beelden, in tegenstelling tot andere indelingen, zoals GIF-bestanden, die gebruik maken van een verzameling van punten. Hoewel niet specifiek ontworpen als een programma voor webontwerp, Illustrator beschikt over geavanceerde instrumenten voor het exporteren van afbeeldingen die zijn gemaakt binnen het programma voor gebruik van de website en ook de code die nodig is voor weergave in een browser wordt gegenereerd.
Wat die u nodig hebt
- Webdesign bewerkingssoftware
Een lay-out maken
Maak een Illustrator-document dat is 960 pixels breed met een hoogte van uw keuze afhankelijk van de inhoud en ontwerp die je in gedachten hebt. Een site 960 px breed voldoet aan de meest populaire monitor resolutie breedte van 1024 px eenmaal de schuifbalk en venster randen in aanmerking worden genomen.
Maak een hand getrokken schets van de fundamentele visuele lay-out van uw website als u dit niet al hebben gedaan. Dit zal u voorzien van een handig hulpmiddel voor het maken in Illustrator.
Maak uw lay-out met behulp van de hulpprogramma's beeld en tekst voor een gestileerde header. Als uw ontwerp ruimte voor tekst zoals blogberichten bevat, de ruimte in dat gebied leeg laat, of een rand omheen voor gemakkelijk afbakening maken.
Hulplijnen aan uw ontwerp af te bakenen van de verschillende onderdelen van de lay-out toevoegt. Dit is zeer belangrijk omdat u deze hulplijnen gebruiken zal bij het maken van segmenten, waarin de grenzen van de elementen op uw website. Hulplijnen kunt u objecten rangschikken met precisie. Klik op de verticale of horizontale liniaal en sleep de muis aan waar u de gids te kunnen lokaliseren.
Controleer de plaatsing van uw gidsen voor precisie en nauwkeurigheid. Trekken meer indien nodig te scheiden van elk element, zoals navigatie beelden die links op uw site zal worden.
Genereren van Code
Selecteer 'Object' in het menu, kies "Slice" en kies "Maken van gidsen." Als de segmenten worden gemaakt ziet u kleine zwarte dozen binnen elk segment met een bijbehorende nummer. Selecteer "File" menu en kies "Opslaan voor Web en apparaten." Selecteer het segment Selecteer gereedschap, dat het tweede pictogram in het gereedschap-menu aan de rechterkant van het scherm onder het pictogram van een hand is. Selecteer alle segmenten.
Selecteer de optimalisatie-instellingen van de opties aan de rechterkant van het scherm. U kunt vooraf ingestelde instellingen kiezen of maken van een aangepast profiel afhankelijk van of u uw beelden wilt als JPEG-, GIF- of PNG bestanden. U kunt ook de kwaliteit van afbeeldingen aanpassen.
Verschillende voorbeeldinstellingen door te klikken op de tabbladen "2-up" en "4-up". Op de hoek van de onderkant van elke preview kunt u de optimalisatie informatie zoals de bestandsgrootte en de rendertijd browser bekijken. Klik op de knop "Opslaan". Bepalen waar u uw afbeeldingen en code te worden opgeslagen en navigeer naar dat gebied, met behulp van de "waar:" knop.
Kies de indeling voor uw werk. Als u bedreven in HTML bent en alleen de afbeeldingen wilt omdat u code voor hen later toevoegt, kiest u "Alleen foto's." Als je een beginner bent of de voorkeur aan de HTML-code voor u gegenereerd, kies de optie 'HTML en afbeeldingen'. Als u liever voor de positionering van de elementen worden georganiseerd met Cascading Style Sheets in plaats van tabellen, selecteer de knop "standaardinstellingen" en kies "Exporteren als CSS-lagen" in het "Layers" tabblad.
Open het HTML-bestand vanuit een browser te bekijken van uw werk. Bewerk de bestanden met een webontwerpprogramma.
