Effekter, som den allestedsnærværende skygge, er et væsentligt element i enhver designers værktøjskasse. Du har måske bemærket, at Adobe Illustrator CC 's Effect-menu indeholder en betydelig undermenu til SVG-filtre. Det tilgængelige sæt filtre udvides, efterhånden som Illustrator udvikler sig for at give mere understøttelse af SVG.
Forresten, hvis du har brugt Illustrator i årevis, husker du måske, at menuen Effekt bruges til at vise effekter og filtre. Filtre var som effekter, bortset fra at de ikke let kunne redigeres efter at være blevet anvendt. Men SVG-filtre er ikke en genoplivning af disse typer filtre; SVG-filtre kaldes filtre, fordi de fungerer gennem SVG-filterelementet i kodende websider.
Her er en anden cool ting om SVG-filtre: Som du snart opdager, kan du importere og endda oprette dine egne SVG-filtre.
Når du anvender et SVG-filter, kan det ligne en ikke-SVG-effekt. For eksempel denne figur viser to identiske kvadrater, men den ene venstre har en raster drop shadow effekt påføres, og en til højre har en vektor (SVG) skyggeeffekt filter anvendt.
En skyggeeffekt (venstre) og SVG-filter (højre).
Når jeg vælger rektanglet med SVG-filteret, vises det filter i panelet Udseende, som vist.
illustrator-dråbeskygge-filter
De forskellige måder, som effekter og SVG-filtre ændrer et objekts sti på, har subtile, men reelle implikationer. Nogle af disse implikationer er kun relevante for web- og app-udviklere, men fra din ende af workflowet er det vigtige at huske på at undgå at blande SVG-filtre og rastereffekter i projekter, fordi de påvirker objekter forskelligt.
Jeg kan i øvrigt ikke lade være med at dele her, at firkanten med raster-dråbeskyggen i disse figurer er næsten syv gange større end den med SVG-filteret. Blot en kort public service-meddelelse fra SVG-industrien om, hvordan du kan tabe (file) vægt med SVG'er.
Og som du måske har anet nu, er rastereffekter ikke programmerbare. Når du overdrager dem til en animator eller en HTML-koder, vil din udvikler-teamkammerat ikke have den samme form for frihed til at kontrollere, hvordan rastereffekter fungerer i en animation eller en overgang.
Endelig, når du anvender SVG-filtre i stedet for rastereffekter på SVG-illustrationer, behøver du ikke bekymre dig om, at disse filtre forringes, når illustrationen omskaleres i en browser.
Jeg har argumenteret for at anvende SVG-filtre, når det er muligt i SVG-illustrationer. Lad os gå igennem, hvordan det sker:
Vælg det eller de objekter, som du anvender filteret på.
Vælg Effekt→SVG-filtre, og vælg et filter.
SVG Filters undermenuen har en liste over filtre med navne, der i bedste fald kun er semi-intuitive (såsom AI_Shadow_1, som er en drop shadow) og oftere bare kryptiske (såsom AI_Dilate_6). Du bliver nødt til at eksperimentere, indtil du får en fornemmelse af, hvordan disse filtre fungerer.
Med objektet, som du anvendte filteret på, stadig markeret, se panelet Udseende (vælg Vindue→ Udseende).
Hold markøren over det anvendte filter, og klik på det for at få vist boksen Anvend SVG-filter, vist her.
Redigering af SVG-filtre.
Her kan du ændre det anvendte filter og bruge afkrydsningsfeltet Eksempel til at se, hvordan filteret vil se ud. Du kan også vælge og slette et SVG-filter i panelet Udseende, som vist.
Sletning af et SVG-filter.
Illustrators sæt af filtre er nyttigt, men skubber næppe grænserne for, hvad du kan gøre med SVG-filtre. Hvis du koder i HTML, finder du en tilgængelig vejledning til at lave dine egne SVG-filtre på w3schools .
Du kan også købe yderligere sæt filtre online og endda finde nogle gode sæt SVG gratis SVG-filtre . Følg disse trin for at installere dette sæt filtre eller andre filtre:
Vælg Effekt→SVG-filtre→Importer SVG-filter.
I dialogboksen, der åbnes, skal du navigere til og dobbeltklikke på den SVG-filterfil, du downloadede.
Filen vil sandsynligvis være en SVG-fil.
Vælg Effekt–>SVG-filtre for at anvende nye filtre på valgte objekter.
Når du har importeret nye filtre, vises de i undermenuen SVG-filtre.
Lær, hvordan du anvender gennemsigtighed på SVG-grafik i Illustrator. Udforsk, hvordan du udsender SVG'er med gennemsigtige baggrunde og anvender gennemsigtighedseffekter.
Når du har importeret dine billeder til Adobe XD, har du ikke megen redigeringskontrol, men du kan ændre størrelse og rotere billeder, ligesom du ville have en hvilken som helst anden form. Du kan også nemt runde hjørnerne af et importeret billede ved hjælp af hjørne-widgets. Maskering af dine billeder Ved at definere en lukket form […]
Når du har tekst i dit Adobe XD-projekt, kan du begynde at ændre tekstegenskaberne. Disse egenskaber omfatter skrifttypefamilie, skriftstørrelse, skrifttypevægt, justering, tegnafstand (kjerning og sporing), linjeafstand (førende), udfyldning, kant (streg), skygge (slæbeskygge) og baggrundssløring. Så lad os gennemgå, hvordan disse egenskaber anvendes. Om læsbarhed og skrifttype […]
Ligesom i Adobe Illustrator giver Photoshop tegnebrætter mulighed for at bygge separate sider eller skærmbilleder i ét dokument. Dette kan især være nyttigt, hvis du bygger skærme til en mobilapplikation eller en lille brochure. Du kan tænke på et tegnebræt som en speciel type laggruppe, der er oprettet ved hjælp af panelet Lag. Dens […]
Mange af de værktøjer, du finder i panelet InDesign Tools, bruges til at tegne linjer og former på en side, så du har flere forskellige måder at skabe interessante tegninger til dine publikationer. Du kan skabe alt fra grundlæggende former til indviklede tegninger inde i InDesign, i stedet for at skulle bruge et tegneprogram såsom […]
Når du designer i Adobe Illustrator CC, skal du ofte have en form, der har en nøjagtig størrelse (f.eks. 2 x 3 tommer). Når du har oprettet en form, er den bedste måde at ændre størrelsen på den til nøjagtige mål ved at bruge Transform-panelet, vist i denne figur. Få objektet valgt, og vælg derefter Vindue→ Transformer til […]
Indpakning af tekst i Adobe Illustrator CC er ikke helt det samme som at pakke en gave ind – det er nemmere! En tekstombrydning tvinger tekst til at ombryde en grafik, som vist i denne figur. Denne funktion kan tilføje en smule kreativitet til ethvert stykke. Grafikken tvinger teksten til at ombryde den. Først skal du oprette […]
Du kan bruge InDesign til at oprette og ændre QR-kodegrafik. QR-koder er en form for stregkode, der kan gemme information såsom ord, tal, URL'er eller andre former for data. Brugeren scanner QR-koden ved hjælp af sit kamera og software på en enhed, såsom en smartphone, og softwaren gør brug af […]
Der kan være et tidspunkt, hvor du har brug for et nyt billede for at se gammelt ud. Photoshop CS6 har dig dækket. Sort-hvid fotografering er et nyere fænomen, end du måske tror. Daguerreotypier og andre tidlige fotografier havde ofte en brunlig eller blålig tone. Du kan skabe dine egne sepia-tonede mesterværker. Tonede billeder kan skabe […]
Ved at bruge funktionen Live Paint i Adobe Creative Suite 5 (Adobe CS5) Illustrator kan du oprette det billede, du ønsker, og udfylde områder med farve. Live Paint-spanden registrerer automatisk områder sammensat af uafhængige krydsende stier og fylder dem i overensstemmelse hermed. Malingen inden for en given region forbliver levende og flyder automatisk, hvis nogen […]
