Så här skapar du en molnikon i Adobe XD

Vad du ska skapa

Med cloud computing i uppgången kommer en enkel "cloud" -ikon alltid att vara till nytta. Lär dig hur du skapar en i den här videon från min kurs, Icon Design With Adobe XD.

Så här skapar du en molnikon i Adobe XD

 

Skapa de grundläggande formerna för molnet

För att starta, sätt upp en 60 x 60 px tavla, och välj sedan den och slå på Rutnät i verktygsfältet till höger. Nätet är inställt på 1, så varje pixel kommer det att finnas en horisontell och vertikal riktlinje.

Välj Ellipseverktyg och bara vänster-klicka och håll Flytta att rita en ganska liten cirkel. Gå sedan till Redigera> Kopiera, Flytta kopian upp och till höger och håll Flytta och skala upp det.

Dra över dem båda och avmarkera fyllningen. Och välj sedan den mindre cirkeln och gå till Redigera> Kopiera igen. Håll Flytta och vänster-klicka och dra det åt höger så att det stannar perfekt. 

Gå sedan till Redigera> Kopiera igen. Gör den här nya cirkeln lite större genom att hålla Flytta, vänster-klicka och skalering från en av hörnen. 

Välj nu Rektangelverktyg och rita en horisontell rektangel. Dra sedan över allt och gå till Objekt> Anpassa till pixelnätet. Det hjälper bara allt att klämma på plats och ställa upp i botten i synnerhet.

Dra den här rektangeln lite ut och dubbelklicka sedan på formen och välj de två översta hörnen och dra in dem om de sträcker sig utanför molnikonet. 

Skapa en enkel molnform och justera den

Nu ser det här ut som en röra av olika former för tillfället. Men i Adobe XD kan vi kombinera flera former i en enda form. 

Dra bara över allt, och från alternativen högst upp i Fastighetsinspektör, Välj Lägg till, och det kommer att kombinera alla former tillsammans till en form. 

Du kan se att i botten har vi en liten anomali. Men det är bra - bara zooma in, dubbelklicka och försök att justera den vägen lite. Att bara flytta den cirkeln lite hjälper till att släta ut kurvan. 

Dra sedan över allt och ge det en Gräns av 2. Och välj färgen från färgväljaren # 4A4A4A, och avmarkera fyllningen. Skala upp det lite, hålla Alt-Shift och skalering från mitten.

Återigen, gå till Objekt> Anpassa till pixelnätet om du behöver. Du kan se det shuffles det lite, så du kan behöva justera några av formerna igen, som vi gjorde tidigare. 

Lägg till det slutliga detaljen

Det sista som vi ska göra är att lägga till en liten kurva, bara för att ge molnet lite mer detaljer.

Välj Penverktyg och bara vänsterklicka, vänster-klicka igen för att skapa en kurva och tryck på Fly för att slutföra det. Välj sedan detsamma # 4A4A4A swatch från färgplockaren. Och det sista vi kan göra är att dra över allt och gå till Objekt> Grupp så att vi kan flytta den som ett objekt.

Du ser att vårt moln är någonsin så lite borta från pixelnätet. Så du kan bara dra över allt och gå till Objekt> Grupp att gruppera allt tillsammans. Och sedan gå över till verktygsfältet och justera y-värdet så att det istället för att vara 15,5, rundas det ner till 15. Och du ser det nu justeras till pixelnätet snyggt.

Titta på hela kursen

I hela kursen, Icon Design With Adobe XD, lär du dig att använda verktygen som finns tillgängliga i Adobe XD för att designa en mängd olika ikoner. Förutom molnet lär du dig att skapa en telefon, webbläsare, pennaikon och mer och hämta några användbara Adobe XD-färdigheter längs vägen.

Du kan ta kursen direkt med en abonnemang på Envato Elements. För en enda månatlig avgift får du inte bara tillgång till kursen utan också till vårt växande bibliotek med över 1000 videokurser och branschledande e-böcker på Envato Tuts+. 

Dessutom får du obegränsade nedladdningar från det enorma Envato Elements-biblioteket med 440 000 + kreativa tillgångar. Skapa med unika teckensnitt, foton, grafik och mallar, och leverera bättre projekt snabbare.