Maak 3D en toch plat uitziende winkelmandje iconen

Winkelen voor een nieuw pictogram? Zoek niet verder. Leer hoe u een aangepast winkelmandpictogram kunt maken voor uw volgende webontwerpproject. We combineren 3D-kwaliteiten met een platte look. U hebt een goed begrip van de hulpmiddelen van Adobe Illustrators nodig om deze zelfstudie te voltooien.

Final Image Preview

Hieronder is het definitieve ontwerp waar we naartoe zullen werken. 

Stap 1

Begin door het gereedschap Rechthoek (M) te selecteren en een rechthoek te tekenen met een lijn van 4 pt. Zorg ervoor dat u een lichte kleur gebruikt voor de streek, zodat u kunt zien wat u aan het doen bent wanneer u het 3D-effect toepast. Breng geen vulling aan op de rechthoek.

Stap 2

Ga naar Effect> 3D> Extrude & Bevel. Geef je vorm een ​​rotatie voor de X-, Y- en Z-as 'en een Extrude-diepte van ongeveer 16. Klik op OK. Kopieer en plak deze vorm om te gebruiken voor de volgende stap.

Stap 3

Dubbelklik in het Vormgevingpalet op 3D Extrude & Bevel. Voer een veel hogere extrudeerdiepte in en klik op OK.

Stap 4

Plaats de vormen op elkaar en maak de bovenste of onderste vorm iets kleiner of groter dan de andere. Op deze manier kunt u zien dat er twee vormen zijn waaruit de mand bestaat. Dit is hoe je artwork er op dit moment uit zou moeten zien.

Stap 5

Om de vorm verder te manipuleren, moet je eerst naar Object> Uiterlijk uitbreiden. Gebruik het gereedschap Direct selecteren (A) en sleep om de punten te selecteren zoals hieronder is aangegeven. Verplaats de punten iets naar binnen, zodat de hele mand onderaan een beetje dunner is.

Stap 6

Zorg ervoor dat u ook de punten rond de bovenrand van de mand verplaatst.

Stap 7

We passen een blauw tot zwart verloop toe op onze winkelwagen. Zorg er bij het werken met zwart voor dat u een zwart gebruikt met nulwaarden voor R, G en B. Dit geeft u een veel rijker zwart.

Stap 8

Selecteer het vlak van de mand en ga naar Object> Pad> Offset pad. Voer ongeveer -10 in en klik op OK. Hierdoor wordt een binnengebied gecreëerd met dezelfde verhoudingen van de grotere vorm. We kunnen dan twee verschillende kleuren toepassen op de vormen om de mand meer visuele interesse te geven.

Stap 9

Geef het andere gezicht van de mand dezelfde offset-padbehandeling.

Stap 10

Als u wilt dat uw verlopen consistent zijn in meerdere vormen dan moet u ervoor zorgen dat u beide vormen tegelijkertijd selecteert. Ik heb het uiterlijk van een zeer reflecterend oppervlak gecreëerd door de kleur in het verloop abrupt te wijzigen. Voor een realistische reflectie moet je wat experimenteren.

Stap 11

Selecteer het binnengebied op de voorkant van het mandje en ga naar Bewerken> Kleuren bewerken> Kleurbalans aanpassen. Voer voor elke waarde 5 in en klik op OK. Dit maakt de blauwe kleur 5 procent lichter op het geselecteerde gebied en geeft de indruk van een subtiele verandering in het oppervlak van het object.

Stap 12

Dit is hoe je kunstwerk er op dit moment uit zal zien.

Stap 13

Ga door met het geven van de rest van de mandgradiënten. Observeer hoe de reflecterende look niet te overdreven is. Ik heb de neiging om elk vlak van de mand niet meer dan één abrupte kleurverandering te geven. Maar natuurlijk werden regels overtreden. Blijf gewoon verschillende hoeken en kleurintensiteiten proberen totdat hij er goed uitziet. Merk ook op dat de binnenkant van de mand niet veel gebruik maakt van een reflectie, alleen een donker tot licht verloop.

Stap 14

Het maken van de gaten die door de mand snijden, is gemakkelijker dan je denkt. Teken met het gereedschap Pen (P) een vorm zoals hieronder. Zorg ervoor dat u de lijnen van de mand volgt. In principe zorgt u ervoor dat uw bovenste lijnen evenwijdig lopen aan de boven- en onderkant van de mand en uw zijlijnen evenwijdig lopen aan de zijkanten van de mand.

Stap 15

