Share
In deze zelfstudie bespreken we een professionele workflow voor het illustreren van header-afbeeldingen van websites in comic-stijl, die bestemd zijn om te integreren in Wordpress-thema's. Dit is een geweldige manier om uw blog te laten opvallen en gepromoot te krijgen in de galerijen met webdesign. Laten we beginnen!
Hieronder is het uiteindelijke beeld waar we naartoe zullen werken. Wil je toegang tot de volledige Vector Source-bestanden en downloadbare exemplaren van elke tutorial, inclusief deze? Word lid van Vector Plus voor slechts 9 $ per maand. U kunt de uiteindelijke illustraties, het uiteindelijke websiteontwerp op ware grootte bekijken of de live-site bezoeken.
Hieronder staat mijn Wordpress-thema, zoals u ziet, bestaat het thema uit een paar zones, zoals de 'kop'. Hier wil ik de afbeelding van de achtergrondkop wijzigen en iets plaatsen dat meer kan uitdrukken over mij als ontwerper en illustrator.
Ik begin altijd met een paar schetsen op papier. Dit helpt me echt om sommige ideeën beter te focussen en daarna iets te traceren in Illustrator. Hier een leuke video die ik heb gemaakt voor deze zelfstudie.
Dus mijn idee is om een vreemde toekomst te creëren met robotarbeiders en een meisje als commandant. Voorlopige schetsen worden hieronder getoond.
De afbeelding hieronder toont de definitieve potloodschets die in Illustrator als sjabloon moet worden geplaatst.
Nu ben ik klaar om voor mijn pc te gaan zitten en te beginnen met Adobe Illustrator CS4. Ik open een nieuw document en plaats de schets als een sjabloon (door te dubbelklikken op de laag en Sjabloon te controleren).
Nu maak ik een nieuwe laag boven de laag "sjabloon". Daarna begin ik de basisschetslijnen te traceren. Ik traceer altijd met het palet Pen Tool open om sneller te werken (kleine tip).
Volg de eerste stappen in de onderstaande video.
Met de Pen-tool maak ik de zwarte inkten; Ik verwijs hier graag naar inkten omdat ik van stripboeken hou. Zie de video hieronder.
Op het einde ziet u de laag met de tekens inkten.
Zie ook onder de achtergrondlaaginkt.
De laag 'sjabloonschets' hoeft niet meer te worden gebruikt, dus heb ik deze verwijderd. Hier zijn alle lagen bij elkaar geplaatst.
Na het inkten heb ik wat basiskleuren nodig, hier is de laag "basiskleuren".
Onder de achtergrond wordt de basiskleur hieronder getoond.
Hier zijn alle basiskleuren samen.
Na de basiskleuren heb ik wat diepte en schaduw nodig om de illustratie echt te maken. Hier is een korte studie over hoe het licht binnen deze illustratie zal vallen.
Ik kom terug in illustrator en ik begin de schaduwen te traceren waar nodig. Voor degenen die ik vaak kopieer en plak de vormen, pas dan Divide toe vanuit het pathfinder-palet.
Op het einde wordt de uiteindelijke afbeelding hieronder weergegeven of bekijk je de uiteindelijke illustratie.
Van deze afbeelding had ik twee delen nodig voor mijn Wordpress-thema, één voor de header en één voor het lichaam. Met de hulplijnen teken ik de twee zones.
Nadat ik de hulplijnen heb geplaatst, maak ik de plakjes door naar Object> Segment> Maken van hulplijnen te gaan.
Nu sla ik de twee afbeeldingen op door naar Bestand> Opslaan voor web te gaan (ik bewaar alleen de afbeeldingen en geen html). Vervolgens upload ik de uiteindelijke geëxporteerde afbeelding naar de Wordpress-themavouw. Nu is het klaar om te worden gecodeerd in het thema.
Je kunt de definitieve resultaten hieronder zien, die volledig zijn geïntegreerd in het laatste Wordpress-thema. U kunt de uiteindelijke illustraties, het uiteindelijke websiteontwerp op ware grootte bekijken of de live-site bezoeken.
Abonneer u op de Vectortuts + RSS-feed om op de hoogte te blijven van de nieuwste vectorhandleidingen en -artikelen.
Accentsconagua