Share
I den här handledningen lär du dig hur du skapar en glassknapp med enkla former, pathfinder-box, klippning och opacitet masker och blandningslägen. Du kommer också att lära dig hur du optimerar ditt vektorgrafik som en webbgrafik och hur du snabbt byter ut färgerna på de nödvändiga elementen.
Ta rektangelverktyget (M) och skapa en fyrkant med en blå fyllning (C = 25, M = 2, Y = 0 och K = 0)
Ta ellipsverktyget (L) och skapa en cirkel. Markera torget och cirkeln, rikta dem mot mitten och horisontella linjer, med paletten Justera.
Snurra sedan cirkeln till fyrkantig form. Kopiera torget och klistra in det framför, välj cirkeln och det övre torget och tryck på Intersect-knappen från paletten Pathfinder.
Fyll den resulterande formen med en linjär gradient från blå (C = 100, M = 65, Y = O och K = 0) till ljusblå (C = 53, M = O, Y = O och K = O) Ställ in blandningsläge för att multiplicera i paletten Transparent.
Skapa ytterligare två cirklar. Radien av dessa cirklar är lika med värdet på torgets sida, och deras centrum ligger i torgets nedre vänstra och övre högra hörn.
Applicera tekniken som beskrivs i steg 2 trimma dessa cirklar till fyrkantformen.
Välj de två resulterande formerna och tryck på Divide-knappen från paletten Pathfinder. Ta bort de resulterande objekten. Som ett resultat borde du ha tre former.
Fyll dem med olika gradienter och sätt blandningsläge - Multiplicera för var och en av dem. Fyll den första formen med en radiell gradient som består av tre färger: 1 (C = 17, M = O, Y = O och K = 0); 2 (C = 25, M = 2, Y = O och K = O); 3 (C = 62, M = 9, Y = O och K = O).
Fyll den andra formen med linjär gradient bestående av två färger 1 (C = 100, M = 33, Y = O och K = 0); 2 (C = 17, M = O, Y = O och K = O).
Fyll den tredje formen med linjär gradient bestående av tre färger: 1 (C = 38, M = 4, Y = O och K = 0); 2 (C = 100, M = 65, Y = O och K = O) och 3 (C = 34, M = O, Y = O och K = O).
Kopiera formen i mitten och klistra in den framför, byt ut färgerna på dess gradient med: 1 (C = 100, M = 72, Y = 0 och K = 0) och 2 (C = 33, M = O, Y = 0 och K = 0).
Skapa två andra former med hjälp av cirkeln och paletten Pathfinder, med tillämpning av ovan nämnda tekniker.
Fyll den första formen med en linjär gradient från vit till vit med 0% opacitet och ställ in blandningsläge till skärm i paletten Transparent.
Fyll den andra formen med linjär gradient från vit till vit med 0% opacitet och ställ in blandningsläge - överlagring i paletten Transparent.
Kopiera den första formen och klistra in den framför alla objekt, flytta den upp i paletten Lager. Ändra gradienten i denna form, flytta vänster skjutreglaget en lite bit till höger.
Sätt knappen i kvadratisk form med rundade hörn. Kopiera bottenfoten och klistra in den framför alla föremål. Håll rutan vald, gå till Effekt> Konvertera till Form> Avrundad rektangel och ange värdena som anges i bilden nedan. Krumningsradien beror på storleken på din knapp, så jag låter dig göra ditt eget val.
Kopiera den här formen och klistra in den framför, vi behöver den för vidare uppbyggnad. Låsa underlaget med den här formen i paletten Lager och gör den osynlig. Välj alla objekt (kommando + A) och gå till Objekt> Klippmask> Gör.
Lås upp underlaget med formen av ett rundat torg och gör det synligt. Kopiera den här formen och klistra in den framför. Minska storleken på denna form - bara lite - med hjälp av markeringsverktyget (V) och håll ner Alt och Shift.
Välj de två rundade rutorna och tryck på Minus Front-knappen från paletten Pathfinder.
Fyll den erhållna formen med linjär gradient från blå (C = 100, M = O, Y = O och K = 0) med opacitet 50% till vit färg med opacitet 0%.
Skapa en annan rundad rektangel med hjälp av det rundade rektangelverktyget med en något större storlek än den ena knappen. Placera den skapade figuren under alla underlag och fyll den med en linjär gradient bestående av tre färger: 1 (C = 100, M = 100, Y = 0 och K = 77); 2 (C = 100, M = 16, Y = O och K = O); 3 (C = 100, M = 66, Y = O och K = O).
Skapa nu metalldelen av knappen. Det kommer att bestå av två rundade rutor. Den första är fylld med linjär gradient bestående av tre nyanser av grå färg: 1 (K = 71), 2 (K = 14) och 3 (K = 26).
Den andra är något mindre än den första och är fylld med linjär gradient bestående av tre nyanser av grå färg: 1 (K = 45), 2 (K = 0) och 3 (K = 14). När din knapp är klar gruppera du alla dess element.
Skapa en reflektion av knappen. Kopiera knappen och klistra in den framför. Flytta knappen vertikalt ner, håll ned Shift-tangenten. Det kommer att bli en reflektion av knappen.
Välj reflektion och gå till Objekt> Transformera> Reflektera och ställ parametrarna i dialogrutan som visas i bilden nedan.
Ta nu rektangelverktyget (M) och skapa en rektangel med en svartvitt gradientfyllning. Storleken på rektangeln ska vara sådan att de helt kan dölja knappens reflektion.
Välj reflektion av knappen och den övre rektangeln, välj Gör opacitetsmask från menyn på paletten Transparent.
Knappen med reflektion är klar.
Ofta behöver du ha flera identiska element i olika färger. Låt oss se hur snabbt det är att byta färg på en knapp.
Välj alla element du vill ersätta färgen på och gå till Redigera> Redigera färger> Recolor Artwork och klicka sedan på fliken Redigera i dialogrutan Öppna. Slutligen klicka på länken harmoni färgerna knappen.
Nu kan du göra alla tillgängliga färgrotationer till önskad färgsektion medan du tittar på färgändringar i vårt konstverk.
När du tar bilder för webb och enheter är vektorgruppen inte slutprodukten, du behöver använda rasterbilder. Därför måste du se vektorn som en raster. För att göra detta, gå till Visa> Pixel Preview. Som du kan se finns det många problemområden när du zoomar in. De visas eftersom bilden inte återges inom Pixel Grid, och det är därför linjerna ser suddiga ut när det är en raster.
Adobe Illustrator CS5 gör det möjligt för oss att göra bilden skarpare. Välj din grafik och öppna paletten Transformera (Fönstret> Transform), klicka nu på Justera till pixelnätet i den här paletten.
Nu är din bild redo att sparas som en rastertyp som PNG eller JPG (Arkiv> Spara för webben och enheter).
När du har denna kunskap och nödvändig programvara kan du enkelt skapa webbgränssnitt som inte bara ser bra ut, men gör det perfekt.
Accentsconagua