Kopieer en plak de vorm en zorg dat deze overlapt zoals hieronder wordt weergegeven. Selecteer in de Pathfinder Aftrekken van vormgebied gevolgd door Uitvouwen.

Stap 16

Je krijgt een vorm die lijkt op de rand van een venster.

Stap 17

Omdat de vorm van het hoofdvenster zich nog steeds op het klembord bevindt, drukt u op Option + F om de venstervorm precies te plakken van waaruit u deze hebt gekopieerd. U kunt nu deze vorm gebruiken om de andere vensters te maken. Omdat de vorm van de mand naar beneden toe smaller wordt, moet je elk venster steeds iets aanpassen om ze er goed uit te laten zien. Gebruik het gereedschap Direct selecteren om elke venstervorm aan te passen.

Stap 18

Teken de vensters aan de andere kant van de mand.

Selecteer elke venstervorm op de voorkant van één kant van de mand en geef ze tegelijkertijd een bruin tot zwart verloop. Dit garandeert dat de gradiënt uniform en consistent is over alle vensters.

Stap 19

Om ervoor te zorgen dat de vakken die binnen de korf vallen eerst een vierkante vorm tekenen.

Stap 20

Ga naar Effect> 3D> Extrude & Bevel. Voer de onderstaande variabelen in en klik op OK.

Stap 21

Kopieer en plak de vakjes een paar keer en verander de Extrude diepte om verschillende hoogtes van vakken te maken.

Stap 22

Als u wilt blijven werken met de vakken, moet u ze uitvouwen door naar Object> Uiterlijk uitbreiden te gaan. Heel belangrijk: Koppel alle vakgroepen uit elkaar totdat u ze niet meer kunt opsplitsen. Om de vakjes van groepen te verwijderen, gaat u naar Object> Groep opheffen.

Draai vervolgens de vakken zodat ze allemaal op iets verschillende hoeken staan. Geef ze een warm bruin verloop en zorg ervoor dat de helderheid van elke kant van de doos varieert om een ​​realistischer uiterlijk te creëren.

Stap 23

Voeg een beetje meer details toe door de bovenkant van het kader te kopiëren en te plakken en het gereedschap Direct selecteren te gebruiken om het object opnieuw vorm te geven om er uit te zien als een stuk plakband. Vul de vorm met wit en pas de dekking in het transparantiepalet aan tot ongeveer 10%.

Stap 24

Ga naar Object> Pad> Offsetpad en voer -5 in en klik vervolgens op OK.

Stap 25

Selecteer de binnenvorm en pas het verloop aan zodat het niet overgaat in de andere vorm erachter.

Stap 26

Een snelle manier om het eruit te laten zien alsof de dozen zich in de mand bevinden, is om er een uitknipmasker op toe te passen.

Gebruik het gereedschap Pen om een ​​lijn te tekenen waar de stippellijn is. Je lijn heeft geen vulling- of lijnkleur nodig. De rode regel hieronder is alleen voor vertegenwoordiging.

Stap 27

Zorg ervoor dat de vorm die je zojuist tekende voor de vakken staat. Selecteer alle vakken en selecteer de maskervorm en ga vervolgens naar Object> Knipmasker> Maken. Je dozen zien er meteen uit alsof ze in de mand zitten!

Als u de kleur of vorm van de vakken verder wilt bewerken, dubbelklikt u erop om de isolatiemodus in te gaan (Illustrator CS3 en hoger) en past u ze aan uw wensen aan.

Stap 28

Maak een aantal hoogtepunten op de basket door eerst een basisvorm te tekenen met de Pen Tool. Ga naar Effect> Vervagen> Gaussiaans vervagen en voer een variabele in die er goed uitziet.

Stap 29

Kopieer en plak alle elementen tot nu toe. Selecteer de kopie die u zojuist hebt gemaakt en selecteer in het Pathfinder-palet Toevoegen aan vormgebied gevolgd door Uitvouwen.

Stap 30

Geef deze vorm een ​​dikke streep. Zet de doppen op Ronde en Verbinden zoals hieronder gemarkeerd. Geef de vorm vervolgens een slagschaduw door naar Effect> Stileren> Slagschaduw te gaan.

Stap 31

Zet de vorm achter al het andere.

Stap 32

Je kunt dit pictogram eenvoudig in een set maken door de vensters te veranderen in een blauw naar zwart verloop en een pijl uit een driehoek en een vierkante vorm te maken.

Laatste afbeelding

Hier is het, de pictogrammen van het laatste winkelmandje.