Share
In deze zelfstudie worden voorbeelden gegeven van technieken voor het maken van hout- en textieltexturen. Ook zullen we leren hoe het licht op de objecten kan worden gespeeld met behulp van het dekkingsmasker, het menggereedschap en de kunstborstels. Als u deze tutorial stap voor stap bestudeert, leert u alle geheimen kennen van het ontwerpen van professionele icoonontwerpen.
De pictogrammen voor iOS-toepassingen hebben een normale grootte. Hoewel we een vectoreditor gaan gebruiken, wordt het pictogram gemaakt met het vereiste vooraf ingestelde formaat. Als we het bovenstaande begrijpen, kunnen we een professionele afbeelding maken, vermijden dat er vreemde details worden gemaakt, die nooit zichtbaar zullen zijn op ware schaal, of de algemene weergave ervan kunnen beïnvloeden..
Vandaag gaan we een pictogram maken met de grootte van 512 bij 512 px. Deze grootte wordt gebruikt voor weergave in iTunes, inclusief CoverFlow en de App Store. De retrostijl wordt beschouwd als een van de mooie richtingen van modern design. Daarom heb ik besloten om Radio App Icon te gebruiken als een retro-achtige radio set van het midden van de vorige eeuw.
We beginnen met het gebruik van het gereedschap Afgeronde rechthoek om vorm te geven aan het pictogram met de vereiste grootte en hoekafrondingsradius, zoals hieronder weergegeven.
Vul het formulier met donkerbruine kleur.
Alle objecten worden tijdens het maken van het pictogram gekleurd, maar het is vereist om van tevoren de positie van de lichtbron te bepalen. In ons geval bevindt de lichtbron zich rechtsboven. De verloopvulkleuren, slagschaduwrichting, markeerpositie en intensiteit zijn afhankelijk van de positie.
Toepassing van sommige lichtbronnen of vergelijkbare afbeeldingen moet worden vermeden. Dit komt omdat onze hersenen de echte wereld en afbeeldingen op een andere manier waarnemen; Als er daarom bepaalde lichtbronnen worden toegepast, kan uw afbeelding er onnatuurlijk uitzien en zelfs de 3D-functies verliezen. We moeten ons artistieke oordeel gebruiken om te bepalen hoe we licht op ons pictogramontwerp kunnen weergeven.
Maak een kopie van de afgeronde rechthoek en plak deze rechtstreeks op de vorige (Command + C; Command + F). Vul de kopie met een lineair verloop dat bestaat uit verschillende bruine kleuren met lichte en donkere tinten.
Zoals u kunt zien, bevinden lichtere schuifregelaars van het verloop zich aan de rechterkant van dit formulier, afhankelijk van de positie van de lichtbron.
Maak een kopie van de laatste afgeronde rechthoek en plak deze aan de voorkant. Vul het met een zwart-wit verloop, zoals in onderstaande afbeelding.
Selecteer twee bovenste rechthoeken en maak een dekkingsmasker door Dekkingsmasker maken te kiezen in het transparantiemenu.
Daarom hebben we een ongelijke lichtverdeling bereikt in het bovenste deel van het beeld.
Maak een kopie van de rechthoek die in eerste instantie is gemaakt tijdens de eerste stap en plak deze vooraan. Plaats het nieuwe formulier boven aan alle gemaakte objecten en vul het met een donkerbruine tot bruine lineaire verloop.
Selecteer de punten A, B, C en D met behulp van het gereedschap Directe selectie (A) en beweeg het verticaal naar beneden door de Shift-toets ingedrukt te houden.
Houd het object geselecteerd, ga naar Object> Pad> Offsetpad en stel de offsetwaarde in die in het dialoogvenster wordt weergegeven.
Vul de rechthoek met een donkerbruine kleur.
Ga nu naar Object> Blend> Mengopties en stel het aantal gespecificeerde stappen in het dialoogvenster in. Selecteer bovenaan twee formulieren en ga naar Object> Overvloeien> Maken.
Maak een kopie van het bovenste object en plak dit vooraan. Verplaats het nieuwe formulier vanuit het overvloeiobject naar het deelvenster Lagen.
Vul het met een lichtbruine kleur.
Laten we nu de vector houtstructuur maken. Gebruik het gereedschap Rechthoek (M) om een rechthoek met grijze vulling te maken. De hoogte van een dergelijke rechthoek is meer dan die van de lichtbruine rechthoek.
Houd het object geselecteerd, ga naar Effect> Schets> Grafische pen en stel de parameters voor een dergelijk effect in het dialoogvenster in.
Ga nu naar Object> Uiterlijk uitbreiden en dan naar Object> Live Trace> Trace-opties en stel de parameters in die in de onderstaande afbeelding worden weergegeven.
Ga naar Object> Vouw en vouw de vectortextuur horizontaal uit met behulp van het Selectiegereedschap (V), terwijl u de Alt-toets ingedrukt houdt. De textuurbreedte zal meer zijn dan die van de lichtbruine afgeronde rechthoek.
Vul de textuur met een lichtbruine kleur. Deze kleur heeft een iets lichtere tint ten opzichte van de onderliggende rechthoek.
Gebruik de Warp Tool; Dubbelklik op dit gereedschapspictogram in de werkbalk, waarmee het dialoogvenster met zijn instellingen wordt geopend.
Pas horizontale en verticale verschuivingen van de textuurkorrels toe met behulp van de Warp Tool.
Selecteer de hele textuur en ga naar Effect> Distort & Transform> Roughen en stel de parameters in voor een dergelijk effect, waarbij tegelijkertijd de veranderingen worden waargenomen die op de textuur zijn toegepast.
Maak een kopie en plak de textuur ervoor. Vul de kopie met een donkerdere tint van bruine kleur en schuif deze iets naar beneden. Wijzig de parameters van het Ruwer-effect; stel de vermenigvuldigende overvloeimodus in en verlaag de dekking. Al deze parameters zijn toegankelijk via het deelvenster Vormgeving.
Met behulp van de techniek die in stappen 7 en 8 wordt beschreven, heb ik een andere soort textuur gemaakt en deze boven de twee vorige geplaatst. Voor demonstratiedoeleinden is de zichtbaarheid van de eerste twee structuren uitgeschakeld, zoals weergegeven in de onderstaande afbeelding.
Alle texturen zien er echter als volgt uit.
Gebruik de Pen Tool (P) om de vorm van de schaduw te maken.
Houd het object geselecteerd, ga naar Effect> Vervagen> Gaussiaans vervagen en stel de straalwaarde in zoals hieronder wordt weergegeven.
Pas de vermenigvuldigende overvloeimodus toe en verminder de dekking met behulp van het transparantiepaneel.
Maak een kopie van de lichtbruine afgeronde rechthoek en plak deze op de voorgrond. Plaats de kopie boven alle eerder gemaakte objecten.
Selecteer alle texturen, de schaduwvorm en de bovenste afgeronde rechthoek en klik vervolgens op de sneltoets Command + 7, waarmee het knipmasker wordt gemaakt.
Nu zijn de schaduw en alle objecten van de textuur gegroepeerd. Verlaag de dekking van deze groep met behulp van het paneel Transparantie.
Selecteer de sublaag met het uitknippad in het lagenpaneel en plak deze vooraan.
Verplaats het gemaakte pad uit de groep met het uitknippad en vul het met een wit tot grijs lineair verloop.
Pas de vermenigvuldigingsmodus voor het object toe met behulp van het deelvenster Transparantie.
Laten we nu een afstemmingsschaal voor de radio maken. Gebruik het ellipsgereedschap (L) om een donkerbruine gevulde ellips te tekenen.
Maak een kopie van de gemaakte ellips en plak deze op de voorgrond. Houd de Alt + Shift-toetsen ingedrukt en verminder het formaat van de ellips bovenaan met behulp van het selectiegereedschap (V).
Selecteer beide ellipsen en ga naar Object> Overvloeien> Maken.
Maak nog twee ellipsen, zoals in de onderstaande afbeelding.
Gebruik het schaargereedschap (C) om de ellipsen in de punten 1-8 te snijden. Verwijder de segmenten ertussen.
Pas het juiste profiel van het deelvenster Lijn op de linkse segmenten toe.
Selecteer alle segmenten en ga naar Object> Uiterlijk uitvouwen. Nu kunnen we de objecten vullen met lineaire hellingen. Daarom hebben we de blikken op de rand van de afstemschaal gecreëerd.
Maak de nieuwe ellips en vul deze met een complexe lineaire gradiënt, zoals weergegeven in de onderstaande afbeelding.
Vervolgens vullen we de twee ellipsen met een bruine kleur en een lineair verloop.
Laten we een reeks ellipsen maken met lijnen van verschillende breedten en zonder ze te vullen.
Selecteer ze en ga naar Object> Uitbreiden. Vul ze nu met lineaire gradiënten zoals weergegeven in de onderstaande afbeelding.
Teken de ellips in het midden van de afstemmingsschaal.
Vul het met een kegelvormig verloop.
Gedetailleerde instructies voor het maken van conische verloopvullingen zijn te vinden in mijn tutorial die hier toegankelijk is Maak een kegelvormig verloop met Adobe Illustrator in twee minuten!.
Gebruik het pengereedschap (P) om een schuine lijn te tekenen die over het middelpunt van de centrale ellips zal komen.
Gebruik het Schaartool (C) om het in twee punten te knippen en verwijder vervolgens het middensegment.
Selecteer beide segmenten en ga naar Object> Uitbreiden; Vul nu de objecten met een wit tot geel lineair verloop.
Selecteer beide segmenten, kopieer ze en plak ze achteraan. Vul de onderste segmenten met een donkergrijze kleur en verplaats ze een klein beetje naar beneden.
Laten we nu de schittering creëren. Gebruik het ellipsgereedschap (L) om een ellips te tekenen. Draai het nu om en rek het uit, en sleep vervolgens een van de punten in de richting van het afstemmingscentrum met behulp van het gereedschap Direct selecteren (A). Vul het voorwerp met een lichtgele kleur.
Teken daarna nog een ellips en vul deze met een witte kleur.
Stel de waarde van de dekking in op 0% in het paneel Transparantie voor het lager geplaatste object.
Selecteer beide objecten en gebruik ze als basis, maak de overvloeiing (Object> Blend> Maken).
Teken nog een ellips en plaats deze onder alle stemmingsschaalobjecten. Vul deze met zwart, pas de vermenigvuldigende overvloeimodus toe en verlaag de dekking in het transparantiepaneel.
Laten we nu doorgaan met het maken van de luidsprekers van de radio. Gebruik het gereedschap Pen (P) om het formulier te maken dat wordt weergegeven in de onderstaande afbeelding.
Maak nu de cirkel, selecteer beide vormen en druk op de mintoets Voor in het deelvenster Pathfinder.
Vul het verkregen formulier in met een donkerbeige kleur.
Helaas is het niet efficiënt om de hoeken van dergelijke formulieren af te ronden met behulp van standaard Adobe Illustrator-tools. Het effect Round Corner is in dergelijke gevallen niet van toepassing, omdat het alle vormen vervormt.
Daarom is het handig om de hoeken handmatig af te ronden door de punten toe te voegen en ze te verplaatsen met behulp van handvatten. De handigste manier die ik heb gekozen om dit probleem op te lossen, is de VectorScribe-plug-in waarmee elke hoek eenvoudig kan worden afgerond met behulp van de Dynamic Corners Tool.
Laten we de structuur van de stof op de luidspreker maken. Gebruik het gereedschap Rechthoek (M) om een rechthoek een breedte van 1 px te tekenen.
De kleurvulling voor zo'n rechthoek kan elk moment zijn. Verlaat de rechthoek zoals geselecteerd, ga naar Object> Transformeren> Verplaatsen en stel de horizontale offsetwaarde in en druk vervolgens op de knop Kopiëren.
Druk nu zo vaak als nodig op Command + D om het luidsprekervorm te bedekken met de rechthoekkopieën.
Het is vereist dat al dergelijke rechthoeken zijn gevuld met verschillende tinten van bruine kleur. Tot ons grote geluk kan dit automatisch worden gedaan. Gebruik het deelvenster Kleur om enkele tinten van bruine kleur te maken en deze in het deelvenster Stalen op te slaan.
Selecteer nu alle rechthoeken, kies de gewenste kleuren in het deelvenster Stalen en start het script Willekeurige kleurstalen. Je kunt dit freeware-script downloaden en de gedetailleerde informatie erover krijgen door op de volgende link te klikken. Random Swatches Fill.
Bewaar de rechthoeken geselecteerd, ga naar Effect> Vervormen & transformeren> Opruwen en stel de parameters van het effect in.
Groepeer alle rechthoeken. Pas de eerder beschreven techniek toe om een groep horizontale rechthoeken te maken.
Pas de vermenigvuldigende overvloeimodus voor de groep toe.
Kopieer het luidsprekerformulier en plak het vooraan en plaats het vervolgens boven alle objecten.
Selecteer de stoffentextuur en de bovenste vorm door Command + 7 toe te passen, waardoor het knipmasker wordt gemaakt.
Gebruik het gereedschap Rechthoek (M) om een paar rechthoeken te tekenen, die met een lineair verloop moeten worden opgevuld.
Groepeer ze en sleep ze naar de groep met het uitknipmasker van de luidspreker. Deze bewerking moet in het deelvenster Lagen worden uitgevoerd.
Kopieer de gegroepeerde rechthoeken en plak ze in de achterkant. Vul de groep met een grijze kleur en pas de vermenigvuldigingsmodus toe met behulp van het transparantiepaneel.
Nu wordt de schaduw gemaakt.
Laten we de inscriptie op de luidspreker maken. Voor dit doel heb ik het lettertype Sf American Dreams gebruikt dat kan worden gedownload door op de volgende link te klikken. Gebruik dus het gereedschap Tekst (T) en maak de inscriptie "Radio".
Houd de tekst geselecteerd, ga naar Type> Contouren maken en dan naar Object> 3D> Extrude & Bevel en stel de parameters van het effect in onderstaande afbeelding in.
Ook kunt u de objectverlichting aanpassen; hiervoor is het nodig om op de toets Meer opties in dit dialoogvenster te drukken.
Kopieer de inscriptie en plak deze op de achterkant. Vul de laag geplaatste inscriptie met een grijze kleur en pas vervolgens de vermenigvuldigende overvloeimodus met een afgenomen transparantie toe in het deelvenster Transparantie. Verplaats het nu een beetje naar beneden en naar rechts. Zo wordt de schaduw van de inscriptie gecreëerd.
Gebruik het gereedschap Pen (P) om de vorm van het eindgedeelte van de opening in de behuizing van de radio te maken.
Pas de techniek toe die wordt beschreven in stappen 7-8 om de textuur voor dit object te maken.
Maak de vorm van de schaduw vanaf de rechterrand van de opening in de behuizing van de radio en vul deze met een bruine kleur.
Sleep de sublaag met dit formulier naar de groep met het uitknipmasker van de luidspreker.
Laat het object zoals geselecteerd, ga naar Effect> Vervagen> Gaussiaans vervagen, en stel de vervagingsradius in het dialoogvenster in.
Verlaag nu de dekking van het schaduwformulier.
Laten we nu de indicator maken. De techniek van de creatie is vergelijkbaar met de technieken die zojuist zijn beschreven in deze tutorial; daarom ga ik je de stappen tonen van het creëren waar je vanaf kunt werken.
Nu is het tijd om de tuners te maken. Gebruik het gereedschap Pen (P) om het formulier te maken dat lijkt op het formulier dat in de onderstaande afbeelding wordt weergegeven.
Sleep dit formulier naar het deelvenster Penselen en sla de nieuwe penseel op als het patroonpenseel.
Maak de omtrek en pas het patroonpenseel daarop toe.
Houd het tuner-formulier geselecteerd, ga naar Object> Uiterlijk uitvouwen en vulling en lijn verwisselen.
Gebruik het ellipsgereedschap (L) om de cirkel te maken die wordt weergegeven in de onderstaande afbeelding.
Selecteer alle tunerelementen en druk op de Unite-knop in het deelvenster Pathfinder.
Maak de verkregen vorm kleiner en plaats deze in het onderste deel van de radio set.
De opvulkleur voor dergelijke vormen kan elk moment zijn.
Selecteer de tuner en ga naar Effect> 3D> Extrude & Bevel en stel vervolgens de parameters in die in de onderstaande afbeelding worden weergegeven.
Ga nu naar Object> Uiterlijk uitbreiden. De genoemde manipulaties zullen resulteren in het creëren van de reguliere vectorobjecten groep. Vul de eindoppervlakken van de tuner met lineaire hellingen om de lichtverdeling daarop weer te geven.
Creëer de ellips op het voorste stemoppervlak en vul deze met een radiale gradiënt, zoals weergegeven in de onderstaande afbeelding.
Maak nu de rand van de tuner en vul deze met een lineair verloop.
De blikken op de tuner worden gemaakt met behulp van Blend-objecten door de hierboven beschreven techniek toe te passen.
Het is mogelijk om een andere techniek toe te passen voor het maken van de blikken. Gebruik de potloodtool (N) om de vorm van verblinding te creëren met de volgende toepassing van het Gaussiaans vervagen-effect.
Deze vormen reproduceren de zachte verlichting. Laten we nu intensere blikken maken. De genoemde formulieren worden ook gemaakt met behulp van de Pencil Tool (N), maar zonder toepassing van het Gaussian Blur-effect in dit geval.
Gebruik twee ellipsen en het menggereedschap om de schaduw van de tuner te maken.
Groepeer alle elementen van de tuner en dupliceer deze twee keer, nadat u de tuners hebt geplaatst zoals in de onderstaande afbeelding.
Laten we verder gaan met het creëren van de blikken op de behuizing van de radio. Gebruik twee ellipsen om het Overvloei-object te maken.
Sleep het naar het deelvenster Penselen en sla de nieuwe penseel op als de penseel.
Gebruik nu vergelijkbare borstels die zijn genoemd om alle blikken te maken.
We hebben dus een pictogram gemaakt met de grootte van 512 bij 512 px. Het is mogelijk om de bestaande objecten te gebruiken voor het maken van pictogrammen met andere formaten. Tot ons grote geluk hebben we te maken met 'dimensieloze' vector. Het is echter aan te bevelen sommige elementen te wijzigen bij het wijzigen van het formaat.
Voor de pictogrammen met kleinere formaten is het bijvoorbeeld raadzaam om de inscriptie aan te passen om deze leesbaarder te maken. Ook kunt u de texturen vereenvoudigen en enkele blikken verwijderen. Telkens wanneer u transformaties hebt toegepast, moet u altijd de efficiëntie ervan verifiëren door het pictogram op ware grootte te bekijken.
Elk pictogram voor iOS-applicaties heeft eindelijk de bitmap-indeling (PNG) en daarom kunt u uw illustraties in de Pixel Preview-modus bekijken (Beeld> Pixel Preview) om de kwaliteit van het eindproduct te schatten.
Het laatste pictogram wordt hieronder getoond.
Accentsconagua