Maak een Lens Lens-pictogram met lensopening

In deze zelfstudie maken we een gedetailleerde cameralens die lijkt op de lens die wordt gebruikt als het logo voor de Aperture-fotobewerkingssoftware van Apple. Een cameralens is goed voor een softwarepictogram, logo of gewoon als een afbeelding voor gebruik in elk ontwerp. Hoewel het beeld gedetailleerd lijkt, bevat het maken van het beeld niet veel meer dan het eenvoudig lagen van objecten met verschillende vullingen en verlopen om een ​​driedimensionale illusie te geven.

Opnieuw gepubliceerde zelfstudie

Om de paar weken bekijken we enkele van onze favoriete lezers uit de geschiedenis van de site. Deze tutorial werd voor het eerst gepubliceerd in augustus 2008.


Stap 1

Maak een nieuw document van elke gewenste grootte en beeldverhouding. In tegenstelling tot Photoshop is het in Illustrator vrij eenvoudig om de documentgrootte op elk moment tijdens ons werk te wijzigen. We kunnen de vectorafbeeldingen eenvoudigweg aanpassen aan de nieuwe dimensies. Ik koos in eerste instantie een vierkant document op 550 pixels bij 550 pixels.

Omdat het proces van het maken van onze afbeelding voornamelijk bestaat uit het aanbrengen van lagen met verschillende gradiënten en over elkaar heen vloeit, zullen de meeste volgende stappen eenvoudig aangeven wat de grootte van de cirkel moet zijn, wat het verlooptype is, de richting van de helling, de kleuren gebruikt in het verloop, hun kleur stopt locaties in het verloop en de locatie van de middelste schuifregelaar (s) in het verloop.

Maak de eerste cirkel 429px breed, met een -45 graden lineair verloop, die 100% grijs is (bij 100% stop) tot 40% grijs (bij 0% stop) en de middelste schuifregelaar ingesteld op 50%.


Stap 2

Maak de tweede cirkel 423 px breed met een -45 graden lineaire verloop, die een 100% grijs (bij 100% stop) tot 60% grijs (bij 0% stop) en de middelste schuifregelaar bij 50% heeft.


Stap 3

Maak de derde cirkel 368 px breed, met een lineaire gradiënt van 135 graden, die 100% grijs is (100% stop) tot 50% grijs (bij 0% stop) en de middelste schuifregelaar 33%.


Stap 4

Maak de vierde cirkel is 364px breed, met een effen zwarte vulling. Daarnaast gaan we deze cirkel een veer van 3px geven door naar Effect> Stileren> Veer te gaan.


Stap 5

Maak de vijfde cirkel 359px breed met een stevige 70% grijze vulling.


Stap 6

Maak de zesde cirkel 339px breed met een 90 graden lineair verloop, dat een 100% grijs (bij 100% stop) tot 60% grijs (bij 0% stop) en de middelste schuifregelaar bij 50% heeft.


Stap 7

Maak de zevende cirkel 335px breed met een stevige 70% grijze vulling.


Stap 8

Maak de achtste cirkel 329px breed met een 90 graden lineair verloop, dat een 100% grijs (bij 100% stop) tot 60% grijs (bij 0% stop) en de middelste schuifregelaar bij 50% heeft.


Stap 9

Maak de negende cirkel 325px breed met een stevige 70% grijze vulling.


Stap 10

Maak de tiende cirkel 319px breed met een 90 graden lineair verloop, dat een 100% grijs (bij 100% stop) tot 60% grijs (bij 0% stop) en de middelste schuifregelaar bij 50% heeft


Stap 11

Maak de elfde cirkel 315px breed met een 130 graden lineair verloop, een 100% grijs (bij 100% stop) tot 90% grijs (bij 0% stop) en de middelste schuifregelaar bij 50%.


Stap 12

Maak de twaalfde cirkel 277px breed met een radiaal verloop, dat een 100% grijs (bij 100% stop) tot 80% grijs (bij 0% stop) en de middelste schuifregelaar op 50% heeft. De radiale gradiënt zou uit het midden moeten komen en donkerder worden naar de rand toe.

Als u het punt wilt wijzigen waar het vandaan komt, selecteert u het gereedschap Verloop en klikt en sleept u vanuit de linkerbovenhoek van de cirkel naar de hoek rechtsonder in de hoek. wenk: als het verloop niet verandert wanneer u het over sleept, moet u ervoor zorgen dat de cirkel is geselecteerd.


Stap 13

Voor de volgende cirkel hebben we een iets complexere verloop nodig, en daarvoor gebruiken we een verloopnet. Verloopnetten zijn buitengewoon krachtig en kunnen worden gebruikt om ongelooflijk complexe en fotorealistische illustraties te maken door kleuren op een bijna oneindig aantal manieren met elkaar te laten versmelten. We hebben hier echter alleen een eenvoudige mesh nodig, dus maak een brede cirkel van 268 px en vul deze met effen zwart.

Verloopnetten kunnen handmatig worden gemaakt door meshpunten toe te voegen met niemand anders dan het gereedschap Verloopgaas, maar omdat we er slechts een nodig hebben, maken we het door Illustrator voor ons aan. Selecteer de cirkel en ga naar Object> Verloopnet maken. Laat alle standaardwaarden staan ​​ingesteld, maar verander de rijen en kolommen elk in 3. Wanneer u op OK klikt, maakt Illustrator de mesh.

Terwijl de cirkel is geselecteerd, schakelt u over naar het gereedschap Direct selecteren en klikt u op een punt (kruising) op het net om het te selecteren. Klik vervolgens in het gebied uiterst links in de mesh en verander de kleur in 80% grijs. Klik vervolgens in het gebied uiterst rechtsonder en verander de kleur in 70% grijs.


Stap 14

Maak de veertiende cirkel 225px breed met een effen witte vulling. Geef deze cirkel bovendien een Feather of 6px door naar Effect> Stileer> Veer ... te gaan


Stap 15

Maak de vijftiende cirkel 220px breed met een effen zwarte vulling. Voeg vervolgens een 3px Feather toe aan deze cirkel.

We gaan deze cirkel ook compenseren. Plaats het eerst in het midden van alle andere cirkels. Gebruik vervolgens de pijltjestoetsen om het twee keer naar links en tweemaal naar links te duwen.


Stap 16

Maak de zestiende cirkel 216 px breed met een effen zwarte vulling.

Tip: misschien wilt u de in stap 15 gemaakte offset-zwarte cirkel vergrendelen. Dan kunt u nog steeds alle vormen selecteren en centreren ten opzichte van het art board zonder de offset te verstoren.


Stap 17

Maak de zeventiende cirkel 208 px breed met een radiale gradiënt, die een 100% grijs (bij 100% stop) tot 90% grijs (bij 0% stop) en de middelste schuifregelaar bij 50% heeft.


Stap 18

Maak de achttiende cirkel 208 px breed zonder vulling en een 7pt witte lijn. Breng dan een 4px Feather aan op deze cirkel.


Stap 19

Nu voegen we wat schittering en reflecties toe aan onze binnenste lens om het een glazen uiterlijk te geven. Teken een soort halve maanvorm met het gereedschap Pen, vul het met wit en geef het een 8px-veer. Verlaag ook de dekking naar 75%.


Stap 20

Om een ​​beetje van een schittering aan de onderkant van de lens toe te voegen, tekent u een ovale vorm met het gereedschap Pen. Het is oke als het niet perfect is, omdat een imperfectie het effect zal vergroten. Nogmaals, vul de vorm met wit, geef het een 3px veer, en verminder de dekking tot 50%.


Stap 21

Vervolgens voegen we nog een paar reflecties toe aan de lens. Teken nog twee vormen, zoals hieronder weergegeven. Vul ze dan met wit, geef ze een 3px Feather en verlaag hun dekking tot 20%.


Stap 22

Teken een paar ovalen met het gereedschap Ellipse, waardoor ze groter worden als ze gaan. Draai ze in een hoek van ongeveer 45 graden en plaats ze in een diagonale lijn met het kleinste ovaal in de richting van het midden. Als u er drie achter elkaar hebt gedaan, selecteert u ze allemaal, kopieert u ze en draait u ze en plaatst u ze in lijn met de eerste drie, opnieuw met het kleinste ovaal in de richting van het midden.


Stap 23

Het enige wat je hoeft te doen is de buitenste lens toevoegen. Teken hiervoor een witte cirkel die alle cameralenzen bedekt, behalve het buitenste frame. Klik vervolgens met het gereedschap Schaar op de rechterbovenhoek en iets onder de meest linkerzijde van het cirkelpad om het pad op die punten af ​​te snijden.

Verwijder de onderste helft van de cirkel en klik vervolgens met het gereedschap Pen op een uiteinde van het pad om door te gaan. Klik vervolgens op het andere uiteinde en sleep om een ​​gebogen lijn te maken die de uiteinden van de halve cirkel verbindt. Als je de halve cirkel hebt getekend, verlaag je de dekking naar 50%.


Stap 24

We gaan nu een transparantmasker maken om een ​​beetje schittering aan de lensreflectie toe te voegen. Een transparantiemasker bestaat uit een vorm bovenop een andere vorm. De bovenste vorm die als het masker wordt gebruikt, kan zwart, wit of een grijstint of een grijswaardengradiënt zijn.

Wanneer het masker is gemaakt, worden de gebieden van de onderliggende vormen transparant gemaakt op basis van de schaduw van grijs die eroverheen wordt gelegd. Dus hoe donkerder het gebied van de bovenste vorm, hoe lager de transparantie van de onderste vorm onder dat gebied. Hoe lichter de grijstint, des te ondoorzichtiger dat gebied zal zijn.

Om ons masker te maken, kopieert u de halve cirkel die we in de laatste stap hebben gemaakt en plakt u deze direct bovenop het origineel (Command + F voor Plakken vooraan). Zet de dekking van de kopie weer op 100% en vul deze met een wit naar zwart verloop dat uit de linkerbovenhoek komt. Om het beginpunt te veranderen, gebruikt u opnieuw het gereedschap Verloop zoals we eerder deden.


Stap 25

De laatste stap is het maken van het transparantiemasker. Klik hiervoor met de rechtermuisknop op de bovenste halve cirkel en ga naar Selecteren> Volgend object hieronder. Hiermee wordt de onderste vorm geselecteerd. Om de bovenste te selecteren, houdt u Shift ingedrukt en klikt u erop. Klik in het palet Transparantie op de pop-upmenuknop in de rechterbovenhoek en selecteer Dekkingsmasker maken.


Conclusie

De tekst rond het frame wordt bereikt met het gereedschap Type op pad, onder het gereedschap Tekst. Teken eenvoudig een cirkel waarvan de rand langs het midden van het frame loopt, selecteer het gereedschap Tekst en klik op de cirkel om langs het pad te typen.

Dat is het! We hebben onze cameralens voltooid. Het is klaar om te worden gebruikt als een pictogram, logo of een ander soort afbeelding voor waar het nodig is. En het beste deel - het is volledig schaalbaar! Vergeet niet dat complexe afbeeldingen kunnen worden gemaakt door eenvoudige vormen en kleuren te combineren en dat 3D-effecten ook kunnen worden gesimuleerd met eenvoudige 2D-vormen.